高效设计之云端UI组件库的建立与使用
在此处添加您的工具提示文本
近期基于Master go平台更新了组件库3.0：ENMO UI LIBRARY
基于原子组件原则构建的UI规范系统：ENMO UI KIT
前言
1.问题之源—本地组件库
在项目初期，团队设计师的协作方式是通过一个本地的sketch规范文件，以复制粘贴的方式来复用一些元素和控件。在设计师协作人数不多，UI控件改动频繁的情况下，这套流程可以比较快速的完成需求。
但随着项目逐渐成熟，协作设计师人数变多、UI控件逐渐趋于稳定且需要复用的地方逐渐变多时，之前流程的不足就逐渐凸显出来。
1.更新通知缺乏自动化
2.全局组件更新困难
3.代码复用率低
2.解决之道—云端组件库
鉴于设计师目前多使用sketch+iCloud的工作流程，而正好也具备云端管理的能力，故决定以iCloud作为桥梁，建立一个基于sketch+iCloud的云端设计组件库，以非常低的迁移和学习成本完成流程优化。
优化后的流程是把sketch本地组件库通过iCloud上传至云端服务器，设计师通过iCloud云端功能添加到sketch中，并在设计文件中嵌入这些云端组件。
1.更新通知自动化
2.全局组件一键更新
3.开发效率和质量大幅提升
开发通过代码把一些常用的样式进行封装，在一些高度复用的场景中直接调用。一方面可以通过调用的形式减少重复样式代码的复制，精简代码，降低软件包体积，另一方面也可以减少不必要的工作量还能方便后期维护。
3.实践之行——云端组件库搭建
想要高效解决问题，正确的方法很关键，这里我们用到的方法就是原子设计理论。2013年前端工程师 Brad Forst 将此理论思想运用在界面设计中，形成一套设计系统，包含5个层次：原子、分子、组织、模板、页面，这套理论为组件库的搭建提供了思路和方法。
在实际搭建过程中，因为组件库的搭建工作量往往比较大，需要先明确流程和分工，主要包括以下几个关键步骤：
1.明确工具流程
因为是搭建云端组件库，所以首先需要有一个云端工具进行管理。针对以sketch为基础的云端组件库来说，常用的工具流程包括sketch cloud，各类云同步盘，第三方云数据库自主部署等等。我们选择的sketch+iCloud工作流也是基于iCloud具备云端管理功能，与其他流程本质上是一样的，大家根据项目实际情况合理选择就好。
2.全面汇总并分类
按原子理论（原子、分子、组织、模板、页面）由小到大来对常规控件进行汇总并分类。对于我司产品项目来说，常见的控件类别包括：颜色、字体、图标、按钮、导航、状态栏、弹窗、列表、标签等等。每个项目所需要整理的组件不尽相同，原则就是对要复用的元素进行整理。
3.搭建本地组件库
1）确定命名逻辑
提升设计效率，是组件库存在的重要目标之一，而合理的组件命名起到了至关重要的作用。组件的名称要保证通用性，太独立的命名可能不够兼容其他场景，也会让使用的同学产生误解。
对于组件命名，要多与使用的设计师一起探讨，因为每个人的习惯都不同，方不方便因人而异，所以需要做一些平衡。
比如在做图标命名逻辑的时候，纠结于要先按尺寸分（图标/序号类别/尺寸/图标名），还是按功能分（图标 / 序号类别/尺寸/图标名/状态），不断调整多次，这时候就需要找大家一起探讨，怎么才是最方便的。
命名的方法是尽可能按共用属性由多到少的顺序来整理。比如，图标共用的尺寸属性多，就把尺寸归到上层；如果图标功能分类比较集中，那就把功能名称归到上层。根据实际项目和设计师使用情况的不同，会有不同的命名形式，命名确保效率就好。
在梳理组件库结构命名时，先用思维导图描绘一份结构化地图，方便前期讨论及调整。明确层级关系后，用在多人合作时进行参照，从而统一组件库层级。在做这份结构化地图时，需要列好全部分类、层级、具体名称及示例。
2）颜色
字体样式需要做全字重、颜色和左中右三种对齐方式，因为按目前sketch的组件逻辑，还不能修改嵌套字体的属性。这些属性可以对应到组件的命名上，字体组件的命名规范是：大小/序号对齐方式/属性/用途，例如42px/1居左/常规/主文本。
3）字体
字体样式需要做全字重、颜色和左中右三种对齐方式，因为按目前sketch的组件逻辑，还不能修改嵌套字体的属性。这些属性可以对应到组件的命名上，字体组件的命名规范是：大小/序号对齐方式/属性/用途，例如42px/1居左/常规/主文本。
边做边检查。由于文字组件需要的命名特别多，很容易出错，所以建议是最好每做一组，就检查一遍。检查的时候打开组件样式，如果在组件预览中发现重复或者结构不对的地方，及时调整。
多行文本行高要注意。文字的行高要尤其注意，一定要在前期检查好尤其是多行文本的行高。如果行高前期设置不对的话，非常影响后面文本的扩展性，在用到多行文本时会遇到麻烦。想回头修改的话，因为是最底层的原子需要逐个调整，所以代价是巨大的。
所以一定要开始设置字体组件之前就确定好行高，比如QQ动漫组件库中的文字行高统一用文字大小的1.5倍，并取偶数作为文本的行高。当然，这里的行高也不是完全规定死，有时候也需要视情况而定。
文本的粗细。文字的粗细也是要在一开始的时候就要设置周全，最好是给所有字号的文字都设置好不同粗细的组件，尽管可能开始用不到，但会提升文字的扩展性，不然后面添加就会比较麻烦。
4）图标
图标组件最关键的地方在于使用逻辑和图标规范。比如，我现在做的图标逻辑是：图标/类别/使用场景/具体名称/尺寸/不同状态，主要是按使用的频次来整理的。也可以有其他逻辑方式，以方便使用为准。
图标规范也会影响组件库的整理和日常使用，在做图标组件时，需要定义好图标的最大范围和最小范围，嵌套起来使用才不会出错。图标的规范要严谨，同一个尺寸下的图标视觉面积要保持一致。不然在大小这个层级就会出现，虽然是相同尺寸的图标切图范围，但图标的体量看起来却并不一致。
将纯色或渐变图标中的颜色剥离，并使用颜色组件进行嵌套，这样做既方便替换又能减少图标组件库的复杂度。
对于图标的多种状态，建议做在同一个层级中方便选择。
对于图标来说，直接对画板设置切片即可，不需要再加切片框。如果你的组件库之前用了很多切片来导出图标，可以用Automate插件直接清理或设置全局的切片，非常方便。
5）控件
有了颜色、字体、图标这些基础元素后再来制作组件就会相对简单很多，只需要通过拼装把通用性强的组件做出来即可。这里可能需要注意设置好布局方式，让内容盒子随着内容的变化而变化。新版sketch的布局设置相对于老版本的确实会方便很多，理解起来很容易，所以这就不多讨论了。
4.构建云端组件库
本地组件库构建完成后，即可通过iCoud上传至云端，再由iCloud直接添加到本地sketch中，完成整个使用流程的搭建。
1）设置iCloudDrive
如何开启 iCloud Drive：https://support.apple.com/zh cn/HT204025
成功后 Finder 侧边栏应出现“iCloud 云盘”。如果没有出现，请打开 Finder 的 Preference，选中”边栏“并勾选”iCloud“云盘：
完成以上设置后请联系组件库管理员将你添加为成员。管理员会给你发送规范文件的链接，点击链接后文件将自动出现在你的 iCloud 云盘。此时你的本地 Finder 应显示如下：
2）将规范添加为 Sketch Library
打开 Sketch 左上角第一个菜单的 Preference，选择 Libraries 卡片，将本地 iCloud Drive 中的规范文件拖拽进这个区域，然后关闭该窗口。
此时你就可以通过 Symbol 在 Sketch 中引用规范中的组件：
3）更新组件
每当规范有更新时右上角会出现“Library Update”推送，选择你需要更新的组件就OK啦。
4）维护与权限
为了更好的维护云端组件库，避免更新混乱，需要成立组件库小组，只允许组件库小组成员有编辑权限。日常需求中，如有新增组件，需提交给组件库小组成员审核，通过后方可上传至云端组件库。
在制作组件文件的过程中，需遵循先自测后上传的原则，避免在上传后发现一些诸如命名错误、遗漏、嵌套混乱等问题，造成麻烦。
本文引用了腾讯UCD团队部分文案与图片，感谢腾讯UCD团队！
谢谢阅览~