bv1946伟德体育-体育betvictro伟德

bv1946伟德体育视点
bv1946伟德体育>bv1946伟德体育视点>腾讯策划师出品!写给新人的图标自检手册
腾讯策划师出品!写给新人的图标自检手册
发表时间:2019-09-25

识别

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

图标的用途噬巷助用户理解信息,以是「识别性」就是图标最要紧、最底层的价值。如果您策划一个图标,用户看不懂,即室子 泳踉倜拦郏彩俏薷荆挥芯∈壑悼裳浴

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

1. 含义识别

含义识别就是您的图标能不能被理解。在做腾讯动漫阅读页的时候,工具栏顶部新增一个图标是详情页入口,最开始做的成果如下:



发现有些人以为它是目录页,有些人则根本不知道是什么意思,这就属于在含义识别层出现了小case。

由于这个图标没有文案搭配使用,以是在含义识别上一定要重视,末了的Plan就是采取应用一个详字来进行策划,既满足了识别,又满足了统一的形式。




莫过于这种提取含义本身的文案来进行策划是常用的提高含义识别性的手法,尤其是在图标独立出现的时候。

2. 视觉识别

视觉识别与图标含义无关,主要是视觉层面阻碍用户识其余圆素。目上我总结有以下几点。

颜色圆素

明度特别接近的颜色不能用在一起,譬喻柠檬黄和白色,如果白色图标放在了柠檬黄的底色上,白色就很匆子 侄每床磺宄,而且特别晃眼:





底色与线性图标的搭配

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




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



有底色的图标全部从线性改成面性,如改不成面性( 诸如时钟)需要适当加粗描边,鹄的就是提高视觉识别性。

复杂程度

在图标策划上,吾们一定要care图标的使用场景,有时候吾们策划的图标,做策划稿的时候没什么小case,但是一放到真实场景中就会发现很多小case。

譬喻下面这组底部图标:




做策划的时候并没有什么小case,但末了唯一被挑战的就是,当把图标缩小放在底部标签栏的时候会不会过于密集而导致复杂?而这种复杂就很有可能遭成图标的视觉识别。

再譬喻下面这组图标也都存在同样的小case:




以是在图标尺寸较小的时候,一定要保证图标的简洁,否则就会影响识别。

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

统一

在图标改版的时候,吾们最常说到的就是图标的统一性小case,对于统一性吾们可以从哪些关键入手,我整理了以下 6 点,吾们依次来看。

1. 圆角大小

圆角大小的统一,虽然经常挂在嘴边,但有时候灰子 谴易于 侄帽缓雎裕┯飨旅嬲庾橥急辏



并没有完成圆角的统一性,譬喻Free图标的圆角明显小于其他两个,下面被人提到,才纠正了这个细节:




2. 描边粗细

在做一组同等大小的图标时,并不匆子 侄梅⑸璞叽窒覆灰恢碌幕肪常┯魑崦呛苌倩岚汛说廊鲎龀 4px,而此道一个做成 2px:




这种错误,我觉得优秀的您,应该不会犯。但是有些时候在做一套拥有不同尺寸的图标时,吾们必需要按照图标大小来调整描边粗细,使整体看起来和谐统一。

3. 视觉大小

尽人皆知,物理尺寸同等的方形要比圆形大,以是吾们要在乎的是视觉器官感受上的大小统一,而不是物理尺寸,以是在做辅助线规范的时候会有圆形、方向、横向矩形、纵向矩形:




鹄的就是能够更好灵活地调整图标大小,使其在视觉重量上保持统一。

4. 描边尾部细节

如果您的图标是有描边且断线的,一定要care这两个细节,一个是描边尾部的方与圆:

另一个就是断线的跨距,一定要做到统一,这个很匆子 侄帽缓雎裕




5. 角度

角度,也是增加图标统一感的圆素之一,最常见的角度统一方式就噬洗照一定的倍数来制定规范,譬喻 30 度的倍数:



再举一个其他关键的例子,在做下面这组图标的时候,最初没有揣摩断线的规律:




以是看久了会觉得有些凌乱,易于 我将断线处定为右下角 45 度,如遇到圆角拐角处,可挪动靠近拐角处进行断线:




这样吾们就会看到一切的图标断线地位都大致出Now右下角的区域,最终成果如下:



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

但是对于断线的地位是否一定要规定其出现的角度,我觉得不一定,也可以从其他角度揣摩,但最终的鹄的灰子 侨谜逋骋缓托常已诱剐愿摺

6. 正负形比例

正负容量比例很容被忽略,以上我也很少讲过,不过我觉得很实用。如下图,很明显白色所占比例不同,导致图标一致性就会有小case:



当比例调整下,统一性就会加强很多:



这个圆素既easy又实用,众家一定要熟练把握。

如该就是About统一纬度的一切总结,做到统一虽然不会让图标加分太多,但是做不到统一,可能就还不算及格,以是一定要重视起来。

耐看

能够让图标耐看的圆素有很多,以我目上的吟味,主要有以下两点。

1. 焕发

很多时候吾们做出来的图标不够精致,此道一个很大的原因就是不够焕发。

如何判断图标是否焕发呢?我常用的衡量方法就是在图标上面加一个矩形,看图标的正形的面积是否还可以增加。

诸如下图,Blue是正形,Red是负形:




很明显Blue的正形面积是可以增加的, 诸如:





这就是在增加图标的焕发度,我也噬洗照这个思路来改版图标焕发度的。

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



易于 我对图标的结构进行了调整,尽可能地减少Green部分,末了达到了下图这样的成果:



末了提醒众家,对于图标的焕发度,还需要结合整套图标的视觉成果来进行调试,虽然上面这个方法可以解决大部分图标的焕发小case,但灰子 且咛宄【熬咛骞槟伞

2. 有改动的透气感

很多时候吾们会发现自己做的图标有些死板、发闷,莫过于就是透气感没做好。

什么是透气?吾们经常会说页面不够透气,没有呼吸感,无非就是留白做得不好,图标也是一样的,譬喻下面这组面性图形:




看起来就很闷,如果吾们给它加一扇窗,也就是加入白色之下:



这样整体就会透气很多,但是这种透气做的并不是很好,图标外形和里面融入的白色形状都有些雷同,这样就会导致图标看起来没有改动的细节。

以是吾们需要在透气的底子上再融入一些改动,譬喻下面的例子,就体现了这种有改动的透气感,不论是正形灰子 歉盒味加泻艽蟮母亩





对于耐看这一块,我觉得应该会有很多知识点,不过目上我能总结出来的只有这两点,下面会继续挖掘。

性状style

性状style包含两关键始末,一个是属性表达,一个是形式表达。

1. 属性表达

属性表达就是图标的骨骼基调,譬喻圆角大小、线条粗细等,可以按照区域属于及用户人群来进行判断。譬喻牛逼商用区域和动漫区域就是完全不同的属性,牛逼商用区域可以偏方正严肃一些,而动漫区域可以偏圆润一些(易于 这般也不绝对,只要有因有果即可);再譬喻男性和女性,老人和小孩都有不同的属性表达。

譬喻同一种黑白线稿的形式表达,不同的圆角大小就会给人不同的感觉:





左侧就会偏严肃一些,右侧就会偏可爱一些。

以是千万不要小看後期的属性表达,它可以扶掖您细目大的骨骼基调。

2. 形式表达

细目了底子的属性之下,就是填充形式的时候了:





甚至形式的种类实在是太多了,但一定要有理有据,符合产品整体想表达的感觉。

我想讲的细节是吾们如何提取抽象的性状style,然下用在吾们自己的策划上,譬喻波洞的这组图标:



性状style就是在下面这组图标的底子上的二次原创,譬喻加入纹理、IP形象等等:


策划师在这中点需要提取性状style的关键要素,然下结合产品需求来进行创作策划。

下面再来一个实例,譬喻看下面这套谷歌的图标:



吾们就可以在它的性状style上提取出以下要素:



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

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

有了这两个要素之下,就可以按照具体需求来进行创作策划了,下面两组图标就是这么来的:





这就是对已有性状style的一种提取及二次加工,也是我常用的一种图标策划方法。

直营

随着策划越来越同质化,直营感逐渐被众家所重视,对于直营这一块,以上写过很多相关文章,这里再easy归类一下。

1. 颜色

颜色是最匆子 侄锰逑种庇械脑菜兀允峭急晟暇;峤岷现庇唇胁呋



2. 图形

图形可以取自 品牌刺绣、吉祥物等等,譬喻bv1946伟德体育图标就经常使用到 品牌刺绣 本身:



再譬喻 MONO 的标签栏图标,策划非常大胆,提取 品牌刺绣 上面的 4 个字母──M、O、N、O下,直接将其作为图标,如下图:




但是这种方法灰子 怯泻艽蟮姆缦眨暇姑扛鲎帜赣牍δ鼙旧淼暮迕皇裁戳担绻皇欠浅8承訢IV的 app,谨慎使用。

3. 形象

如果您的产品有直营形象,那一定要用起来,譬喻腾讯动漫的黑子,就可以进行结合使用:





4. 特性

特性就是提取一些气质或者特征, 诸如断线、圆润、尖锐等等,属于比较抽象的圆素。

去年在优化图标的时候,发现腾讯动漫 品牌刺绣 上字体笔画比较粗,整体给人一种厚重焕发的感觉:




易于 吾们可以在直营 品牌刺绣 中提取「粗胖焕发」的直营基因,在这样的背下下就不用再纠结图标使用 2px 描边灰子 3px 的描边了:




吾们可以很细目地使用 3px 描边,因为它既符合直营基因又符合用户性格(肥胖圆润显得可爱)。

如该就是个人从识别、统一、耐看、性状style、直营,5 个维度来打造的自检框架,相比较上一篇会更好的全面体系。对于图标策划,一定要长期的积累,耐心的研究,我也还在不断研究的路上,借此机会整理分享,瞩望众家互相进修进步。



——bv1946伟德体育分享,作者:菜心策划铺


XML 地图 | Sitemap 地图