通过 UI 设计自定义外形来展示品牌个性
作者 / Dave Chiu, 前 frog 设计师，现 Google Material Design 设计师
当设计师在 UI 系统中尝试传递品牌信息和组织信息架构时，他们通常会采用熟悉的颜色、排版和图像系统。但今天我们要聊一聊被不少设计师遗忘的设计元素——形状。
无论是按钮，还是卡片、文本字段、菜单和悬浮操作按钮 (Floating Action Button, FAB)，每个界面元素都避不开形状的存在。现在，我们在 Material Design 指南的最新部分中专门列出了在 UI 中使用形状的最佳实践案例。下面我将向您说明，应该如何利用形状来强化品牌形象，提升品牌关注度，同时还照样能支持各种互动操作。
在 Material 中使用自定义形状
https://material.io/design/shape/#shaping-material
形状可以强化您的品牌
在 UI 设计中如果涉及到形状，请通盘考虑这个形状在整个应用中的品牌表达能力。形象较为有机或友好的品牌可能会选择圆润的形状，而具有几何风格或希望进行精确表达的品牌则可能会选择更有棱角的形状。例如，Shrine 会在其 UI 中使用尖锐的切割线来暗合其棱角分明的钻石型 Logo。
形状也可以强化层次结构
您可以明确地使用形状的强烈差异来引导用户的注意力。例如，如果 UI 主要采用圆形形状，这时采用锐利的菱形按钮就可以引起用户对该组件的关注。事实上，在 Material Design 中，位于矩形卡片上方的圆形 FAB 这种组合本身就是一个 "引起用户注意" 的例子。当然，也可以进行反向思维——如果您在视觉层次结构中使用更加和谐的形状组合，就可以在不同的元素之间形成关系，例如通过相似但圆角程度不同的矩形的叠加来阐述相关性——Backdrop 组件的设计正是使用了这一方法。
△ Backdrop 组件，矩形的实色背景和前景中的圆角矩形暗示了前后两层结构的相关性。
形状也能暗示互动操作
还有一种更为策略性地使用形状的方法——用于暗示交互操作。使用不同的圆角半径以说明控件的状态，这种技巧可以配合其他元素的动画来使用，比如使用图标、更改透明度或更改尺寸本身——例如，在没显示完整的控件顶部使用两个圆角，会意味着这个控件可以继续向上拉起，而方角则说明所有内容均已在当前屏幕显示完毕。然而请注意，不要仅仅依靠形状来传达交互涵义，因为这个视觉语言体系还不够标准化，所以请记得配合其他视觉元素的动画来进行设计。
创造出独属于您的形状
考虑您的品牌属性。哪些核心形状体现了您品牌的个性？以此为起点，开发一系列互补的形状。您的核心形状是偏向圆润的吗？请尝试将圆角卡片与引人注目的胶囊形状的扩展 FAB 配对。您比较偏爱使用棱角？那么请考虑在按钮和底部控件上斜切一刀，从而让棱角更多地出现在用户的视野中。
仔细考虑 UI 的层次结构，以及如何使用形状才能引起用户对屏幕相应部分的关注 (比如在方形内容中使用圆形的 FAB，就能让用户的注意力集中到 FAB 上)。
在整个应用中始终如一地使用这些形状，这样您对形状的选择对您的用户才有意义。如果您对形状的使用不一致，则可能让用户感到困惑。同时也不要滥用形状，过度使用会削弱您的品牌表达。此外，请确保纯粹的装饰性形状看起来不具有功能性或互动性，并且用于传达意义的形状是明确而没有歧义的。
此外，别忘了与用户一起测试您设计出来的视觉与交互系统。形状本身的含义可能并不明确，您最好为它搭配上图标或文本，以便传达出明确的含义。说到底，让用户进行测试才是最好的办法，您可以用它来确定形状的预期用途是否有效，用户理解形状的方式是否符合您的预期。
形状在设计中的未来
与现有的设计系统 (如字体和颜色) 不同，形状在 UI 中的应用没有明确定义的规则，这也是本文中反复强调 "不要单独利用形状传达交互意图" 的原因。我们希望大家都能在实践中活用形状，并与更成熟的 UI 设计模式结合使用，从而找到与用户进行沟通的最有效方法。如果您的设计工作中有好的经验或者有任何疑问，欢迎在评论中和我们分享。
推荐阅读