一次客户沟通后我悟出了「B端图标」若干设计点

好了，开始本日的分享吧~

今年年初，我到客户现场进行需求沟通，在沟通结束后，客户问了我一个问题，我竟然不知如何回答，只在当时说了：“好的好的，我们会进行优化的。
”

当时客户是这么说的：“为什么界面的图标这么普通，毫无新意，能不能设计的好看点。
虽然我们是B端产品，但这样子的图标真的不好看。
”

虽然我心里知道B端产品首先因此可用、易用为主的，那么图标也不例外，在评价图标设计的时候，我们首先看图标是否表示了可用与易用，是否让用户通过看图标就可以遐想到这个功能是什么（合理、无歧义表达）；同时图标是否符合设计规则，让界面看起来统一与专业。
若图标符合以上要素，就可以再来看图标好不好看的问题了。

不过这并不是一位客户的问题，后面我们还碰着了很多客户有类似的问题，一上来就想要视觉层面好看的图标、有创意的图标、颜色丰富的图标。

那B端图标设计真的只须要考虑好不好看吗？作为设计者的我们，还能做什么呢？实在，B端图标设计是带着脚镣在舞蹈，小小的图标藏着大大的聪慧，下面我们一起来看看吧~

图标也叫icon，它是对现实天下的概括、抽象、隐喻，在产品软件中，它会向我们传达功能与操作。

有些图标已经成为大家熟习并同等认同的传播措辞，例如删除、设置、男士、女士、刷新、电话、邮件，看到这些图标，人们的反应基本是同等的，无需再多说什么。

一、图标分类

图标在B端界面的用场我们就不展开长篇大论说了，大略来说图标除了做点缀，还可以直接表达功能与用场。
因此，我们可以将B端图标分为两大类：示意类图标和半装饰类图标。

1.1 示意类图标

示意类图标（也有称之为功能类图标）是指可以向用户示意功能用场的抽象化图形，可以和笔墨合营利用，也可以单独利用。

该类图标在中后台系统的界面中会比较常用，例如根本组件、导航菜单、状态、功能性模块。
示意类图标不仅以可用的办法丰富了界面效果，在一定程度上也缓解了用户的视觉疲倦（试想，全是笔墨的界面会怎么样）。

1.2 半装饰类图标

为什么我们要取名「半装饰类图标」呢？缘故原由在于，在B端界面上，不会无缘无端涌现纯装饰、毫无寓意的图标，任何图标的涌现即便原来是为了装饰，设计者在设计时也须要思考其含义属性。

该类图标会在中后台导航、中后台事情台、Dashboard、B端网站等地方涌现，它们可以让B端界面生动起来。

我们可以创造，某些场景下利用示意类图标会更好（比如根本组件），某些场景下利用半装饰类图标会更好（比如B端网站），某些场景下利用任意一类图标都可以（比如中后台导航菜单）。

回到一开始客户的问题：把图标设计的好看点，他说了好几个地方，记得彷佛有树控件 、导航菜单、按钮等。
设计者们需看看目前客户讲的场景是哪个，有些场景不适宜亮丽的图标，这会喧宾夺主，例如根本组件中。

我们深刻理解B端图标类型的利用场景，在设计决策时会更加得心应手。

二、图标设计规则

虽然示意类图标和半装饰类图标视觉形式不同，但在绘制上的规则是互通的。
我们团队输出了一套企业级B端图标设计规范，不仅可以帮助新人设计师快速上手，并且可以使团队内设计师高效协作，担保设计结果的同等性。
接下来和大家分享下思路，这是一套可复用的方法。

2.1 约定图标绘制区域

我们须要给一整套图标约定得当的绘制区域，担保不论哪位设计师输出的图标，均符合设计标准。
并且原始图标大小同等，可以担保前端利用也非常友好。

如果都是48px48px区域绘制的图标，它们均缩放到16px16px即可；如果一个是在48px48px画板上绘制的，一个是在88px88px画板上绘制的，它们都缩小到16px16px，会导致图标看起来视觉不一致。
若期望它们看起来同等，就须要专门为不同画板的图标设计绘制规则。

这里在和大家分享一个小心得：我们团队在约定图标绘制区域时，创造了一个问题。
Antd的图标是绘制在1024px1024px画板上的，但又有一些团队是绘制在16px16px，到底该当选取哪种画板呢？经由实际操作后我们创造，画板越大，设计细节可以越丰富。
但缩小到小尺寸时，会有小数点的虚边（不过不妨碍前端运用，用户也看不到虚边）。
而小尺寸画板绘制图标，画板全在视线范围内，设计师绘制图标时更有安全感。
以是，不论用什么尺寸的画板，只要团队成员同等认同即可，不用过于纠结。

2.2 设置出血位

除了要让图标绘制到统一的画板中，我们还约定了出血位，哀求所有图标均保留出血位（出血位默认利用固定值），出血位起到的浸染是：防止设计师图标绘制欠妥心贴边后，图标在实际运用处景中会涌现缺失落征象。
当然，出血位的默认数值并不是一成不变的，许可设计师在绘制一些分外形状的图标时，有调度空间，担保视觉平衡。

2.3 约定元素调度规则

针对示意类图标：

线条：我们会哀求设计师在绘制图标的线条/圆点时默认利用某个数值，然后设定线条粗细/圆点大小的递增或递减规律，例如以2的倍数为主基调绘制，默认为6px粗细/6px大小。
但许可设计师在绘制图标时，不得当用默认数值的，就按照增减规律去辅导设计，如下所示。

圆角：图标采取何种内外圆角设计会影响图标给人的觉得，数值大的圆角会让用户觉得亲切；数值小的圆角会让用户觉得壮实、专业。
采取哪种圆角办法，设计师可以参考产品调性去规定。

针对半装饰类图标：

半装饰类图标在设计上也不是随意为之，除了要可以表达文案内涵外，如果是一整套的图标系列也须要约定元素调度的规则。

例如约定在「几何图形+业务图形」的设计根本上进行发挥，担保图标放到一起具有很强的同等性。
并且半装饰类图标还要设定色彩范围（主色、辅色），如此可以让界面色彩不凌乱，严谨有序。
可以看到腾讯云官网的图标采取了类似的设计方法。

2.4 分层打造秩序

对付图标画板来说，它不是一个平面，它就像楼房一样，是分层的。
从底层到最上层的内容依次为：主画板区域、核心内容绘制区域、根本图形参考区域、实际图标。

2.5 从根本型拓展

我们在设计图标时，都该当先从根本型开始思考——圆形、矩形、三角形、正方形等，担保计构图上的节奏感和规整性。
当根本型无法知足须要的时，以它们为准向外散发，在遵照设计规范的根本上，做视觉上的平衡和微调。

如果是落到实际软件中运用的，建议所有图标末了都要合并路径，担保图形规整和干净，同时便于精确输出和利用。

三、图标画板尺寸

在「2.1 约定图标绘制区域」中，我们说到了要为一套图标约定统一的画板区域，但这个事情给设计师造成了困扰，还不止一位设计师问我：“那是不是我不能在用其他尺寸的画板来设计图标了。
”答案当然是否定的。
约定画板尺寸不是约束，正好是在规则中给予了设计师有序拓展的能力。

如果不约定画板尺寸，那么设计师直接放飞，每个图标都有自己的尺寸，并且有些还会涌现长方形的形态。
毕竟每个人的事情习气不同、面对的产品不同，直接打开软件画图标是最快的办法。

而首先约定画板尺寸，设计师就会有条理地进行绘制，在碰着分外情形时进行有序拓展，我们可以称之为场景拓展法。
例如设计师可以为B端根本组件、事情台常用导航模块、结果页的图标各自设计一套绘制尺寸。

那设计师要怎么判断什么时候采取场景拓展法去设计呢？我们可以优先利用默认画板尺寸设计图标，在碰着分外场景不许可情形下，采取场景拓展法去实行，针对界面风格有场景差异的，可以规定几类画板尺寸，为不同场景使。

四、线型与面型

线型图标与面型图标也是设计师常常在谈论的话题，他们常常谈论「什么情形下利用线型图标，什么情形下利用面型图标」。
做过比较多B端产品的小伙伴可以创造，没有说哪种场景必须利用线型图标，哪种场景必须利用面型图标，紧张还是看当前产品调性得当哪种，并且利用某类型图标后，对界面产生的效果是什么。

例如当界面图标较多时，采取面型图标，会显得页面很重，会把用户视觉勾引到图标而不是重点数据上。

线型图标与面型图标在界面中利用，是一项系统工程，是由多方成分决定的。
但我们设计师须要担保B端界面图标利用的统一性，即便按照场景区分，也须要负责思考，是不是有必要。

就如界面字号利用定律一样，建议不要超过3种，多了会让界面凌乱，降落界面设计品质。
图标也是如此，不论面型还是线型，要站在产品角度去整体把握，而非线型和面型的大略选择。
很多B端产品是两种类型混用的，但它们很好的划分了利用场景。

这里我总结了一些线型图标与面型图标常用的场景（以B端中后台为例，但这并不是唯一选择）：

在导航上（菜单极其多），常见默认用线型，选中用面型。

在导航上（菜单很少，单层），粗一些的线型图标或者面型图标都会用，且会比较个性化，以提升产品整体调性。

在根本组件中，常日利用线型图标，且颜色浅，用户可以把把稳力聚焦在信息本身。

在表格数据的状态中，面型和线型是均分利用的状态涌现。

在笔墨按钮中如果要添加图标，让界面展现更丰富，线型按钮居多。
如果一旦按钮很多，面型图标会让界面显得太重。

若标题区要涌现按钮，面型按钮会使得区块显得更整体。

五、视觉尺寸与规范尺寸

这里还想和大家说说「视觉尺寸与规范尺寸」的事情。
之前碰着设计师这么问：“既然已做生意定了图标的设计规范，那是不是就严格按照规范区间来（严格按照根本图形参考区域来），但是有些图标不适宜直接套用规范啊。
”

是的，实在很多不规则图标是不适宜直接套用规范的，就像一份周报格式不是所有岗位都适用一样。
如果设计师创造有些图标直接套用规范不可行，是可以根据「视觉大小同等性」进行微调的。
这不仅担保了前端开拓的便捷，也担保了界面视觉的整洁。

六、图标命名

既然是一套B端产品层/企业级图标库，那么必须要有规范的命名办法，这样会方便设计师之间的协同，也会更方便开拓与设计之间的协作，同时查找效率会提升。

那么命名有什么规律呢？实在只要根据项目的情形，团队内有统一的认知即可。
关于命名的中英文，也是视团队而定，各有优缺陷。
比如是英文，那会方便开拓直接用名字，不用重新取名（当然设计师取的英文名开拓不喜好，也会改）；用中文的话，方便检索。

可以是：

尺寸/类型/图标名称/状态16px/导航/上传/默认形态/格式/图标名称面型/方型/新增模块/图标名称/状态导航/分享/正常

七、三方图标库

好用的三方图标库还是很多的，虽然图标库质量参差不齐，但还是在一定程度上解放了设计师每天画图标的痛楚。
这里先容几个图标质量不错的网站：

7.1 Noun Project

https://thenounproject.com

7.2 Iconfont

https://www.iconfont.cn

7.3 ICONS8

https://icons8.com

7.4 Font Awesome

https://fontawesome.dashgame.com/

7.5 IconPark

https://iconpark.oceanengine.com/home

八、写在末了

当客户提出图标好不好看时，是一个正凡人的反应，试着想想我们自己，不也总是会很表面得看待一件事情么。
因此，客户不会知道原来一个小小的图标也是藏着大大聪慧的。
不过没紧要，当我们理解了小图标内部的大聪慧后，我们可以更轻松的驾驭图标了，也可以更知道在何种场景下，利用何种图标可以提升界面展示效果，得到客户的好评。

#专栏作家#

知果，"大众年夜众号：知果日记，大家都是产品经理专栏作家。
浙江工商大学品牌设计专业硕士，《B端思维-产品经理的自我修炼》作者。
在产品设计流程、产品设计原则、产品设计方法、产品设计规范方面均有丰富履历

本文原创发布于大家都是产品经理，未经作者容许，禁止转载

题图来自Unsplash，基于CC0协议