如何设计好小图标

112天前发布

原创文章 / UI / 教程
葫芦兄弟loyal 原创,如需商业用途或转载请与葫芦兄弟loyal联系,谢谢配合。

小图标(程序内功能图标)的设计方法和注意事项,帮助设计师更好更快地掌握小图标设计的要领。

优秀的小图标应该满足哪些标准?

 

1.识别性:表意准确清晰,识别率高,不易造成误解;

2.可视性:保持设计的简单、现代、友好,在特定显示面积和显示环境下清晰可辨;

3.一致性:一套统一的设计语言、一致的细节处理;

4.设计感:造型、比例考究,有对比、有节奏感;

5.品牌感:将品牌基因注入到小图标的设计中,更能加深印象;

6.精确性:对以上各点的精确控制。


一、小图标首先要确保“易识别”

  

1.图标的传达含义功能必须放在首位。设计师们有时会过于注重形式,忽略了本身的功能,会导致图标难以识别。如下图,如果没有文字注释,你能看出来这画的是什么吗?



2.从实物中提取造型是我们做小图标的常用手法。但是我们在选取参照物时,要注意选取一个更通用的形象,而不能随意选取参照对象。如下图所示,同样是设计一个闹钟图标,左图是随便拿了一款电子闹钟作为参照,右图则是遵从了辨识度更高的通用型闹钟形象。

3.用户对图标的理解往往基于以前的经验,些图标已经在在用户心中享有普遍共识。在考虑图标形象时,要尊从大家的普遍认知,便于被快速的感知。

很多比较抽象的概念是无法绘制出来的,比如 PC 时代就用软盘来指代“保存”,一直延续到现在,尽管很多人没见过软盘,但是都知道这个图标表示保存。如下图所示,左图尝试做了些创新,可能比较有趣,但是引起误读风险也会很大。

4.对于更多复杂或抽象的功能来说,图形化的表达具有局限性,所以他们应该添加文本标签,或只使用文本标签来展示。以Airbnb 的 “故事” icon 来举个例子,他们选用了一个很有意思的小树叶,当没有文案说明的时候,想必一千个用户心里会有一千个哈姆雷特。

UserTesting(一家为开发者提供测试用户的创业公司)进行了一系列关于是否是要标签的测试,结果发现:

•对于带有标签的图标,88% 的情况下,用户轻点图标时可以准确地预测接下来会发生什么。

•对于没有标签的图标,这个数字下降到 60%。对于那些特殊的图标,这个数字只有 34%。

 


 

二、小图标造型——“简约而不简单”

小图标显示面积很有限,为了确保在特定的显示环境下依然清晰可辨,需要保持图标造型的简单、现代、友好。

 

1. 保持图标的简约和示意,不多不少刚刚好

图标设计理念的本质是简化形态-简化图标是出于降低学习曲线的需要。在大多数情况中,设计图标无需过度发挥创意,但也不能过于简单而降低识别度。如下图所示,过渡简化的图标如果没有文字标注已经无法判断他究竟是什么了,而过多的细节则会让小图标在实际使用场景中无法辨认。

 如下图所示,绘制线性图标时,要保持图标的简洁可识别,千万不要使用双重描边。

 

  

2. 巧妙地造型往往都是由简单的图形组合而成

在做图标的时候,能用基本图形进行布尔运算的时候,尽量不要使用钢笔。这会让你的图标更加规范,对图形结构理解更加深刻,后期更改形状更加方便。

3. 简化的图标依然需要适当保留细节

做图标是在做减法,但是如果你减去的部分影响到了图标的表意,就该思考如何才能保证图标整体简约概括的又能保留这些细节了。如下图,同样是表示 “抓紧扶好”,最右简单粗暴的处理已经完全表现不出这一感觉了,反而左边两个方案,简单的形状就很好展现出了“紧握”的细节。

 

三、从整体到细节,处处强调的“一致性”

 

设计师要尽可能让各异的小图标们尽可能形成风格、细节一致的一整套,但是也不能单纯为了统一而不顾识别度,更多的时候需要我们权衡利弊,找到两者之间的平衡。如下图所示,不管图标设计成风格迥异的,还是风格一致的,配合上文案都是可用的,但是各有优缺点。

1. 视觉大小统一

绝大多数小图标都是不规则的形状,所以不要简单地统一物理尺寸,而忽略视觉大小的统一。在进行图标设计的时候,我们会使用栅格辅助线来帮助我们更加严格谨慎,但一定不要被辅助线困住,学会灵活运用,保持视觉上的大小统一。

比如:圆要略大于方形,长方形的要比正方形的略高或略宽。

2. 设计语言一致

细节上审美统一让你的设计看起来是一个整体。一套小图标不仅相互之间要保持统一,还应该和应用保持一致的风格。作为专业视觉设计师的你,在时间充足的情况下,千万不要去网上随便下载几个图标直接用,不管是面、线、抑或线面结合,都要确保风格一致。如下图,左图是 Spotify 早先的版本的 icon,线、面混杂,粗细不一。右图分别是后续版本修改后的图标(上),以及设计师 iconwerk 给出的优化方案(下)。

3. 细节上的一致

细节上审美统一会让你的设计看起来更像是一个整体。比如说都是圆形或者方形的角,圆角半径的具体尺寸(2像素、4像素、等等),一致的线的粗细(2像素、4像素、粗细搭配等),颜色填充样式一致等等。

 

四、让小图标更具“设计感”的几种常见方法

 

1.增加层次感

通过将两个面的衔接处挖空,就可以营造出层次感,可以让小图标不会像一张纸片那么单薄。如下图(右)尝试加了一些缺口,不仅增加了层次感,更方法丰富了icon的细节、增强了辨识度。

 通过颜色深浅的不同,同样也可以营造出层次感,但由于稍显复杂,但这样的做法一般并不适用于Tab、工具栏等位置。如下图(右)色彩与层次都较为丰富,就更适合展示在界面更醒目的位置,比如作为项目分类入口。

 2.增强对比

造型上可以不拘泥于全部使用同样的圆角或直角,不妨将两种性格对比强烈的形状组合一下,可能会产生不错的化学反应。如下图,都是 icon 中大量采用了圆润大圆角(或圆弧)与锋利直角的对比,不仅造型上有新意,还更具现代气息。

下图(左)主体采用粗线条,细节采用细线条,线条粗细的对比丰富了小图标的细节。

下图(右)通过高度对比的颜色,突出部分细节,而且更让图标具有层次感。

3.点线面混搭

icon设计大可不必拘泥于单纯的线性,或平面。不仅可以线面结合,还可以加入渐变,投影等各种效果。但是要把握好度,不要一味追求形式而忽略的icon的识别度和使用场景。 

4.赋予小图标以动态趋势

如下图,适当微调了四肢的外轮廓就让原本比较呆板的小人拥有个动态趋势,更富细节、也更有趣了。

 

5.使用一些特殊的、有趣表现形式

比如,你可以让所有的图标都是一笔画出来的。

也可以采用特别的形状作为基本元素。

 

线条略向外膨胀或采用大圆角,可作出圆滚滚的可爱风。

  


可以尝试的思路或风格远不止上面提到的这些,更多可能还等待你去发掘。

 



五、将品牌基因融入小图标设计的几种方法

  

互联网产品同质化也相当严重,品牌塑造,品牌调性,品牌宣传,品牌的价值越来越被看重。作为一款产品中出镜率相当高的图标,也可以成为品宣的一部分。


比如将图标和产品 logo 结合,增加品牌曝光率;或者通过图标调性传达产品调性,在用户心智中塑造产品独有的特点。给小图标注入品牌基因关键是品牌特征的提取,其次则是对品牌特征的灵活运用,而对品牌特征的运用程度把控是使整个图标协调的重点。下面举几种常见的例子:

 

1. 提取特定形状

通过 对logo 或品牌元素提取特定形状,这个形状是固定的、具象的,例如圆形,三角形、甚至是logo本身等等。

 

2. 吸取品牌色

这招是最简单直接的方法,直接吸取品牌色作为视觉基因,以此来进行图标设计。

 

3. 抓取品牌风格特点

遵循logo或品牌风格,从中抓取其中一两个比较显著的特点,合理运用都小icon的设计中。例如网易云音乐的图标,是抓取logo上圆润的风格特点;小密圈则是抓取断线的风格特点。

 

从 iwork 的 logo 中,我们提取出两个特点:“断” 是指整个 logo 有刻意断开的地方;“层” 是指 logo 有不同的透明度,形成前后关系。而右侧一组小图标就是根据这两点设计的。

 4. 从品牌中提炼基本元素

通过对 logo 或品牌元素提炼出特定形状或基本元素,合理运用到小 icon 的设计中。

 

举个例子:仔细观察,你会发现其实整个 logo 的每一笔开头都有一个共同的特征,如下图,而这个共同的特征就是我们要找的品牌基因。经过提炼我们可以得到我们要的基本元素:一个特别的矩形(三个小圆角,一个大圆角),然后可以围绕它延展出一整套小 icon。

 

 

再举个例子:天气图标很常见,但做得有特点就很难了。如果我从原品牌图标上提取了一个基因符号:“花瓣”。怎么把花瓣元素和天气图标完美结合?下图就给出了不错的解决方案。

 

  

六、精确控制以上诸多标准,合理利用各种方法

 

以上提到的各个标准并不是必要充分条件,要合理控制,平衡好他们的关系:


有些时候 “识别性” 与 “统一性” 之间的矛盾也是无法调和的,我们应该回到设计目标本身,权衡是“识别性”更重要,还是 “统一性” 更重要;


对比,层次,节奏感,同时全部做到似乎很难,时刻背负着这些标准去做设计只能让你在设计时畏手畏脚,无从下手,不如多在练习中寻找感觉;


不要盲目追求品牌感或特殊性,也并非所有涉及需求都需要你做到这些,要根据实际项目而定,有时的确是需要你设计出一套没有个性,易识别的小图标。


小图标毕竟展示面积有限,还确保造型简约,不宜杂糅太多手法;但不要局限在这些方法里,要勇于去做一些新尝试。

 

 


部分内容资料参考:


著名 icon 设计师的个人站和 Twitter

https://iconwerk.com

用品牌基因法做图标设计,高级UI设计师才会的手法!(升级篇)

http://www.uisdc.com/brand-gene-icon-design-pro


文章内还整合了网上了多篇文章内容,并根据我个人理解予以了修改,如有原作者觉得我的引用不合适,可以私信我。

纸上得来终觉浅,绝知此事要躬行。只有去大量的实践与练习才能真正掌握这些理论和方法!


210
- 0位站酷推荐设计师推荐 -
    没有新消息