设计师的必备技能!你需要学会设计有意义的动效.pdf

设计师的必备技能！你需要学会设计有意义的动效 在今年的Google I/O大会上，我参加了一个小的讨论小组，一同探讨跨平台设计所面临的挑战。这 次讨论的内容信息量非常大，就像第一次去拉斯维加斯的那种目不暇接的感觉。 这次Google 对Android上进行了许多令人振奋的改进，比如电池省电模式和全新的锁屏通知，许多设计比之前的 第三方插件都要来的优秀。 动效才是The Next Big Thing Android 更多的衍生版也在这次的I/O大会上发布，Android Wear、Android Auto 以及 Android T V ，从此之后当你再聊起Android的时候，就不仅仅意味着智能手机和平板了——你还需要考虑汽车和 可穿戴设备。 “如果设计没有限制，那就不是设计，而是艺术了。” —— Android 设计主管 Matias Duarte 随着Android和其他的Google系产品逐渐进入越来越多的领域，这也使得Google越来越有必要后退 一???，全面地审视自己现有的设计。重 新思考之后创造出的设计语言，就是Material Design。这种 高屋建瓴的设计语言规定了一整套设计框架，在此框架内基于Android来设计程序的时候，Google 和其他的设计团队可以更容易地 做设计决策。 但是，如果你仔细审视这次Google I/O大会的话，你会发现Android 5.0 和 Material Design并不是 重点。谷歌通过这次大会隐晦地告诉世界，动效设计正在成为移动端软件设计中一种极为重要的、 非常必要的组成要素。在Google I/O大会的每一个环节，动效设计都会被提及、探讨，也成为了开 发的重点。 一年前，在我的的草稿中还有一篇写了一半的文章，名为“完成工作所需的正确工具”。这篇文章主要 介绍的设计过程中所必须的工具，以及如何借助它们更 为有效地传达全部的设计意图。比如使 用After Effects、Quartz Composer 来制作转场动效，使用HT ML/CSS/JS来构建原型并且使用移 动设备来进行交互。 当Facebook的设计团队在设计流程中使用Quartz Composer设计首页的时候 ，曾经提到： “QC不仅让工程师的工作更加容易，也使得设计可以更容易呈现故事。所以，当你查看一个 逼真、精心处理、可交互的Demo的时候，你可以立刻明白它是如何运作的……” — —Facebook 设计总监 Julie Zhou 无割裂的体验 虽然我并没有深入探究Material Design的动效设计中错综复杂的设定，但是它的特征依然非常鲜明 ：可信而真实的动效，响应式的互动，充满意味的过度，令人愉悦的细节。掌握好这些特征之后， 再深入探究。 “精心编排的动效设计能更为有效地吸引用户的注意力，并让用户专注于操作不同的步骤，经 历不同的流程；有意味的动效设计能在界面变化、元素重新排列过程中，让整体体验更好。” 动效可以也应该超越单纯的打磨优化。动效以一种全新的方式来呈现界面的个性，教育用户如何同 特定的元素进行交互，构建用户于界面之间的独特关系。 当整个界面随着用户的需求进行变化的时候，用户会下意识查看所有的转变，这个过程中，界面的 重排和各个部分的转场动效可以清晰地告诉用户它们是什么，怎么来的，去了哪里。 pstam_app_bar_microtransitions 正如Google在Material Design中所设定的“独特的纸”的隐喻一样，当用户于界面进行操作的 时候，UI随着涟漪般的动效而进行转变，空间的变化和界面元素的变化由动效连接在一起，用户可 以轻松理解界面是怎么回事。 成长中的设计工具 在设计小组讨论中，Roman Nurik 问我们怎样才能最好地向别人展示设计成果。Roman的这个问题 促使我们深入探讨了功能型原型。 在过去的5年里，当我们提及原型的时候，通常想到的是通过箭头和说明连接在一起的若干界面。但 是时至今日，一切都截然不同，之前的原型设计显得过于 粗糙，而现在的原型要求能够置于移动端 设备进行演示，拥有真实的界面过度效果，可交互的元素，滚动的区域，动画，以及必要的状态 变化。 在过去，设计师并没有真正意义上充分利用After Effects来作为重新设计的工具。除了拿来制作页 面滑动效果之外，多数设计师对于其他的功能几乎如同克林贡语一样疏于了解。之所以会这样，是 因为其他 的部分被认为并不重要，而不被重视的结果通常就会被忽视，在日程紧张的时候，这些部 分甚至会被直接移除。 除此之外，AE还会被用作优化小过度效