最近在看黎万强的《参与感》，有个小段来描述如何他在招聘中是依靠什么来找的合适的设计，其中有一项按他的话叫做「深度阅读的习惯」来判断设计师的境界。境界靠深度阅读来判断不敢苟同，但举证的例子却不能赞同更多。
很多设计师仅仅喜欢网上看资料、找资料，但是碎片化的图形、元素和某个作品本身，只能提供一些气质和灵感，没法基于系统性的知识。
点赞，为什么？因为有共鸣呗！看了很多资料依然做不好设计的大有人在，想一想为什么这个设计中他使用的是侧滑菜单（Left Nav）而不是标签栏（Tab Bar）？为什么这个banner的主标题他用的是蓝色而不是红色呢？
看的多想的少，做的时候依然费劲，应该算作是通病，得治！这次废话这么多完全是因为看到大神的这段话产生的反省。
不唠叨了，这次周结的主题是交互小动画。redesign视觉稿是靠工作之余的时间进行设计，还好这周事情貌似还不多，应该可以火力猛攻的做完。动效呢，我是觉得是锦上添花的事情，当然在上篇文章我作为移动界面风格设计趋势的一部分，在设计中当然一定一定不能少了，而且也是我的软肋啊！（软肋实在太多了，╮(╯▽╰)╭），所以这周除了做视觉稿，还会收集整理一下常见场景下的交互动画，让我们为视觉设计来添砖加瓦吧！
关键字：层级、空间、软件逻辑、认知、隐喻、迪斯尼动画12原则
按照一个不正宗的吃货标准，如果UI设计是一份钢嘣脆来又美味的炸鸡，那动效设计就是香醇可口的一杯啤酒。单只吃炸鸡当然行，但是大家不都会常说一句“炸鸡与啤酒会更配哦”！嗯，就是这一样的道理，UI设计作为一个基本的静态页面，由很多个页面组成了一个合乎逻辑的一个app，在做静态页面的时候考虑更多会是逻辑层面的调整关系，而这之间该以一个怎样的方式来切换考虑的是少之又少，有主张说，动效设计是锦上添花的事情，应该是在做完GUI工作后再添入进去动效，为app提升趣味性而博得好感。也有说，动效设计应该贯穿到视觉设计中的去，不说落实做但要考虑到动效特性来布局视觉设计的元素与排版。我觉得2种说法都好有道理，哎，就是这么没有立场的人，没辙。不过，列出观点的目的更多是为了让自己去思考更适合自己的方式，不管怎样，我们还是需要了解一下动效设计的始末，不是吗？
目的
产品设计师经常说的一个词叫"情感化设计"，我们设计了漂亮的界面，整理了清晰的逻辑，除了这两样之外，我们还需要动效来把这些漂亮的设计衔接起来，界面、交互、动效构成了情感化设计的三大载体。
UI动效设计，最主要的目的就是为了帮助用户更好的了解软件各个页面之间的逻辑、层级空间关系。让动起来的视觉效果，在短时间内告诉用户我应该怎么去操作。例如...又来到了百用不嫌其烦的iOS删除app的效果栗子时间。删除抖动和移动跟随动效，马上就能让熊孩子拥有分分钟删除你app的能力对不对！好的动效设计就是这样，具有环境意义的物理动效，在引导用户进行操作这一项能力上还是优于静态页面的。
图来自《流动之美-探讨移动动效设计》
用处
按照目前所收集的一些资料来说，动效设计的用处大概有几下几点
1.表现层级关系
在上周视觉设计风格定义的周结中，提到了纵深（分层界面）这个新词。温习一下：利用Z轴也就是三维轴的分层帮助用户理解不同条目之间的主次关系，将用户的注意力集中到用户需要关注的地方去。而在动效设计中，也出现了关于层级关系的这个词，浅显理解就应该是静态视觉纵深设计的2.0加强版。所达成的目的都是一样，为了表现层与层的关系，让用户明白我从哪里来，现在在哪里，可以到哪里去三个最基本的点。下面这个栗子找的不能更适合了，体会一下这种层级关系，不是简单的元素之间的转场，而是页面层级之间的打开收起。还有汉堡菜单中的动效设计也算作比较典型的表现层级关系的案例
全方位的栗子
汉堡菜单的动效
2.操作时提供反馈、引导用户操作、减轻认知的负担
及时反馈也就是的高响应度的表现，用户在进行任何一个行为的时候都应该得到相应的回复，保持用户对因果关系的感知就是保持对用户所有操作中享有的知情权的尊重。比如用户更新软件后的进度显示、喜欢一首歌后的收藏动作、删除一条表单的动态效果...类似于这样很多动效所提供的反馈能够帮助用户更好理解当前操作所代表的意义，减轻了很多认知的负担
喜欢和不喜欢的动效
删除动效
进度动画
3.UI元素之间的相互转换
转场的流畅度和趣味性增加了界面的活力，生命力呢也顿时满满的。UI元素之间的相互转换就是将物理世界中的运动融入到UI动效的转换中的做法，缩短了用户和软件之间的距离，让我们一起荡起双桨划到理想的彼岸...
流畅！没有更多
好几个同时运动的点也不觉得突兀呢
转场很自然的圆点点
4.吸引用户的注意力，提供超乎预期的惊喜
超乎预期的惊喜在现实生活中很好理解阿，我上网买了一个苹果，居然到手的是一个苹果手机！出乎意料的惊喜会开心到合不拢嘴。那在UI设计中，超乎预期不能像上面那个栗子那么癫狂，应该是在可感知范围内的惊喜。就好像输入密码这个在现实中很隐私的情况，在动效设计中居然有人可以设计出卖萌蒙眼的小动物来表现这样的隐私性，想想也是脑洞大开。
萌萌可爱的蒙眼小宠物
略屌的三维视觉动态
可爱到滑动调戏停不下来的动效
方法
找方法上知乎，果然，大神说，要会用动效设计的方法就得先理解迪斯尼动画的十二原则法（12 basic principles of animation）。人工搬运来以后慢慢体会。
1.挤压和伸展（Squash & Stretch）。想象猫和老鼠里面各种人物落地时候的样子。
2，预备动作（Anticipation）。从一个动作到下一个动作之间，角色往往会做一些预备的动作。比如人在起跳前先要微微下蹲，要向前出拳时先要往后拉伸等等。
3，跟随动作（Follow Through）。因为惯性，自然运动一般都不会骤然停止。
4，渐入渐出。也是类似前一点，自然的运动都是有过渡的。
5，弧线。生物移动的轨迹大多是带弧线的，而很少有直线的机械轨迹。
6，附属运动（Secondary Action）。比如跑步时候头发和衣服也会跟着躯干摆动，而这些细节的缺失会让主体的运动显得僵硬。
7，时机控制（Timing）所有跟时间相关的媒体，Timing都是非常非常重要的。动作的先后顺序，持续长短，差别零点几秒就会造成非常大的感官差异。
总结
可以看出，动效设计的姿态是依赖于物理现实生活中的动作。恰当的动效设计能够为软件的使用提升愉悦感，发出“哇喔”的感叹，反言之，不合适的动效，打比方场景不适宜、过度动效所带来的结果，我猜可能还不如单纯的静态页面了。软件的使用是动效设计的基础，虽然单这个门槛就不低了，但是我深信脑中的想法决定了你的动效之路能走多远。站在前辈的肩膀上，多看多想多做。所以，加油吧，少年！我们还有很长的一段路要走.
咿，说好的redesign的效果图先不贴了。在家和下雨是我码字效率最大的敌人，这次选的主题写的好费脑细胞，平时不积累的结果就是关键时刻得劲憋。
网友评论