9.2 形状与层级

形状和层级

形状可以将注意力引导至重要元素，并表示表面之间的关系。

目录

形成层级

表面关系

形成层级

独特形状

独特的形状与其周边组件、内容都不同，在整个UI中也都比较明显，它们的形状强调了它们的重要性，有助于吸引用户关注。

正确示例

通过与其它形状的对比来突出。这个浮动操作按钮的圆形形状使之在周边的矩形组件中脱颖而出。

错误示例

一个形状在置于相似形状中时不大可能会明显。这个浮动操作按钮与其它元素形状相同，很难被找到。

表面关系

通过形状关联表面

形状可以帮助用户理解材料表面间的关联性。

相似表面

相似的形状表明这些表面属于同一类别，例如有类似尺寸和圆角的卡片集。

相关表面

表面间的相关性可以通过使用类似箭头的形状来表示，以“指向”其它表面。例如，带方向箭头角的菜单能指向相关表面。

单独表面

形状可以强化表面间的独立性。例如，当一个独特形状显示比另一个表面层级高时，它强调了这两个表面的区别。

            

正确示例

曲线角强调了白色面与其后面紫色面的独立性

正确示例

形状有助于突出右下角小表面与其下层面的区别

正确示例

这些有着相似的形状和规格的卡片表示它们都属于同一类别

正确示例

菜单上那个唯一不同的尖角指向了其父层面

错误示例

不要使用实际没有，但又隐含关联性的形状。上图对话框的形状暗示它与其下层右边的卡片有关系。

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