9.1 形状指南

关于形状

Material表面可通过不同的形状来显示。形状可引导注意力、标识组件、传递状态以及表现品牌。

目录

Material变形

形状与意义

组件和形状

形状自定义工具

Material变形

关于形状

Material表面默认为带4dp圆角的矩形。它们的形状可以通过以下属性来调节：

• 顶角和曲线

• 边角和曲线

形状尺寸的变化可以很微妙也可以很显著。

默认的Material形状可以自定义

用法

强调

独特的形状会很显眼，因此它们可以将注意力引导至屏幕的各个区域。

这个圆形浮动操作按钮和曲线底部应用栏的组合在众矩形中很突出

标识

形状给用户提供了一种识别组件和区分Material表面的方式。

这些输入标签可通过一致的形状来识别。

状态

你可以通过使用组内其它元素或表面中的不同形状来表达元素状态的改变。当使用形状来表达状态改变时，相同情境下应保持一致。

卡片形状的改变表示已选中。

品牌

为了使整个app都能传达品牌视觉语言，可以统一结合形状与其它自定义属性（例如颜色）。有计划地将形状细节应用在app中，将有助于提升品牌形象。

app中形状形式的一致性提升了品牌表现。

形状可见

当形状表面边缘与其背景有足够的对比时为可见状态。默认情况下，Material Design使用阴影来突出形状以及表面边缘。其它表现方式还包括阴影、颜色填充、不透明度以及相互的组合等。

正确示例（绿色）

这个浮动操作按钮的填充色与其后表面上的内容产生了对比，使表面边缘和形状非常突出。

错误示例（红色）

半透明表面和白色使浮动操作按钮边缘和形状难以被察觉。

形状与意义

传递含义

形状可以用来反映特别目的或意义。当单独的表面形状有歧义时，可使用文本或图标来作为补充说明。

正确示例

此菜单有一个类似箭头的角指向导航抽屉，强调了这些组件的关联性。

错误示例

不要对形状使用会产生歧义的方式。这个取消按钮的标签文字表示它将返回至流程中的前一个状态，但是箭头形状按钮又标为前进，好像是要继续执行此流程。

组件和形状

组件变形

形状有助于用户识别组件和使用方式。组件能改变其形状的程度取决于：

• 此组件是否依赖形状识别

• 它是否有人机工程要求，例如最小触控尺寸

错误示例

不要使用难以识别的组件形状

错误示例

不要使用对用户输入组件有干扰的形状。这个按键的触控对象过小了。

错误示例

不要使用难以分辨的组件形状。这些按键与其上边的小标签看起来很相似，导致这两种组件难以区分。

形状自定义工具

Material形状自定义工具可以用来为多种组件生成不同的形状。形状的参数取值范围表（章节9.5中）说明了每种组件的推荐值范围。

组件基于相关尺寸可分为三类（小型组件、中型组件、大型组件）。链接到它们类的组件将继承对应形状的属性值。不过，单独组件也可以独立于它们的类别属性来定义角度数。

工具链接 https://material.io/design/shape/about-shape.html#shape-customization-tool

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