以小见大-B端图标设计沉思

引言

在当今数字化的时代，企业和组织对于高效、便捷的工作方式的需求日益增长。而 B 端产品，作为支撑企业运营和管理的重要工具，也面临着更高的要求。在 B 端产品的设计中，图标扮演着至关重要的角色。它们不仅能够直观地传达信息，还能提升用户的操作体验和工作效率。

B 端产品的首要目的在于协助企业或组织借助协同办公软件，去处理一些管理方面的问题，例如员工出勤考核、在线交流、工作流程审批、大数据监测等。鉴于目标用户的差别，因而和 C 端的图标设计会存在差异。

B 端产品设计和 C 端产品设计存在以下区别：

• 目标用户不同：B 端面向企业或组织，C 端则主要针对个人消费者。

• 功能重点不同：B 端更注重效率和流程优化，C 端强调用户体验和个性化。

• 使用场景不同：B 端通常在工作环境中使用，C 端则更多用于个人生活。

• 数据复杂度不同：B 端涉及大量数据和复杂业务逻辑，C 端数据相对简单。

• 界面设计不同：B 端更简洁、专业，C 端更注重美观和吸引力。

• 用户需求不同：B 端需求更明确、稳定，C 端需求更多样、变化快。

因此在 B 端产品中，图标的设计需要特别留意以下几个关键方面。首先，必须确保图标具有高度的可识别性，使用户能够迅速理解其所代表的含义，从而提升产品的易用性。其次，图标的风格应与整个 B 端产品的界面风格保持一致，以营造出统一、协调的视觉效果。再者，图标的简洁性也是至关重要的，避免过于复杂的设计，以免给用户带来视觉上的负担。此外，还需注重图标的色彩搭配，选择合适的颜色来传达特定的含义或情感。同时，要考虑到不同屏幕尺寸和分辨率下图标的显示效果，确保其在各种设备上都能保持清晰和可读。另外，图标的设计应符合 B 端产品的品牌形象和定位，增强品牌的辨识度。最后，为了提高用户的操作效率，图标的布局和排列也需要精心设计，使其能够方便、快捷地被找到和使用。

用户画像与使用场景

用户画像亦称用户角色，是用于勾勒目标用户、关联用户诉求与设计方向的高效工具。不过，B 端用户画像和 C 端用户画像存在较大差异，借由用户画像，我们能够更优地明晰特定状况下，用户是怎样完成工作的。众所周知，B 端产品的目标用户主要包括企业员工（使用 B 端产品完成日常工作任务）、企业管理者与职能部门（利用相关产品进行决策分析、管理监控）、企业合作伙伴（与企业有业务往来的上下游合作方或客户）以及大型组织（如政府机构、非营利组织等，需要借助 B 端产品来实现内部管理与协作）等，一般而言，B 端用户画像由三部分组成，具体为：企业画像、客户画像以及使用者画像。了解了这些再来看看常见的B端产品的分类：

B 端之类的产品包括 ERP、OA、CRM、SAAS 以及 CMS 等，其目标用户通常为群体，具有业务繁杂、行业属性显著、门槛较高的特性。大部分 B 端产品的功能呈多样化态势，层层相连，不存在明确的主次之别。

在展开设计工作之前，我们务必要极为熟悉业务需求，做好统一化的设计。也就是说需要更多地思考业务的使用场景，将繁复的业务逻辑转化为高效的操作流程，让 B 端用户得以提升工作效率。

设计规范与指导原则

通过前文我们了解了在 B 端界面中，图标广泛应用于各个场景。它们不仅能起到装饰作用，更重要的是可直接表达功能与用途。B 端图标具有简洁明了、表意准确等特点，能帮助用户快速理解和操作。然而，要想设计出优秀的 B 端图标，需注意以下几点：

1.可读

图标的可识别性至关重要，应能清晰地传达其代表的含义，如下图

实际应用案例：

Farries工作台常用流程快捷入口看板

2.简洁

形式与笔画的简洁，去繁从简，在保证表意的前提下，去除多余细节

实际应用案例：

Farries工作台业务办理流程看板

3.一致

图标细节和语义应该整体风格统一，同时符合 B 端产品的定位与特点，如以下几点：

a.线宽一致

b.圆角一致

c.语义一致

实际应用案例：

云+与移动端首屏三个快捷入口图标的设计中，前景图形均采用了当前较为流行的毛玻璃材质，并搭配白色语义图形；背景图形则是复杂度相同的简单几何图形（圆角矩形），且色彩的敏感度以及渐变角度也保持一致，在视觉感受上实现了重量的匹配与均衡。

4.视觉对齐

实际应用案例：

以云加移动端首页常用应用模块下的快捷入口图标为例，能够看出，除了前两个入口的前景主体图形近似为矩形，比较容易对齐之外，其余的几乎都是不规则图形。像这样的案例比较规整的图标有时借助辅助线就能在很大程度上保证视觉对齐和整体一致。

但是很多时候仅仅只靠视觉和感觉貌似不那么具有说服力，那是不是有更科学的方法来协助和指导设计呢？

视觉均衡

有了前面的规范我们已经可以识别图标是否成系列了，但是涉及到一套图标他们的大小怎么视觉上一致呢？以下圈圈框框图标规范我们经常能看到（如Material design），按照此规范可以保证设计图标的统一性，其大小、比例、复杂程度都会标准化、清晰化，安全区可以保证图标的完整性，避免切图中缺少边缘，同时让图标与上下文之间有一定的呼吸空间。

有时候，物理平衡和视觉平衡存在相互冲突的关系。例如，我们在同样大小的区域里绘制正方形、圆形与三角形，我们就会发现虽然它们在物理关系上是相同的，但在视觉上给人的感觉却是大小不一样的，以三个图标（圆形、方形、三角形）为例，可以看到，如果仅遵从物理尺寸的对齐，他们视觉上明显不够协调，而参照上面的参考规范进行绘制则会达到视觉上的均衡。

古语有云“窥一斑而知全豹”，由此可见，小小的 B 端图标的设计看似简单，实则蕴含着大大的智慧。B端图标设计不仅需要具备良好的视觉效果，以吸引用户的注意力，还需兼顾简洁性和易理解性，让用户能够快速理解其所代表的含义，同时还需考虑到与整个系统的协调性和一致性，以营造出统一的用户体验。通过对 B 端图标设计的不断研究与创新，我们将能够为用户带来更加出色的产品体验，让他们在使用过程中感受到设计的精妙与便利。

三方图标库资源推荐

1）REMIXICON

Remix Icon - Open source icon library

Remix Icon 是一套面向设计师和开发者的开源图标库。图标风格为中性风格，适用于各种用户群体的项目。与拼凑混搭的图标库不同，Remix Icon 的每一枚图标都是由设计师按照统一规范精心绘制的，并确保每一枚图标在拥有完美像素对齐的基础上风格一致且简洁易读。图标以24×24网格为基准，分为“线性图标”和“面型图标”两种风格。所有的图标均可免费用于个人项目和商业项目。

2）Fearher

Feather – Simply beautiful open source icons

Feather 是一个简单漂亮的开源图标库，强调功能、一致性和简单性。

3）EVA Icons

Eva Icons - beautifully crafted Open Source UI icons for common actions and items.

Eva Icons 乃是一个免费且开源的精美图标库，适宜用于设计 Web、iOS、Android 等产品，当下涵盖了 480 余个开源图标，设计师下载其素材包后即可进行使用

4）Heroicons

Heroicons

Heroicons 是由 Tailwind CSS 的创建者所构建的又一极其出色的开源图标库。它具备逾 165 个拥有填充与轮廓样式的独立图标，且每个元素还均提供深色和白色版本，其图标的外观极为优质，制作也相当精良。这些图标的入手极为便捷，其还在 Figma 中提供了库。倘若你意欲涵盖所有图标，便可以从公共资源库中下载所有的 SVG 文件。

---

写在最后，欢迎大家下载我们的inBuilder低代码平台开源社区版，可免费下载使用，加入我们，开启开发体验之旅！