β

CORE:随身查阅的B类移动电商动效设计指南

作为体验设计的一部分,动效设计在过去一直不愠不火。直到Facebook Paper在设计圈的风靡,一种全新的体验迅速征服了用户,此后,越来越多的移动应用开始使用动效,以便在交互和视觉之外使用更丰富的关联工具,提供当前状态的上下文背景,来完善信息传达的方式。美妙细腻的动效遍布移动平台上优秀应用界面之中,提供了动态和沉浸的体验。App动效如今随处可见,动效的作用越来越被认可和重视。

一、App动效设计的必要性

设计师偏爱细节,然而诸多设计细节依旧建立在传统静态元素上,不断追求像素上的完美,却忽视了对过程的表达。当用户不能在视觉上捕捉界面的连续变化时,往往无法对新旧状态的更替有清晰的认识。屏幕中现在的事物与不久之的事物有什么关系?它们是同一个么,亦或是已经被替换为不同的事物?哪些变化是直接与用户操作相关的,哪些又是附属的?例如,用户在界面上点击了一个漂亮的按钮,一个对话框突然就闪现在屏幕中;用户点击页面中的列表项,下一个页面就这么毫无征兆的全屏覆盖。这些现象不仅怪异,而且难以理解。设计行业传统静态交互方式,不仅无法承载如此多维的信息,而且受数字时代界面趋势的影响,诸多设计细节已经与原本生活中的映射环节脱钩,无法展现新媒介的优势,同时也无法借势于新技术的革新,将它们的运作过程呈现出来。

动效在app设计中的作用从未如此重要,因为我们看到了目前移动应用交互存在如下缺陷:

1、感官反馈有限 现实世界中的质感和温度代表着每一种事物的特性,它们分担了人们眼睛的负担,随手拿起一件物品仔细抚摸,我们可以通过触摸来感知它们是什么,多种感官汇聚起来我们更加容易了解也更容易记住这个物品的特性,使用起来也更加得心应手。然而,移动设备的触摸屏只能提供冰冷的屏幕触感,缺少了不同事物的质感和温度区别,触觉反馈显得不是那么丰富,使得用户的感知程度打了折扣。

2、与物理世界脱节 我们在使用现实物品的时候,我们可以创造出很多种新颖的交互方式,来便利我们更高效的工作与生活,以一张A4纸来说,我们可以将它撕成一个个小块,让我们当做便利贴来用,而当我们不再用的到的时候,我们可以将它揉成一团,扔进垃圾篓。而在这里,我们需要采用点击、拖动这一类不符合实物认知习惯的操作。

3、无法提供可及性(Affordance) 扁平化的视觉呈现,缺乏情景性的操作体验,不利于用户记忆。以电子书阅读为例:在心理学家眼里,记忆与辨识是有区别的,前者是在有上下文细节(人物、时间、地点、事件等)的情况回忆一段信息,而后者则是在不记得如何掌握信息的情况下辨认事物。

总的说来,回忆属于一种较弱的记忆形式,如果不能转化为此后变为“已知”的更稳定的长期记忆的话,很容易逐渐消失。在屏幕前研读材料的志愿者在进行测试的时候,更多的是依赖于记忆而非认识,而在纸张上面阅读的学生则是同时依赖于记忆和认知。Garland 等人认为在纸张上面阅读的学生对材料掌握得更快更彻底;他们不需要花费太多的时间针对文本中的信息搜索自己的脑海,以便触发正确的记忆,因为他们往往已经知道答案了。

动效的出现,引入了交互中被忽视的维度“时间”,同时赋予了交互更全面的定义: “设计不仅是外形和感觉,设计关乎如何运作。”恰当的动效正如人的肢体语言一样,将更立体更富有关联的信息传达出去,提高了沟通的效率。缺乏了动效的移动应用,带给人们一种死气沉沉的感觉,所有内容平铺直叙了无生机,即使界面再美,也缺乏一种灵动细腻的气质。

我们意识到,动效已逐渐成为移动设计的标配内容,动效设计能力已经是移动体验设计师的必备技能与核心竞争力之一。为了更好的帮助设计师们了解app动效设计的基本原理、设计原则和制作技巧,我们撰写了这个文档,希望可以带动设计师们在app动效设计方面的成长,为自己的产品创造更加令人惊叹的体验细节。

二、App动效分类和意义

App界面动效形式繁多,根据app动效的作用,我们将其划分成四类:情境(Context)、引导(Orientation)、响应(Response)和情感(Emotive),如图1-1所示:

MotionTheory

图1-1 App动效分类

1、情境:描述当前的位置和环境,使用户了解目前的处境

1)转场过渡 以舒适平滑的方式处理页面或视图之间的逻辑关联,帮助用户熟悉新界面及前后逻辑关系(整体与局部、包含与被包含等),而非粗暴的突然显现。

在设计网页时,依赖信息架构、标签分类站点地图等让用户快速获得所需信息。并依赖视觉焦点的打造,让用户的眼球快速自然的定在视觉焦点附近。但在为移动端设计时,页面空间有限,不能把页面所有导航完全呈现。对于用户来说,很难弄清楚应该在应用的何处集中注意力,也很难弄清当前页面的来源。

通过页面转场动效来缓和界面转换的突兀感,让用户感到愉悦。并且转场动效提示了用户,这一界面从何处来,到哪里去,提供了充分的视觉线索,让用户更好的理解信息。同时,审慎、精心设计的动效能够高效引导用户的视觉注意点,让整体效果循序渐进,避免用户因为布局改变而感到混淆。

转场过渡

图1-2 转场过渡案例说明

2)层级展示 以空间构建等方式表达页面或视图之间的位置关联,展示当前界面所处位置,有助于理解局部与整体的关系。当构造了多层次、三维系统的界面时,特别是扁平设计界面去除了原本拟物界面带给用户的认知,界面中存在元素拥有不同层次时,适当的动效可以帮助用户理清它们之间的位置关系,以动效来构建整个系统的空间感(相邻、连通、叠加等),甚至扩展到理解应用背后更广泛的心智模型。

层级展示

图1-3 层级展示案例说明

2、引导:通过注意力吸引等方式让用户明确可以进行的行动

1)空间扩展 由于移动界面的屏幕空间有限,为了减轻移动界面的信息认知负担,需要将更多的信息进行渐进披露。通过缩放、折叠、翻转、弹出等方式,在必要时拓展更多空间,引导用户了解更多内容。

空间扩展

图1-4 空间扩展案例说明

2)聚焦关注 在移动界面上有数种唤起用户注意的方式,位置布局、视觉强调、视线引导、微妙动效等等。使用动效来聚焦关注,能在保持界面简单清爽的情况下,优雅轻盈的告诉用户有什么地方需要留意或值得探索,吸引用户注意力。它们往往在需要时适时出现,然后消失。

在系统需要进行交互时给与提示,引导用户执行相关下一步操作,确保用户操作的有效性与准确性。

聚焦关注

图1-5 聚焦关注案例说明

3、响应:告知用户正在发生的事情,反映现状并减轻焦虑

1)内容呈现 页面内容是用户获取信息的主要来源,在网页上,一般所有内容都是经过浏览器渲染完成后同时显示出来。

移动端页面能展示的内容偏少,由于用户使用场景的不同,页面上的内容更强调聚焦和引导。此时,所有内容同时出现可能无法帮助用户快速了解内容重点和彼此关系。 通过对页面内容元素进行必要拆解,按照一定逻辑秩序让它们异步出现,利用时差和速率变化形成一定韵律,能够很好的帮助用户感知到页面的布局、层级结构和关键内容,形成良好的自解释性,一定程度上也能够为内容界面带来生气和活力。

内容呈现

图1-6 内容呈现案例说明

2)操作反馈 即时响应用户的操作,以确认操作结果。信息传递的过程中,单向信息容易造成失联,形成沟通不畅,此时,反馈如同你问我答般,对用户的操作予以肯定。

移动端任何交互动作在理想情况下都应该拥有操作反馈,无论是点击、划动、推拉、缩放,每一个动作背后都会激发系统的响应,将其以视觉化或者动效的形式表现,能够很大程度上带给用户操作上的安全感。

用户在移动界面进行交互时引入控制感和沉浸感,帮助用户感知数字界面与真实世界的联系,从而降低认知成本,更熟练的掌握移动应用的使用方法。

操作反馈

图1-7 操作反馈案例说明

4、情感:添加引人入胜的动效细节,唤起情感方面的舒适感受 借助模拟重力、增加惯性、缓入缓出、赋予弹性等方式,提供自然顺畅的个性化动效,很容易调动用户的积极情绪,从而对产品的使用产生好感和依赖。

App动效的意义

在一个理想的交互流程中,app动效能够帮助用户理解当前所处情境(Context),随后引导相关操作(Orientation),并对操作产生即时响应(Response),从而进入新的情境中。交互流即上述过程的不断循环,设计精妙的app动效在逐步迭代和演绎中对用户的情感持续产生影响,从而引发自然连贯的情感体验(Emotive)。

如下图所示:

Motion CORE Model

图1-8 App动效的意义

三、App动效设计指南

——————————————我是华丽的分割线——————————————

特别说明: 因本文章发表在《U一点.料——阿里巴巴1688UED体验设计践行之路》中,目前处于新书发行的内容保护器,所以更多内容请大家在实体书中查看。

购买请移步天猫>

作者:阿里巴巴(中国站)用户体验设计部博客 » 阿里巴巴(中国站)用户体验设计部博客
阿里巴巴(中国站)用户体验设计部 | 有一点设计UED团队
原文地址:CORE:随身查阅的B类移动电商动效设计指南, 感谢原作者分享。

发表评论