Material Design Shape as expression 形状表达

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

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

目录

状态表达品牌表现

状态表达

形状与含义

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

形状和交互

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

非交互形状

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

yhgn1wt5zeb.png插图

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

a1rxspsdmzf.png插图(1)

4lm5u2f153n.png插图(2)

ckqiw0cigtw.png插图(3)

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

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

odxjhujkkwo.png插图(4)

表现品牌

形状与品牌表现

用形状表现品牌

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

混合形状

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

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

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

过度使用形状

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

kc5rhltwmls.png插图(5)

01uijzahzzl.png插图(6)

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

3cdclklomih.png插图(7)

01uijzahzzl.png插图(6)

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

bkuuvj3hxzm.png插图(8)

cyvpxiqkact.png插图(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管理员
    暂无讨论,说说你的看法吧
个人中心
购物车
优惠劵
今日签到
有新私信 私信列表
搜索