9.3 形状表达

形状表达

形状可以用来表达元素状态或者表现品牌。

目录

表达状态

表现品牌

表达状态

形状与含义

形状可以传递出元素的很多东西，包括当前状态、交互结果以及其它应用内的变化。当运用这些方式时，形状应使用统一的状态和交互，特定形状对应特定的情况。

形状和交互

为了给特定形状赋予含义，形状可以在用户初始操作或者状态发生变化后而改变。例如选中时改变形状、采用带图标的形状或使用其它交互来强调形状的含义。

非交互形状

如果一个形状没有交互，应避免使用过大的形状而导致看起来可交互。例如，卡片上的一个小矩形，如果它不能被点击的话，不能设计太大而被误以为可以点。

正确示例

形状改变应与用户交互或其它明显的因素有清晰的关联。此列表项经过滑动手势而发生形状变化，最终使左上角变为圆角。

错误示例

不要用过小而难以察觉的形状来表示状态。

错误示例

如果不具备交互性，不要使用过大而使其看起来像点击目标的形状来表示状态。

谨慎使用

使用多种不同形状会混淆状态表达和品牌表现。这些折角没有说清楚卡片是被选中了？收藏了？还是仅仅用来表现品牌——因为卡片能表示所有这些情况。为明确含义，应选以下之一：

• 明确用户操作（例如选中或收藏）与角形状的关联方式

• 删除折叠形状，但是保持角度，降低折叠形状的交互性

正确示例

使用一致的形状，每种形状只表达单一的含义。选中卡片的圆角形式有助于形状意义的表达。

谨慎使用

这个卡片集内的角形状不一致，不能确定每种形状代表的意义（例如不同的分组），或者说仅仅用于品牌表现。

表现品牌

形状与品牌表现

用形状表现品牌

使用形状与其它自定义项（如颜色、字体等）一起建立品牌视觉语言。相似的形状有助于统一整个应用的品牌表现。你的应用可以在其表面、组件和元素上使用形状集——一套相似的形状（例如圆的多种椭形变化，或大小不同但角度相同的圆角）。“形状集”中的风格，例如有机或几何形状，应与品牌特性相匹配。

混合形状

当用形状表现品牌时，应避免形状：

• 包含交互

• 表达不明确状态

• 干扰可用性

混合多种不同的形状风格、样式，会导致难以辨识特有的品牌形状。

过度使用形状

为表现品牌而过度使用形状会降低它的意义，形状也因此变得普通和泯然。

正确示例

产品形状的统一有助于建立品牌视觉语言。这个产品的组件使用了基于其logo（1，2）的形状。

正确示例

这个产品的组件使用了基于其logo(1,2,3)的几何形状。

正确示例

曲线角呼应了logo的颜色和曲线边缘，同时也不影响可用性。

错误示例

在使用形状来表现品牌时，不要降低组件的可用性。这个形状尺寸干扰了列表的可用性。

谨慎使用

单一形状的过度使用会使其沦为普通，也会降低显著性和减淡品牌印象。

错误示例

不要使用与产品形状集无关联的形状

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