当前位置:主页 > 果博资讯 >

先进的小图标应该满足哪些尺度?

作者:www.gb0033.com 发布于2019-09-29 17:32   浏览次  

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。

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

六、切确掌握以上诸多标准,合理行使种种方式

以上提到的各个标准并不是须要充裕条件,要合理掌握,平均好他们的关系:

有些时候 “辨认性” 与 “同一性” 之间的矛盾也是无法调和的,我们应该回到设计目标本身,衡量是“辨认性”更紧张,或是 “同一性” 更紧张;

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

不要盲目追求品牌感或分外性,也并非所有波及需要都需要你做到这些,要凭据现实项目而定,偶然确凿是需要你设计出一套没有性格,易辨认的小图标。

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