Sketch组件化设计

前言

互联网设计的不断发展，设计提效推动着设计思维的转变。我们不仅要完成业务需求的设计，在关注视觉表现的基础上，还需要加强对项目协同和体验的关注，逐步形成组件化思维做设计。我们不设计界面，我们是设计构成界面的元素。

那什么是组件呢？

组件是经过设计元素解耦，具有标准规范和可复用场景的基本模块。从字面上理解：“组”是设计元素的组合方式，“件”由不同的元件组成。当我们把页面中的不同结构做成组件化，再把不同的组件组成页面，当我们替换组件内容中的元素时，页面中的元素也被替换了。原子设计是就是组件化设计的核心思想。

那组件和设计规范又有什么样的关系？毕竟他们都有颜色、图标、文字、弹窗等相同内容。我觉得这两者应该是相辅相成、相对独立又相互包含，比如工厂里的零件包，里边有螺丝钉、螺丝帽、生产组装说明书，设计规范就类比一纸详细的产品生产组装说明书，组件库则更像是一堆零件+使用说明书，零件的组装就是依照生产组装说明书组装。那我们组件库也是依附于当前的设计规范产生，同时未来我们也将依据设计规范来产出新的符合规范的组件。

原子理论

说到UI组件库，几乎每篇文章都会说原子理论。在化学中，原子是化学变化中的最小粒子，物体都是由原子构成，原子组合构成分子，分子组合构成有机物，最终形成了宇宙万物。2013年前端工程师 Brad Forst 将此理论运用在界面设计中，形成一套设计系统，包含5个层面：原子、分子、组织、模板、页面。

原子设计就是抽取最小的设计元素，然后对这些小元素进行拼合，形成一个个组件。比如一个页面，有导航、banner、列表、底部导航等模块组成，我们可以将导航、banner、底部导航、列表等分别设计成一个个小组件，再将四个模块的组件拼接成一个页面，提高设计效率。这是原子设计最基础的理论。根据这个我们搭建出完整且庞大的组件系统。

图片 1.png

原子

原子是化学变化中的最小粒子，也是设计系统中最小的单位。原子包括调色板，分割线，字体、标题、段落文本等单个元素，这些元素有个特点就是最小元素不可再切割，如下图：搜索框、搜索图标、搜索文案，都是一个个原子。

图片 1.png

分子

原子排列组合构成了分子。在界面中多以「组件」的形式存在，例如：导航栏、标签栏、搜索框、按钮、弹窗、banner等。

组织

原子、分子排列组合构成了组织，在界面中多以「模块」的形式存在，例如：商品列表、内容卡片、入口模块、瀑布流图等。

模版

原子、分子、组织排列组合构成了模板，在界面中也称为「原型图」，例如：电商展示原型、外卖点单原型、店铺详情原型、商户管理原型、商品分类等。

图片 1.png

页面

模板填充了真实的内容（图片、文字等）后形成页面，也就是常说的「视觉稿」，例如：商品列表页、外卖点单页、教育课程页、资讯管理页等。

图片 1.png

组件化的优点

统一：保证视觉、交互

整个产品不同模块的业务按照统一规范使用，提升整个产品的视觉交互统一性，减少开发样式，提升开发效率。比如日历控件，在整个产品中就应该以一种形式存在，如果一会儿是左右滚动，一会儿是上下滚动，一会儿是下拉列表，就会比较杂乱；
避免不同设计师创造同一功能的不同样式的组件控件；
统一交互设计规则，减少用户操作的困惑，提升产品的体验；
统一视觉风格，保证统一的产品调性。设计师应该找到最合适的方案，做成组件并处处保持统一；

高效：提升设计效率

一套设计规范衍生两套组件库，分别为 Sketch ui 组件库和 Auxre 元件库。Sketch ui 组件面向对象为视觉设计师，Auxre 元件库面向对象为交互设计师和产品经理。设计师和产品经理通过拖动组件搭建界面，节约时间，提升工作效率；
减少和缩短设计组件控件的时间，不需要对同一功能组件重新定义，提升设计效率，将更多的时间放在流程体验和设计推动上；
在前期创建组件考虑好组件逻辑，做好每种状态。快速利用组件搭建完整页面，替换原子、分子元素，提升设计效率；

灵活：

在创建组件的时候设置好智能布局，可以灵活的手动改变组件控件的宽度和高度，或者组件根据文本内容自适应；

复用：方便后续修改和延续

增加模块的复用性，不同设计师对于相同模块的设计，可以利用组件直接复用；组件必定是高频复用的，通过建立完整的组件库，根据业务场景变更可以直接修改组件，复用到页面中；

协作：方便不同设计师协作

团队成员增加或减少，都不必焦虑，新人可以通过设计规范和组件库迅速熟悉项目并上手;

创建组件

（一）组件命名

组件的命名逻辑遵循父子级命名（举个栗子🌰：太太爷爷 / 太爷爷 / 爷爷 / 爸爸 / 儿子 / 孙子 😄），在sketch中命名时，通过／符号表示层级结构，Sketch会识别到该符号，并自动生成相应的架构。

命名举例：XX页面 / XX分类 / xx模块 / xx组件 / 组件状态

当然，建议我们用英文对组件命名

（二）组件分类

原生组件，顾名思义就是系统本身自带的组件类型，例如按钮、导航、弹窗等等。

扩展组件，是基于原有组件基础，进行功能扩展，例如在导航栏上加下拉操作，在弹窗中加操作项等等。

自定义组件，所谓自定义组件就是原本系统中没有，我们根据产品特点创造出来的特有组件。

封装组件，是指对产品中经常出现的一系列场景页面进行组合封装的复杂组件。

这四个概念中，原生组件和扩展组件都属于系统（Android & iOS官方规范）导向的类型，所以我们暂且统称为基础组件；这类组件存在于大部分App中，例如导航栏、工具栏、弹窗、toast、按钮等就是基础组件。

自定义组件和封装组件，具有较强的产品功能导向，因此称为属性组件。这类组件跟产品功能有较强的关联性，比如效率管理App中常用的日历组件，视频App常用的播放器组件，读书App内的推书列表组件、金融App内的行情趋势组件等。

做这样的区分，可以让我们对组件有更加充分的理解，两个类别的组件在构建时也存在较大的差异，区别对待可以帮助我们更好的理解、构建和调用；有了明确的定义，我们在构建组件库时就能明确类型，合理规划，有效的进行搭建的前期工作。

图片 1.png

（三）组件响应式

先了解一下响应式布局的一些设置：靠边固定、固定尺寸、固定宽度、高度，还有一些布局方式：从左往右、从右往左、居中布局等；

图片 1.png

我们在创建组件的时候可以选择性赋予不同方向的属性，赋予属性之后组件内容增加或减少会根据设置的方向改变组件的宽高。只能存在一种属性或者无属性。

图片 1.png

如下图的案例：头像、产品信息可以采用左对齐布局，右边的按钮可以采取从右向左布局；

图片 1.png

（四）组件应用

制作完组件库的 sketch 部署之后我们就需要把它真正地应用起来了。

我们可以通过 sketch/首选项/添加组件库的方式将我们刚刚部署完的 sketch导入。之后就可以在 sketch/置入/组件中找到对应的文件直接进行拖拽元素使用。

如何进行云同步呢？

首先我们需要做的是登录 sketch cloud 账户，登录 sketch cloud 账户之后，我们需要将组件库源文件上传成为 cloud 文档（sketch>文件>打开 cloud 文档>新 cloud 文档）。这里我们还可以点击已上传的 cloud 组件库文档进行编辑和更新，之后记得在 sketch cloud 里添加同事。这样一来所有设计同事都可以在 sketch 里更新下载新的组件库直接拖拽使用（一般 cloud 组件云更新后 sketch 的右上角都有「红色通知提示」，是可以直接点开更新下载的）。