18/03/6

图标设计的原则与规范

1 原则

图标是实用性和设计感的结合。我们经常在一些设计网站上看到一些拟物图标,与其将其看作功能图标,不如将其看作艺术品。从拟物到扁平化,是风格的变化,更是理念的变化。

作为一个果粉,每次都能惊喜看到苹果一直践行着简洁的理念,却没有照抄别家的扁平化理念。设想今天所有的图标都是五年前WP那一套,世界就真的变得单调无聊了。

图标的种类众多,可以划分为App图标、系统图标等,也可以划分为工具应用图标、游戏图标等,不同种类有不同的规范和考虑。App图标通常只有一个,而系统图标有许多个;游戏图标有时候越花哨越吸引人,工具应用图标则需要让人一眼就看出来这玩意儿是做什么的。

图标设计,总的来说,基本遵循以下原则:

1.1 可识别性:准确地传达图标的含义

  1. 简洁:颜色与风格
  2. 识别:图标与含义

1.2 视觉统一:风格与大小的统一

  1. 整体视觉风格
  2. 相匹配的大小

1.3 差异性:图标与图标之间的区别

  1. 同一套图标中不同图标的差异性
  2. 图标的多种状态区别

2 图标的规格

2.1 图标网格:统一图标的大小

在Material Design Principle中,规定App图标大小以48dp为宜,dp和px如何换算网上有很多文章可以找得到。随着像素密度越来越高,Google建议最好可以设计192dp*192dp的图标。而系统图标以24dp为准。在设计规范中,Google给了许多的案例以供参考。

在iOS系统中,苹果将其图标分为App图标、Spotlight图标、导航栏和工具栏图标以及标签栏图标几大类。iPhone相比Android屏幕密度较少,只要设计出符合要求的最小图标,按倍数调整大小即可为所有iOS设备所用。

App图标

系统栏图标

四种系统图标形状类型以及规格建议

 

在Material Design Principle中,介绍了一种统一图标视觉大小的方法。

img-alternative-text

将图标分为方形、圆形和矩形三种大致形状,根据以上图标中的关键线,确定图标整体大小。判断形状,可以将图标对齐中心,放大直至接触关键线边缘。

img-alternative-text

在Android系统中,桌面图标标准大小为48dp;在其他产品系统设计中,可以根据对应设计规范确定设计的基准大小,在基准大小的基础上进行放大或者缩小。

2.2 图标的格式

常见的图标格式有gif、jpg、png等,其中png又分为png-8与png-24两种。png-8相比png-24而言压缩率更高,但是色彩不如后者丰富,更重要的是,不规则形状的透明图片中,png-8会出现边缘锯齿。

img-alternative-text

2.3 像素对齐

未对齐的图标边缘会虚化,PS CS6及以后的版本多了像素自动对齐等功能有助于绘制出边缘锐利的对齐图标。我习惯使用AI绘制图标,在AI中绘制好图标后,复制到PS,应粘贴为形状图层,再一一调整对齐像素。

 

关于图标视觉大小和几何大小之间的调整以及图标设计的一些细节,可以看下面两篇文章。我找了下国内都有翻译,我就不翻了。

  1. Optical Effects in User Interfaces
  2. Hopefully, the Ultimate Guide to a Flat Icon Set

参考

相关文章

评论 (0)

还没有任何评论

发表评论 Leave a comment :