这是一个翻译系列,原文是谷歌18年所出的材料设计指南(文末有链接),强大的材料设计将带我们一起深入了解UI设计中的所有规范。每周会更新数篇,一共百余篇,欢迎关注哦。
系统图标用于表示常用操作、文件、设备和目录等。
目录
设计原则网格和关键线形状系统图标规格颜色图标主题
设计原则
概念
系统图标的设计应简单、时尚、友好,有时也要带点趣味性。每个图标都精简到最小形式,表达出基本特征即可。
图标形状都是醒目的几何体。它们有对称和一致的外观,即使尺寸很小,也要保证可读性和清晰度。
网格和关键线形状
图标尺寸
系统图标的显示尺寸为24x24dp。创建100%比例查看的图标可获得完美像素精度。
密集型布局
在桌面端,当鼠标和键盘为主要的输入方式时,尺寸可以缩小到20dp。
布局
图标内容应该处于安全区域内,即不会被遮挡的地方(例如滚动时出现侧边栏)。
如需增加视觉权重,内容可以延伸到安全区域与裁剪区域(整个图像大小)之间的内边距。图标的任何部分都不应该延伸到剪裁区域之外。
关键线形状
图标网格和关键线
图标网格为图形元素的一致性和灵活定位建立了明确的规则。
关键线形状是网格的基础。通过使用这些核心形状作为准则,可以使系统图标在设计中都保持视觉比例上的一致。
基本形状
特定的关键线呈现出一些确定的形状:圆形、方形、矩形、正交线和对角线。这些基础形状有助于统一Google系统图标并规范它们在图标网格上的位置。
几何形状
预设标准已经确定了一些明确的关键线:圆形、方形、矩形、正交线和对角线。这些通用且简单的元素已经被用来统一Google的系统图标,并将图标在网格上的位置系统化。
清晰(完美像素)
为避免扭曲图标,通过将X轴和Y轴的坐标设置成整数(没有小数)使图标放置在“像素之上”。
系统图标规范
剖析
笔画末端拐角内部区域笔画内部笔画边界区域
拐角
圆角半径默认值为2dp。拐角的内部应该是方形而非圆形。对于宽度小于或等于2dp的形状,不要把描边的拐角也做成圆角。
笔画
系统图标使用一致的2dp笔画宽度,包括曲线、斜线,以及内部和外部的描边。
复杂的图标形状
如果系统图标需要复杂的细节,则可进行细微的调整以提高其可读性。这些调整称为视觉校正,任何视觉校正都应该使用基础的几何形态,不要倾斜或扭曲这些形状。
复杂的调整
回形针图标使用了原本2dp笔画区域中的1.5dp,以便在24 x 24 dp的空间内适应多个弯角。
空间
系统图标周围应保留足够的空间,以增加可读性和触控范围。尺寸为24dp的图标可使用尺寸为48dp的触控范围。
间隙区域放置方式
紧凑布局(桌面端)
当鼠标和键盘为主要输入方式时,可以压缩尺寸以适应更紧凑的布局。尺寸为20dp的密集图标使用尺寸为40dp的触控范围。
间隙区域放置方式
颜色
浅色背景上的图标
激活图标
聚焦状态下的激活图标在浅色背景上的标准不透明度是87%(#000000)。激活但未聚焦的状态是54%。
未激活图标
未激活图标在视觉层次中级别较低,它应具备的不透明度是38%(#000000 )
深色背景上的图标
激活图标
聚焦状态下的激活图标在深色背景上的标准不透明度是100%(#FFFFFF)。激活但未聚焦的状态是70%。
未激活图标
未激活图标在视觉层次中级别较低,它应具备的不透明度是50%(#FFFFFF)
图标主题
为创建定制的系统图标,可以自定义系统图标的三个属性:笔画与填充、圆角半径以及颜色。
预设图标主题
通过调整这些属性可以创建以下四个预设定制图标集。
轮廓图标
轮廓图标可以自定义笔画和填充属性来营造轻盈干净的风格,以适用密集型界面。通过调整轮廓图标的笔画粗细能补足或平衡排版权重。
笔画和填充
当系统图标未被填充时,它们由其笔画来定义。较粗的笔画增加了重量和块状感,也使填充的图标感觉更沉重。较细的笔画意味着轻盈,给未填充图标带来了一种轻松明快的感觉。
笔画对齐
笔画位置(形状的内部、中间或外部)影响图标的整体外观。大多情况下,笔画最好与形状内部对齐。
标准材料图标笔画内部对齐笔画中间对齐笔画外部对齐
这些线性图标的轻笔画沿用了应用品牌的细线风格。
品牌logo线性图标app中的线性图标
尖角和圆角图标
尖角图标
尖角图标通过直边来显示角,清爽的样式即使在较小的比例下也能保持清晰可读。
圆角图标
圆角图标使用圆角半径,能很好地匹配以较重排版、曲线logo或圆形元素为表现风格的品牌。
圆角半径
图标的圆角半径由弯曲的外部拐角组成。图标可以较大或较小的圆角半径作为特征。
推荐圆角半径值在0dp和4dp之间。
圆角半径为0dp的尖角图标与app的矩形设计细节相呼应。
品牌logo尖角图标app中的尖角图标
这个app使用了圆角按钮和线性logo。
品牌logo圆角图标app中的圆角图标
双色图标
双色图标增加了一个维度,它使用了笔画、填充和颜色等属性。对比笔画与填充色使多品牌色得以使用,也提高了可读性。
双色图标能对一个图标的笔画和填充使用不同的颜色。可以调整填充的透明度来提高清晰度和匹配品牌。
浅色背景深色背景笔画87%纯色100%纯色
图标笔画的不透明度必须是浅色背景上使用87%和深色背景上使用100%。填充色可以根据背景色调来改变。
这个电子邮件app中使用了双色品牌元素,例如logo。
品牌logo双色图标app中的双色图标
原文地址:Material Design
译者:招财鱼