浅谈设计师必看的图标和ICON设计指南

浅谈设计师必看的图标和ICON设计指南

我们了解了 icon 的基本知识,那么如何设计一个好的 icon 呢?怎样评判我们的 icon 是否合适,是否贴合整个产品呢?我们需要了解什么才是一个好的 icon 。

我们可以从以下五个方面来检验,分别是:识别性,规范性、统一性、呼吸感与品牌感

浅谈设计师必看的图标和ICON设计指南

8.1 识别性

图标就是帮助用户理解信息,所以识别性(也可以说是可访问性)是一个图标最重要的一项,尤其在没有文字说明的情况下,一定不能让用户产生疑惑。我们检测图标的可读性通常要将图标的背景色底板在黑色和白色之间进行切换对比,不论是黑色还是白色的背景都可以看清图标的全部细节,还需要确保图标中的每一种颜色都是可见的。第二就是将图标拿到强光下进行观察,在强光下是否可以看清图标的主题结构,图标是否有足够的辨识度。

图标识别性可以分为两类,分别是含义识别和视觉识别。

含义识别:是视觉语言是否可替换文字语言,简言之就是让你的图标可以被用户理解,不会让用户产生歧义。

视觉识别:图标的大小,颜色,线条的粗细,这些影响视觉识别的因素识别性是否高。

浅谈设计师必看的图标和ICON设计指南

8.2 规范性

规范性也是做好一个图标的基础,我们要保证图标在视觉大小的一致性,图标饱满度、遵循同一种规律,细节统一性。

视觉大小的一致性:在相同尺寸的基础上分析形状间的视觉差异,来审视视觉上是否统一,如一样尺寸大小的圆和方形的视觉大小就不一致,那么我们可以规定它的最大尺寸,进而在尺寸规范中适当调整,使得视觉大小达到统一;

浅谈设计师必看的图标和ICON设计指南

饱满度:常用的衡量方法就是正负形衡量法,在图标所占区域的矩形框中,看图标的正形的面积是否还可以增加;

相同规律:同一套图标必须是以同种风格呈现的,例如是否全部使用了圆角或直角的风格,圆角大小、绘制风格是否一致;

细节统一:包括像素是否对齐、圆角、描边粗细是否统一的问题;

8.3 统一性

在绘制多个类型相同的图标时,我们需要注意这一套图标合集需要在视觉上保持统一性。在一整套产品中,会有很多种图标,但是图标的功能不一样,所表达的内容也不同。这时,图标一致性的意义就体现出来了,根据格式塔原理中的相似性原则:人们会将如元素彼此相似的东西感知为一组。这也意味着如果具有相同功能、含义和层次结构级别的元素,则应在视觉上保持统一匹配。

图标内容的统一会让用户明白相似的图标所代表的的功能也相同,而且在视觉上也更加和谐美观。因此我们在绘标后还需检查线条的粗细比重,边角的大小,配色方案,细节层次和设计元素在整个合集中是否是不变且一致的。

浅谈设计师必看的图标和ICON设计指南

8.4 呼吸感

呼吸感的意思就是适当留白。不管是图标还是界面,适当的留白可以突出主体内容,让内容具备易看性。在图标的绘制过程中,我们应该注意图标元素之间的间距不宜过近,元素也不宜过多。图标是一个物体的简略缩影,目的是为了表达内容,让用户快速理解,太过复杂的细节会影响图标的识别速度。因此在图标的绘制过程中应该删除所有无法传达图标意义的元素,避免使图标变得太过复杂难以识别。

浅谈设计师必看的图标和ICON设计指南

8.5 品牌感

品牌感就是我们上面谈到的要与品牌理念相符,传达给用户的感受一致,通过吸取品牌色,提取品牌元素,采用品牌吉祥物和品牌图形的方法来提取品牌基因。我们要试着从品牌设计的角度去理解,寻找自己产品独特的品牌气质,挑选合适的技法。然后把这些元素具象化,融入在界面设计中。

那么,该如何提升品牌感,打造属于自己App的独特风格呢?品牌基因为我们提供了一些线索,这是近年来非常流行的一种趋势。