我们不需要怎样的动效设计
时常在思考我们在追求漂亮的动效，追求真实的弹性和运动状态时，我们不需要怎样的动效设计。从对现实世界材质的模仿（拟物化）到对现实世界规则的模仿（如Material Design，以下称MD）我们究竟是否有很大程度的进步，在MD刚刚发布的时候作为设计师的我们十分激动，直到现在都还有很多设计师十分推崇MD一套的设计规范，这样的做法在带来便利的同时可能会让我们忽略设计的初衷，还有作为一个设计师对产品的理解，最终可能给用户带来一个中庸的体验。
从动效设计上看：
设计所包含的方方面面在 MengTo 的《Design + Code》上有很好的归纳，我时常发现，经过一段时间的设计之后很容易在设计的过程中有所迷失，原因在于我们很容易专注于细节，保持阅读的习惯并试图用相对宏观的视角去看设计是不错的做法。动效设计让页面元素能够很自如的被操控而不仅仅是静态呈现时，我们会直觉的想到让其去模拟现实世界的规则，现实世界的运动规则因其载体不同其实有很多选择，在设计和模仿的同时还应该考虑更多。
IBM在前不久发布了IBM Design: Machine in animation, 试图将机械运动的风格赋予给动效设计。
IBM Machine in animation IBM因为其在100年以来就生产着专业的打字机，打字机可以作为一种符号来代表IBM，它的视觉呈现和运动轨迹都可以代表打字机的可靠和高效。运用在IBM自家的应用上时，真正的高级用户可能会真实的感觉其与IBM企业所想要传达符合的某种信号。机械运动相对于我们在动效设计中所常用的弹性动画有其独特的特点，页面元素坚硬有序而活动自如这一感觉通过设计师所定制的曲线而呈现。
文章图片
Stop Gratuitous UI Animation 回想90年代时网页设计的过度设计风格，大量的阴影、斜角、高光、不考虑留白的使用，这是一个设计师在面对新媒介和庆祝掌控像素后的失控，而这也是自然能够理解的结果。Stop Gratuitous UI Animation,现在的动效设计也是如此，它受新技术如CSS、JS的进步和硬件的更新换代影响。不必要的动效设计可能有以下几个特点：
1、过多的对现实世界的模拟。这样的模拟很可能不会让你的应用塑造出类IBM的视觉语言，而只会带来不必要的认知负担。另一方面，像素世界有许多与物理世界不一样的地方，如Loading，这样的处理才是更应该关注的。这个例子的列表就是对现实世界中某种机械装置的模拟，无论是运动曲线还是紧度都调的不错，可是它依旧是一个不好的例子。仔细来看，正因为它的列表在模拟机械装置所以每个卡片在拖动时必须固定像素定位，用户无法做出按住-上下滑动预览；滑动停止在任意位置浏览的手势。
过多对现实世界的模拟 2、在大的页面切换做过多动效。越是用户经常操作、变化越大的页面越不应做过多的动效处理，动效设计不应该只是对一个动效时间上的操纵，如不应该大于1s或者不应该大于0.5s，这和7±2原则一样十分具有玄学意味，这和网页设计早期发展时Loading时间一样，人心理的焦躁程度也会改变，谈论一个动效的具体时间没有太大意义，而更应该关注它在什么地方做了一件什么事，如果是Tab切换，笔者的意见是动效设计要尽量克制，一方面用户的操作频率十分高，如果要考虑到页面元素级的切换，程序无法对用户正在看当前Tab上下滚动的位置做出相应的动效定制化处理，这也涉及到另一个Tab的页面元素进场。另一方面过多的操作与动效时间相乘，将是一个很大的负担。
文章图片
在大的页面切换做过多动效 3、手势操作与系统全局操作冲突。因为手势可以更方便的被运用，最近更新的许多应用普遍采用手势操作，而不幸的是这样的方便带来了更大程度的误触，这也是动效设计和交互设计分割的后果，一般来说，从手机边缘的上滑和下滑都已经被系统手势占用，不能让原本应该带来便捷的手势给用户带来更多麻烦。下图就是一个和iOS唤出控制中心手势冲突的例子。
文章图片
手势操作与系统全局操作冲突 从版式设计上看：
【我们不需要怎样的动效设计】每个设计师特别是交互动效设计师在刚刚接触动效的时候都很想创造一套动效的交互规则，能够掌握到每个运动的先后次序和精确到毫秒级的设计，会让设计师很有快感。动效设计是基于页面层级和页面元素，在交互与视觉设计上的改进，是当交互和视觉在解决问题不够高效时做的补充。MD和IBM的设计都很优秀，但当由动效或形式掌控过多的时候，可能会造成难以预料的低效率，这也不难理解为什么有人会说：the Floating Action Button （FAB）is bad UX design.
遵循平台规则会给应用加分这没错，这在iOS7发布的时候尤为适用，但当平台规范想要掌控你太多时就要多考虑一下了。单就FAB来说，从版式上来讲，上文作者就总结出这些问题：
1、它打破了沉浸式体验。试想我在一个图片浏览类应用中FAB充当的角色是重要的“搜索”，这样的使用自然没错，但它因为其浮起的样式不可避免的将用户拉出沉浸式体验。
2、它挡住了真正的内容。早年Scott Hurff已经提出过我们的可及区域与视觉遮挡，FAB的出现更是让原本应该显示内容的区域更大程度的牺牲。
3、它重要可能但它并不常用。由我们熟知的2/8原则，用户在20%的动作上花去80%的时间，作者以Google 邮件为例，FAB在这里充当的角色是撰写邮件这一动作，从直觉上来说它十分重要，而用户实则在手机上大部分时间是阅读邮件，FAB使用的频率并不那么高，相反它牺牲了更多的内容显示空间。在大屏幕内的使用时，因为FAB是相对精确的点击操作，它也会给用户带来更多的操作成本。
文章图片
文章图片
反观最基础的动效设计和它的原则方法。它应该可以
1、强化页面呈现的引导。通过动效可以更有加有次序规律的呈现页面层级，
2、解释交互动作的变化。通过动效来有效反馈用户操作，声明状态变化和暗示
3、并通过良好的设计来取悦用户。互联网产品的功能性设计可能会在未来越来越弱，就像有很多论调说the Web is dead一样，不仅仅是占有率上的，更多人为其创造版式化规则和工具，同样造成了功能性可以被多验过的满足。而取悦用户的设计如文化产品一样具备更长久的生命力。
原则上，动效设计做小不做大，即尽量做小的交互动态而不做大得页面切换动效，经常操作的页面切换动效会让人觉得设计太过，Ben Johnson认为一个App动效应该由三部分组成，即1个单元的欢迎动画，6个单元的告知性动画，1-2个令人愉悦的小细节。太过花哨的动效很可能会让它像FAB一样受人诟病，反馈符合用户的心理预期，而不单纯的追求每个动效时间上的控制，同样是动效设计师所应该注意的。
我们需要怎样的动效设计
现在看来，我们不需要怎样的动效设计？它应该是以特定的应用需求为导向的，它不需要模拟纸张也不需要模拟墨水，模拟机械或者其他什么东西。在动效设计上我们希望有一个解决问题的态度，亦或是如IBM一样传递自己的品牌文化，就如FAB一样，很多时候我们不需要它出现来阻碍我们浏览内容。 同时，产品、交互设计、视觉设计、动效设计的过分区分会让动效设计变得缺乏创意，相信交互设计师在接到需求之后，脑子中不可能不出现带有视觉风格的产品愿景，而现在的职位分割让设计师变得十分危险。
我们不需要规定过多的动效设计，也不需要为一个既定界面设计动效，这种内在能力应该如用户研究能力一样深化在每一个关心用户和体验的从业者中，从源头上思考动效，必要的时候做出相应交互与视觉上的调整，不沉迷于软件，将一个应用当成电影或者游戏整体来做，这其中的动效设计可能才是我们想要的。
它无关乎是用形变还是弹性动画，这种技法很难在没有上下文和语境的情况下来确定，就像3D电影的摄影师只能在CG未完成时，让演员在绿布上表演，这让摄影师的拍摄困难重重。只有从源头上重塑信息结构，用某种 "motion UI thinking" 的思考方法，或许才是提升一个应用品质的好的办法。
最后，交互动效设计师应该多看看游戏，他们已经走得很靠前，而且默默无闻。
文章图片
Written by Scalegong
infoier.com | 设计乘数
参考：
IBM design: Machine in animation：
Material Design: Why the Floating Action Button is bad UX design
Make the right FAB
“1+6+2”公式：App动画及动态效果之基本原则
Stop Gratuitous UI animation
推荐阅读
- 我们的爱情观到底怎么了（）
- 那些年我们为爱付出的代价
- 我们会再次相见，以自己最好的模样
- 商道经略中的时、局、势
- 焦虑的来访让我们缺失了勇气
- 读红岩|读红岩 缅先烈
- 我们看到的世界正在被缩小
- 最好的我们
- 我们听过无数的道理，却仍旧过不好这一生。
- 2018-07-08|2018-07-08 为什么我们在药神的电影里哭泣