Material Design Animated icons 动画图标

这是一个翻译系列,原文是谷歌18年所出的材料设计指南(文末有链接),强大的材料设计将带我们一起深入了解UI设计中的所有规范。每周会更新数篇,一共百余篇,欢迎关注哦。

目录

用法转换状态主题

用法

动画反映了图标的动作,并增加了优雅和愉悦感

每个图标动画都与其视觉设计和执行动作相一致。

转换

转换将动画图标的两个视觉状态连接起来。两个图标之间的转换过渡表示它们已有关联,按下一个图标可激活另一个图标。

转换表明了两个图标间的关联性

转换用于图标间的切换,比如开关状态

强调

动画图标转换可根据优先强调的等级来选择使用简单还是复杂的动效。

不突出的图标使用简单通用的动效app中的重要图标可以使用复杂的动效来强调

简单

在不需要强调的图标上使用通用的动效。淡入淡出、缩放或旋转都是图标间转换的简单方式。

复杂

细腻的动效能吸引注意并给重点图标增添趣味。

当功能比样式重要时,使用简单图标转换。图标退出时使用简单淡出,进入时使用淡入,按比例细微扩大

细腻的图标转换用于重要的UI元素,例如音乐app中的控件

时长

图标动画越复杂,持续的时间就应该越长,以避免产生仓促感。为了在应用程序中保持一致性,应对类似复杂程度的图标使用相同的时长。大部分图标适合以下三组推荐时长:

简单图标动效:100ms一般图标动效:200ms复杂图标动效:500ms简单:100ms一般:200ms复杂:500ms

交错延时

图标集可以使用交错延时来表现进入的流动性。它们从左到右推动,给人一种前进感。

应用栏的图标从左到右使用交错延时的方式进入。

状态

图标动画可以用来强调状态变化。

图标使用动画来表示它们因被选中而改变了状态。

主题

动画应该反映主题风格。

这些图标动画的灵感来源于品牌logo和加载状态动画。

图标动画logo动画加载动画

原文地址:Material Design

译者:招财鱼

人已赞赏
UI设计

产品体验设计-交互篇(三)

2020-10-13 18:06:11

UI设计

Material Design System icons 系统图标

2020-10-13 18:06:13

0 条回复 A文章作者 M管理员
    暂无讨论,说说你的看法吧
个人中心
购物车
优惠劵
今日签到
有新私信 私信列表
搜索