AJax技术

精雕细琢!UI实时动态设计技巧

字号+ 作者:H5之家 来源:H5之家 2017-07-27 14:02 我要评论( )

起源于1993年的网络浏览器,时至今日依然保持着请求-响应的交互机制。当用户打算浏览网页的时候,用户输入链接,浏览器便会将用户请求的内容发送到服务器,服务

精雕细琢!UI实时动态设计技巧

起源于1993年的网络浏览器,时至今日依然保持着请求-响应的交互机制。当用户打算浏览网页的时候,用户输入链接,浏览器便会将用户请求的内容发送到服务器,服务器收到请求,处理它,并响应反馈给浏览器。考虑到互联网的初衷就是用来查看文档,所以请求-响应机制还是令人满意的。可是随着时代的发展,用户对于互联网的需求和期望都已经有所改变。

Ajax技术是这种演化的第一步。它完善了网络体验,允许用户在无需刷新页面的情况下加载新的内容,不过它的限制在于加载新内容依然需要用户发出请求才能得到响应。单用户借助这种技术来浏览静态文档体验是很不错的,但是在多用户环境下就站不住脚了。并非只有网络浏览面临着这样的问题。现如今,我们在开发APP的时候,也需要考虑多用户浏览的问题。 我们希望数据连接和加载能够如同实体一样被用户感受到,这是实时动态加载技术令人眼前一亮的地方。

挑战

诸如Node.js和Meteor这样用户友好的异步框架,已经开始广泛地运用起这种实时网络技术。在这项技术大规模推行之前,用户的操作是非常清晰的。这些操作可以清晰地划归到用户头上,链接、刷新和页面加载是清晰而明确的。单击链接,页面跳转,内容就biu的一声在你眼前展现出来了。

当新的用户被加入到整个系统中来的时候,在页面刷新前,他们面对的系统中的数据内容是完全一样的,界面是被动的,它会随着操作而出现反馈的。想象一下整个系统合理有效地连通不同的用户的压力和难度。在实时动态系统中,我们所面临的不仅仅是创造令人欲罢不能的特性,还得处理大量数据和它们之间复杂的因果关系。

我们需要将APP以自然而易于理解的方式呈现在用户面前。在实际操作中,APP只有能让用户易于操作理解,才能与之共鸣,让他们注册,并且与之互动。掌控好数据与界面之间的因果关系,不同层级数据与界面之间的交互规律,才能让APP更优秀。

规则

开发者能够利用实时动态设计来打造下一代的web用户体验。而我们也总结出了一系列实时设计用户体验的设计规则。

1、声明状态

用户理当知道系统的状态,而系统也应该对用户操作进行确认和反馈。

应用应当适当地强化界面结构,否则系统的整体架构将不够明晰。当实时界面出现变化的时候,比如页面刷新,下拉之后顶部的刷新控件能够适时地向用户传达列表的连接刷新状态。

实例:连接状态

你的连接是否处于连接状态?连接失效自然是不可避免的。很多外部因素可能会导致数据交换达到不符合预期的结果,导致连接失效。

style=”float:left”

精雕细琢!UI实时动态设计技巧

精雕细琢!UI实时动态设计技巧

图1 修改前:用户没有被告知连接丢失,这可能会影响他们对APP的预期。

图2 修改后:数据交换中出现提示,连通断开,并且系统尝试去修复。

实例:加载

在网速有限的情况下加载大量内容时,就会很容易让用户陷入长时间的等待。作为一个优秀的设计师,告诉用户加载时间是很有必要的。

精雕细琢!UI实时动态设计技巧

精雕细琢!UI实时动态设计技巧

图3:修改前:在被打断之后,在应用加载用户内容时,用户不会知道要加载的时间。

图4:修改后:进程指示器显示加载的内容还有多长的等待时间。

实例:确认

对于用户行为做出的响应,能够显示出系统正在聆听并且关心用户。

精雕细琢!UI实时动态设计技巧

精雕细琢!UI实时动态设计技巧

图5:修改前:在删除完成后,用户并没有得到反馈

图6:修改后:在用户完成删除达到新界面时,会得到删除确认。

2、预测变化

用户需要知道操作之后接下来的会是什么。当用户行为发生时,产品应告知用户接下来会出现什么。

在严密的逻辑体系中,意外往往不易让人接受。比如,汽车要运送乘客到目的地,汽车需要保持机械精度,确保正常运行,而在这个系统中,意外就是爆胎和发动机故障。与汽车类似的是,一个应用程序要以用户友好的方式,竭尽全力帮用户达成目的。不同于汽车的是,移动端应用使我们能够预见并告知用户即将到来的变化。

 

1.本站遵循行业规范,任何转载的稿件都会明确标注作者和来源;2.本站的原创文章,请转载时务必注明文章作者和来源,不尊重原创的行为我们将追究责任;3.作者投稿可能会经我们编辑修改或补充。

相关文章
  • Ajax的技术核心实现动态无刷新

    Ajax的技术核心实现动态无刷新

    2017-07-05 11:02

  • 哈佛大学公开课:构建动态网站

    哈佛大学公开课:构建动态网站

    2017-06-24 08:00

  • ajax实时刷新 使用ajax技术无刷新动态调用新浪股票实时数据

    ajax实时刷新 使用ajax技术无刷新动态调用新浪股票实时数据

    2017-06-23 12:02

  • 基于uIP与AJAX的动态Web服务器设计

    基于uIP与AJAX的动态Web服务器设计

    2017-06-01 15:00

网友点评
;