编辑导语：在B端设计中，往往离不开图标的设计。那么，设计图标都有哪些内容呢？关于B端图标设计的设计难点是什么？B端图标的搭建规范又是什么？带着这些疑问我们一起来看本篇文章，希望作者能够为你解答这些疑惑。

目前我主要深耕于B端设计中，深知B端图标设计与C端有很大的不同，无论是应用的场景、设计的理念，都有非常大的差异。

而现在网上有不少关于C端图标如何图标绘制的文章，对于B端的方向少之又少，因此我们今天就来聊聊图标，聊聊B端图标究竟应该如何设计？

在我们的设计元素中由 色彩 color、文字 font、图标 icon、图形 shape、空间 space 这五个部分组成，而图标的影响是整个产品的形象与气质，起着画龙点睛的作用。

在图标的设计中，它既需要具备严谨的设计态度，同时还要兼顾设计效率。

前者是提升产品的视觉表现，后者是节约企业开发成本，无论是我之前一篇文章讲到按钮，又或者是每个B端产品中的导航，都涉及到了图标。今天我就和大家来聊聊如何严谨高效的设计B端图标。

在设计系统中，基础组件与业务组件遍布系统的各个角落。

因为大多数B端设计系统都是采取这样的核心思想去构建，这样更能够满足B端系统的实际工作需求，同时又能让设计系统真正落地，符合B端产品“复用”的设计理念，使每条产品线都能够高效的搭建。之后我会单独出一期设计系统的文章，咱们之后单独细讲。

聊聊它们两的定义：

• 基础组件：每一个产品中都可以进行复用，是搭建整个系统的基础；
• 业务组件：需要满足特定产品的需求，同时在功能上，不会进行多场景复用，作为单独的模块进行分类。

这种思维方式在我们团队中，被称为基础业务拆分法，运用到我们的每一个产品线中。

还没理解到？我举一个例子，在Teambition Clarity Design，就按照相同的思路构建的设计系统。

在Teambition Clarity Design设计系统当中，所有组件都分为：基础组件、业务组件，我猜测正是通过这样的划分，才使得Teambition的设计系统能够适用于更多的业务场景，满足飞流、行云、thoughts、甘特图、协作全景等多条产品线的设计需求。

回到图标当中，我们可以使用相同的思维方式，对图标进行相应的拆解分析。

• 基础图标：属于整个B端图标当中的基石，主要是页面中最为基础的图标组成。

比如：设置、编辑、搜索、时间日期等都属于基础图标，每个系统都必须有的基础图标，所以在绘制图标库的过程中，基础图标可以确定整个图标的性格[1]。

[1] 图标性格：为图标整体给人的视觉感受（在本文第二章会着重讲到）

• 业务图标：属于B端图标设计中的业务分支，和我们每个产品的业务模块都保持一致，通常是每个系统都会有一套独有的业务系统图标。

比如：公海池、线索池、归属人管理、商机管理、客户管理等，都属于业务图标。业务图标主要是要求设计师能够进行快速拓展。

当然基础图标与业务图标之间也并不是一尘不变的，很多业务图标在产品中频繁的使用会被提升到基础图标当中，同理使用减少也会进行相应的剥离。

一、B端的图标与C端平台图标的差异