Sketch组件逻辑及使用（实操讲解）

10月 12, 2020 发表于: 视觉设计. 评论

Sponsor

前言：Sketch是一款专业矢量图形处理应用，特点是界面优美，在图形绘制上功能也十分强大，设计图形面板等常用图形非常方便，经常用于产品的交互设计和UI设计。容易理解，上手简单，对于有设计经验的设计师来说，入门门槛很低，大多数的数字产品设计都可用Sketch来完成。这篇文章会以落地项目、实际案例和大家分享这款应用的逻辑以及制作思路。

1、了解组件的逻辑

我们先来简单了解一下原子设计理论（链接在文末）：分为原子、分子、组织、模板、页面。我们重点讲一下原子、分子、组织、样式(拆分出来的)这四个。

配图出于原子设计理论文章

1.1原子
原子可以作为构成用户界面的基础组成部分（无法进一步分解）称为元素。例如表文本、图形、图标、分割线等。
1.2分子
由原子按照一定的顺序和空间排列组合构成，称为小组件。例如导航栏、标签、列表等
1.3组织
由原子（元素）、分子（小组件）按照一定的顺序和空间排列组合构成，称为大组件。例如：列表流、入口模块、瀑布流等。

1.4样式
样式分为文本样式和图形样式，作用在原子上和原子配合使用。常用于文本更改属性（字重、颜色、大小、间距等）和图形更改属性（颜色、描边、投影等），在其他文章中，样式作为原子出现，我这里单独拆分出来，因为样式在稍后的组件讲解中挺重要的。

小结：组织（大组件）可以同时包含分子(小组件)、原子（元素）、样式。也可以只包含分子，看大家怎么去设置组件模块。案例实操会说明。

2、组件命名

sketch组件的命名逻辑为: 分类 / 模块 / 组织 / 分子 / 原子，命名依次是从大到小举个栗子：（太爷/爷爷/爸爸/儿子）虽然有点滑稽，不过相对比较形象。界面完整的组件命名：XX分类 / xx模块 / xx组件 / 组件状态例：掘金（分类）/专家列表（模块）/按钮（组件）/已关注（状态）这里边斜杠 “/” 根据思维导图逻辑关系用来区分父子级关系也包含嵌套关系。

3、实操讲解

在讲解之前我们先来了解一下sketch响应布局的一些设置

这里的设置分别为靠边固定(靠左固定、靠右固定、靠上固定、靠下固定)、固定尺寸(固定高度、固定宽度),最后一个预览是我们在设置了前面两个属性之后会有个小动画演示所设置的效果。

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

案例1
知识点：靠边固定、固定尺寸、赋予方向属性难点：靠边固定设置错误，拉伸会跟着改变；没设置固定高度宽度，拉伸变形

案例2
知识点：标签替换、间距固定、文案换行、设置控件、无控件设置难点：组件命名不一致、不能替换；组件方向属性未设置，内容不会推移内容

案例3
知识点：小组件逻辑、编组赋予方向属性难点：组件逻辑、方向属性设置

4、组件化的好处

4.1 统一

在对于业务线庞大的软件，经常是多个设计师一起完成整个产品设计，不同业务线设计师需严格按照统一规范、组件去使用。提升整个产品的视觉统一与交互规则统一。

4.2 高效

在前期创建组件考虑好组件逻辑，做好每一种状态。快速利用组件搭建完整页面，替换原子、分子元素。提升设计团队效率

4.3 灵活

在sketch组件中设置智能布局。可灵活手动更改组件控件的高度宽度，或根据内容多少自动调整。

4.4 复用

组件必定是高频复用的，通过建立完整的组件库，在以后更新迭代可以直接修改复用组件。设计团队难免出现进出，即使有成员离开或者加入，通过设计规范和组件库可以快速对接工作。复用组件避免出现新的设计师对对于设计不同的认知，增加沟通成本。在做马甲包或者相同业务的产品时。可以通过页面结构、视觉规范统一和交互逻辑的复用让用户能够感知到是同一系列产品（如阿里系、腾讯系等）提升强化产品品牌感。

4.5组件化对于开发来说也是有很大的好处

组件化开发是根据功能、业务线进行代码划分,开发可以把任何的一个html 代码封装成一个组件,前提是高度复用的场景以及梳理清楚逻辑关系。（这和设计在做组件的时候是一样的）

4.5.1 降低软件体积包大小