Material Design Shape and hierarchy 形状与层级

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

形状可以将用户的注意力直接吸引到重要的元素上,并且体现出界面之间是如何相互关联的。

目录

建立层次

界面关系

建立层次

独特的形状

独特的形状与周围的形状大不相同,这使得它们十分突出。拥有独特形状的组件能够在其他的组件之间、在围绕着它的内容中甚至整个用户界面中脱颖而出。它们的形状强调了它们的重要性,这有助于引导用户的注意。

atlcxhgrnzk.png插图

wwftaxlqpha.png插图(1)

通过与其他形状形成对比使该形状更加突出。此处浮动按钮的圆形造型,就使其形状在其他的方形组件中显得更加突出。

0m5ywfwdniy.png插图(2)

juwh2a5uz5i.png插图(3)

当组件被放置在相似的形状中时,无法使其突出。此处的浮动按钮与其他元素的形状相似,因此很难被找到。

界面关系

通过形状连接界面

形状可以帮助用户理解Material界面是如何相互关联的。

相似的界面

相似的形状表明界面之间处于同级关系,例如同一集合中的卡片拥有相匹配的尺寸和圆角。

相关的界面

可以通过使用类似箭头的形状来表示彼此关联的表面,使得它们“指向”其他界面。例如,菜单的一个箭头形状的角可以指向相关的界面。

独立的界面

当界面相互独立时,形状可以强调这种状态。例如,当一个独特的形状出现在比另一个界面更高的海拔处时,它强调这两个界面是相互独立的。

wwftaxlqpha.png插图(1)

此处白色界面的圆角强调了其独立于背后的紫色界面。

wwftaxlqpha.png插图(1)

此处形状有助于强调右下角按钮弹出的界面与其背后的界面是相互独立的。

vly3s555kgv.png插图(4)

wwftaxlqpha.png插图(1)

该合集中卡片相似的形状和尺寸表明了它们的同级关系。

ugfxjqozrch.png插图(5)

wwftaxlqpha.png插图(1)

菜单独特的角形状指向了它的父级界面。

x24xyjushy4.png插图(6)

juwh2a5uz5i.png插图(3)

不要使用形状来暗示元素之间并不存在的关系。此处对话框的形状表示它与其右后方的卡片相关。

原文地址:Material Design

译者:杜雅黎

人已赞赏
UI设计

Material Design Shape as expression 形状表达

2020-10-13 4:04:37

UI设计

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

2020-10-13 4:04:39

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