Material Design Choreography 编排

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

转换动效编排是一个协调的动作序列,可以在界面变化同时保持用户的关注焦点。

目录

排序转换使用焦点元素

排序

动画序列

动画序列是指不同部分中动画的出现、开始移动和停止移动的顺序。好的序列可以让人容易理解屏幕上的变化、是否添加或删除了元素,以及给接下来的重点交互增加焦点关注。

简单序列

简单序列统一移动所有的元素,例如底部动作条的扩展。

这个底部动作条采用标准缓动向上滑动来显示更多的选项。所有动画细节(包括颜色和位置)都会同步启动和停止。

复杂序列

复杂的转换,例如查看联系人列表详情,需要更多复杂的序列。这可以将转换分成两部分来完成,分割点是元素移动最快的时候。每个元素可分成四类:转入、转出、固定和静态。

第一部分:转出元素消失第二部分:转入的元素出现整场转换:固定元素转换

标准曲线的峰值速度是在整个时长30%的点上。转出元素消失时间约为90ms,转入元素出现时间约为210ms。

整场曲线显示固定元素的缓动。转出曲线显示转出元素的缓动转入曲线显示转入元素的缓动

转换

简单转换

简单转换包含从一个状态转为它的下个状态时所有属性的补间动画。

这个简单转换显示了开关组件在其位置上从左向右移动,以及颜色上从白色渐变到紫色。

复杂转换

复杂布局的变化使用共享转换来创造从一个布局到下一个布局的平滑转换。元素组合在一起作为一个单元进行转换,不要分开独立进行,以避免多个转换重叠和分散注意力。

组合元素随着淡入淡出转换而同时变化。分组元素消失,然后再次出现作为最终界面。

xrccrnnfjme.png插图

尽可能减少独立移动元素的数量。组合元素的转换通过引导注意力来提供连续性,独立元素则淡入或淡出

r2w14p2ngnc.png插图(1)

不要在多个相互关联的元素上分别使用动画。多个独立元素的移动会竞夺注意力,从而分散焦点。

r2w14p2ngnc.png插图(1)

不要让UI跳跃或突兀地移动,这会让它难以保持焦点状态。

使用动画容器进行转换

在转换期间,当一组元素被明确定义的边界所包含时(如卡片或分隔线),将使用容器转换。内部元素组保持纵横比,用缩放来适应容器宽度。该组可以被容器底部边缘剪裁。

对组和它的容器创建连续性动画。该组使用缩放匹配容器的宽度。扩展时,除了底部边缘外,元素都不会被裁剪。

不含动画容器的转换

当一组元素没有被明确定义的边界所包含,或它的容器不能运用动画时,共享转换可以创建平滑过渡。例如,浮动操作按钮里的一对图标可以通过一致的旋转来创造连续性。

图标使用顺时针旋转变换。

转入和转出元素以组的形式上下移动,与纵向步进器一起移动。

使用焦点元素

转换可包含焦点元素,该焦点是一个对结构层次重要且有补间的固定元素。与动画容器一样,焦点元素通过表面无缝转换来增强连续性。

标题图像是焦点元素,在折叠和扩展页面互相转换时,从开始到结束都保持可见。

焦点元素冲突

一些转换将焦点元素放置在其它元素的路径中。在这些情况下,应避免使用焦点元素默认转换,可让元素消失后再重新出现。

vdpz21ldwx4.png插图(2)

当焦点元素与动画中的其他元素重叠时,会产生无序的转换。

xrccrnnfjme.png插图

为了简化重叠动画,可以考虑对焦点元素使用淡出淡出转换。

分组焦点元素

当转换同时包含焦点元素和无法统一移动的动画容器时,可将转换元素分组。

例如,卡片转换可以将以下动效组合在一起:

带有焦点元素的折叠布局带有容器(例如卡片)的扩展布局

xrccrnnfjme.png插图

将元素组合在一起,以便它们在容器内能尽可能少地移动。上图所示折叠布局与焦点元素(略缩图)组合,同时扩展的布局与容器(卡片)形成一组。

原文地址:Material Design

译者:招财鱼

人已赞赏
UI设计

手机端主按钮应该放在那里?

2020-10-12 20:04:33

UI设计

今天,我对标签的理解,透了!

2020-10-12 22:05:56

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