流动之美-探讨移动动效设计精选.pdfVIP

流动之美-探讨移动动效设计 说到流动 ，大家一定想到的是水 ，随着移动设备硬件的升级 ，越来越多的A pp Ro m得以拥有了流 水般的动效。那今天我们就来聊一聊移动的动效设计——流动之美。 首先 ，为什么要有动效 ？ 产品设计师经常说的一个词叫“情感化设计” ，我们设计了漂亮的界面 ，整理了清晰的逻辑 ，除了这两 样之外 ，我们还需要动效来把这些漂亮的设计衔接起来 ，界面、交互、动效构成了情感化设计的三 大载体。 “界面跳转太生硬了”“软件卡死了吗 ？”“菜单在哪”… 大家在移动产品设计中一定都经历过这样的问题 ，动效帮助我们很好的解决这些问题 ，同时又带来了新的帮助。 我 理为如下6大作用 ： 1 过渡流畅 过渡流畅是我们对于动效的认识里对容易想到也最被认可的一点 ，通过界面及其元素的出现和消失 ，以及大小、位置和透明度的变化 ，使用户和产品的交互过程更流畅。在A ppFlow 中 ，页面的滑动 、元素的出现整个操作如水般流畅。 2 高效反馈 高效反馈可以说是移动应用最原始的需求 ，其通过动效让用户了解程序当前状态 ，同时对用户操 作 （平移、放大、缩小、删除 ）做出及时反馈。譬如说在用户点击下载按钮后 ，我们需要给用户展 示程序当前的状态 （未下载-下载中-下载完成 ），如果我们不把反馈给用户 ，用户可能就觉得“手机 卡死了吗 ？” ，同样的对平移、放大等操作 ，及时友好的反馈也是必要的。 3 引导作用 移动应用不比PC应用 ，移动应用可用的空间就屏幕那么大点儿 ，很多功能的入口可能都是隐藏的 ， 此时动效的作用就来了。其通过动效对功能的方向、位置、唤出操作、路径等进行暗示和指导 ，以 便用户在有限的移动屏幕内发现更多功能。譬如说 ，iO S7锁屏界面的动效提示用户向右滑动 ；百度 手机输入法的熊头菜单滚动提示用户翻页 ；微信的朋友圈引导用户一步一步操作。 4 层级展现 随着移动应用越来越复杂 ，承载的功能越来越多 ，原来的三层结构原则已经不能完全适用 ，合理清 晰的结构层级对用户理解应用 使用应用有着至关重要的作用。具体的方式为 ：通过焦点缩放、 覆盖、滑出等动效帮助用户构建空间感受。就像iO S7一样 ，通过动效上来构建了整个系统的空间 结构 ，A ppf low的页面跳转也是同样的道理。 5 增强操纵 一些动效通过动效对现实世界的模拟并且不需要任何提示 ，迎合用户的意识认知。使产品的交互方 式更接近真实世界。用户通过对现实世界的认知来理解动效 ，增强了用户对应用的操纵感 带入感 。像Paper的设计 ，可以让用户感觉到纸面的翻动 ，再如iO S中删除的动效 ，一阵雾霾散去。 6 创新体验 随着大家对设计越来越重视 ，大家的体验越来越趋于统一水平范围内的时候 ，体验的差异化就越来 越小。那在可用性良好的前提下 ，通过细节设计和交互方式创新为产品增加亮点 ，可以带来更惊喜 的体验和表达产品的气质与态度 （X格 ）。注意 ，是可用性良好哦。最近出现的Fa eboo k Paper的 亮点就不少。 说到动效 ，就一定要说时间 ，动效对于某些等待页面的体验提升是尤为重要的 ，下面我们来看看那 些等的设计 ： 关于等待的讨巧设计我们主要有下面几种方式 ： 1 界面先行 界面先行就是在业务动作未真实完成之前 ，界面先进入到完成/进行状态 ，以弱化用户的等待 烦躁 。譬如说发短信 ，编辑短信后点击发送后 ，短信内容会直接进入到对面界面中 ，事实上短信并没有 发送完成 ，这便是典型的界面先行。再如某些进度条 ，点击下载后 ，界面会先很快的走一部分 ，然 后再慢慢的进行 ，那前面走的一部分也属于动效。再如你看视频时点击收藏、浏览器中加载网页的 进度条 ，这都是界面先行的典型应用。 2 资源代替 你是否还记得之前在PC端google图片的时候 ，先加载出来的都是模糊的图片 ，而后慢慢变清晰 ？ 那这种资源替换的方法在移动端的应用也是非常广泛 ，通过先加载低质量的图片 ，而后加载清晰资 源的方法。 3 趣味吸引 这种方法由来已久 ，通过有趣的内容来分散用户的注意力