2017 Material Design中文完整版:第二章节第六节《动效:富有创造性的定制方案》

2年前发布

翻译文章 / 多领域 / 教程
D27_ 翻译,如需商业用途或转载请与D27_联系,谢谢配合。

【站酷首发】10大章79小节重译!半年心血只为让更多人正确认识、学习MD。由于单篇文章字数限制,全文将分为N篇文章陆续发布。

六、富有创造性的定制方案(Creative customization)    

动效可以应用于不同的对象尺寸和不同的环境,这有助于设计美感和功能的统一。


icon的类型

系统icons可以有双重功能。


产品icons应该设计得精致、美观。

9656594bd13ea8012193a306ddaf.jpg


- Icons  

系统icons

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

5bb059454538a8012193a354bc9a.jpg

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


e31e59454558a8012193a330936f.jpg

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


9b545945456aa8012193a39a3f15.jpg

如图,当按下浮动按钮(FAB),加号标志变化成了铅笔标志。这表明当前铅笔是主要的创建方法。


产品icon

当用户打开应用时看到的应该是设计精致、活泼的产品icon动效。

41e159454596a8012193a3710894.jpg

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


492f594545c4a8012193a321c07b.jpg

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


441e594545e1a8012193a3a72561.jpg

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


2bf4594545faa8012193a37b8168.jpg

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


- 插图

一些图像和插画的小动画能够给用户带来愉悦的视觉体验。

d8695945460da8012193a3607f9c.jpg

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


65255945462aa8012193a3bf1412.jpg

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


03385945463ba8012193a3e2a91d.jpg

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


d3d559454678a8012193a32f9ab0.jpg

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


31
- 0位推荐设计师推荐 -

    文章信息

    • 文章标签

    没有新消息