一、什么是组件库

组件库是将界面设计中具有标准规范的基础元素和重复出现的控件进行归纳整理，通过对元素、控件进行命名和排列组合，最终形成一个可快速复用，便捷维护的组件库。

对比设计规范来说，组件库更像是一个强大的工具库，是保证团队协作一致性的基础，而设计规范更像是一份说明文档，是我们设计过程中的指导规则。

组件库本质上是一个普通的Sketch文件，其中的元素和控件可以被其他Sketch文件调用，如果编辑了组件库当中的元素或控件，那么调用了该组件库的其他Sketch文件也可以进行同步更新，并且通过组件分离功能也可单独对样式进行调整，非常利于团队协作。

二、组件库的优点

image.png

1、一致性

使用统一的设计模式和组件库，能够在保持基础体验一致的同时，针对业务特性做差异化设计，给用户带来一致体验和品牌感知。在团队中有新成员加入时，也能够快速上手工作。

2、提升效率

设计效率：一个产品内许多页面或模块会使用到相同的元素和组件，通过组件库的调用能够减少重复性设计时间。当组件设计细节有改动时，只需要改动组件库，所有共用组件库的页面即可实时响应。针对新的业务线也能够快速进行页面搭建，实现设计效率的提升。

开发效率：通过组件库搭建的设计框架能够快速移植到新的业务场景中，减少设计和产品之间的沟通成本。将组件库封装为代码库，减少冗余，优化性能，提升开发效率。

3、协同

组件库能够随着业务发展不断的优化和完善，在不同的需求和场景中也能够灵活支撑页面内容进行延展和扩充，从而实现全链路、多场景的高效协同。

三、组件库的构建

1、原子化设计

原子理论包含5个层面：原子、分子、组织、模块、页面。
25659a21c67e6d3d.png

2、组件/Symbol 的命名和分类

image.pngimage.png
合理的命名会让整个组件库结构清晰易懂，实际使用时能够帮助我们快速定位和调用。在开始搭建组件库之前，我们先来了解下 Sketch 组件的命名逻辑：

在Sketch的组件库中「/」符号表示层级结构，Sketch会识别到该符号，并自动生成相应的结构目录。例如一个组件的命名可以用：一级分类 / 二级分类 / 三级分类 ，命名依次是从大到小。

3、响应式和自适应组件的设计

先掌握3个sketch功能：靠边固定、固定尺寸、智能布局
c58bbcaf1c10f5c6.png
c2800a81a0dd2c43.png
靠边固定、固定尺寸：指通过固定边距或固定尺寸，在手动调节控件尺寸时，自动调整控件尺寸的功能。
布局：根据控件的内容变化自动调整控件的尺寸
覆盖层：是指控件画板里允许变更内容的图层，内容主要包括文字，控件和图层样式。

控件如何变成各种各样的实例，主要通过以上属性：布局，靠边固定，固定尺寸；图层样式，文字样式，控件嵌套。

4、组件库搭建

  • 颜色样式
  • 文字样式
  • 图层样式
  • 图标
  • 基础组件
  • 通用组件
  • 业务组件

四、组件库的添加和使用

1、准备工作

① 开启iCloud云盘

打开“系统偏好设置”，然后开启你的“iCloud云盘”

⚠️注意：一定要先开启iCloud云盘，不然无法使用共享组件库

image.png

image.png

② 登录iCloud

点击开始使用iCloud，然后输入自己的Apple ID和密码，登录iCloud，根据操作提示完成即可
image.png

image.png

③ 勾选启用“iCloud云盘”，完成开启

image.png

④ 接收共享的组件库文件

点击共享的文件链接，弹出下图弹窗，选择“打开”按钮，可直接打开“小象优品APP组件库.sketch”文件，成功打开后关闭文件
image.png

稍等片刻后，回到桌面，点击“前往”—“iCloud云盘”，即可看到共享的组件库已保存在该位置

注意：切勿更改共享组件库的位置
image.png

若进行了第④步操作后，没有在“iCloud云盘”中没有看到共享的文件，请按照以下方法操作：

① 复制共享的链接地址到浏览器打开，然后登录自己的Apple ID账号

image.png
② 登录成功后，点击“前往icloud.com”按钮
image.png
③ 弹出该提示，点击“添加到iCloud云盘”
image.png
image.png
④ 然后回到桌面，点击“前往”—“iCloud云盘”，即可看到共享的组件库已保存在该位置
image.png

2、添加共享组件库

① Sketch如何添加组件库

A、打开Sketch，在菜单栏选择“Sketch”—“首选项”—“组件库”
image.png
image.png

B、点击“添加组件库”

此处以iCloud云盘为例，在左侧栏选择“iCloud 云盘”—选中“小象优品APP组件库”，点击打开按钮，即可添加成功。

⚠️注意：此处一定要选择从“iCloud云盘”里面添加“小象优品APP组件库”文件，其他位置添加的都是属于你本地的组件，并不是我们共享的组件库，会导致组件不会同步更新，切记！！！
image.png
image.png

② 使用组件库

在工具栏，点击“控件”——“小象优品APP组件库”，选择相应组件即可
image.png
image.png
image.png
image.png

③ 组件库更新提示

image.png

image.png

3、共享组件库

团队内可以使用本地局域网共享、苹果 iCloud、 Sketch Cloud 、Dropbox 、 Google 云盘或Mac共享等多种方式来同步组件库文件，文件有更新团队内的成员便会收到更新提示，（Sketch工具栏右上角）点击后可以预览更新内容，然后下载替换旧版本即可。这里需要注意的是当组件库本地化之后将不会再收到更新提示。

4、一些注意事项（必看）

  • 非必要，不解绑、不本地化Symbol
  • 使用组件是调用组件，不是复制组件
  • 设计页面时，做到颜色使用颜色样式、文字调用文字样式、图层用图层样式
  • 一个小功能：使实例的尺寸匹配内容

image.png

  • Symbol是不默认显示切片的

  • 大多数的Symbol实例，已经做了可拓展性和响应式，简言之：就是一个Symbol，可满足多种状态的展示；所以更改组件内容时，请先检查右侧覆盖层，哪些内容是可更改的，

五、组件库的管理与维护

在组件库的构建过程中，我们需要整体思考，明确组件化的设计内容，不断去优化和完善组件细节，包括设计原则、应用场景以及拓展性等。同时组件库需要根据产品的发展不断的迭代和创新，才能让它的可持续性特性发挥至最大。

关于组件库的维护和管理，可以从一致性符合度、复用率、拓展性等多个方面考量组件的入库和剔除标准。

注 意: 本 文 为 个 人 原 创 内 容 作 品
未 经 允 许 请 勿 转 载 到 其 他 平 台