详细解析图标设计五维自检查法

UI / UI设计教程 / UI教程 /      

uimaker
UI设计师 / 江苏 南京

来源:TCD设计中心   作者:菜心

关键词

图标是界面设计中最重要的元素之一,也是我们UI设计师必备的技能,日常工作中我们经常会接到含有图标设计、优化的需求。但到底什么样的图标才算是优秀的?也许很多设计师并没有太完整的评判体系,只是凭感觉,这样就会造成输出效果不稳定、耗时太长等不良的后果。

所以借着这次机会我梳理了一套图标设计自检的评判体系,一共五个维度,大纲如下:

1.识别

2.性格

3.品牌

4.饱满

5.细节

1.识别

评判事物的价值在于它的用途是什么!图标的用途是帮助用户理解信息,所以“识别性”就是图标最重要、最底层的价值,如果你设计一个图标,用户看不懂,即使视觉再美观,也是无根之木,没有任何价值可言!

识别性可以分为两个方面,一是含义识别,二是视觉识别。

先说含义识别:简单来说就是你的图标能不能被理解,当然并不是设计师自己能理解就ok,而是需要用户来决定,这里和大家分享一个我判断图标是否易识别的方法——内部用户调研法,说白了就是随机问一些团队内部人员,最好多问几种岗位,这样得来的结果更加可靠,案例如下:

我在改版“话题”这个图标的时候,想到了微博的“#”,于是把“#”和气泡框结合到了一起,如下图:

详细解析图标设计五维自检查法,PS教程,思缘教程网

这时我找来10个内部人员进行测试,只有3个能看懂图标的意思(这3个人都是平时经常玩微博的),在这样的数据之下,不用犹豫,这个方案一定是不可取的。在进行调研时,最少要保证80%的人能看懂,才证明你的方案是可行的。

再来说视觉识别:顾名思义这一点已经与图标含义无关,而是视觉层面的问题,例如大小、底色等等阻碍用户识别的因素。

这里引入一个国外的测试结果,是我在一位前辈的文章中看到的,测验包括一组四种样式的图标:白底黑色实心图标,白底黑色空心图标,黑底白色实心图标,黑底白色空心图标,经过10天的时间,1260名参与者总共完成了超过25000次图标的认知测试。将得出的数据分成四组进行双向方差分析,在相同的统计条件下,选择黑底白色空心图标要比其他三种组合的时间慢0.17秒,也就是说这种图标的信息表达能力会少弱,如下图:

详细解析图标设计五维自检查法,PS教程,思缘教程网

所以在这样的理论与数据的支撑下,我对部分图标进行了如下改版:

详细解析图标设计五维自检查法,PS教程,思缘教程网

有底色的图标全部从线性改成面性,如改不成面性(例如时钟)需要适当加粗描边,目的就是提高视觉识别性。切记,识别性是图标最重要的价值,尤其是在没有文字说明的情况下,一定不要让用户产生困惑,不然你就是在消耗用户体验,而不是给用户体验赋能!

2.性格

试想如果一个人没有性格,那这个人就是没有灵魂的,图标也一样,没有性格即没有灵魂。那如何打造属于自己的性格呢,我们需要从用户和品牌出发,例如腾讯动漫的用户都是动漫、cosplay爱好者,给人一种又萌又可爱的感觉,所以我们需要让图标尽量圆润一些:

详细解析图标设计五维自检查法,PS教程,思缘教程网

像上图2号图标一样,增大圆角,使图标看起来更加圆润可爱。基于这样的用户人群,我们还将原有一些单色图标,改成下面这样的彩色图标:

详细解析图标设计五维自检查法,PS教程,思缘教程网

目的就是让图标可爱活泼的性格更加明显。

3.品牌

品牌性是我们经常提到的纬度,常用的提取品牌的基因也有很多,颜色、图形、吉祥物等等,这里举两个例子,一个是具象的品牌基因——吉祥物:

详细解析图标设计五维自检查法,PS教程,思缘教程网

我们有自己的品牌吉祥物——黑子,所以在图标设计时可以将其运用起来,如下图就是结合黑子形象设计出来的“逗币”图标:

详细解析图标设计五维自检查法,PS教程,思缘教程网

再举个比较抽象的例子,从logo当中提取品牌基因。由于logo的字体笔画比较粗,整体给人一种厚重饱满的感觉:

详细解析图标设计五维自检查法,PS教程,思缘教程网

 收藏