Material Design Shape and motion 形状与动效

经验专区 APP设计 Material Design APP设计 2020-05-12 02:08  浏览 :608

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

 

元素可以通过形状改变来响应内容变化或用户交互。

 

目录

用法
形状变形
内容显示

 

用法

变形是将一种形状变为另一种形状的行为。形状可通过变形来响应内容状态的改变或作为用户交互的结果。例如,当移动设备由纵向旋转为横向时,界面会通过改变尺寸来响应,从而引起形变。

很多原因会引起形状变化,例如界面尺寸改变而同时要保持视觉语言一致,或选项被加入已选集合中的时候。

形变可影响到:

  1. 元素的突出性
  2. 元素的人体工学
  3. 特定形状的含义
  4. 界面表达品牌视觉语言的效果
  5. 元素间的关系

形状通过变形来响应UI中的变化。这个底部应用栏在浮动操作按钮进入时产生了形变。

 

可通过改变尺寸来反映状态变化。当朝一边延伸时,表面拐角仍保持着曲线状态。

 

形状变形

形状变形

当表面大小改变时,它的形状可保持原有的位置或尺寸,可以拉伸或收缩。形状也可以在两个不同的形状间变形。

 

尺寸

形状可以在形变时保持原始尺寸和位置。示例界面中,形状(B)相对旁边的(A)保持了原有的尺寸和位置,而另一边的(C)则发生了拉伸变化。

 

表面可以通过改变尺寸来保持形状。当宽度改变时,该表面的部分高度(A)也同时发生变化,使斜率保持一致。

 

伸展和收缩

形状可以通过伸展和收缩来响应表面尺寸的变化。改变形状时应该保持其特定的形态比例。

当这个表面伸展时,因为其独特的圆角比例不变,即便部分尺寸有变化,它的形状仍然可以识别。

 

拉伸或收缩表面时,应避免形状扭曲。由于拉伸,该表面的比例和圆角发生了变化,从而切断了开始与结束状态的关联。

 

调整形状大小

调整大小时应保持特殊形状的纵横比,避免扭曲。

圆角半径在它移动和变形时保持原始的纵横比,遵循了视觉语言的一致性。

 

转换形状

一个形状可以转换成不同的形状。

相似形状间的转换过渡相对平滑。不同形状在转换过程中可能会出现不和谐状态。

 

内容显示

内容可见性

当表面变形时,上面所有的内容都应该可见,没有被遮挡。

形状组件应通过调整尺寸来适应内容变化,同时保持形状不变。

 

变形时不要将内容与表面分离。这个顶部应用栏的形状导致操作图标被切开。

 

默认形状

默认情况下,材料表面都是矩形。它们可以从矩形转换成其它形状,反之亦然。例如,圆形浮动操作按钮可以变成矩形菜单,然后返回成原本的圆形状态。

矩形将滚动内容的可用空间最大化,并且与其它矩形面相混合。通过这种方式来突出内容。

当使用默认矩形时,可以添加一个提示(例如形状中收起或展开图标(加号))来表明转换方式。

 

空间最大化

矩形能最大化空间来适配内容

圆形浮动操作按钮转换为矩形菜单,是匹配内容的最大空间。

 

扩展后选择适当的形状,可使内容以最佳方式呈现。这个圆形菜单不能有效地显示内容,因为它保留了浮动操作按钮的圆形形状。

 

当这个弧形动作条转换成默认矩形时,空间已最大化来显示列表内容。

 

关注焦点

矩形表面与其他矩形相混合可以用来强调内容。

当背景后层处于激活状态时,前层默认形状(矩形)会降低突出性,使用户的注意力集中到背后的过滤选项上。

 

原文地址:Material Design

译者:招财鱼

 

文章:andoo50 丨女 | 经验专区

全部评论 (4)
suoer1
1楼 · 2020-05-12 02:31

转发了

hzs6881
2楼 · 2020-05-12 02:37

谢谢分享

无事忙111
3楼 · 2020-05-12 02:37

转发了

dingdong819
4楼 · 2020-05-12 02:36

转发了

回答366 文章6 提问376
更多Ta的文章
热门文章
最新问题

©2016-2019 所有权归属:小灶课堂 鲁ICP备15030858号-2