赞助商
立即赞助

腾讯设计师出品!写给新人的图标自检手册

UI设计3年前 (2021)更新 流光
2.2K 0 0

@菜心设计铺 :之写过的《腾讯设师总结的图标设计五维自检法》受到了很多关注。转眼已经过去年有余,于图标也有了更加深刻理解,所以今天继续深挖这个话题,希望能够打造份全、可图标自检册,帮助在大家改版、面等景进行检优化。

识别

事物的价值在于它的用途是什。

图标用途是帮助用户理解信息,所以「识性」是图标最要、最底层价值。如你设计个图标,用户看不懂,即使视觉再美观,也是根,没有任何价值可言。

识别性可以分两方面,一含义识别,二视觉识别。

1. 含义识别

含义识别就的图标能不能被理解。腾讯动漫阅读页的时候,具栏顶部新增一图标详页入口,始的效果如下:

腾讯设计师出品!写给新人的图标自检手册

发些人以它目录页,些人则根本不知道什么意思,这就属于含义识别层出了问题。

由于这个图标没有案搭配使,在含义识别上一定要重视,最后的方案就是采一个详字来进行设计,既满足了识别,又满足了统一的形式。

腾讯设计师出品!写给新人的图标自检手册

实这种取含义本身的案来进行设计是的含义识别性的手法,尤是在图标独立现的时候。

2. 视觉识别

视觉识别与图标含义无,要是视觉层面阻碍户识别的因素。目前我总结有几点。

颜色因素

明特别接的颜色在一起,如柠檬和白色,如果白色图标放在了柠檬的色上,白色就很容易看清楚,而且特别晃眼:

腾讯设计师出品!写给新人的图标自检手册

底色与线性图标的搭配

这里引入一外的测试结果,我一辈的文章中看到的,测验包括一组四种样式的图标:白底黑色实图标,白底黑色空图标,黑底白色实图标,黑底白色空图标,过 10 天的时间,1260 参与者总共完了超过 25000 次图标的认知测试。将得出的数据分四组行向方差分析,相同的统条件下,选择黑底白色空图标比其他三种组合的时间慢0.17秒,也就这种图标的信息表达能力会很弱,如下图:

腾讯设计师出品!写给新人的图标自检手册

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

腾讯设计师出品!写给新人的图标自检手册

底色的图标全部从线性改面性,如改不面性(例如时钟)需当加粗描,目的就提高视觉识别性。

复杂程度

图标设,我们一注意图标的使用场景,时候我们设的图标,设稿的时候什么问题,但一到真实场景中就会发很多问题。

如面这组图标:

腾讯设计师出品!写给新人的图标自检手册

做设计的时候并没有么问题,但最后唯一被挑战的就是,当把图标缩小放在标签栏的时候会会过于密集而导致复杂?而这种复杂就很有可成图标的视觉识别。

比下面组图标也存在相同的问题:

腾讯设计师出品!写给新人的图标自检手册

所以在图标尺寸小的时,一定要证图标的简洁,否则就影响识别。

切记,识别性是图标最重要的价值,尤其是在没有文字说的情况下,一定不要让用户产生困惑,不然就是在消耗用户体验,而不是给用户体验赋能。

统一

在图标改版的候,最常说的就是图标的统一性问题,对于统一性可以从哪些方面入,整理了以下 6 点,依次来。

1. 圆角大

圆角大的统一,虽然经常挂在嘴边,但有候还是容易被忽略,比如下面这组图标:

腾讯设计师出品!写给新人的图标自检手册

并没有完成圆角的统一性,比如免费图标的圆角显于其个,后面被人提,才纠正了这个细节:

腾讯设计师出品!写给新人的图标自检手册

2. 描边粗细

在做一组同等大小的图标时,并不容易生描边粗细不一致的情况,比我们很少把其中三个做成 4px,而其中一个做成 2px:

腾讯设计师出品!写给新人的图标自检手册

种错误,我得优的你,应该不犯。但是有时在做一套拥有不同尺寸的图标时,我们必须要根据图标大小来整描边粗细,使整看来和谐统一。

3. 视大小

众所周,物理尺寸同等的方形要比圆形大,所以我们要在乎的是视感官上的大小统一,而不是物理尺寸,所以在做辅助规范的时有圆形、方向、横向矩形、纵向矩形:

腾讯设计师出品!写给新人的图标自检手册

目的就是能够更加灵活地整图标大小,使其在视重量上持统一。

4. 描边尾部细节

果你的图标是有描边且断的,一定要注意两个细节,一个是描边尾部的方与圆:

腾讯设计师出品!写给新人的图标自检手册

另一个就是断的距离,一定要做到统一,个很容易被忽略:

腾讯设计师出品!写给新人的图标自检手册

5. 角

角,是增图标统一感的因素之一,最见的角统一方式就是按照一定的倍数来制定规范,如 30 的倍数:

腾讯设计师出品!写给新人的图标自检手册

再举一个他方面的例子,在做面这组图标的时候,最初没有考虑断线的规律:

腾讯设计师出品!写给新人的图标自检手册

看久了会觉得有些凌乱,于是我将断线处定为右角 45 ,如遇到圆角拐角处,可挪靠拐角处进行断线:

腾讯设计师出品!写给新人的图标自检手册

这样我们就会看到有的图标断线位置都大致现在右角的地方,最终效果如:

腾讯设计师出品!写给新人的图标自检手册

很大程上了图标的统一性,并且在延展执行的时候节省了大量的思考时间(思考在哪里断)。

但是对断的位置是否一定要规定其出现的角度,我得不一定,也以从其他角度考虑,但最终的目的还是让整统一和谐,且延展高。

6. 正负形比例

正负空间比例很容被忽略,以前我也很少讲,不我得很用。下图,很明显白所占比例不同,导致图标一致就有问题:

腾讯设计师出品!写给新人的图标自检手册

当比例整,统一就加强很:

腾讯设计师出品!写给新人的图标自检手册

个因素既简单又用,大家一定要熟练掌握。

以上就是关于统一纬度的所有总结,做统一虽然不会让图标加多,但是做不统一,可能就还不算及格,所以一定要重视起来。

耐看

能够让图标耐的因素有多,以目前的认知,主要有以下点。

1. 饱

多候做出来的图标不够致,其中一个大的因就是不够饱。

如何判断图标是否饱满呢?我常用衡量法是在图标上加个矩形,看图标正形积是否可以增加。

例如下图,蓝色形,色负形:

腾讯设计师出品!写给新人的图标自检手册

很明显蓝色的形面积可以增加的,例如:

腾讯设计师出品!写给新人的图标自检手册

这就增加图标的饱满度,我也按照这思改版图标饱满度的。

举个真实的例子,我们原版的续看图标是上结构,而上面分的图形太窄,导致左上角、右上角的空白太多(就是绿色分太多),没有撑满矩形,如图:

腾讯设计师出品!写给新人的图标自检手册

于是我对图标的结构进行了调整,尽可地减绿色分,最后达到了图这样的效果:

腾讯设计师出品!写给新人的图标自检手册

最后醒大,对于图标的饱满,还需要结合整套图标的视觉效果来进行调试,虽然上面这个方法可解决大分图标的饱满问题,但还是要具体场景具体分析。

2. 有变的透气感

很多时候我们会发现自己做的图标有些死、发闷,实就是透气感没做好。

什么是透气?我们经常说页面不够透气,没有呼吸感,无非就是留白做得不,图标也是一样的,比下面组面图形:

腾讯设计师出品!写给新人的图标自检手册

看来就很闷,果我们给它加一扇窗,也就是加白之:

腾讯设计师出品!写给新人的图标自检手册

样整就透气很,但是种透气做的并不是很,图标外形和里面融的白形状有雷同,样就导致图标看来没有变化的细节。

所以需要在透气的基础上再融入一些变化,比如下面的例,就体现了这种有变化的透气,不论是正形还是负形都有大的变化:

腾讯设计师出品!写给新人的图标自检手册

对于耐这一块,觉得应该会有多知识点,不过目前能总结出来的只有这点,后面会继续挖掘。

风格

风格包含方面内容,一个是属性表达,一个是形式表达。

1. 属性表达

属性表达就是图标的骨骼基调,比如圆角大、线条粗细等,可以根据行业属于及用户人群来进行判断。比如商行业和动漫行业就是完全不同的属性,商行业可以偏方正严肃一些,而动漫行业可以偏圆润一些(当然也不绝对,只要有因有果即可);再比如男性和性,老人和孩都有不同的属性表达。

比如黑白线稿形表,不圆大小会不感觉:

腾讯设计师出品!写给新人的图标自检手册

左侧会偏严肃些,右侧会偏可爱些。

所以千万不小看的属性表达,它可以帮确的骨骼基调。

2. 形式表达

确了基础的属性之后,就填充形式的时候了:

腾讯设计师出品!写给新人的图标自检手册

至于形式的种类实太多了,但一理据,符合产品整体表达的感觉。

我想讲的重点是我们如何取抽象的格,然后在我们自己的设计上,如波洞的这组图标:

腾讯设计师出品!写给新人的图标自检手册

格就是在面这组图标的基础上的二次原创,如入纹、IP形象等等:

腾讯设计师出品!写给新人的图标自检手册

设计师在这中间需要取格的键要素,然后结合产需求来进行创作设计。

下面来一个例,比看下面套谷歌的图标:

腾讯设计师出品!写给新人的图标自检手册

我们就以在它的风上提取出以下要素:

腾讯设计师出品!写给新人的图标自检手册

组合:就是每个图标由至少两个元素组成。

融:有一些色的融入,使整体更加透气。

有了这两个要素后,可以根据具体需求来进创作设计了,下两组图标是这么来:

腾讯设计师出品!写给新人的图标自检手册

这是已有风格提取及加工,也是我常用图标设计法。

品牌

随着设计越来越质化,品感逐渐被大家所视,于品这块,以前写过很多相关文章,这里再简单归类下。

1. 颜色

颜色是最容易体现品感元素,所以图标上经常会结合品色来进设计:

腾讯设计师出品!写给新人的图标自检手册

2. 图形

图形可以取 logo、吉祥物等等,比如首页图标就经常使用 logo 本身:

腾讯设计师出品!写给新人的图标自检手册

再比如 MONO 的标签栏图标,计非常大胆,提取 logo 上面的 4 个字母──M、O、N、O后,直将其作为图标,如下图:

腾讯设计师出品!写给新人的图标自检手册

但是这种方法还是有大的风险,毕竟每个字母功能本身的含义没什系,如果不是非常个性化的 app,谨慎使用。

3. 形象

如果你的产品有品牌形象,那一定要用起来,比如腾讯动漫的黑,就可以进行结使用:

腾讯设计师出品!写给新人的图标自检手册

4. 特

特就是提取一气质或者特征,例断、圆润、尖锐等等,属比抽象的元素。

去年在优化图标的候,发现腾讯动漫 logo 上字体笔画比较粗,整体给人一种厚重饱的觉:

腾讯设计师出品!写给新人的图标自检手册

因此可以在品牌 logo 中提取「粗胖饱」的品牌基因,在这的背景下就不用再纠结图标使用 2px 描边还是 3px 的描边了:

腾讯设计师出品!写给新人的图标自检手册

可以确定地使用 3px 描边,因为它既符品牌基因符用户性格(肥胖圆润显得可爱)。

以上是个从识、统、耐看、风格、品,5 个维度来打造自检框架,相比较上篇会更加全体系。于图标设计,定要长期积累,耐心研究,我也在不断研究路上,借此会理分享,希望大家互相学习进步。

欢迎关注作者的微信公众:「设」

腾讯设计师出品!写给新人的图标自检手册

© 版权声明
您必须登录才能参与评论!
立即登录
暂无评论...

相关文章

画过不少图标,也总结了很多大神的方法,在此归纳一下简单的图标画法,希望对大家有帮助。作为一名 UI 设计师,必须要重视 ic...
ICON
大家好,我是彩云。最近有帮忙看我群里一些同学的作品集,会发现很多人在图标设计细节上有不少问题,这块也是我给出建议较多...
UI 设计
在《从零开始画图标系列:超全面的基础知识》中我们知道了,工具图标的三种设计类型,以及对应的不同风格。本篇文章,内容主...
图标设计
目前我主要深耕于B端设计中,深知B端图标设计与C端有很大的不同,无论是应用的场景、设计的理念,都有非常大的差异,而现在网...
B端产品
图标的分类和风格有很多种,而设计图标的时候,如何才能抓住用户的眼球,设计出自己满意的图标呢? 欢迎关注译者的微信公...
ICON
每天努力的用心的去做设计,挺开心的,其中最开心的细节就是“思考自己的设计如何与别人的不一样”,让你的差异化产出得到认可...
图标
背景 QQ 游戏中心经过设计改版之后,我们重新设定了整体的世界观——多彩的游戏宇宙。并且对多个模块及内容进行了新的设计升级...
3D图标
作为一枚设计民工,不仅要面对甲爸们的百般刁难,遇到难搞的数据图表时更是苦不堪言:一份合格的数据图表,在有创意、让信息...
UI