UI设计中非常重要的一环


图标的定义
 

一说到图标,我想您一定会觉得非常熟悉。图标,也称为icon或picto,是指有明确含义的图形视觉语言。那么当我们一提起图标设计,您的脑中会想起哪个图标来呢?有可能您想起的是微信APP由两个白色气泡组成的启动图标;或者是我们每天使用的APP中的那些返回、关闭等系统图标;也可能是商场导视里的卫生间图标等。没错,图标的形式有很多种,它可以应用在很多场景中,并且表现方式非常丰富:有线的、有面的、也有拟物的等等。图标的历史可以追溯到象形文字(Pictogram),我们的祖先在发明文字之前就使用图标记录一天的生活了。听着是不是不可思议呢?从亘古时代的象形文字开始,我们的祖先就偏爱使用这种抽象的图形来表达意思了。在平面设计领域的商标其实也是一种图标;平面设计里的视觉导视(例如卫生间的图标)也有图标的应用,所以图标在我们的生活中应用非常广泛。


 

生活中随处可见的图标

在计算机时代,从80年代的施乐公司界面中的单色图标开始,图标就开始出现在屏幕之中了,图标较编程语言更容易被大众理解。到了后来从iMac到iPhone引领的拟物图标更是开启了一个绚丽的图标设计时代。拟物时代盛行也带来了一些麻烦:拟物图标的质感、光影会吸引走用户的注意力,我们称之为“视觉噪音”。于是UI设计师开始探索更新的表现形式来设计界面中的图标。扁平图标发展史上有过很多次尝试,比如微软引领的Metro风格中的图标设计和Google引领的扁平设计风格中的长投影风格图标,但由于它们表现形式太过于抽象、缺乏情感的传递,并没有获得用户的垂青。而我们现在界面设计中的图标设计是一种“轻拟物”或“微扁平”的风格:在面积比较小的区域我们使用扁平图标或线形图标;在面积比较大的区域我们会使用加入渐变甚至轻质感的图标。

 

不同的图标设计风格

如今我们界面中的图标可谓非常丰富了,如果根据Material Design对图标的分类,UI设计中的图标可以分为带有品牌属性和特性的产品图标、有功能指示作用的系统图标两种图标,下面我们将针对于这两种图标进行研究。

 

产品图标

产品图标是我们在设计界面的时候体现品牌调性和特性的图标。通过产品图标,用户就可以大概感知这个产品主要是做什么的。比如微信的产品图标是两个对话气泡,暗示了这是一款社交APP;再比如ofo的产品图标是字母ofo的组合,同时也是一辆自行车,这暗示了这款产品是共享单车的APP;再比如KEEP的字母“K”的图标,像极了一个在抬腿做运动的人,暗示了这是一个运动APP。


 

同时有些产品也依靠自身已经在用户心中产生的品牌来直接设计产品图标,比如淘宝APP的产品图标就是一个“淘”字;支付宝的产品图标就是一个“支”字。优秀的产品图标都会在我们心中打上一个烙印,当我们看到这些图形、配色时,脑中会立即想起来它们的功能和特点。产品图标除了在手机屏幕中作为启动图标,也会出现在闪屏、情感化设计、“关于我们”界面等场景中,所以也要有一定的灵活性,在设计上要以简单、大胆、友好的方式传达产品的核心理念和意图。产品图标很类似在企业识别系统(VI)里的logo,需要让用户一眼看到它就能够与脑中的产品相关联。所以设计一个优秀的产品图标对于任何产品来说都是非常重要的。

 

风格

产品图标有不同的风格,这些风格有可能很拟物,也有可能很扁平;有可能很抽象,也可能很具象。通过不同的设计风格可以更加标新立异,从而被用户记住。让用户记住我们的图标真是一件非常重要的事儿,要知道,每个手机都像是一把瑞士军刀,它有无数个功能,而我们的产品只是万种功能中的一个。用户不可能记住手机里所有的APP都是什么,所以能在第一时间取得好感和记忆非常重要,产品图标设计得好看并且容易被人记住就成了非常重要的任务。产品图标的主要风格有以下几种:

文字风格