组件设计的过程是对功能以及视觉表达中的元素进行拆解、归纳和重组。基于可复用的目的，形成规范化的组件。通过多维度组合这些组件，来构建整个设计方案。将这些组件整理在一起，就形成了组件库。但今天我将从另一种使用方式来诠释组件库的应用。

目录

一、问题分析

二、核心痛点

三、解决方案

四、前端延展

五、总结

一、问题分析

本次要讲的组件库是针对 B 端的。首先回顾 B 端的定义，B 端产品，也叫 2B（to）产品，是面向企业用户的产品。B 端产品能帮助企业或组织进行协同办公，解决某类经营管理问题。并且承担着为企业或组织提高收入、降低成本、提升效率、控制风险的重要任务。

其六，使用者都具备专业背景。

结合以上的定义简单介绍下目前设计团队面临的工作挑战：

复杂的业务：2B 产品涵盖企业级业务处理平台。其中包含管理业务域，像 OA 办公系统、人力薪资管理系统、权限系统等。还有中台业务域，例如订单中心、库存中心、商品中心、客户中心等。履约服务域包含售后服务系统、营销管理系统、采购系统、物流仓库系统等；分析决策域包含综合报表、实时数据分析系统等；企业级服务产品有运维系统以及 SaaS 系统等。

不同团队承担着不同职责。在我们团队内部，设计师与 PD 的比例为 1：6，每位设计师都身兼多条业务线。所以，需要有一套各条业务线都能够通用的设计模式。

公司业务整合后，后台数量较多且样式繁杂，多个系统之间的交互不统一，这导致了用户体验受到影响，公司的品牌形象也受到了损害，同时还增加了用户的学习成本。

二、核心痛点

有人会说，只要有人具备时间，这些问题就都能够被解决。然而，该怎样在特定的时间和人力资源范围内解决问题呢？也就是作为设计师，怎样既能够快速又能够良好地完成工作：既能够满足众多的业务需求，又能够兼顾体验设计。

三、解决方案

思量之后，我们决定用传统工具组件库来解决这个矛盾点。并且，我们在搭建和使用方式上进行了适当的调整。

简单介绍下组件库的特点：

独立：一个组件可以在不同的项目中复用；

完整：整个组件库尽可能多的覆盖常用元素；

一个组件的字段可以灵活改写，一个组件的 icon 可以灵活改写，一个组件的配色可以灵活改写，这样就能应对多样化的需求。

目标是要把设计与开发中的元素尽量独立化，让这些元素具备完整的局部功能，然后通过自由组合的方式来构成整个产品。

但是仅有组件库，即便设计师全都使用了组件库，也仅仅能解决协作效率方面的问题，依然无法解决设计人力与产品需求的匹配问题。因为我们不能只是一味地通过招聘设计师来处理这个问题，那该怎么办呢？本部门资源有限，所以要“借”人。下游的人不可行sketch控件库，只能“借”上游的产品。让产品经理承担一部分设计工作。这样做既能提升产品经理自身的专业素质，又能解决设计人力资源的问题。然而，怎样向合作的 PM 团队输出交互能力呢？产品经理用组件库搭建原型是业内通用的做法，然而大部分给 pm 输出 axure 的组件库的应用效果并不好。怎样让产品经理能自行搭建更专业的需求原型并且满足需求体验设计的目标呢？通过实践操作，我们归纳出了一套基本工作流程：

基础组件—基本框架—共通性模版—体验设计；

下面介绍下这套组件库“新”用法的流程：

基础组件的适用范围较广，复用频次较高，能够在多个业务中复用，并且不包含业务逻辑。例如导航栏、按钮、toast、弹窗等都属于基础组件。我们把基础组件进一步细分为六个子类别，分别是颜色、字体、数据录入、数据展示、操作反馈、图表类。在网上可以找到很多关于这些基础组件的资料，此处就不再重复讲述了。

网站的基本框架指的是其信息结构，而网站信息结构是衡量网站用户体验好坏的重要指标。清晰的网站结构能够帮助用户迅速获取所需信息。相反，若网站结构混乱，用户在访问时就会如同走进迷宫一般，很难找到自己想要的资料，最终只能选择离开。我们会依据业务的需求来定义网站的总体框架结构。比如：确定网站的信息结构；规划页面布局；明确导航支持的最大层级数；规定编辑/新增/详情等页面的交互方式等。

B 端产品，尤其在公司内部且与强业务相关的情况下，其页面特征会较为明显。像管理者通常喜爱查看一些大盘数据，像运营系统就需要具备各种数据的大盘展示，以及订单数量、销售额提升百分比的图表展示等。基于此，我们制定了各式各样的仪表盘模版。履约域的售后系统有退换货步骤流程的使用展现模版；运维系统要为运维管理人员提供网络管理、业务应用管理、机房环境等资源监控系统集中展现的页面呈现模版；我们依据各自业务系统的特征进行归纳总结，提供相关业务典型的页面模版，这样业务的产品经理就能依据这些典型业务模版很好地绘制出各自的业务页面原型。我们设计人员在绘制共通性模版时，会持续地对组件库中的基础组件以及业务模版进行沉淀。

体验设计：为何要进行体验设计呢？其终极目标是展现设计的价值，以便更好地服务于业务。我们借助组件库节省了众多的设计人力资源，那这些资源该如何合理地加以利用呢？倘若把 B 端产品当作群体工具型产品的形态来考量，就会更易于理解其中的价值。这些工具的主要目的是“提高效率”，以此来节省成本。这里所说的成本更多的是指时间成本。效率等同于金钱。提高人力效率，能够有效节省企业的人力开销。我们依据用户群体和使用频次的强弱程度，把设计资源合理地投入到重要业务中，优化重点工作流程，提升使用者的效率。这样既满足了业务体验需求，又体现了设计本身的价值。

以上是我们对于传统组件库的新用法。工具是固定的，而人是灵活的。通过对组件库进行灵活运用，我们成功解决了工作中的矛盾点，使工作流程从线性转变为多线程工作模式，极大地提高了工作效率。

我们借助组件库的新用法，从全局的角度来进行概括。在 B 端中后台产品方面，我们要提升其体验，这就是我们的思路。

首先通过常规流程来确认需求，接着细分角色，然后进行合理的模块划分。之后，使用平台积累创建和定义的统一控件来进行功能搭建。

第二步，在沉淀业务模版的过程中，去寻找更优化的交互解决方案。通过深入挖掘用户对象的差异化需求，不断优化控件，重新认识一致性，从而在解决方案上实现优化突破。

第三步，使用各种工具来完善平台。接着排除其中的错误。最后交付优秀的交互文档和解决方案。

通过以上三个步骤并结合组件库，能够较好地规范设计流程，并且能有效地产出符合业务需求的设计。

四、前端延展

我们不仅灵活运用了传统组件库，还结合了阿里的；这样能让组件库在前端很好地协同，前端阶段无需关心组件样式，后续也不用操心页面样式；仅从组件层面来看， 和 Antd 确实较为相似，但在前端协同方面，其他组件库暂时难以做到；此外，还能够满足搭建不同设计中台主题配置的需求；针对服务对象的差异， 在 UI 的定制能力上比 Antd 更具通用性，以适应各业务线的定制需求；另外，配套使用的插件编辑功能也更为完善，极大地提高了设计师和前端的工作效率。

下面简单介绍的具体工作流程：

在站点上，设计师能够以官方的为基础改造成属于自己的。每个这样的东西就是一个自有站点。一个自有站点能够具备多个主题。对于主题配置，能够编辑 Token 并生成主题。

主题发布完成后就进入了插件端，设计师能够在其中进行搜索所有素材的操作，也能够使用配置好的组件，还能够使用站点的模块模板。

内的使用界面：

4、 客户端

组件库本身不依赖任何脚手架，完全能够通过 cdn 引入，或者整合到 -react-app 等方式来使用。然而，组件库为了能方便地应用到前端项目中，就需要一个能够快速帮忙生成工程项目的脚手架。

开发者工具是淘宝飞冰团队开发的面向前端开发者的 GUI 工具。开发者无需关注环境问题，同时拥有海量物料可供使用。目前已与某物料体系打通，能够轻松使用该站点的物料。

二、使用前后流程对比

未使用组件库和的工作流程

使用组件库和后的工作流程

组件库与其他部分相结合，大大缩短了从产品到设计，再到前端的工作量，甚至还缩短了部分还原度测试的工作量。

五、总结

在实践过程里，因为思维有了突破sketch控件库，所以我们能灵活运用传统组件库，其效果评估可以从以下这 3 个层面来讲：

1、对于个人，逐渐形成属于个人的最佳实践和方法论的沉淀；

对于团队而言，我们凭借最少的人员就解决了最为重大的问题，并且达成了设计本身所应有的价值体现。

3、对于公司，满足业务的同时为公司节省了大量的经营成本；

如有侵权请联系删除！