聊聊动效设计.pdfVIP

聊聊动效设计 上周我参加了谷歌的 I/O大会，加入了一个关于跨平台设计的小组座谈，这一次会议有非常多有趣的 新事物，让人有种第一次走在拉斯维加斯大道上一样的惊奇。 这次安卓大会上宣布了许多的改进，比如电池保护模式和新的锁屏通知。 也有更多的设备能够使用上安卓系统：智能穿戴设备、智能汽车、智能电视。以后当有人说到安 卓时，安卓将不仅仅是让人联想到手机，而是会联想到更多诸如电视汽车等。 如果没有约束，就不仅仅是设计“ ——它是艺术 ” — Matias Duarte Android L 最突出的改变完全是明面上的，也就是新的 材料设计“ ”（Material Design ）语言，相比之 前的设计，新的设计语言灵感来源于纸张，界面风格更加的扁平化，更加的跳跃同时色彩也更丰富 。同时加入了非常多精美又流畅的系统动画，能够以 60 帧的速度优雅的完成每一处系统动画的切换 。 而且这种设计语言并不只是单单用在新版的 Android 上，而是致力于让谷歌旗下的所有产品都能够有 一个统一的设计风格，包括网页、车载平台，可穿戴平台等等，其实这一理念已经在 Google+ 的客 户端上出现过了，当然这背后还会有更多的控件和标志。 安卓 I/O 大会不仅仅是讲安卓和设计语言本身，更是暗示着一个跨平台、手机、电视、汽车等的未来 。 。 如果你是一个设计师，请学习动效设计。因为你需要设计“ 60帧中A 到B之间的58 帧。 ” — Paul Stamatiou (@Stammy) June 26, 2014 一年以前，我在工作中会使用一系列的工具来在自己的想法和设计通过特效、或者是搭 建 HT ML/CSS/JS 原型与手机设备进行交互中展示动画和过度效果。 在工程中使用“ QC 不仅会使工作更加简单，还可以让你设计活起来，让人可以很 快理解这个设计的工作和含义。 ” —— Julie Z hou 我不会太深入的探讨如何去设计动效，但是有一些建议是肯定的：正确的、响应式的、有意义的、 人性化的细节。 精心设计的动效“ ”可以有效的帮助用户集中注意力和引导完成所有步骤；当布局更改时可以 避免混淆的排列元素、改善整体的美观程度。动画也是一种个性、一种表达的途径。 “ 几个视图中可以通过动效来串连在一起，例如谷歌在视图的变化中就使用了一系列小的过渡效果来 表达转换和帮助用户理解层次关系。 Roman Nurik 告诉了我们一个问题，一个功能强大的原型是你展示设计最好的方式。 不过在过去五年中，我们常常是将一连串的页面链接起来而已。在今天来说，原型对我来说是能在 移动设备上使用的真正的程序 ——— 真实的转换、可拖动的元素、可滚动的区域、动画效果等等。 在过去，它可能需要使用耗费时间区使用像 Adobe After Effects 来制作效果，这种耗时间的事情可 能会到你截稿的时候都不一定完得成。 现在有很多新的工具可以帮助你更高效的处理。 比如Polymer 可以帮助你编排，我一直在使用 framer ，几乎每天都在使用 JS 来构建交互式原型设计 。不过 framer 在小的测试上并不怎么好用，因为会有很多的工作量。 有其它的工具像 pixate ，它可以让你通过网页拖放的形式来构建你的原型然后在设备上查看。 当然以后还会有更多的更好用的工具，不过有一件事上肯定的，那就是把一个真正的原型放在你的 团队面前是最有效的交流方式，不用再去向团队的其它成员解释 ”你点击这个，然后它就会加载、 滑动 … . “ 我们认为移动设备的设计师越来越多的时候，我们就越需要更强大和好用的工具。这样我们可以设 计出更好的产品来吸引用户、帮助用户解决问题。 原文： Milton Glaser 本文为 BESD 设计实验室 翻译投稿，转载请注明来源于人人都是产品经理并附带本文链接 人人都是产品经理（ ）中国最大最活跃的产品经理学习、交流、分享平台