Material Design Understanding motion 动效指南

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

动效使UI富有表现力并易于使用。

目录

原则层级反馈与状态用户教学转换剖析连续性表达

原则

信息化

动效表明了元素之间的层次关系、可用操作以及执行结果。

聚焦性

动效将注意力吸引到最重要的事情上,不造成非必要的干扰。

表现力

动效给用户的使用过程增添了乐趣,为普通交互添加了色彩,彰显了品牌的个性与风格。

层级

动效通过表现不同元素之间关系来引导用户。

动效反映了父元素(收信箱)与子元素(邮件)的层级关系

动效关联了菜单图标与其打开的状态

动效表现了同类之间的层级关系。

反馈和状态

动效提供了用户操作的及时反馈与状态。

动效确认了按键的输入并反馈操作是否成功。

动画占位符UI表示内容正在加载中。

动效明确了项目被选的时刻以及释放后的结果。

用户教学

动效表明了执行操作的方式并提供了有效的引导。

动效表明怎样使用滑动手势来完成操作。

动效表明了已选项目的位置。

个性

动效为交互增添了个性和亲和力。

动效创造了优雅的第一印象。

个性动画给意外的错误增添了一个充满想象力的感觉。

转换剖析

在转换过程中,变化的UI元素被归类为退出、进入或固定元素。元素所属类别会影响它的转换方式。不转换的UI元素被归类为静态元素。它们在转换中不扮演任何角色。

固定元素固定元素的转换,例如导航图标,从开始到结束时都在界面上。退出元素退出元素,例如标题,通过淡出的方式退出界面。进入元素进入元素,例如每一个操作项,通过淡入进入界面。静态元素静态元素,例如溢出菜单,不发生转变。

连续性表达

动效以平稳、不间断的方式引导用户的注意力。当UI外观改变时,动效在转换前后给元素的位置和外观提供了连续性。

连续性使用以下一种或多种方法来实现:

补间动画淡入淡出共享转换

补间动画

补间动画表示随着时间推移,应用在组件或元素上流畅变化的过程。例如,开关可以通过补间位置动画来在界面上平滑移动;浮动操作按钮(FAB)可以通过大小和圆角半径补间动画转换成卡片。

补间动画可以使用在具备一系列中间值的特性上(比如颜色,有连续光谱)。例如,通过显示中间颜色(如紫色),可以将颜色从红色渐变到蓝色。

补间动画不能应用到没有中间值或状态的UI上。例如,布局中的栏都是整数(如1或2),没有任何中间值。

浮动操作按钮通过补间位置、大小、海拔、颜色和圆角半径的动画转换成界面,补间动画也适用于黑色透明遮罩。

淡入淡出

淡入淡出是指对元素的透明度进行渐变。即使元素属性没有中间状态,淡入淡出也可以创造出平滑的转换。例如,图片可以通过降低不透明度来显示另一个图像,以达到转换的目的。

溶解

溶解可在彼此完全重叠的元素之间创造平滑过渡,例如卡片或其它容器内的照片。前景元素以淡入(出现)或淡出(消失)来隐藏或显示其后面的元素。

元素淡出以显示隐藏其后的另一个元素。

交叉溶解

交叉溶解包含两个元素同时变换:一个淡入,同时另一个淡出。它描述了在部分转换期间同时显示的两个元素,以及它们后面的任何元素。多个表面的重叠可能会引起注意力分散。

两个元素同时淡入淡出时,在转换期间可同时看到彼此。部分背景会穿透显示。

完全淡出

完全淡出是指在新元素淡入之前,原元素完全淡出。这些转换可以应用于文本、图标,以及其它没有完全重叠的元素。这个方法允许背景在转换期间显示,并且当与共享转换结合时,它还能提供界面间的连续性。

两个元素按顺序淡入淡出,在任何时候都不会同时显示。

共享转换

共享转换是指同步元素动作以加强连续性。例如,如果浮动操作按钮突然显示一个不同的图标,则可能会导致注意力分散。当图标在运动时,共享转换可以平滑地展示变化。

浮动操作按钮图标的突然切换浮动操作按钮图标在运动中平滑地切换

原文地址:Material Design

译者:招财鱼

人已赞赏
UI设计

关于产品体验日记(下)

2020-10-13 0:04:32

UI设计

如何建立新零售行业有效的体验组件库

2020-10-13 0:04:34

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