同今生活在线网

图标自检手册

UI设计培训 2019-09-25 09:4291未知tbzjsc

一转眼已经过去一年有余,对于图标也有了更加深刻的理解,所以今天继续深挖这个话题,希望能够打造一份全面的、可行的图标自检手册,帮助在大家改版、面试等场景进行自检优化。

去年写了一篇关于图标设计自检法的文章,有幸上了首页,当时开心了好一阵子:

有兴趣的可以看一下:《图标设计五维自检法》

不过直接看这篇也ok,这篇会更全面完整一些,大纲如下:

1.识别

1.1 含义识别1.2 视觉识别

2.统一

2.1 圆角大小2.2 描边粗细2.3 视觉大小2.4 描边尾部细节2.5 角度2.6 正负形比例

3.耐看

3.1 饱满3.2 变化的透气感

4.风格

4.1 属性表达4.2 形式表达

5.品牌

5.1 颜色5.2 图形5.3 形象5.4 特性1.识别

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

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

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

1.1含义识别

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

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

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

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

1.2视觉识别

视觉识别与图标含义无关,主要是视觉层面阻碍用户识别的因素。

目前我总结有以下几点:

1.2.1 颜色因素

明度特别接近的颜色不能用在一起,比如柠檬黄和白色,如果白色图标放在了柠檬黄的底色上,白色就很容易看不清楚,而且特别晃眼:

1.2.2 底色与线性图标的搭配

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

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

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

杰途IT培训学习网 备案号:

本站内容部份来自网络和网友自行发布,如有侵权等问题请联系本站删除。