设计师要如何设计好小图标

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

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

享设计

https://design006.com

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

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

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 195,653评论 5 462
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 82,321评论 2 373
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 142,833评论 0 324
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 52,472评论 1 266
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 61,306评论 4 357
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 46,274评论 1 273
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 36,658评论 3 385
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 35,335评论 0 254
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 39,638评论 1 293
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 34,697评论 2 312
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 36,454评论 1 326
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 32,311评论 3 313
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 37,699评论 3 299
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 28,986评论 0 19
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 30,254评论 1 251
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 41,647评论 2 342
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 40,847评论 2 335