2017 Material Design中文完整版:第二章节第六节《动效:富有创造性的定制方案》
【站酷首发】10大章79小节重译!半年心血只为让更多人正确认识、学习MD。由于单篇文章字数限制,全文将分为N篇文章陆续发布。
动效可以应用于不同的对象尺寸和不同的环境,这有助于设计美感和功能的统一。
icon的类型
系统icons可以有双重功能。
产品icons应该设计得精致、美观。

系统icons
一个系统icon也许存在双重功能。举个例子,一个菜单icon可以平滑地变化到一个返回icon,反之亦然。这种双重功能间的变化动效有利于告诉用户当前按钮的功能。

如图,菜单icon和返回icon间相互变化说明两个icon间相互联系。当一个icon被触发,就会使另一个icon出现。

跟上图一样,开始icon和暂退icon间相互变化说明两个icon间相互联系。当一个icon被触发,就会使另一个icon出现。

如图,当按下浮动按钮(FAB),加号标志变化成了铅笔标志。这表明当前铅笔是主要的创建方法。
产品icon
当用户打开应用时看到的应该是设计精致、活泼的产品icon动效。

如图,当用户第一次打开收件箱应用的时候会展示其icon动效,展示完成后会提示用户登陆。

如图,当日历应用的用户日历数据第一次被加载的时候会展示其icon动效。

如图,当用户第一次打开照片应用的时候会展示其icon动效。

如图,当用户第一次打开Gmail应用的时候会展示其icon动效,展示完成后会提示用户登陆。
- 插图
一些图像和插画的小动画能够给用户带来愉悦的视觉体验。

如图,当应用出现意外错误的时候,可以使用这些小动画,它能够取悦用户并以此减缓用户的焦虑。

如图,该应用正在为用户规划目标。在等待规划的页面上有个自行车的小动画,这个动画不仅能够愉悦用户还能减轻用户因等待而产生的焦虑感。

如图,当用户完成个人目标的时候出现动画奖励。这样做能为产品带来更深层次的用户体验。

如图,动画作为一种令人印象深刻的教育方式,能够帮助用户去学习产品的新功能。






































