sketch如何通过Symbol和library提升协作效率

语言: CN / TW / HK

一.为什么要做组件库

1.symbol和library分别是什么?

相信很多执行层的小伙伴对symbol不会太陌生,symbol(组件)是sketch中自带的一项功能,这个功能非常强大,可以对某设计模块建立一个组件,建成后可替换里面的元素,同时模块布局保持不变,只变内容,设计师通过高效复用组件可快速完成设计。

library是指由多个symbol组成的库,是一个sketch源文件,这个源文件里面包括了这个产品的所有常用组件,比如WeChat.library,Ios.library等

symbol是仅适用于文档内部提升效率。如果设计团队只有你一个人,只需要用symbol即可提升工作效率,而library则是适用于不同文档,不同设计师间的协作,如果团队人数超过2人(包括2人)负责同一个产品,还是建议通过library进行协作,因为如果产品需要更新某些组件的参数,可以在library中完成更新,即可完成全局更新。比如某品牌的主色是绿色,但是基本上每年或每两年,这个绿色的色值都会有点微调,这种情况直接在library中把绿色的色值调整好,打开本地设计稿时,会在右上角收到一条更新通知,点开消息,会有窗口告知你library做了哪些更新,有新旧的对比图,让你确认是否更新,只要点了更新,这个设计稿里所有原有绿色都会得到更新。

2.组件库的作用

1.2.1.于个人,养成好的习惯,是合作的加分项

对于个人来说,学会用组件思维做设计,你的设计稿会非常整洁,不会再出来如下图(1)这样的文件命名,因为创建组件需要你对每个元素进行正确命名。

我曾经对接过一个设计专家,他的文件习惯非常差,文件里从来没有用过组件,也从来不对编组命名,可能有的命名也只是临时为了作区分而命名,而且每次的过程稿都在同一个文件里,过程稿是隐藏的,每次发给我的源文件都非常的大,一开始我不太明白为什么每次打开他的文件都这么卡,后来才发现他所有过程稿都在,而且嵌套在非常深的图层编组里,光是整理他的文件已经占用我非常多的时间,试想一下,如果有两个合作伙伴,一个设计稿非常整洁,一个设计稿非常乱,你更愿意与谁合作?

1.2.2.于设计本身,查找快捷,全局修改,复用方便

查找方便:因为创建组件是通过原子理论进行的,所以组件库里图层只要是可替换的,都会被做成组件,而skethc现在已经有组件管理功能,只要选择左上角的控件画布即可看到所有的控件,当然前提是命名规范的情况下,控件会进行自动分类。 

全局修改:这样就可以通过筛选找到想找的控件进行修改。当然这里如果是用library进行协作,还需要点开本地文件确认同步全局修改。

复用方便:当有新的需求进来时,会优先考虑现有的组件是否适用,如果适用可直接通过复制粘贴symbol进行复用,如果是团队用了library协作,可直接通过”置入——某library“添加组件模块。

1.2.3.于开发人员,减少开发时间,提升开发效率

开发完成一套组件库的代码后,往后如果有迭代需求,设计稿里只要复用到组件的,开发人员可以复用相关代码,而无需再重新编写,从而减少开发时间,提升效率。

二.什么时候做组件库

2.1. 何时创建组件库

组件库会分两部分完成

第一部分是App做第一批设计界面时,若设计师本身经验较丰富,可边做设计边封装,若设计的过程中,经常调整,我会建议你等第一批设计稿确认后(这里说的确认能进入开发的设计稿,而且不是设计内部确认)再开始整理和封装,因为进入开发后设计不再做大修改。如若这时发生大修改,整个开发时间会被拉长,影响整体工作流程。

此时的组件库只是基于现有的设计稿,所以还不完善。而第二部分是做完App所有界面时,即可进行完善,形成完整的产品组件库,为后续需求做协作准备。

以上说的两部分是比较重要的两部分,当然每个公司的工作流程都会有些差异,所以在完成第一步封装后,可以根据产品进度,逐步做补充和完善,直到1.0的完成。

2.2. 组件库包含哪些内容

组件库的内容通常会根据产品的复杂程度会有一定的区别,以下是我整理出的一般产品都会含有的基础部分

常规:文字,颜色,icon,按纽

导航:标签页,导航栏,侧边导航,标签栏,气泡弹出框,宫格等

数据录入:表单,输入框,选择框,上拉菜单,下拉菜单,时间选择器,日历选择器,步进器等

数据展示:单元格,弹窗,开关,列表,标签,轮播,进度条,倒计时,空状态等

反馈:对话框dialog,轻提示toast,通知栏,遮罩层,加载,下拉刷新等

以上是一个app常会用到的组件内容,可以根据自己产品的复杂程度进行加减。通常只要是能复用两次以上的,都建议创建组件。

三.怎么做组件库

2.1. 了解命名,规范命名

组件库是基于原子思维去创建的,那我们就要找到组件里的所有最小的原子分别是什么?最小的原子是文字,颜色,icon,按纽,图片等,基本上界面中的模块都是由这几种原子组成,比如列表是由文字+icon,或者图片+文字+icon组成等等,这里就不一一举例了,大家可以去看一下自己的产品的模块对照一下便知。

在创建组件库之前,我们先需要了解组件的命名规则,因为sketch里会根据 “/” 斜杠自动分类文件层级,所以在命名的时,我们可以充分利用这个特性把组件做分类。

以下是我本人常用的命名方式,大家可以根据自己的产品特性做参考,命名本身没有固定标准,主要目的是为了区分及查找方便,便于管理 下面是有赞的规范文档中的命名,我截了几张给大家参考下

2.2. 如何创建组件

在创建模块组件时,我们应该先了解文本样式,颜色变量,图层样式,还有“正在调整尺寸resizing”这些功能点用法,方便后续进行模块封装。

2.2.1文本样式

案例一:如何创建文本样式?如下图

  • 1. 新建一行文本
  • 2. 点击右侧面板中的字符样式“新建”
  • 3. 输入命名,以“/”分类
  • 4. 在当前文档中即可看到所有文件样式按“/”分类,查看非常方便  

  • 上图是文本样式创建的流程,下面解释一下“ 更新,解绑,更多 ”这三个功能用法。

  • 更新功能: 字符样式是包括了这个文本的字符/样式/字符选项,也就是下图红框里的所有信息,所以只要更改了下图中的任何一个参数,这个字符样式命名处就会带星号,如下图,“更新”按纽变亮,这时如果点“更新”就会把原有的字符样式覆盖掉,参数也会以更改后的为准,如果点新建,会新增一个字符样式,无论是新建还是更新,都别忘了命名也需同步修改,通常我会用这个方法一直新增新的字符样式,这样就命名时就不需要打很多字。

  • 解绑功能: 当你选择了使用了字符样式的文本,如果不想使用字符样式,可以点解绑,重新编辑即可。

    更多功能: 点开“更多”,有“重设样式”和“为样式重命名”两个功能,为“样式重命名”的字面意思都懂了。“重设样式”是指当 你使用了一种字符样式,同时然后改了很多参数后,可能不记得了改了哪些,因为是命名处只加了个星号,不会反应你改了哪些,然后这时你想回到字符样式再重新调参数,可以点重设样式就回到原来的字符样式。所以重设样式相当于重置,只是回到的起点的是原本的”字符样式“。

2.2.2 图层样式:

首先我们先了解一下图层样式包含哪些内容,如下图,主要包含填充/边框/阴影/内阴影/模糊五个模块的内容,大家可以试着点一下样式右边的收起button,就知道样式里包括的内容了,在界面上操作一遍会更清晰点。

案例二:下面我来看试着创新一个卡片的阴影图层样式,如下图

  • 1. 新建一个距形,调整好卡片阴影数值,这里的颜色都可以使用颜色变量
  • 2. 点击“新建”,并对图层样式用“/”进行命名,这里可根据自己情况命名
  • 3. 多创建几个后,在当前文档即可看到所有的分类卡片会按“/”分类展示

更新/解绑/更多三个功能和字符样式是差不多的,大家可以自己多操作一下,比看这个教程更容易理解。

2.2.3 颜色变量

颜色变量是sketch 69之后加的功能,所以如果sketch的版本比较低的需要升级才可以用这个功能哦。

案例三:下图是在画布中如何创建颜色的流程

  • 1. 首先,新建一个有颜色的形状,选好颜色
  • 2. 点击创建颜色变量
  • 3. 对颜色命名,用“/”做分层管理,点创建即可完成
  • 4. 点颜色色块处,可以看到新建的颜色分类,不过这里没有按“/”做分类,只是以最后一个“/”做了简单分类
  • 5. 点颜色变量图——当前文档,即可看到所有的“/”

目前颜色变量可以应用在填充/边框/阴影/内阴影上,另外还有文本颜色都可以用颜色变量(如下图)所以在创建组件库上,只要涉及到颜色的,都可以直接调用颜色变量,真的极方便。

但目前变色变量只能针对纯色值,渐变色还不能创建,希望后来的版本开发者可以把这个功能考虑进去。

以上是对“文本样式,颜色变量,图层样式”三个功能点做了详细的教程讲解,这三个功能还可以统一在组件界面里进行统一管理。如下图

点击左上角的组件图标,进行组件视图管理界面,这里可以含概了“控件/文本样式/图层样式/颜色变量四个模块的内容,可点击不同可以查看和管理。

在这里可以对内容进行”置入/复制/编组/重命名/删除/编辑参数”等操作,而且这里编组可以直接进行框选,然后拖到右边的层级列表中,这样的整理方式很符合我们平时整理文件时的操作。这里的操作就不一一讲解了,大家可以多操作就明白了

2.2.4 正在调整尺寸(Resizing)

接下来我们看下“正在调整尺寸(resizing)”的功能,这个功能可以让组件在不同界面里进行适配,只要轻拉文件夹或者画板即可。

“靠边固定”是指图层基于文件夹/画板的位置

“固定尺寸”是指在适配拉伸过程中,图层尺寸是否跟着拉伸变化

“预览”是根据你设置的参数,可以看到适配的效果

案例四:设置一个图文列表适配不同的屏幕尺寸,如何做呢?

  • 1. 首先设计好图文列表的样式
  • 2. 打成组,这里要注意,“正在调整尺寸(resizing)”这个功能只有在组里或者画板中才可以生效,所以一定要Carl+G
  • 3. 编组再设置参数,
  • 4. 设置参数,参数设置如下图所示,
  • 5. 设置完成之后,通过拉动组的宽度就可以轻松实现自适应。

  • 通过以上案例,可以发现“正在调整尺寸(resizing)”属于被动布局,即需要设置完所有参数之后,手动拖编组或者是画板才可以实现自适应。

  • 2.2.5 创建组件

    创建组件方法很简单,选择图层或文件夹,然后点击“创建控件”,这时会弹出一个弹窗,可以对组件命名,还可以设置他的布局。

  • 组件支持的布局有7种,x轴上的“向右/居中/向左”布局,y轴上的“向下/居中/向下”布局,还一有种是无布局。所以,组件布局只支持x轴或者y轴上的一种布局,不能同时支持两个方向的布局。

    案例五:下面我们来制作一个按纽:按纽根据按纽文案长度居中自动布局

    • 1.首先把椭圆和文案命名编组
    • 2.设置“大号按纽”字符对齐方式为自动宽度+居中对齐
    • 3.点击创建组件,命名,组件布局选择“水平居中布局”
    • 4.这时在画布界面的右侧覆盖层可以修改文案,即可自动布局
  • 注意:文字的对齐方式,需要与组件的布局方向一致。

同样的方法可以试着做选项卡等,也可用组件套组件的方法做多个选项卡并实在自动布局

如果需要按纽有最短的长度,可以在组件界面或者组件管理器中去设置最窄宽度(如下图),同时如果想修改布局也可以在这里修改

2.2.6 正在调整尺寸(Resizing)与组件的结合运用

通过上面的介绍,正在调整尺寸属于被动布局,需要手动去拖动才会实在自适应,而组件布局属于主动布局,会在组件元素变化时,仍然保持最开始设置的参数。那下面我们来看看这两者结合案例。

案例六:做一个上面图文列表+按纽的自适应,如下图

  • 1. 首先在案例四基础上加一个按纽,并把按纽编组加入案例四的编组里
  • 2. 按纽的文案对齐方式调整为“自动宽度+居右”
  • 3. 按纽创建组件,布局为“水平-居右”
  • 4. 设置按纽“正在调整尺寸”如下图

  • 拖动整个编组区域即可得到以下自适应效果
  • 2.2.7 创建library

    如果是一个设计,可以把组件库放置于本地文件夹中,如果是多个设计师协作,可以把组件库存在云端,可以实现多人协作。了解以上功能并创建好产品的组件库之后,下面我们来看看如何添加library。

    首选项——组件库——添加组件库,即可添加完成。


  • 添加完成之后,打开sketch,置入——控件——Weui即可看到添加的微信小程序控件,

随意添加一个控件,看到如下图侧边栏中的控件标识与平时的创建组件不一样 这里可以看到library和正常组件icon是有区别的

四.总结

以上关于组件及library的协作功能已经基本介绍完了,总结大概是以下几点需要弄清楚

1.明确symbol和library的区别,了解组件库的作用

2.明确组件库的内容及创建时间

3.定义组件的命名规范,熟练掌握文本样式,颜色变量,图层样式,resizing的功能使用,学会结合resizing功能,创建组件和library,方便团队协作。

行动:根据本文所教的方法,尝试把自己的产品的规范命名重新整理,并创建成可复用的组件库,在团队里进行复用。

附件上传了有赞的组件库规范,可以下载参考一下

Powered by Froala Editor