沪ICP备06058754号-1
移动智能终端中的动效设计原则与设计方法

余晓瑜

2019-09-09

用户体验 文集

2018年学术论文欣赏

本文段落精选

 

一个优秀的动效能过渡界面的元素,关联局部关系与层级关系,在引导用户视觉焦点的同时满足用户的心理预期,并缓和用户的负面情绪,激发正面情感。

 

随着智能终端产品的性能发展,界面动态设计在视觉设计中的占比越发增大,本文将移动智能终端的视觉动态设计作为研究对象,梳理出一些做好动效的通用设计原则和关键手法。

 

 

 

 

移动智能终端中的动效设计原则与设计方法

 

余晓瑜

国美通讯,上海,中国,201210

 

 

摘要:

随着智能终端产品的性能发展,界面动态设计在视觉设计中的占比越发增大,成为完善用户体验中不可或缺的关键一环,并直接关系着产品“门面”。于此,本文结合实例,将移动智能终端的视觉动态设计作为研究对象,并思考如何去构建一个合理高效的动效体系,最终梳理出一些做好动效的通用设计原则和关键手法。

 

关键词:动效设计原则,动效时长,运动转场,动效速率

 

一 应用界面中动效的作用与设计原则

为什么在视觉设计的过程中还需要设计动效?简单来讲,动效有以下等方面的价值点:

· 引导视图焦点

· 提示用户操作

· 明确元素之间的层级、空间关系

· 打造情感化设计

· 突出品牌个性

一个优秀的动效能过渡界面的元素,关联局部关系与层级关系,在引导用户视觉焦点的同时满足用户的心理预期,并缓和用户的负面情绪,激发正面情感。

那么做好动效的关键是什么呢?对于动画师而言,动画的时间、速度、节奏等都是表现动效的关键要素,这些关键要素的表现手法只有结合合理的设计原则,才能做出成功、出色的动效。动效的设计原则需要满足它是:

 

1. 真实、自然的动效

2. 满足用户情感需求的动效设计

3. 高效的反馈和适度设计

结合以上的关键点,本篇文章还将开展地细述构建合理高效动效体系的具体方法。

 

 真实、自然的动效

2.1  自然、符合心理预期的动效

对即将发生或潜在可能发生的事情做出预判准备,从而更好地适应环境的变化,这个提前的心理准备过程被研究者称为“心理预期”。

预期性是人机界面设计中的重要原则,在交互过程中,有意识地暗示用户可能发生的下一步操作,可以加强用户对交互逻辑的理解,并提升用户的满意度。

这一原则在动效中同样适用:一个符合用户预期的动效,会让人倍感自然和舒服。在界面转场、衔接等动态的设计过程中,只有遵循真实的自然物理状态,才能对应用户对事物的固有认知,从而到达其心理预期。

早期苹果的设计中,采用的便是拟物的设计手法:将虚拟的界面实物化,模拟真实世界已有的物品,使得产品的外观和行为接近现实生活中的事物。用户因此快速地理解它们的交互方式,并在使用中感觉身临其境,例如iBook的书本翻页的效果。

    而在Google的Material Design中,视觉元素的设计更为抽象。它不刻意还原某一实物的具体形态样式,而是将界面元素刻画成某一虚拟物体,假定其质量、材质、层次、深度、和组件材质的叠放逻辑。其原理更像是把交互界面定义成一张张的纸面。这种虚拟的框架环境下,利用娴熟的动效表现手法还原物体的具体属性,使之能真实地描述一个抽象物体在运动状态下的属性值,从而让用户对物理世界的认知映射到对产品的认知上,并自然对应产品页面间的逻辑关系。

 

2.2  符合力学的物体运动

    在现实世界中,物体的运动都是遵循经典物理定律的。人对于事物的理解,源自对客观世界规律的观察和理解,而应用界面中的材质都是虚拟的,如果这些元素的运动异于我们平时所能观察到的物理运动,用户就会在视觉的感知上存有认知偏差,从而无法从中想象其背后的交互逻辑及层级关系。

所以,我们设计的动态效果只有在满足物理定律的前提下,才能帮助用户把体验到的逻辑映射到产品认知中,使那些即使没有经验的用户在体验中,自然而然地知道元素背后的含义及其使用方法。

在自然界中,由于受到摩擦力的影响,我们看到的位移运动都非匀速。而匀速运动本身又是缺乏变化、乏味的,故通常只被运用在透明度的变化中。

在对比测试中,将三个小球动画分三组做运动对比,三个小球在同一个屏幕、同样的运动距离和时长下,分别做匀速直线(A组)、匀变速直线(B组)和不规则变速直线运动(C组)。抽样调查中发现,90%以上的人,会先关注到有变速运动的小球(先C后B),而对比两组变速运动,匀变速运动的小球(B组)让人感到无怪异、习惯舒适、运动真实。

 

图1 实验组小球直线运动速度曲线

 

因此,速度的设计中,巧用规则的变速运动,可以使得运动增加视觉引导性,并增加动效的可信度和趣味。

在多种匀变速运动中,同样的运动幅度和运动时间,搭配不同的速度曲线,就会有不同的动效体验:

(一)加速运动(ease-in)

静止的物体开始位移、缩放、旋转时都会经历提速,这个速率常用于元素的消失。动画速度要先慢后快,这时的速率呈现下方曲线:

 

 

2 加速曲线

 

(二)减速运动(ease-out)

运动结束后,物体在摩擦力的作用下,逐渐降速,该速度曲线一般用于表现元素的凭空出现等,即进来画面的动画要先快后慢:

 

 

3 减速曲线

 

 

(三)组合缓动(ease-in-out)

当元素在界面中既是突发运动又不出界消失,或界面发生转场等变化时,加减速度往往是同时存在的,物体会经历先加速后减速的变化过程来模拟现实运动,此时的速度曲线呈现下方样式:

 

 

4 组合缓动曲线

 

2.3  符合材质特征的动效

除了考虑物体运动的速率,动效设计还可以从模拟特定现实材质的属性出发,包括质量、弹性、韧性、形状等,使得用户自动对照现实物理规律,从而既增强动效的客观合理性,又丰富动效的表现性:

(1)质量

质量是物体的属性,而体现质量的特征之一即是惯性。当物体进行运动或静止时,物体不会瞬间变速或者突然停止,而是在惯性和摩擦力的相互作用下,会经历一段加减速的过程。反之就可以用速率的骤变程度表现质量,质量越大的物体惯性越大,表现时,加速度越慢,减速度也越慢。 

(2)弹性

现实中,我们经常通过观察物体运动受阻后的反作用运动,来观察它的弹性,例如小球下落:落地后小球的回弹幅度、次数与他的弹性成正比。依此反推,我们可以利用运动截止时的摆动来表现弹性运动。

由于弹性运动可以较好地表现物体的材质,我们可以经常看到它在动画中被用于表现某些Q弹的元素,比如动画中孩童的脸蛋、晃动的果冻、被拍打的网球等等。依样类推,弹性运动可以使运动元素在界面中看起来真实、趣萌、活力。

 

 

5小球的落地回弹动效

 

(3)韧性

物体的韧性值可以用与外力接触时的形变程度表现。如在国美GOME U7 switch的设计过程中,白色小球在圆矩框内撞击,启动时,球身拉升变长,碰壁后会挤压变扁,并伴随轻微回弹效果,表示小球的Q软。在小范围动效评测中,多数人认为,加上形变后的动画比原本无形变的位移切换更显得整个体验过程轻松、愉悦、耐看。

 

 

6 GOME U7 Switch开关动态序列

 

( 4)形状

在Icon、小组件的点击、转场动效中,可以结合组件本身的形状特征进行设计。如果Icon、小组件是简单的几何造型,可以用形变配合位移、缩放效果达到不错的动态效果。如果Icon、小组件本身具有写实的造型,可以根据人的固有认知来设计形变动效。

如Google网页设计的icon动画,暂停键与播放键之间的切换,根据形状特征做了形变与旋转变化;点赞的icon在点击时,会翘起拇指比赞。

在两者动效小范围调研验证中,对比播放键硬切、点赞动画不发生形变而仅做透明度变化的动效,用户对原本Google icon动效的喜爱程度占80%(共10位被调研用户),理由为这两个动效过程看起来更自然、有趣、好玩。

因此,根据形状制定合适的动效可以更好地唤起用户的感知力,使动效触发看起来更贴合、贴切。

 

 

  

7 Google 播放、点赞Icon 动态序列

 

2.4空间与视差

现实中,物体存在运动的空间是三维的。在手机二维的界面设计中,为了追求真实感,我们经常利用视差来模拟三维世界。

什么是视差?例如坐车时眺望远方,公路边缘的树在迅速后退,而远方的山或房屋却比树的后退看起来慢一些,这便是由于景深带来的视觉差异。

模拟办法其实很简单:将界面中的层级组件分层堆叠,在某个元件发生位移变化时,其他元素根据层级排序景深关系,发生不同程度的跟随位移。按照现实生活的经验,越远的景物移动越慢。如Android P中的日历Banner滚轴效果,在滚动页面时,利用视差,使得整个上下级组件构成纵深空间感,带来沉浸式的视觉体验。

这种视差效果,让界面中的元素,相互之间有了距离和深度,使得设备界面不再是一个简单的二维平面,形成立体层次错落的运动效果。视差手法,除了用来强调元素之间的不同层级高度,还可以带来非常出色的视觉体验。

 

 满足用户情感需求的动效设计

动效的情感化设计除了考虑解决产品层级功能性的引导需求,降低用户的学习成本,还需要满足用户的情感体验,考虑动效的易理解程度和使用的友好、愉悦程度。

 

3.1  操作与暗示

当用户进行无论是点击、长按、滑动还是其他交互操作时,都需要得到及时的反馈。适当的动效,通过缩放、透明度变化、位移、变色等手法改变交互前后的视觉效果,可以帮助用户区分交互前后的状态,从而提供安全感。

当遇到持续的交互步骤时,动效还可以提示用户当前的未完成状态,暗示和引导用户进行下一步骤,减少用机的学习成本。

如苹果的删除应用动画,当长按桌面某个图标后,所有图标都会开始晃动,提示当前已进入图标拖拽的第二状态,可以进行下一步操作了,而抖动的不稳定感还可以警示用户,目前是删除的命令,帮助用户明确交互目标并做出正确的选择。

 

3.2  顺畅的承转手法

在用户的访谈中,60%的用户觉得在页面切换、icon切换中,有必要存在承转动效,20%用户觉得无所谓,20%的用户觉得没必要。由此可见,用户对转场动效有着较强的心理需求,认为这种动效对于层级之间关系表达和逻辑提示比较清晰。合理转场动效使需要切换的元素、界面之间能有平滑的转换,使应用的操作体验起来顺畅愉悦,并同时增加了视觉的细节表现。

(一)元素联动

在界面或组件的转场过渡中,单个元素还可以考虑与界面内的组件建立关联运动。联动动画通过多层级的辅助传达,使得整个过渡动画更加合理自然,同时能更清晰地表达界面逻辑,并丰富整个动效画面,使之看起来生动有趣。

在横向对比中,笔者将GOME U1和U7的桌面应用打开动画做喜好选择测试。其中,U7打开某个桌面应用时,该应用界面从Icon的中心放大出现,桌面作为背景层次从其中心点缩小、后退消失。而U1的桌面应用打开动画,桌面不发生联动,仅有应用放大。 10位被调研用户中,7人觉得更喜欢U7的桌面动效,占到70%,2人觉得无所谓,仅1人觉得U1更好。

U7的桌面应用开关动画,应用与桌面存在联动关系,让人感觉该应用被选中后,展开内容并优先表达,与未选中的其他元素推开距离,次要的东西就后退消失。这个过程还原了用户选择查看的心理过程,对比UI仅是界面展开却不与桌面联动的动画更加地贴近用户的认知习惯,故操作体验更为顺畅。

 

 

8 GOME U7桌面应用开关动态序列

 

(二)跟随运动

跟随动画,就是让周边元素围绕主要运动物体动势,进行伴随运动的动效,可以辅助表达元素之间关系,润色动画。

如华为的Tab页设计中,当激发一个Tab页的切换时,Tab页上方会有一个蓝色的滑条跟随滑动,辅助说明页面是左右滑向的,并说明当前Tab页的位置。而滑条的滑动速度根据手指移动的速度、力度变化而变化,使整个切换过程响应及时,交互逻辑清晰。

 

 

9 华为Tab页切换动态序列

 

(三)元素共用

另外,利用共有元素的衔接也是转场的一种表现手法。在画面的切换过程中,观察前后页面之间是否有共同的元素,将它们提取出来做衔接动画,其它元素配合做次要的转场变化。这种过渡手法使得动画的转换看起来一气呵成。

 

 

10 元素共用动态序列

 

(四)制作补间

补间动画是指从一个元素做形变等变化,转换成另外一个元素的过程动画。补间动画可以完成两个不同元素之间的衔接,使得元素的联系性加强,切换更加流畅、水到渠成。

 

 

11 补间动画动态序列

 

(五)共享运动

当面积大小、颜色等形态相近的两个图标做切换动画时,共享运动通过两者共同模拟一个运动趋势并从中跳转,来创建平滑的过渡效果。

例如,浮动按钮内的一对图标进行切换时,可以使它们朝着一致的方向进行旋转,在运动速度的最快点,进行淡入淡出切换,使整个切换过程可以到达不错的平滑效果。

 

 

12 共享运动动态序列

 

(六)层次与间隔

瀑布流效果是将变化进行分层和间隔处理,出现的渐层效果。

在列表类的界面加载过程中,使用瀑布流效果,将界面布局打散分组,载入时,每一组保持相同的动势和间隔时间(每个元素运动间隔不宜过长),保持动画的流畅和快速。需要注意的是,这种效果应适当地控制幅度和总时长,避免过于花哨而影响信息的读取。

使用瀑布流效果,可以打破原本列表界面加载效果的单一、乏味,变得层次分明、错落有致。

 

 

13 补间动画动态序列

 

3.3  个性与趣味

未添加动效的产品,会带给人一种平铺直叙、呆板无趣的感觉。在某些界面中,增加一些个性的定制动效会增加亲和力和趣味性,并加深品牌印象。

如安卓原生的时钟Tab icon,在闹钟、时钟、秒表、计时器的切换中,会发生个性的小动画。在用户访谈中,大部分用户能主动识别到并提及这种个性化的动效,并认为十分有趣。证实,这些定制类的微妙动画可以为用户体验增添光彩和趣味,缓解视觉审美疲劳。

 

 

16安卓原生时钟Tab icon动态序列

 

 高效的反馈和适度设计

4.1高效的动效时间设计

 

动效的要求是既要快速响应用户的指令,还要吸引眼球。合适的动效时长,让用户在无需等待的基础上可察觉它。故此,动效时长的设计尤为讲究。

在设计过程中,不同动效类型的时间长度也是不同的:动效的长度需要根据应用场景、运动面积,设计不同的时间配比。

(一)考虑一:应用场景

不同的用户使用场景对动效的时长有着截然不同的需求。当设计动效时,先明确动效的用途,是用于点击反馈、转场、等待还是演示指导:

点击反馈类的动画时长需要能迅速、精确地响应用户触发的命令,以简洁短小为宜;转场切换类的动画时长在快速地同时,需要清晰阐述页面层级关系,并为页面加载的预留一定时间,也应该以中短简洁为主;等待的loading动画为循环的动画,在界面加载时,减少用户的等待焦虑,动画的一个循环内容不宜过长或过短。动画过短则不耐看,过长会更加剧等待的负面情绪;特殊类的动画,如演示动画等,设置的时长应贴近所表达场景的实际情况,不宜过快,避免用户看不懂等问题。

(二)考虑二:运动面积

除了用户使用场景的因素,元素运动的面积、幅度也是考虑因素之一:当运动物体的体积较大,或运动幅度较大时,适当地放慢速度,使这个动效过程能完整呈现,而不显得突兀;当运动的面积较小时,动效尽量保持简短,减少用户的等待时间。

这个考虑因素同样适用于智能终端产品的适配问题,当小屏幕设备的动效适配到大屏幕设备时,需要适当的延长动效时间,反之则缩短。

 

 

17智能终端产品的动效面积

 

4.2常见动效的时长表

在传统动画影像学的概念中,人类眼睛的视觉暂留现象正好符合每秒24帧,即大约0.04秒。以此作为时间梯度的最小基数,统一规划,在此基数上做倍率增加,如音乐的时值一般,会使动效更具有节奏感。

笔者将一些主流APP中的动效时长做了调研分析和记录,发现一些通用的设计时长范围,并做了简单的整理和搭配方法建议:

 

表1 常见动效时长表

动效类型

推荐时长

Icon、文字点击反馈

推荐200-240ms;根据对象的运动面积可调整

透明度出现/消失

推荐200-240ms;根据对象的运动面积可调整

通知弹框弹出/收起

推荐240-360ms;根据对象的运动面积可调整

Dialog弹出/收起

推荐360-400ms;根据对象的运动面积可调整

屏幕范围内的位移

推荐360-400ms;根据对象的运动面积可调整

屏幕内外的位移

推荐500-540ms;根据对象的运动面积可调整

切页动画

推荐240-400ms;根据对象的运动面积可调整

应用开关

推荐400-540ms;根据对象的运动面积可调整

呼吸循环类

1000ms 或 2000ms一循环;根据对象的运动面积可调整

特殊类的动画展示

根据动画的场景根据现实估算动画时长

演示动画

根据实际操作的时长来设计演示教程动效时长,确保用户可以切实地观察理解到使用步骤

 

 

4.3克制、适度的动效

动效被应用的理想状态是“适度” [1],运用时需要避免不必要的炫技。我们使用动画来吸引用户的注意力,提醒用户需要注意的信息或暗示下一步操作,而当动画使用的次数过多时,画面中几乎所有的东西都在动,关键信息传递的效果反而越差,并且会干扰用户的认知和操作。因此,动效不能随意滥用,要严格控制它的数量及幅度。

动效的使用应具有针对性,从交互出发,站在用户的角度考虑操作的目的及期望的视觉呈现结果,并依此为元素进行有效的主次划分,削弱次要部分,以便对应操作的逻辑并给出正确的动效反馈,避免造成用户眼花缭乱的感觉。

 

 

参考文献

 

[1] 吴俭涛,李蒙晓,王之苑.移动应用界面中动效设计的运用与探究[J].艺术与设计(理论),2015,2(09):40-42.

[2] 杨洁敏,张蜀,袁加锦,刘光远.心理预期与认知方式对负面情绪的交互调节[J].心理科学进展,2015,23(08):1312-1323.

[3] 吴政兴,朱晓菊.Material Design的设计语言与动效设计探析[J].艺术与设计(理论),2018,2(05):70-72.

 

UXPA中国会员登录

记住我

第三方登录

×

微信登录

×
请使用微信扫描二维码登录 “UXPA中国官网”

下雨的春天

已使用微信登录(更换账号)

×

会员密码找回

×