Material Design System icons 系统图标

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

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

目录

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

设计原则

概念

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

Material Design System icons 系统图标插图

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

Material Design System icons 系统图标插图1

网格和关键线形状

图标尺寸

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

Material Design System icons 系统图标插图2

密集型布局

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

Material Design System icons 系统图标插图3

布局

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

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

Material Design System icons 系统图标插图4

关键线形状

图标网格和关键线

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

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

基本形状

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

Material Design System icons 系统图标插图5

几何形状

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

Material Design System icons 系统图标插图6

清晰(完美像素)

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

Material Design System icons 系统图标插图7

系统图标规范

剖析

Material Design System icons 系统图标插图8

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

拐角

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

Material Design System icons 系统图标插图9

笔画

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

Material Design System icons 系统图标插图10

复杂的图标形状

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

复杂的调整

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

Material Design System icons 系统图标插图11

空间

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

Material Design System icons 系统图标插图12

间隙区域放置方式

紧凑布局(桌面端)

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

Material Design System icons 系统图标插图13

间隙区域放置方式

颜色

浅色背景上的图标

激活图标

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

未激活图标

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

Material Design System icons 系统图标插图14

深色背景上的图标

激活图标

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

未激活图标

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

Material Design System icons 系统图标插图15

图标主题

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

预设图标主题

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

轮廓图标

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

笔画和填充

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

Material Design System icons 系统图标插图16

笔画对齐

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

Material Design System icons 系统图标插图17

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

Material Design System icons 系统图标插图18

Material Design System icons 系统图标插图19

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

Material Design System icons 系统图标插图20

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

尖角和圆角图标

尖角图标

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

圆角图标

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

圆角半径

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

Material Design System icons 系统图标插图21

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

Material Design System icons 系统图标插图22

Material Design System icons 系统图标插图23

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

Material Design System icons 系统图标插图24

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

Material Design System icons 系统图标插图25

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

Material Design System icons 系统图标插图26

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

双色图标

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

Material Design System icons 系统图标插图27

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

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

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

Material Design System icons 系统图标插图28 这个电子邮件app中使用了双色品牌元素,例如logo。

Material Design System icons 系统图标插图29

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

原文地址:Material Design

译者:招财鱼

人已赞赏
UI设计

Material Design Animated icons 动画图标

2020-10-13 18:06:12

UI设计

Material Design Product icons 产品图标

2020-10-13 18:06:14

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