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

 

动效可以通过自定义来表现独特的风格和个性。

 

目录

自定义选项
速度
移动
排序
图标和插画
精简转换

 

自定义选项

个性

动效可以通过速度、移动、排序、图标和插画以及收缩转换来自定义。

自定义动效要符合预计的氛围与风格。例如,一个好玩的app可以使用震荡或拉伸效果来营造有趣且吸引人的场面。

使用与app风格相匹配的动画。这个动画logo和卡片振荡效果出现在用户操作的过程中。

  1. 动画插图
  2. 振荡

 

避免使用与风格相冲突的效果。延时交错与此app强调效率的风格迥异。浮动操作按钮的弹性动画和页面振荡对这款主打生产力的app来说过于活跃。

  1. 强调延时
  2. 动画图标
  3. 振荡

 

一致

应该统一运用动画自定义技术,并根据它们出现的场景进行细化。

例如,一个进入界面的元素使用了延时动画,那么此效果也应该统一运用在相似的场景中。

在所有类似场景出现的地方都使用同样的动画。此UI对所有的标签列表选项使用了相同的延时动画效果。

 

避免在类似界面出现明显不一致的处理方式。Bill中的列表使用了延时动画,而Budgets中的列表是作为一个元素在移动。

 

关键触发点

在用户使用过程中,自定义的关键点可以创建连接。

一个奖励用户完成任务的动画可以给应用带来趣味性。

 

频率

在增加自定义效果时要考虑动画的使用频率。自定义应该营造目标氛围,不要干扰用户完成任务。

系统图标动画应尽量精简,避免频繁使用而使注意力分散。

动画图标优化了底部导航栏。

 

过于频繁地使用高度自定义动画(例如屏幕启动动画)会让人觉得厌烦。可以通过仅首次启动时显示来降低使用频率。

Logo动画的高频率出现降低了用户体验。

 

速度

标准缓动

标准缓动适用于大部分转换。推荐用于帮助用户完成任务的转换中,例如基础导航。

标准缓动给了这个转换一个功能性的风格。

 

强调缓动

强调缓动会在动画快结束时加入强调效果。推荐用于放松或紧张等标准缓动难以表现的场景。

强调缓动可以用来烘托紧张热烈的气氛。

 

强调缓动可以用来表现放松和优雅的风格。

 

强调缓动比标准缓动加速更快,所以可以较慢地结束移动。

 

时长

减短动画时长会使其感觉更明显,增加动画时长能表达出放松的感觉。

时长超过400ms时,标准缓动可能会表现不佳,这时可以考虑使用强调缓动。

通过对默认时长的小幅调整可表达出特别的效果。将默认时长从300ms增加到350ms会形成一种放松的感觉,将其缩短到250ms则更加醒目。

 

避免对默认时长进行大幅度调整。例如将转换放慢到550ms就过于迟缓,加速到115m则会显得不和谐。

 

移动

运动轨迹

当元素变换时,它所移动的轨迹就称作运动轨迹。

默认的运动轨迹是直线。如果元素改变大小或沿对角线移动,则运动轨迹可能是直线或者弧线。

直线运动

直线运动产生简单的移动,适合大多数转换,这种移动极少分散注意力。

此卡片径直在折叠和展开状态之间转换。

 

这种变换产生了一个大对角运动,这与其它元素主要上下或左右移动不统一。

 

弧线运动

弧线模拟自然运动。它们适用于那些需要大幅调整表面纵横比的过渡。

底部动作条通过一个弧线运动轨迹流畅地转换成列表形式。

 

这个弧线轨迹穿过了它在Y轴上的静止位置。

 

弧度轨迹有两种可能方向,称为垂直输出和水平输出。垂直输出意味着沿着弧线的元素将以垂直运动来结束,水平输出则表明运动将以水平方向来结束。

通过扩展面的运动来确定要使用的输出方向。弧线应该与UI的主滚动轴吻合。例如,垂直滚动UI中的卡片将使用垂直输出展开。当卡片折叠时则运动相反,先垂直再水平。

沿滚动方向展开表面,然后反方向沿原始轨迹折叠返回。

 

不要使弧线运动与滚动方向产生冲突。

 

过冲

过冲是指元素运动超出了其停止位置,就好像被大力推动一样。过冲用于:

  1. 为滑动或滚动手势增加冲力感
  2. 强调重要或时效性信息
  3. 为小组件传达趣味和能量,如开关

过冲给滑动手势增加了冲力感,使其表现更加自然。

 

无过冲的手势感觉很机械。

 

将过冲应用到小组件可以增加趣味性。

 

此对话框使用过冲来强调入场。

 

振荡

多次使用过冲会产生振荡。每次额外前后移动都比前一次要小,直到运动停止。振荡可用于创建卡通风格。

使用振荡效果手势营造奇特有趣的氛围。

 

不要在强调功能和高效交互的界面中使用振荡。

 

拉伸

拉伸是指沿着单轴增加元素大小。简单的组件,例如开关和滑块,可以通过在它们移动方向上的拉伸来表现速度之快。拉伸可以在水平、垂直或者圆圈上移动时使用。

可以通过改变追踪边缘的延时来自定义拉伸,延时越长,追踪轨迹也越长。

上圆点延时:150ms

下圆点延时:350ms

 

水平和垂直移动可以使用拉伸。对角移动应使用淡入淡出来替代拉伸。

 

拉伸为步进选择指示器增添了个性。

 

该时间指示器在摆动到时钟上的新位置时使用了弧形移动。

 

避免拉伸非简单形状(圆形、矩形和圆角矩形)元素、对角线运动路径和非正圆曲线。

 

不要在普通UI组件上使用个性动画,这个浮动操作按钮的卡通样式会让使用此任务性应用时分散注意力。

 

海拔

海拔是指元素在Z轴上的位置。在转换时,可以对海拔进行动画处理来增加深度和层级感。

 

视差

视差是指靠近观察者的元素比远离的元素移动更快。视差可以用来表示元素的不同高度和表现深度。

视差使滚动时增加了深度感

 

视差表明了不同元素所处的位置

 

比例

尺寸缩小的元素看起来在后退,增大的元素看上去在提升海拔。

背景内容的收缩表明它在向远方移动。

 

排序

时间偏移

为强调一个元素,可相对于其他元素将其时长往后错开一点。例如,浮动操作按钮可以通过在其它动画都停止后再结束进场来加以突出。

浮动操作按钮动画比其它应用栏动画要长100ms,突出了FAB。

 

交错

交错指的是按顺序将时间偏移应用于一组元素,如列表。交错营造了瀑布一样的效果,让用户的注意力在每一个项目上都有短暂停留。它可以揭示重要内容或突出组内的功能。

使用交错效果可以优化重要的转换。当用户返回app时,交错使这个变换更加舒适和优雅。

 

交错暗示组里的每一张卡片都可以单独操作,这种交错动作鼓励与单个卡片进行交互。

 

避免在频繁交互组件上使用交错效果。同样的效果连续多次出现时,会产生无聊的效果并引起分心。

 

为提供焦点,元素应该使用短延时来交错,并沿着主轴移动。为了使效果更细腻,应按行或列而不是单个元素来延时。

项目从上到下延时以完成纵向滚动。

 

项目从左到右延时以完成横向滚动。

 

不要使用随机交错,会分散用户注意力。

 

避免在元素间增加延时效果。

 

图标和插画

图标、插画以及产品logo的细腻动画可以为用户体验增添优雅和趣味。

 

系统图标

动画系统图标就是添加了细腻动作设计的默认系统图标。它们有助于提升用户体验。

这些图标动画使细节增添了一丝俏皮感。

 

Owl是一个丰富多彩的教育应用,其图标设计表现出了品牌特色。

 

产品图标

动画产品图标使UI更加友好和优雅。

钻石logo的3D旋转增加了空间想象感。

 

logo动画经常从产品设计的形状、线条和图案中找到灵感。这个logo灵感源于纸张的卷曲轨迹。

 

logo动画可以参考一些与形状相关的行为。这个logo走入视野,反映了它所代表的鸟的动作。

 

logo可以使用角色动画来塑造特别的风格。

 

插画

动画插图给用户创造了一个愉快的瞬间。

当未知错误出现时,特色动画可以表达出共鸣。

 

插画可以指导用户选择通知设置。

 

精简转换

用法

通过使用较短的共享动作,转换可以被压缩和简化。例如,相对于通过补间动画来改变容器的大小和位置,列表转换使用淡入淡出的移动距离更短。

列表过渡使用了一个小纵向位移,而非大变换。

 

此列表和焦点元素通过补间大小和位置动画进行转换。元素移动的距离越大,吸引的注意力就越多。

 

大屏幕

精简转换减少了大屏幕(例如桌面显示器)上因移动而引起的混乱。

Web上照片间的精简转换

 

原文地址:Material Design

译者:招财鱼

 

转载请注明:学UI网 » Material Design Customization 自定义

登录收藏
 
你可能喜欢的:
Material Design States 状态Material Design States 状态
Material Design Selection 选择Material Design Selection 选择
从「科学方法」到「设计实践」 – 云产品设计师会梦见服务器么?从「科学方法」到「设计实践」 – 云产品设计师会梦见服务器么?
异常场景怎么处理?异常场景怎么处理?
UI设计交接给开发之后看起来更糟的7个原因,以及为什么这可能是你的错UI设计交接给开发之后看起来更糟的7个原因,以及为什么这可能是你的错
如何设计好一款APP的首页?如何设计好一款APP的首页?
B端品牌如何面向C端用户B端品牌如何面向C端用户
如何搭建一个易学性高可用性强的功能框架?如何搭建一个易学性高可用性强的功能框架?
盘点 | 4个成为标杆的超强体验设计盘点 | 4个成为标杆的超强体验设计
设计驱动案例-如何优化金融产品购买体验?设计驱动案例-如何优化金融产品购买体验?