永安旅游-组件库搭建总结

由于各个业务线的不断发展，每个频道的业务场景不断增加，设计工作量加剧，沟通成本加大。

品牌的不断升级过程中，为了更好的提升品牌辨识度和设计沟通协作效率，更新设计规范的同时，组件库的搭建变的尤为重要。

本文结合工作涉及的改版项目，深入细节总结了这次从0-1组件库的构建过程。

存在的问题：设计规范更新滞后

团队最初的设计规范是通过分享本地的PDF设计规范文件，但是随着项目的扩大，需要面对的应用场景越来越复杂，产品迭代加快，导致设计规范更新困难，同事异地同步效果差。

1.更新麻烦

更新一次设计规范的工作量很大，项目迭代的过程中需要不断更新和完善设计规范，但是每次修改一套规范的工作量很大，很少有专门的空余时间去修改

2.通知滞后

设计师之间需要口头沟通新的设计规范，大家平时忙于项目，更新规范没空说明，或者即使在群里说明也难免疏漏。

3.不可复用

PDF设计规范很难复用，每个设计师要做自己的一套组件，很多细节不统一也不能复用。

解决方法：云端组件库

携程设计师有一个sketch的插件Kirby，能支持云端设计稿和组件库的管理，所以决定用Kirby+sketch的方式建立一套云端组件库，零学习成本规范设计流程。

在本地编辑好组件库，通过kirby一键上传到云端，然后通过kirby插件安装到本地，就可以直接用在项目设计稿上了。

这样就很好的解决了上面提到的几个问题：

1.便捷更新组件

组件分模块拆解，更新的时候有针对性，修改后一键推送到云端组件库。

2.更新及时通知

sketch即时显示组件有更新内容，具体内容新旧对比一目了然，一键替换更新到本地组件。不仅本地组件更新，所有用到该组件的页面同步自动更新。

3.设计与开发复用效率提高

设计工作中遇到同样场景，只需重复使用库中搭建好的组件。开发可以将组件封装好，重复场景直接调用，避免代码冗余。

组件库的搭建

在搭建构思中，应用到了由一位前端工程设计师BrandFRost提出的原子化设计理论Atomic Design的概念。这套理论将一套设计系统分为五个层级：原子、分子、组织、模板、页面。这个概念为组件库的搭建提供了基本思路。

1.梳理业务流程

我们先根据旧版本的内容，将不通业务线的旅行产品和场景进行罗列，分析相似性的模块，用思维导图总结出来。

2.拆解可组件化内容

根据原子化设计理论，相似模块的内容拆解成原子级的组件。

3.制作组件模板

拆解完之后就要进入具体的设计阶段了。

a.确定命名规则

合理的命名方式，是运用效率的关键。命名的规则和小伙伴之间一定要高度统一，如果是混乱的，使用组件的时候回花大量时间寻找组件位置。

b.布局样式灵活性

同一个样式框架内，可能存放的内容不同，要注意布局的样式定义，才能保证样式框架不会因为内容的改变而变形出错。

c.颜色

颜色库的设计需要将品牌用色精简和合理分组，使用色规范统一、克制。后续颜色更新的时候，是需要更新颜色库就可使全局同步自动更新。

d.规范图标制作

图标的制作关键点在于，使用逻辑和图标规范。图标的命名逻辑是按类别/使用场景/名称/不同状态的规则来命名的。图标的制作规范也会影响组件的使用，在图标组价绘制时，要定义图标的有效面积，替换嵌套时才不会出错。颜色也要使用组件嵌套，这样做方便图标修改颜色，减少图标逐渐的复杂度。

4.组件库的应用

组件库构件好后，根据不同应用场景的不同，搭配重组合适的组件。

5.更新与维护

在产品的迭代和业务不断拓展的过程中，组件也在不断更新变化，组件最好也有迭代周期，已保证满足需求。

新增组件交由组件库小组审核，通过后上传云端组件库。开发同事同步更新组件代码。

组件库需要持续保持简洁清晰的状态，不能出现繁杂混乱的情况，否则会给后面的工作带来很大影响。

6.规范文档配合说明

利用组件库完成一份设计规范，利用文档的形式对规范进行更详细的说明，也能更好的再次回顾一下整个组件的合理性。便于给相关同事查阅，标准化使用流程。还可以对未形成组件的元素使用规则进行特别说明。

总结

组件化是一种搭建产品的思维方式，不仅可以用于UI领域，很多行业都需要这种高效的工作模式。通过组件库提升效率之后，设计和开发都能有更多的时间研究产品的细节和难点，打造出对用户更友好的产品。