赞助商
立即赞助

腾讯设计师总结的图标设计五维自检法

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

@菜心设计铺 :最在做图标的优调整,虽然改大,但在复盘的时候还是总结很多心得,在这里和大分享一。

图标是界面设计中最重要的元素之一,也是我们 UI设计师必备的技能,常工中我们经常接到含有图标设计、优化的需求。但到底什么样的图标才是优的?也许很设计师并没有太完整的评判系,只是凭感,样就造成输出效果不稳定、耗时太长等不良的果。

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

  • 识别
  • 性格
  • 品牌
  • 饱满
  • 细节

一、识别

判事的价于它的用途什么。

图标的途是帮助户解信息,「识别性」就是图标最重要、最层的值,如果你设计一个图标,户看懂,即使视觉再美观,是无根之木,没有任何值可言。

识别以分为两个方面,一是含义识别,二是视觉识别

先说含义识别,简单来说就是你的图标能不能被理,当并不是设计师自己能理就以,而是需要用户来决定。里和大家分享一个我判断图标是否易识别的方法——内部用户研法,说白就是随机问一团内部人,最问几种位,样得来的结果更加靠,案例下。

在改版「话题」这个图标的候,想了博的「#」,于是把「#」和气泡框结了一起,如下图:

腾讯设计师总结的图标设计五维自检法

这找来10个内部人员进行测,只有3个能懂图标的思(这3个人都是经常玩博的),在这的数据之下,不用犹豫,这个方案一定是不可取的。

在进调研时,最少要保证80%能看懂,才证明你案是可。

再视觉识别,顾思义这一点已与图标含义无关,视觉层面的问题,例如小、底色阻碍用户识别的因素。

这里引入一个国外的测试结果,是我在一位前辈的章中看到的,测验包括一组种样式的图标:白黑色实心图标,白黑色空心图标,黑白色实心图标,黑白色空心图标,经过10天的时间,1260名参与者总共成了超过25000次图标的认知测试。将得的数据分成组进行双向方差分析,在相同的统计条件,择黑白色空心图标要他种组合的时间慢0.17秒,就是说这种图标的信息表达会弱,如图:

腾讯设计师总结的图标设计五维自检法

在这样的论与数据的支撑,我对分图标进行了如改版:

腾讯设计师总结的图标设计五维自检法

有色的图标全从线性改成面性,如改成面性(例如时钟)需要适当粗描边,目的就是视觉识别性。

切,识别是图标最重要的价值,尤其是在没有文字说明的情况下,一定不要让用户产生困惑,不你就是在消耗用户验,而不是给用户验赋能!

二、性格

试想果一个人没有,个人就是没有灵魂的,图标也一样,没有即没有灵魂。

那如何造属于的性格呢,需要从用户和品牌出发,例如腾讯动漫的用户都是动漫、cosplay爱好者,给人一种萌可爱的觉,所以需要让图标尽量圆润一些:

腾讯设计师总结的图标设计五维自检法

像上图2号图标一,增大圆角,使图标起来更加圆润可爱。

基于这样用户群,我们将原有些单色图标,改成下这样色图标:

腾讯设计师总结的图标设计五维自检法

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

三、品牌

品性是我们经常提到纬度,常用提取品基也有很多,颜色、图形、祥物等等,这里举两个例子,个是具象品基——祥物:

腾讯设计师总结的图标设计五维自检法

我们有自己品祥物——黑子,所以在图标设计时可以将其运用起来,如下图是结合黑子形象设计出来「逗币」图标:

腾讯设计师总结的图标设计五维自检法

再举个比较抽象例子,从 logo 提取品基。

由于 logo 的字体笔画比较粗,整体给人一种厚重饱满的感觉:

腾讯设计师总结的图标设计五维自检法

因此我们可以品牌logo 中提取「粗胖饱满」的品牌基因,这样的背景下就不用再纠结图标使用2px描还3px的描了:

腾讯设计师总结的图标设计五维自检法

我们可以很确的使用3px描,因它既符合品牌基因又符合用户性格(肥胖圆润显得可)。

四、饱满

很多时候我们出的图标不够精致,其中一很的原因就不够饱满。

如何判断图标是否饱满呢?我的衡量方法就是在图标上面一个矩形,看图标的正形的面积是否还可增。

例下图,蓝是正形,红是负形:

腾讯设计师总结的图标设计五维自检法

很明显蓝的正形面积是以增加的,例:

腾讯设计师总结的图标设计五维自检法

就是在增加图标的饱满度,我也是按照个思路来改版图标饱满度的。

举个真实的例,版的续图标是上下结构,而上面部的图形窄,导致左上角、右上角的空多(也就是绿色部多),没有撑矩形,如下图:

腾讯设计师总结的图标设计五维自检法

于是对图标的结构进行了调整,尽可能的减少绿色部,最后达了下图这的效果:

腾讯设计师总结的图标设计五维自检法

最后提醒大家,对于图标的饱度,还需要结整套图标的视觉效果来进行调,虽然上面这个方法可以解决大部图标的饱问题,但还是要体景体析,切记,的目标是让整套图标起来和谐、统一、致!

五、细节

细节也包含多方面,例如:

1. 角度是否一致或者遵循某种规律

腾讯设计师总结的图标设计五维自检法

我们定的角度规范是30度的倍数,样以很大程度的提高图标统一。

2. 描边末端的细节处理

下图就是一个错误的例子,一个描边末端是直角,一个又是圆角:

腾讯设计师总结的图标设计五维自检法

我们在处理样的细节时,一定要证统一。

3. 像素对齐问题

大家得只要把一个尺寸的图标做像素对齐,导出其他倍数的图标就是ok的,其样的想法是不对的,因为在导出0.5或1.5倍数关系的时,像素很容易次产生不对齐的情况。

举个例,做图标是以2倍图为基础,然后统一导出3倍图,那这候3倍图就是2倍图的1.5倍,导出的候就发生了下面这的情况:

腾讯设计师总结的图标设计五维自检法

虽然2倍图是像素对齐的,但3倍图却没有对齐,如果计没有仔细检查切图,就会发生线上图标发虚的情况,所以在输出切图,一定要仔细核查,发现错误及调整,免得造成不良响。

除了以上这些,有视觉大小、圆、描边粗细是否统细节,然,这些都比较容易理解,不举例说明了,大家在做图标设计时候定要多多注意。

总结

本梳理五纬自检法可以用在图标设计自我检查、改版优化等多个,或许它并不全,定具有参考价值,希望能大家带来启发和灵感,我们也会更加努力,争取做出更好作品和教程与在设计路上你们分享交流。

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

腾讯设计师总结的图标设计五维自检法

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

相关文章

我猜想我们大多数人都是从了解一点 UI,或者根本不了解的情况下开始从事设计的。但即使开始时我们并没什么优势,我们仍然想方...
App设计
网络相关设计是什么?如何设计?本文作者将从自身角度一一为你解答。 一、网络相关设计简介 很多文章和视频里都说我们需要...
场景设计
本文针对的是从 UX 角度出发的标签系统设计,不同于数据库的标签系统设计。「标签系统」的概念来源于《信息架构:超越 web 设...
一致性原则
「设计」区别于「艺术」,在于艺术的主题是「我」,而设计的主题是「我们」。因为艺术多关乎于艺术家本身,而设计更多的是与...
交互细节
想想图标的绘制也是有历史的,从刚开始 ps 用面切法运用布尔运算去切,有时候线条也是用面切面得到。随着线性图标的火爆和普...
ICON
编者按:设计原则总是看起来简单抽象不言自明的,但是在细分的设计领域,这些原则其实有着各自不同适用情况,有着「特定的条...
ICON
发现圈子中越来越多的设计师都开始想要跳出狭义范围的设计师 Title,去尝试拓展边界做更前或者更广的事情,比如全链路设计、...
品牌
作者通过生活中的观察,介绍了 QQ 音乐、美团外卖和大众点评三款 APP 产品中的设计细节并分析了设计动机,与大家分享。 QQ音...
产品细节