微盟WEB端设计系统KleinDesign上线

KleinDesign是微盟用户体验团队&前端团队在服务业务过程中沉淀的一套服务于SaaS行业的企业级 WEB端设计系统。经历微盟内部众多的业务三年的沉淀与打磨，致力于解决“需求多样性与体验一致性的矛盾”、“研发速度与质量的矛盾 ”、“产品扩展性与用户体验的矛盾”等SaaS行业中常见的痛点问题。

它包含了Klein基础组组件库、Orion Fonts素材管理平台、Klein Editor多场景富文本，并依托KleinPro中后台前端最佳实践、Orio Market物料管理平台实现WEB端的极速搭建能力，为开发者提供高效愉悦的开发体验。

经过近两年的持续迭代，Klein服务于微盟内部的各项业务需求，截止目前已经成功在232+项目、3000+页面上稳定使用。它经过实践验证，在实际项目中得到了充分应用，为团队提供了强大支持。

此前，微盟内部存在多条业务线，每条业务线都有自己的设计团队、开发团队来支持各自的业务需求。各业务线的商家端都是各自独立维护，仅依靠一份UI规范文件来保证一致性。在2020年初，用户体验团队对微盟的商家后台进行了全面的体验走查，发现了许多问题：

设计效率｜设计团队的规范管控失灵，难以很好地实现约束，设计效率降低。

研发质量｜前端代码习惯不同导致页面样式不一致，难以约束前端开发人员。

产品质量｜业务团队都有自己的想法，导致同类需求出现不同的设计方案，难以约束产品。

体验水平｜没有定义标准组件，导致各业务线开发的功能、界面与交互存在诸多体验不一致；尤其是第三方开发者方面更是缺少约束，难以保证体验。

成本风险｜业务团队间产品、设计、前端缺乏沟通，导致信息孤岛和重复造轮子。

创新和变革慢｜系统腐化问题比较严重，面对多变的市场，不够灵活，逐渐丧失竞争优势。

基于以上问题，用户体验团队与前端团队开始思考如何解决以上问题，并建立有效的沟通、协作和约束机制，以提高设计效率、产品质量和用户体验，并保持创新和变革能力，从而保持竞争优势。

我们发现，微盟此前的系统方案耦合了太多业务的属性，如果直接在此基础上进行设计规范与界面的升级改造，将会有极高的成本和阻力。因此，我们选择了从零开始搭建一套适用于SaaS行业的设计系统，再通过设计系统中的组件库，逐步覆盖、升级我们的产品界面。并在为公司搭建一套通用设计系统的同时，尝试思考如何更好的服务SaaS行业。于是我们有了“简单、高效、舒适、开放”的 KleinDesign设计系统。

恰逢微盟启动了以“产品一体化、体验一体化、服务一体化、数据一体化以及开放一体化”为终极形态的WOS新商业操作系统项目，这也给KleinDesign设计系统提供了最佳实践空间。

在WOS系统的全新体验设计中，我们通过Klein基础组件库 + KleinPro中后台前端最佳实践作为设计规范的延伸对设计师和前端研发进行了约束，高质高效地解决了体验一致性的问题。同时使用Orio Market物料管理平台做为业务组件的管理中心，解决了重复造轮子及系统腐化等问题。而通过Orion Fonts素材管理平台对系统素材资源的管理权限进行回收，解决了过去前端、产品、设计师对资源及权限管理混乱的问题。这套设计系统为企业保持竞争优势提供了可靠的保障。

1、全面完整的设计系统

Klein是一套全面完整的设计系统，希望帮助设计团队与研发团队达成无缝高效的上下游对接。除了Klein基础组件库，还包括Orio Market物料平台、Orion Fonts素材管理平台，一举解决了图片、图标、业务组件等各类可复用资产的展示查找、使用指南及安全性等问题。KleinPro最佳实践案例库，则聚合了SaaS产品中的经典场景案例，开箱即用，帮助开发者快速实现项目从0～1的建设。Klein Editor多场景富文本则更为优雅的实现了WEB端各种场景的文档编辑能力。

Klein 基础组件库

Orion Fonts 素材管理平台

Orio Market物料平台

Klein Pro 中后台前端最佳实践

Klein Editor多场景富文本

2、开箱即用

为了帮助开发人员在最短的时间构建出美观、高效的页面。我们提供了最佳实践解决方案Klein Pro(已在内部使用，即将开源)，其整理了各种常见的业务场景，并将它们转化为可复用的页面模板，这样开发者只需简单地复制和修改，就能快速搭建符合需求的页面，从而大大提升了研发效率。

在微盟SaaS业务中，我们将Klein组件库集成在WOS系统中，外部商户定制开发者可直接在WOS系统中使用，无需进行任何繁琐的配置。这极大地降低了开发中的接入成本，让其能够专注于业务逻辑的开发，而不必关心组件的安装和布局设计。最令人兴奋的是，即使没有设计功底，开发者也能轻松开发出美观的页面。我们的组件库经过精心设计，拥有简洁清晰的界面风格，开发的页面在视觉上也能赏心悦目。开发者只需专注于业务逻辑的实现，无需担心页面美观度。

3、丰富灵活且开放的组件

从微盟多年深耕SaaS行业实践中，我们抽象出了5组基础变量以及45个基础组件。在WOS新商业操作系统项目中覆盖了95%以上的页面，借助Klein Pro的案例库，前端研发无需依赖基础UI设计直接进入开发阶段，实现了1500+的前端页面无UI开发，前端交付质量也得到了大幅提升。同时，Klein在这些基础组件的设计上提供了细致的配置选项，以便开发者后续的拓展和定制。开发者可以根据具体需求进行灵活的配置，使组件库与开发者自身项目完美匹配，满足各种定制化的需求。

4、友好的文档体验

我们在组件库官方文档中提供了清晰的接入指导和组件示例，帮助开发者理解和应用各个组件的功能。无论是了解组件的基本用法还是深入掌握其高级功能，我们的官方文档将成为您的重要参考。我们致力于为开发者提供一流的文档资源，以便用户能够更加轻松地利用Klein组件库构建出卓越的应用。

5、全面完整的设计系统

基于Klein的可定制化能力，开发者能够灵活应对各种设计需求，呈现与众不同的用户界面。在样式层面上，Klein提供了一套符合SaaS场景的主题样式，并通过Less变量可继承的特点，实现了组件样式风格的定制化能力。开发者可通过配置Less变量，对整体风格或者单个组件的外观进行调整，以保证页面样式与项目的一致性，开发者还可以根据项目需要实现整体风格的一键切换。

6、二次开发及物料共享能力

基于Klein灵活的API设计以及物料平台的开放能力，开发者可以迅速开发基于业务或者特殊需求的定制化组件，并将其上传至物料平台在团队/社区内共享。在微盟内部，我们基于Klein组件开发了大量的业务定制组件，并依托于物料平台的共享，在公司内部的数百个项目中实现代码的复用，最终提升整个前端页面的开发效率。

项目初衷是：

“服务于SaaS行业的设计系统，创造更好的用户体验”，所以未来我们在其他产品中将投入更多的精力探索Klein Design对于SaaS行业赋能的可能性。

KleinDesign 官网

https://klein.design.weimob.com

Github React 组件库

https://github.com/weimob-tech/klein-react

Figma搜索“ Klein Design ”