熵简技术谈 | 2B 场景下的前端组件库换肤设计理念与实践

导读：一个统一、规范的组件库，能够不断沉淀设计师的思考、降低设计与开发成本，保证产品在不断发展的过程中，用户体验不被打断。同时，熵简科技作为一家深耕B端的服务商，其前端组件库还需要快速赋能
2B 场景下的业务需求。文本针对 2B 场景，谈一谈熵简前端团队在构建前端组件库中的设计理念和实践。

作者信息

本文出自熵简科技大前端团队，团队致力于打造世界级的B端产品。主要工作包括搭建先进、统一的前端基础架构，建立严格的产品设计规范，探索前沿技术的业务落地，持续沉淀优秀的前端案例，不断提升各个产品线的客户使用体验及开发效率。

1、 背景

前端组件化已经成为一种主流，一种共识。一个统一、规范的组件库，能够不断沉淀设计师的思考、降低设计与开发成本，同时也可以降低用户在不同产品模块之间切换的学习成本，保证产品在不断发展的过程中，用户体验不被打断。

熵简科技是一家为企业客户提供数据智能平台的服务商，因此我们团队在构建前端组件库时，除了需要考虑上面的需求以外，同时还要兼容 2B 场景下的业务特征。

在2B场景下，很多客户需要对产品进行私有化部署以及定制化改造，客户往往会对设计风格提出与自身公司文化背景相统一的定制化需求，这时就需要我们的组件库能够在输出效果稳定可预期的同时，具备响应客户需求变化的强大扩展性。

为了达到上面的要求，在整个设计和开发过程中，我们一直遵循两个原则：

1、原子化：类比物质的分子组成结构(原子构成分子，分子构成物质)，原子设计就是将页面颗粒度分为原子、分子、组织、模板、页面的超细维度，进行组件和组件的层层嵌套。同样我们在设计组件时将设计元素的颗粒度进一步精分、组合产生颜色搭配主题、形态组合主题等，不同的主题结合产生最终的组件样式。
2、统一语义化命名：UI和前端统一规范各原子化"物料"的命名，减少协作中的沟通成本。

2、 2B场景下的设计原则

2.1 系统一致性原则
实际的项目开发通常需要在同一环境下整合多个产品系统，组件库的开发能很好地保证各个系统有一致的视觉语言、交互操作规范。

2.2 敏捷开发原则
2B业务在POC阶段需要有快速的视觉Demo输出，因此原子化的组件设计与模块化的组件开发配合显得尤为重要。
最终，我们希望能够搭建起 产品/UI/前端 三方高效的协作流程，如下所示：

本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！