Material Design Shape and motion 形状与动效

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

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

目录

用法形状变形内容显示

用法

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

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

形变可影响到:

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

ins3n3ytgfm.png插图

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

ins3n3ytgfm.png插图

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

形状变形

形状变形

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

尺寸

ins3n3ytgfm.png插图

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

ins3n3ytgfm.png插图

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

伸展和收缩

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

ins3n3ytgfm.png插图

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

q0fcuola01l.png插图(1)

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

调整形状大小

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

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

转换形状

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

4suofyi35nb.png插图(2)

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

内容显示

内容可见性

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

ins3n3ytgfm.png插图

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

2sq3gcjr3ah.png插图(3)

baklfxgyvqq.png插图(4)

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

默认形状

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

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

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

空间最大化

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

ins3n3ytgfm.png插图

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

q0fcuola01l.png插图(1)

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

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

关注焦点

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

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

原文地址:Material Design

译者:招财鱼

人已赞赏
UI设计

砂之船奥莱数字化零售项目

2020-10-13 2:05:13

UI设计

Material Design Shape as expression 形状表达

2020-10-13 4:04:37

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