Material Design About shape 形状指南

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

材料表面可以以不同的形状来显示。形状可以直接吸引关注,识别组件,传达状态,展现品牌。

目录

塑造材料

形状和意义

形状和组件

形状自定义工具

塑造材料

关于形状

默认情况下,材料表面是具有4dp圆角的矩形形状。材料的形状可以通过调整其以下内容实现:

转角及其曲线边角及其曲线

形状变化的大小可以是细微的,也可以是显著的。

nl1lgha5sz3.png插图

默认的材料形状可自定义。

用法

强调

由于独特形状十分突出,它们可以将用户的注意力直接吸引到屏幕的不同部分。

eoqo0xwzpo2.png插图(1)

这个圆形的浮动按钮加上弯曲的底部应用栏的组合,使得这部分与其他位置的矩形形状相比脱颖而出。

识别

形状为用户提供了一种识别组件和不同材料界面的方法。

4og5qnu2y52.png插图(2)

这些入口图标可以通过使用一致的形状来识别。

状态

你可以通过使用该组中其余的元素或界面的不同形状来传达元素状态的改变。当使用形状来指示状态更改时,请在相同情况下始终使用该状态。

fofhmfoqtnr.png插图(3)

当卡片被选中时,该卡片通过改变形状来表示其被选中的状态。

品牌宣传

要在整个应用程序中传达品牌的视觉语言,可以以一致的方式将形状与其他自定义方式(如颜色)结合使用。应用程序中通过战略性地微调形状,有助于提升品牌的整体形象。

5k1fno2qu21.png插图(4)

在这一应用中使用统一的形状有助于展现其品牌。

展示形状

当表面边缘与其背景具有足够的对比度时,形状应可见。默认情况下,Material Design通过阴影显示表面边缘使其增强可见性。显示表面边缘和形状的其他方法可以与阴影结合使用,或者单独使用,例如颜色填充和不透明度。

w5y2gp2mpav.png插图(5)

形状和意义

传达的意义

形状可用于反映一个明确的目的或意义。当单独的表面形状不足以表明的时候,使用文本或者图标有助于加强所要传达的意义。

jnz5sp2wyz3.png插图(6)

q1ryxez3xlt.png插图(7)

此处的菜单有个箭头形状的角指向了抽屉导航,这一形状强化了组件之间的连接。

xvxvduxapir.png插图(8)

r0nc4wi12mb.png插图(9)

不要以不明确的方式使用形状。此处取消按钮的标签文本暗示它将使用户返回到流中的前一个点,但其箭头形状却指向了前方,就像它要继续流程一样。

形状和组件

塑造组件

形状既可以帮助用户识别组件,又可以影响组件可用性。组件形状可以改变的程度取决于:

是否组件需依赖其形状进行识别是否组件需符合人体工程学要求,如最小触摸目标尺寸等

jxnvcklbu54.png插图(10)

r0nc4wi12mb.png插图(9)

不要用使组件无法识别的形状。

upuky2gyoby.png插图(11)

r0nc4wi12mb.png插图(9)

组件不要使用会干扰用户输入能力的形状。此处按钮的问题在于触摸目标太小。

sci2vrazhmq.png插图(12)

r0nc4wi12mb.png插图(9)

组件不要使用无法识别的形状。此处的附件、添加、发送等按钮与上方的小卡片形状相似,使得用户难以区分这两个组件。

形状自定义工具

材料形状自定义工具可用于为各种单个组件生成不同的形状。

组件根据其相对大小分为三类。每个类别的组件将采用分配给该类别的形状值。或者单个组件的角也可以独立于该类别的值而独立成形。

lxb2rizxp1i.png插图(13)

点击此处前往原网站体验形状自定义工具

原文地址:Material Design

译者:杜雅黎

人已赞赏
UI设计

聊聊加载等待的那些事之“进度指示器”(原则篇)

2020-10-13 4:04:39

UI设计

产品体验设计-交互篇(三)

2020-10-13 18:06:11

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