数极客首页

处理交互内容的用户界面模式

网站和网页应用程序正在变得越来越富有交互性。网站上的内容比印刷的副本益处
在于假如
我们希望的话,我们能够
让用户与它们交互。

我们曾经
讨论过网站导航方式

与及盛行
的网页内容表述方式

。往常

让我们探求

一些我们有交互性网站内容的UI方式

就地编辑

就地编辑关于
Web应用来说是一种有价值的UI,它允许用户创建

或编辑内容。就地编辑意义
是用户能够
就在当前页面内容所处的中央
直接编辑该内容,而无须转到运用
另一种界面的新页面去编辑。
就地编辑常见于所见即所得编辑器以及关注数据项或组织的应用程序(例如像思想
脑图程序)中。

何时运用

只需
你的web应用是适用
主义的,就能够
运用
就地编辑作为UI设计方式

。它运用
起来愈加
直接并且不会惹起
用户的那么多迷惑。

例子

这里有两个就地编辑的例子。
Flickr
在这个十分
盛行
的照片分享网站,用户能够
就地编辑照片标题和其它特定信息。

处置交互内容的用户界面方式

Lovely Charts
这个脑图应用带有一个就地编辑编辑器,使得它超级容易运用

处置交互内容的用户界面方式

拷贝框

拷贝框关于
你想向你的访客分享格式化的文本或代码的任何状况
十分
有用。拷贝框向用户提供很容易被复制到剪贴板的格式化的文本。
一些网站具有自动拷贝特性,所以当用户在框内点击时文本就复制到剪贴板了。这节约了时间,并且使得一些更不会复制操作的用户运用
起来更容易。在大多数状况
下,复制胜利
后会在框边上弹出一个提示通知
用户文本曾经
自动复制到剪贴板。
其它时分
,可能会提供一个复制按钮或键盘快捷键。

何时运用

在任何你希望访客从你的网站复制格式化文本或代码的中央
运用
拷贝框。

例子

下面是三个在网站界面运用
拷贝框的例子。

Snook.ca

这个博客在代码片断显现
的中央
运用
拷贝框。
处置交互内容的用户界面方式

Mozilla Ubiquity
拷贝框在这个网站的运用
方式
有一点不同,代码平行于它的解释而不是在下方。

处置交互内容的用户界面方式

输入倡议
和口语化格式输入

能够
输入各种各样数据的搜索框和其它输入域变得越来越普遍。例如,地图应用允许用户在同一个输入框中输入邮编,坐标或者城市,能够
倡议
一个纠错后的输入,还能够
就让用户直接输入有误的内容并在效劳
器端代码里处置
和纠正输入的数据。
这减少了迷惑并且使访客更容易找到他们需求
的信息。此外这种方式比起提供多个输入框来说也愈加
合理,规划
愈加
整洁。

何时运用

在输入框可能有各种各样的输入的时分
,运用
输入倡议
并且允许多种类

型的口语化输入是十分
有意义的。

例子

下面是三个运用
输入倡议
和口语化格式输入的例子。

American Airlines
这个Dustin Curtis重新设计的原型运用
口语化格式输入来预定旅程,允许用户以他们想要的方式输入搜索项。

处置交互内容的用户界面方式

Google Calendar
Google日历里的快速添加功用
运用
自动倡议
和口语化格式输入。

处置交互内容的用户界面方式

Bing Maps
当你查找方向时,Bing地图提供了口语化格式输入。

处置交互内容的用户界面方式

多步式

当你有一个很长的表单需求
与访客交互时(如结账,问卷,注册表单等),假如
你把它拆成多个步骤可能能够
减少用户的畏惧感。
多步式的一个通用做法是通知
用户当前他们在第几步以及还剩下多少步。
留意
多步式并不承认

你的网页表单应该总是尽可能的短的观念

何时运用

当你的表单或其它流程具有6个以上的问题的时分
,将流程分为几步对用户来说是十分
有用的。但是
,记住假如
步骤太多的话同样会很糟糕,所以要视状况
而定。
同时要确保用户在每一步的信息都被记住,以防用户呈现
什么问题。
此外,确保用户能够
确认并返回前面的步骤更改所填写的内容。

例子

下面是4个多步式表单的例子

Statement Stacker
这个网站在注册中运用
三个步骤。

处置交互内容的用户界面方式

Livestream
这个现场直播的网站也用了三步注册流程。

处置交互内容的用户界面方式

Autobutler.dk
这个网站运用
了5步注册流程,但是每一个步骤都很短。

处置交互内容的用户界面方式

Onbile
Onbile提供一个4步过程来创建

移动

网站。

处置交互内容的用户界面方式

内容悬停控件

针对内容片断的UI控件能够
使得它更容易交互。这些控件通常在你悬停在目的
内容上时呈现

比如

Facebook,在新颖
事中大量运用
悬停控件。悬停在新颖
事中某个人的状态上时,你能够
看到屏蔽或移除他们的更新的选项。悬停在你自己

的Facebook状态或评论,你会看到删除选项。这样做对用户十分
友好并且减小用户界面的紊乱

何时运用

当你的一些功用
很容易被访问但是并不常用时,悬停控件可能是圆满
的计划

例子

下面是2个内容悬停控件的例子。

Facebook
在Facebook中,悬停控件允许管理员编辑一个Facebook页面信息。

处置交互内容的用户界面方式

Twier
Twier运用
悬停控件来显现
回复推文的选项,还有回复选项和其它控件。

处置交互内容的用户界面方式

查看英文源文

来源:http://rockux.com

给大家引荐
我国新一代大数据用户行为剖析
与数据智能平台:数极客(https://www.shujike.com),是支持无埋点、前端埋点、后端埋点、API导入四种混合数据采集方式,整合剖析
用户行为数据和业务数据,能够
自动监测网站、APP、小程序等多种渠道推行
效果剖析
,是增长黑客们必备的互联网数据剖析
软件。数极客支持实时多维剖析
、漏斗剖析
、留存剖析
、途径
剖析
等十大数据剖析
办法
以及APP数据剖析
网站统计网站剖析
小程序数据统计用户画像等应用场景,业内首创了六种提升转化率的数据剖析
模型,是用户行为剖析
范畴
首款应用定量剖析
与定性剖析
办法
数据剖析
产品

发表评论

评论已关闭。

相关文章