Material Design Shape as expression 形状表达

这是一个翻译系列,原文是谷歌18年所出的材料设计指南(文末有链接),强大的材料设计将带我们一起深入了解UI设计中的所有规范。每周会更新数篇,一共百余篇,欢迎关注哦。

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

目录

状态表达品牌表现

状态表达

形状与含义

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

形状和交互

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

非交互形状

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

Material Design Shape as expression 形状表达插图

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

Material Design Shape as expression 形状表达插图1

Material Design Shape as expression 形状表达插图2

Material Design Shape as expression 形状表达插图3

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

明确用户操作(例如选中或收藏)与角形状的关联方式删除折叠形状,但是保持角度,降低折叠形状的交互性

Material Design Shape as expression 形状表达插图4

表现品牌

形状与品牌表现

用形状表现品牌

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

混合形状

当用形状表现品牌时,应避免形状:

包含交互表达不明确状态干扰可用性

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

过度使用形状

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

Material Design Shape as expression 形状表达插图5

Material Design Shape as expression 形状表达插图6

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

Material Design Shape as expression 形状表达插图7

Material Design Shape as expression 形状表达插图6

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

Material Design Shape as expression 形状表达插图8

Material Design Shape as expression 形状表达插图9

原文地址:Material Design

译者:招财鱼

人已赞赏
UI设计

Material Design Shape and motion 形状与动效

2020-10-13 2:05:14

UI设计

Material Design Shape and hierarchy 形状与层级

2020-10-13 4:04:38

0 条回复 A文章作者 M管理员
    暂无讨论,说说你的看法吧
个人中心
购物车
优惠劵
今日签到
有新私信 私信列表
搜索