UI实时动态设计技巧

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

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

挑战

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

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

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

规则

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

1、声明状态

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

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

实例:连接状态

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

style=”float:left”

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

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

实例:加载

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

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

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

 

实例:确认

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

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

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

2、预测变化

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

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

实例:呈现结果

当可能发生明显的界面状态变化时,需要向用户预告变化的结果,给用户机会来处理,并防止将要发生的意外。

图7:修改前:当新界面出现的时候,视野中并没有提示或者反馈。

图8:修改后:当新的界面准备好加载时,系统会做出响应,但是不会通过自动响应来干扰进程。

实例:框架模板

显示布局框架预示着将要跳转到新的界面,提前切换布局填补空白。另外还有个好处,这可以使得程序看起来更有“响应式”的特征。

图9:修改前:在屏幕加载新界面之前,用户需要等待所有内容加载完,之后界面突然切换过来。

图10:修改后:页面加载用占位符指示哪些内容是即将出现的。

3、保持上下文

用户应该知道内容来自哪里,属于哪里。

由于用户无法实时监测应用内具体发生了什么变化,因此建立并加强应用空间感很重要。这里,空间感指的是每个界面和每个按钮与其它部件的相对空间位置。为此,我们需要创建一些可信赖的标志来强化它们的存在。

实例:一致的位置

新的内容应该出现在一个可预测的位置。让用户习惯应用内功能导航的路径,不要通过提供多种路径来完成同样的事情。

图11:修改前:新的控件和元素出现在不可预料的位置。

图12:修改后:内容总是出现在一致的位置上。这时,用户在视觉上不会感到新内容突兀。

事例:变化过程

让状态的变化更加清晰明了,不要让条目突兀地出现在不可预见的位置。动画可能很大的程度上确保这一点,让新加载的内容正与周围的环境融为一体。

图13:修改前:新条目的一闪而入,会造成相邻内容无过渡地向下移动。

图14:修改后:新的项目和相邻项目之间有动画过渡,它们的位置随着时间的推移而变化,从而给予用户一段时间去接受它们的变化。

 

实例:保持位置

当项目在不同屏幕之间来回移动时,需确保用户返回时能回到他们进入前的相同位置。

图15:修改前:滚动位会置重置。用户要花费较多精力去寻找之前的位置,这样的用户体验很糟糕。

图16:修改后:之前的位置被系统储存,当用户返回时,能回到最初进入的位置。

结语

以上这些理论可以作为我们起草实时体验时的出发点。我鼓励所有的创作者去发现这些原理的应用范围,但是,最重要的是要了解状态,预知改变,并且呈现内容。

时间: 2024-08-07 14:28:12

UI实时动态设计技巧的相关文章

UI文案设计技巧,视觉与内容兼具不再是梦

现今,一款Web或移动端应用软件的用户体验愉悦度,不再仅仅依赖软件本身功能,界面布局,加载速度,甚至是界面文案设计,都对应用的用户体验发挥至关重要的作用.这也是为什么现今一些公司设立UX写手(UX writer),专职从事界面文案设计和研究的重要原因. 但是,软件界面文案(尤其是微文案)的设计,究竟有哪些技巧和禁忌?设计师究竟该如何才能设计出简单易懂,又兼具视觉诱惑力的UI文案设计,增强其易用性,提升转化率和用户体验愉悦度呢? 以下就跟着小编的脚步,一步一步学习和了解软件UI文案设计中需要掌握的

国内外人气UX/UI/PD设计社区推荐,纯干货

对于很多人尤其新手而言,要把握最新的设计动态及发展趋势,似乎不是一件轻松的事情.如果你也像我一样是个设计小白,而且正在担心自己设计的作品是否符合客户需求.烦恼找不到设计解决方案.得不到有效的用户反馈,那么你可以看看这里推荐的UX/UI/PD设计社区及论坛,也许可以得到一些启发. 1.Dribbble Dribbble是国外一个很出名的社区以及社交网络平台,它致力于帮助设计师建立团队和品牌.你可以从它的首页捕捉到当下流行的设计作品,但不是任何人都可以发布在线作品的.这里有很多网页设计师.平面达人.

用户界面设计经验分享:界面设计技巧分享

如此有用的文章我已记不得是什么时候发现的了,但在看完的那一刻便想将之翻译,分享给大家自己也受用. 时间过了很久,来到了2014年,终于静下心来花了大把时间连同图片一起译成了中文.像我这样业余的翻译六级分数只够及格的程序员,不敢说做到信雅达,但求意思到位. 1 尽量使用单列而不是多列布局 单列布局能够让对全局有更好的掌控.同时用户也可以一目了然内容.而多列而已则会有分散用户注意力的风险使你的主旨无法很好表达.最好的做法是用一个有逻辑的叙述来引导用户并且在文末给出你的操作按钮. 2 放出礼品往往更具

开发人员应该知道5个设计技巧

优秀的编码和优秀的UI设计之间是相辅相成的.不幸的是,视觉设计能力偏弱的人通常会觉得自己缺乏天赋,换句话说,就是人们要么觉得自己具有出众的美学天赋,要么就是这方面的白痴.对这个说法,我可不敢苟同. 如果你在一个小团队里面身兼数职,却又没有多少美学基础.又或者你觉得你们的项目在视觉上还有更多发挥的空间,那么这篇文章就是写给你的.蓝蓝设计将谈到传统的5个消除丑陋艺术设计的元素和原则(或者至少能够进行一定程度的掩盖) 1.来点留白 大多数的开发者并不在意添加空白的像页边距,填充,行高,或者其他任何增加

Android仿微信录音功能,自定义控件的设计技巧

欢迎各位加入我的Android开发群[257053751] 最近由于需要做一个录音功能(/嘘 悄悄透露一下,千万别告诉红薯,就是新版本的OSC客户端噢),起初打算采用仿微信的录音方式,最后又改成了QQ的录音方式,之前的微信录音控件也就白写了[大哭].之前有很多朋友在问我自定义控件应该怎么学习,遂正好拿出来讲讲喽,没来得及截效果图,大家就自己脑补一下微信发语音时的样子吧. 所谓自定义控件其实就是由于系统SDK无法完成需要的功能时,通过自己扩展系统组件达到完成所需功能做出的控件. Android自定

PowerBI开发 第三篇:报表设计技巧

最近做了几个PowerBI报表,对PowerBI的设计有了更深的理解,对数据的塑形(sharp data),不仅可以在Data Source中实现,例如在TSQL查询脚本中,而且可以在PowerBI中实现,例如,向数据模型中添加自定义字段,或者在报表数据显示时,根据数据表之间的关系做数据的统计.本文主要介绍数据的塑形和UI设计的微调. 一,创建数据列 PowerBI报表的数据分为数据源(Data Source),数据模型(Data Model),Query,数据从Data Source加载到Da

关系型数据库表结构的两个设计技巧

By良少http://blog.csdn.net/shendl 关系型数据库表结构的设计,有下面两个设计技巧: 物理主键作为关联的外键 关系型数据库,由多个数据表构成.每一个数据表的结构是相同的,不同表之间可能存在关联关系.表之间的关联关系,正是关系型数据库得名的原因. 一个表由多个字段构成.其中可能有多个字段适合作为主键.主键字段,就是表中每一行都不会有重复数据的字段. 主键,可以分为两种:物理主键和逻辑主键. 每一张数据库的表,都使用自增长的id字段作为物理主键. 多表之间的外键关联,都关联

界面设计技巧

如此有用的文章我已记不得是什么时候发现的了,但在看完的那一刻便想将之翻译,分享给大家自己也受用. 时间过了很久,来到了2014年,终于静下心来花了大把时间连同图片一起译成了中文.像我这样业余的翻译六级分数只够及格的程序员,不敢说做到信雅达,但求意思到位. 1 尽量使用单列而不是多列布局 单列布局能够让对全局有更好的掌控.同时用户也可以一目了然内容.而多列而已则会有分散用户注意力的风险使你的主旨无法很好表达.最好的做法是用一个有逻辑的叙述来引导用户并且在文末给出你的操作按钮. 2 放出礼品往往更具

QT基础(一) ui类设计和使用

用designer设计的*.ui文件可以通过uic工具转换为*.h文件(在编译时也会自动生成这样一个ui_*.h文件),有了这个.h文件就可以直接按照纯C++的方式对其中的类进行调用.ui文件的使用就是利用默认工具uic自动产生一个类,然后用该类的setui函数加载界面到相应的对象上.       .ui文件的使用有三种形式:第一种是直接使用,第二种是定义一个新类,声明一个ui子对象,利用该对象来加载界面,第三种是将ui作为基类派生新的类. 借用一个例程分析如下: 工程及界面