Material Design System icons 系统图标

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

系统图标用于表示常用操作、文件、设备和目录等。

目录

设计原则网格和关键线形状系统图标规格颜色图标主题

设计原则

概念

系统图标的设计应简单、时尚、友好,有时也要带点趣味性。每个图标都精简到最小形式,表达出基本特征即可。

kiy5lppfzg4.png插图

图标形状都是醒目的几何体。它们有对称和一致的外观,即使尺寸很小,也要保证可读性和清晰度。

lua1deoosgq.png插图(1)

网格和关键线形状

图标尺寸

系统图标的显示尺寸为24x24dp。创建100%比例查看的图标可获得完美像素精度。

gasa0jtrwi4.png插图(2)

密集型布局

在桌面端,当鼠标和键盘为主要的输入方式时,尺寸可以缩小到20dp。

wbofxrb3jpb.png插图(3)

布局

图标内容应该处于安全区域内,即不会被遮挡的地方(例如滚动时出现侧边栏)。

如需增加视觉权重,内容可以延伸到安全区域与裁剪区域(整个图像大小)之间的内边距。图标的任何部分都不应该延伸到剪裁区域之外。

3qpl0v4qflk.png插图(4)

关键线形状

图标网格和关键线

图标网格为图形元素的一致性和灵活定位建立了明确的规则。

关键线形状是网格的基础。通过使用这些核心形状作为准则,可以使系统图标在设计中都保持视觉比例上的一致。

基本形状

特定的关键线呈现出一些确定的形状:圆形、方形、矩形、正交线和对角线。这些基础形状有助于统一Google系统图标并规范它们在图标网格上的位置。

tr30fjozvkr.png插图(5)

几何形状

预设标准已经确定了一些明确的关键线:圆形、方形、矩形、正交线和对角线。这些通用且简单的元素已经被用来统一Google的系统图标,并将图标在网格上的位置系统化。

vk1rjbvwt0j.png插图(6)

清晰(完美像素)

为避免扭曲图标,通过将X轴和Y轴的坐标设置成整数(没有小数)使图标放置在“像素之上”。

ne2vr5lemgj.png插图(7)

系统图标规范

剖析

obrvlbegb4f.png插图(8)

笔画末端拐角内部区域笔画内部笔画边界区域

拐角

圆角半径默认值为2dp。拐角的内部应该是方形而非圆形。对于宽度小于或等于2dp的形状,不要把描边的拐角也做成圆角。

5jwbb5k1izr.png插图(9)

笔画

系统图标使用一致的2dp笔画宽度,包括曲线、斜线,以及内部和外部的描边。

xjr2b2tjoql.png插图(10)

复杂的图标形状

如果系统图标需要复杂的细节,则可进行细微的调整以提高其可读性。这些调整称为视觉校正,任何视觉校正都应该使用基础的几何形态,不要倾斜或扭曲这些形状。

复杂的调整

回形针图标使用了原本2dp笔画区域中的1.5dp,以便在24 x 24 dp的空间内适应多个弯角。

miftx4zfveq.png插图(11)

空间

系统图标周围应保留足够的空间,以增加可读性和触控范围。尺寸为24dp的图标可使用尺寸为48dp的触控范围。

zmjna30yqv0.png插图(12)

间隙区域放置方式

紧凑布局(桌面端)

当鼠标和键盘为主要输入方式时,可以压缩尺寸以适应更紧凑的布局。尺寸为20dp的密集图标使用尺寸为40dp的触控范围。

gneq1hkvosy.png插图(13)

间隙区域放置方式

颜色

浅色背景上的图标

激活图标

聚焦状态下的激活图标在浅色背景上的标准不透明度是87%(#000000)。激活但未聚焦的状态是54%。

未激活图标

未激活图标在视觉层次中级别较低,它应具备的不透明度是38%(#000000 )

eriijkvhtxp.png插图(14)

深色背景上的图标

激活图标

聚焦状态下的激活图标在深色背景上的标准不透明度是100%(#FFFFFF)。激活但未聚焦的状态是70%。

未激活图标

未激活图标在视觉层次中级别较低,它应具备的不透明度是50%(#FFFFFF)

2b4qy0rhtjt.png插图(15)

图标主题

为创建定制的系统图标,可以自定义系统图标的三个属性:笔画与填充、圆角半径以及颜色。

预设图标主题

通过调整这些属性可以创建以下四个预设定制图标集。

轮廓图标

轮廓图标可以自定义笔画和填充属性来营造轻盈干净的风格,以适用密集型界面。通过调整轮廓图标的笔画粗细能补足或平衡排版权重。

笔画和填充

当系统图标未被填充时,它们由其笔画来定义。较粗的笔画增加了重量和块状感,也使填充的图标感觉更沉重。较细的笔画意味着轻盈,给未填充图标带来了一种轻松明快的感觉。

ficnwwrgbsy.png插图(16)

笔画对齐

笔画位置(形状的内部、中间或外部)影响图标的整体外观。大多情况下,笔画最好与形状内部对齐。

0wrw1zynonm.png插图(17)

标准材料图标笔画内部对齐笔画中间对齐笔画外部对齐

woq30q0gabs.png插图(18)

brrprmmfozi.png插图(19)

这些线性图标的轻笔画沿用了应用品牌的细线风格。

nozxara2by2.png插图(20)

品牌logo线性图标app中的线性图标

尖角和圆角图标

尖角图标

尖角图标通过直边来显示角,清爽的样式即使在较小的比例下也能保持清晰可读。

圆角图标

圆角图标使用圆角半径,能很好地匹配以较重排版、曲线logo或圆形元素为表现风格的品牌。

圆角半径

图标的圆角半径由弯曲的外部拐角组成。图标可以较大或较小的圆角半径作为特征。

jggq4ifvcos.png插图(21)

推荐圆角半径值在0dp和4dp之间。

dkzz5z0hw23.png插图(22)

gb54uderowj.png插图(23)

圆角半径为0dp的尖角图标与app的矩形设计细节相呼应。

bxa1adqgg2z.png插图(24)

品牌logo尖角图标app中的尖角图标

f1fqcae54nj.png插图(25)

这个app使用了圆角按钮和线性logo。

3f53gpj3frc.png插图(26)

品牌logo圆角图标app中的圆角图标

双色图标

双色图标增加了一个维度,它使用了笔画、填充和颜色等属性。对比笔画与填充色使多品牌色得以使用,也提高了可读性。

lht15pok4ic.png插图(27)

双色图标能对一个图标的笔画和填充使用不同的颜色。可以调整填充的透明度来提高清晰度和匹配品牌。

浅色背景深色背景笔画87%纯色100%纯色

图标笔画的不透明度必须是浅色背景上使用87%和深色背景上使用100%。填充色可以根据背景色调来改变。

kke5pnnlrzv.png插图(28) 这个电子邮件app中使用了双色品牌元素,例如logo。

jzbxywf3sft.png插图(29)

品牌logo双色图标app中的双色图标

原文地址:Material Design

译者:招财鱼

人已赞赏
UI设计

下拉菜单设计的7个技巧

2020-10-13 18:06:12

UI设计

Material Design Product icons 产品图标

2020-10-13 18:06:14

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