这是一个翻译系列,原文是谷歌18年所出的材料设计指南(文末有链接),强大的材料设计将带我们一起深入了解UI设计中的所有规范。每周会更新数篇,一共百余篇,欢迎关注哦。
形状可以用来表达元素状态或者表现品牌。
目录
状态表达品牌表现
状态表达
形状与含义
形状可以传递出元素的很多东西,包括当前状态、交互结果以及其它应用内的变化。当运用这些方式时,形状应使用统一的状态和交互,特定形状对应特定的情况。
形状和交互
为了给特定形状赋予含义,形状可以在用户初始操作或者状态发生变化后而改变。例如选中时改变形状、采用带图标的形状或使用其它交互来强调形状的含义。
非交互形状
如果一个形状没有交互,应避免使用过大的形状而导致看起来可交互。例如,卡片上的一个小矩形,如果它不能被点击的话,不能设计太大而被误以为可以点。
形状改变应与用户交互或其它明显的因素有清晰的关联。此列表项经过滑动手势而发生形状变化,最终使左上角变为圆角。
使用多种不同形状会混淆状态表达和品牌表现。这些折角没有说清楚卡片是被选中了,收藏了,还是仅仅用来表现品牌——因为卡片能表示所有这些情况。为明确含义,应选以下之一:
明确用户操作(例如选中或收藏)与角形状的关联方式删除折叠形状,但是保持角度,降低折叠形状的交互性
表现品牌
形状与品牌表现
用形状表现品牌
使用形状与其它自定义项(如颜色、字体等)一起建立品牌视觉语言。相似的形状有助于统一整个应用的品牌表现。你的应用可以在其表面、组件和元素上使用形状集——一套相似的形状(例如圆的多种椭形变化,或大小不同但角度相同的圆角)。“形状集”中的风格,例如有机或几何形状,应与品牌特性相匹配。
混合形状
当用形状表现品牌时,应避免形状:
包含交互表达不明确状态干扰可用性
混合多种不同的形状风格、样式,会导致难以辨识特有的品牌形状。
过度使用形状
为表现品牌而过度使用形状会降低它的意义,形状也因此变得普通和泯然。
产品形状的统一有助于建立品牌视觉语言。这个产品的组件使用了基于其logo(1,2)的形状。
这个产品的组件使用了基于其logo(1,2,3)的几何形状。
原文地址:Material Design
译者:招财鱼