9.4 形状与动作

形状与动作

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

目录

用法

形状变形

内容显示

用法

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

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

形变可影响：

• 元素的突出性

• 元素的人体工学

• 特定形状的含义

• 界面表达品牌视觉语言的效果

• 元素间的关系

       

正确示例

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

正确示例

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

形状变形

形状变形

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

尺寸

正确示例

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

正确示例

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

伸展和收缩

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

正确示例

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

错误示例

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

调整形状大小

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

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

转换形状

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

谨慎使用

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

内容显示

内容可见性

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

       

正确示例

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

错误示例

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

默认形状

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

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

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

空间最大化

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

正确示例

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

错误示例

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

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

关注焦点

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

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

*原文作者为谷歌设计团队，本文为个人翻译作品，仅供学习参考