使用运动与缓冲有效增强Mobile App的用户体验

本文源于Adobe XD Blog的Mobile UI Animation一文,在我之前的工作之中也有涉及到相关内容,因此结合一些自己的经验谈谈XD的这几个实例

动态效果设计是Flash Lite开发比起其它方式开发而言更加有吸引力的一个地方,简单的应用设计,结合一些动态效果,如动态翻页,运动缓冲,一页内的内容运动切换,能够大大增强操作感与用户体验,XD提供的几个应用实例中分别提供了静态与动态的效果对比

SAMPLE 1

静态设计（Flash)(单击画面激活后，用键盘方向键控制 注意对比左右方向键)

动态设计(Flash)(单击画面激活后，用键盘方向键控制，注意对比左右方向键)

将横向切换为变动态之后,使得用户视觉更具连贯性,对内容所处位置,栏目的方向感更完整,整个应用程序的操作状态更加易于用户使用,用户可以明确的知道自己上下切换栏目,左右切换当前栏目的其它内容

SAMPLE 2

静态设计（Flash）(单击画面激活后，用键盘方向键控制 注意上下键效果)

动态设计(Flash)(单击画面激活后，用键盘方向键控制 注意上下键效果)

该设计只在把传统的上下各条目的RollOver切换状态操作改为了动态RollOver状态切换,相对于静态的而言,动态效果显得更平滑,连续,看过动态之后再看静态,静态设计就显得比较突兀了

SAMPLE 3

静态设计（Flash）(单击画面激活后，用键盘方向键控制 注意上下键效果)

动态设计(Flash)  (单击画面激活后，用键盘方向键控制 注意上下键效果)

通过动态设计,将几个栏目之间的切换变成了上下滚动,从操作感和视觉上给用户带来了一个全新的状态,用户会非常方便的知道自己处于一个上下长内容的中间部分,相对于静态设计而言,通过这样的设计使得整个应用的方向感与位置更明确,同时更流畅,应用程序的档次感觉也提高了不少

动态效果对应用程序带来的体验方面的提升的确不少,但是由于mobile上的效率问题,太多的动效会使得应用程序变得太慢,上面的几个SAMPLE在mobile上也会相对PC会有所迟缓,因此在实际应用的时候一定要有一个适当的度,不可不用,也不可烂用.曾经一度我的Flash lite应用程序中应用了全部的动态效果,但最后迫于手机效率的压力全部cancel掉了~

本文链接: