2017-09-29毅耘科技1839

动效-APP设计的肢体语言

【毅耘科技】

动效-APP设计的肢体语言

引言：假如把APP比作一位美女，那么icon是她的证件照，界面是她的形体，而动效则是她的肢体语言。

在现在玲琅满目的App中，如何脱颖而出？设计师要考虑的，不光是产品如何更合理的显现结构与功能，更主要的是思考自己的App是否能做到简便易懂的同时，又给用户新颖感？此时，有限的屏幕空间紧靠文字的提醒是不够的，App需要更多的新颖血液——“动效设计”。动效设计可以拓展空间内容，简化指导流程，降低学习成本，更主要的是给用户带来意想不到——类似于“Cool”的惊喜，它就像人类的肢体语言，通过肢体语言传达更多的抽象信息和性格显现。

肢体语言（body language）又称身体语言，是指通过头、眼、颈、手、肘、臂、身、胯、足等人体部位的协调运动来传达人物的思想，形象地借以表情达意的一种沟通体例。一小我要向外界传达完整的信息，单纯的语言成分只占7/100，声调占38/100，另外的55/100信息都需要由非语言的体态来传达。肢体语言的主要性可见一斑。
肢体语言大致可分为三类动作：基本动作，招牌动作和高难度动作，这三种动作是如何在APP设计中体现呢？

1.基本动效让用户恬逸

基本动作也可称为日常动作，如坐立，行走，握手，拥抱等.对应APP中的基本动作分三类：1.指向性动效（滑动，弹出等）
2.提醒性动效（滑动删除，下拉刷新等）
3.空间扩展（翻动，放大等）

不要小瞧基本动作，试想当你看到一位美女起身向你走来效果驼背，外八字，是啥感觉！APP亦是如此。流畅，天然映射，重力模拟这些看似简单但却能让用户在操作时轻松自在并有强烈的代入感。这类动效最主要的是让用户感到毫无负担又如沐春风，也就是不要夺人眼球，悄无声息的顺应用户行为，指导用户需求。
这类动效在设计过程中需要主意几点：
1.系统兼容和资源占用
2.动态速度的节奏
3.仿生性or现实重现

举例：
图片1.3X3动效控件

动效-APP设计的肢体语言
2.加载动画

动效-APP设计的肢体语言
3.翻页动画

动效-APP设计的肢体语言
2.招牌动效加深用户印象

招牌动作是基于基本动作有选择性的差异化显现。例如针对空间扩展而设计的path加号按钮动画。facebook 推出的paper关闭新闻的拉伸曲线动画等。
巧妙的设计在知足产品功能需求的基础上更能让用户惊艳。这类动效是APP的专属符号，APP的品牌和逼格显现通过此类动效有较大的发挥空间。。这就像Michael Jackson的亮相pose，他本人or模拟者只要一摆出这个POSE我们就立马想到MJ。同样这类动效的设计更具尝试性和前瞻性，它是动效趋势的实践和探索，甚至能引发跟风潮流。
这类动效设计需要注重的是：
1.操作前的提醒指导
2.夸张化和个性化的体现
3.对动态趋势的展望
举例：
图片1.手势提醒的动画

动效-APP设计的肢体语言
2.特型动画

动效-APP设计的肢体语言
3.前瞻性动效演示

动效-APP设计的肢体语言
3.高难度动效让用户『WOW』

基本动效让用户恬逸，招牌动效让用户印象深刻，只有这些对于一款“高逼格”标签的App还不够。在这个大家都很拼的世界，不来点让人经验的高难度动作很难让别人对你刮目相看。这类动效很酷，很炫，可让用户作长时间的视线停留享受，让用户『WOW』的同时，不得不为设计动效的同窗点赞，大大提拔了对APP所属品牌及开发团队实力的认可。当然不要忘了APP的主要功用，高难度动作只是锦上添花抑或画龙点睛。所以在APP设计中高难度动作并不一定都会使用，要根据APP的切实需要进行设计。在不干扰主功能的前提下，进行探索展示。所以这类动效多出现在指导页或者特殊功能展示上例如手机清理APP展示清理进度的仪表动效等。

这类动效的需要注重的是：在知足系统资源占用的前提下尽可能发挥吧！Just do it！
图片：仪表盘动画

动效-APP设计的肢体语言