Sketch进阶教程:利用Symbol建立一套设计规范组件库

2年前发布

原创文章 / 平面 UI 网页
顺丰科技UED,禁止转载-禁止商业用途-禁止个人用途

一篇干货


Sketch进阶教程:利用Symbol建立一套设计规范组件库


写在前面        



这是一篇关于 Symbol 的进阶教程。为保证更好地理解文章内容,你需要对以下知识点有一定的了解(部分内容已附注释)。



undefined

Text style ¹

undefined

▲ 图片来自Sketch手册


在设计包含大量文本的界面时,许多图层拥有相同的文本属性。将它们保存为 Text Style,即可复用这些文本属性,无需逐一设置。


Text Style 用于设置文字规范,涵盖字体、字号、字重、颜色、字间距、行高² 、段间距等内容。

undefined

¹ Text Style:https://sketchapp.com/docs/text/text-styles

² 行高:参考知乎专栏「 聊一聊 Sketch 与 iOS 文字的行高https://zhuanlan.zhihu.com/p/38322447 」



undefined

Layer style ³

▲ 图片来自Sketch手册


将一组风格元素保存为 Layer Style,这些元素便可复用在文档中的任何图层。


Layer Style 用于制作颜色规范,涵盖填充颜色、描边颜色、内外阴影、模糊效果等内容。

undefined

³ Layer Style:https://sketchapp.com/docs/styling/shared-styles



undefined

Symbol ⁴

undefined

▲ 图片来自Sketch手册


作为 Sketch 的一项主打功能,Symbol 可以在画板、页面甚至其他 Sketch 文件中复用。Sketch 52 后,新功能令 Symbol 更加灵活化、轻量化。


● 可复用:支持画板、页面、多个文档间的复用

● 可嵌套:Symbol 内可以嵌套多个 Symbol

● 可替换:Symbol 可替换为同组的其他 Symbol



undefined

▲ Symbol替换


⁴ Symbol:https://sketchapp.com/docs/symbols



undefined

英文命名


之所以使用英文命名组件,有以下几点原因:


● 方便设计师后期修改、整理文件

● 团队内部易达成共识,方便协作

● 节约开发成本,减少不必要的沟通与重新切图情况






 组件库的构建思路    




建立组件库之前,先来谈谈构建思路:解构、拆分、重构。


「 解构 

通用类设计规范包含:基础规范、图标规范、组件规范,第一步,将这三类规范一一解构。例:基础规范解构为文字规范、颜色规范、布局规范…


「 拆分 

将解构后的规范拆分为最基本的元素 Symbol,基础规范与图标规范到这一步就完成了。例:文字规范中,拆分为标题、副标题、正文、辅助文字、标签文字…


「 重构 

重构或称为 Symbol 嵌套⁵ 。用于制作组件规范,将拆分后的元素 Symbol 组合为模块 Symbol,再将模块 Symbol 组合为组件 Symbol。


⁵ Symbol嵌套:

https://sketchapp.com/docs/symbols/nested-symbols






利用Symbol组件库建立设计规范    




其实,一套优秀的Symbol组件库 = 一套简洁易用的设计规范。组件库中不仅涵盖了常用组件,同时也包含 Text Style 与 Layer Style,三者共同组成了一套设计规范。


先来看看优秀的 Symbol 组件库(常用组件规范)是什么样子的:

undefined

图示内容为 Ant Design 团队出品的 Web 端组件库⁶ ,使用 Symbol Manager 插件预览。

⁶ Ant.Design.Components.Beta.3.10.5.sketch:https://ant.design/docs/spec/download-cn


根据上文的思路,我们将基础规范、图标规范、组件规范解构并将部分拆分为基础元素,得出以下内容:



基础规范


1. 文字规范(创建为Text Style)

    1.   ↳ 标题(Titile)

    2.   ↳ 副标题(Subtitile)

    3.   ↳ 正文(Body)

    4.   ↳ 次要文字(Secondary)

    5.   ↳ 标签文字(Tags)

2. 颜色规范(创建为Layer Style)

    1.   ↳ 主色调(Primary)包含主色调的类似色,用做不同状态

    2.   ↳ 功能色(Fuction)成功、失败、警示、不可用等状态的颜色

    3.   ↳ 渐变色(Gradients)

    4.   ↳ 背景色(Background)

    5.   ↳ 字体颜色(Text)

3. 布局规范

    1.   ↳ 分割线(Dividers)

    2.   ↳ …… 

4. 标签规范

    1.   ↳ …… 

5. 其他样式

    1.   ↳ 圆角规范(Radius)

    2.   ↳ 阴影规范(Shadows)

    3.   ↳ ……


基础规范中的主要内容为文字规范与颜色规范,将文字规范中的元素创建为 Text Style,颜色规范中的元素分类后创建为 Layer Style,其他元素根据不同情况进行调整即可。



图标规范

undefined

图标规范中,可根据图标尺寸、业务场景、图标功能等进行层级区分,笔者根据图标尺寸来区分层级(暂不考虑最小可交互区域):


1.   ↳ 48px(Tab栏图标、金刚区图标、吸底按钮图标等)

2.   ↳ 40px(使用场景:标题图标、个人中心列表图标等)

3.   ↳ 30px(使用场景:辅助图标)


在制作图标规范时,需要根据设计师自身情况作出相应调整。但在设计图标时,以下几点是共通的:


「 构成简单 

根据简洁法则我们知道,简洁图形的识别需要用户最少的认知和努力。对于通用规范中的图标来说,尽可能的简洁以保证用户的辨识度。当然,像 TabBar、金刚区等特殊区域的图标,需要我们在工作中单独设计。


「 视觉尺寸统一 

undefined

使用图标盒子作为设计时的参照,保证整套图标在视觉大小上的统一。当然图标盒子并不是一个定死的数值,日常工作中需要根据图标形状进行微调。


「 像素对齐 

对齐像素网格,路径锚点的位置使用整数,避免虚边情况的发生。

在 Sketch 中,可以通过打开像素模式或使用自动对齐像素功能来进行像素对齐。


「 使用偶数 

适配原因,尤其在@2x的情况下作图时需格外注意。


「 矢量形状 」

使用 Convert to Outlines 与布尔运算功能,将图标转化为矢量形状。

TIPS:在矢量形状上套用 Layer Style 中的任意颜色,在之后的 Symbol 嵌套中就可以更改图标的颜色了。



组件规范



由于篇幅有限,本文只介绍通用类组件,解构并归类后,得出以下内容(设计师可以根据项目情况自行补充)

但仅仅解构分类是不够的,想要完成一整套 Symbol 组件库,还需要将解构后的组件拆分为单独的元素 Symbol,以方便嵌套并组成 Symbol 组件。


篇幅有限,我们通过 List 组件举例分析:


同上文制作 Symbol 组件库的思路一样,对于单一组件,同样运用解构 → 拆分 → 重构的思路。不同的是,单一组件需要考虑到组件的不同形式 / 状态。


「 解构为模块 」

将 List 模块化解构,得到 背景 Background、分割线 Divider、左侧内容 Left、右侧内容 Right


「 拆分为元素 」

左、右两侧内容还可以继续拆分,得到 图标 Icon、标题 Title、文字 Text、箭头 Arrow


「 添加其他形式 / 状态 」

仅涵盖一种形式 / 状态并不能称之为完整的规范,我们需要考虑到List常见的所有形式

undefined

如图,分割线的各种状态,左右侧内容的各种形式都需要考虑在内。对比前文拆分的结果,去除重复项,你会发现多出了一个开关 Switch 元素(Arrow、Check属于Icon类),把它加入列表,就得到了构成 List 组件的所有元素 Symbol。

是不是有点眼熟?没错,这些元素 Symbol 正是基础规范与图标规范中的内容。


「 Symbol嵌套(重构)

反向进行上面三步的思路,进行 Symbol 嵌套:首先将最基础的元素 Symbol 组合成模块化 Symbol,然后将模块化 Symbol 组合成为 List 组件。


由于使用了 Symbol 嵌套,所以最后组合而成的 List 组件可以在右侧的 Overrides 中进行各个模块与元素的设置。


重复利用解构为模块、拆分为元素、添加状态/形式、重构(元素 Symbol → 模块 Symbol → 组件 Symbol)这 4 个步骤,完成组件规范列表中的所有组件,这套利用了 Symbol 功能制作的通用规范组件库就完成了。






写在后面    





undefined

如何将Symbol组件库运用在设计稿中?

undefined

将制作好的 Symbol 组件库保存为 .sketch 文件,在 Sketch 上方菜单中找到:Sketch—Preferences—Libraries 中,点击下方 Add Library… 按钮,将 .sketch 文件导入即可。



如何规范化管理Symbol组件库?

当 Symbol 名称中存在 “ / ” 符号时,Sketch 会将他们作为组独立对待。举个栗子:两个 Symbol,一个名为 “ Button / normal ”,另一个名为 “ Button / pressed ”,这两个 Symbol 将被归类在 Buttom 分组中。


当然,也可以使用 Sketch Manager⁷ 插件来帮助你规范化管理你的 Symbol。

⁷ Symbols Manager插件:http://sketch.cm/plugins/114


相对于 Sketch 那死板的修改名称管理 Symbol 组件库的方法,Symbols Manager插件能够以类似Finder的形式来帮助你查看、修改、删除你的组件库。当然,9.99 刀买断的价格、加上只有搭梯子才能正常使用的限制也许会让你望而却步。


然而我们相信,正版意识、英文化组件管理、以及为优秀内容付费的概念会慢慢渗透到每个设计师的潜意识当中。



如何令Symbol组件更加灵活?

Resizing 智能缩放是 Sketch 39 中加入的新功能,有多智能呢?

看看 Sketch 官方的答案 https://sketchapp.com/docs/layer-basics/constraints


官方给出的答案太难看不懂?来复习下上古版本中你就该学会的内容

「 一张图教你用Sketch39新功能 - Resizing智能缩放 https://www.ui.cn/detail/154342.html」


如何在 Symbol 组件库中运用呢?举个栗子:

undefined

1. 将 Tabbar 解构,我们得到 N 个相同的 Tab 模块;然后将 Tab 模块拆分,得到 图标 Icon、文字 Text、分割线 Divider、背景 Background 4 个元素。


2. 分别设置这 4 个元素的 Resizing 属性,Tab 模块即可做到横向自由拉伸且不打乱布局。通过横向拉伸尺寸,就可以得到 3-5 个 Tab 的 Tabbar 了。


可运用 Resizing 的类似组件还有很多,在制作 Symbol 组件库中稍加留意,就能让你的 Symbol 更加的灵活易用。



Symbol的拓展使用

Humaaans 是由 Pablo Stanley 提供的可免费用于商业或个人的插画图库。你可以替换人物的发型、肤色、上衣、裤子、鞋子…也可以旋转各元素的方向,再添加一点氛围,它便是能适用于各种场合的插图。

▲ 内容来自网络,官网链接 https://www.humaaans.com/


Avataaars 同样是来自 Pablo Stanley 的可免费用于商业或个人的头像素材库,头像中的任何元素都可以 DIY 组合,包含头像、胡子、眼睛、眼镜、脸部以及肤色均可自由搭配。

▲ 内容来自网络,官网链接 https://avataaars.com/


请通过主页添加我们的微信公众号,并在后台回复关键词 “ Symbol ” ,即可获取 Humaaans 与 Avataaars 源文件!


最后,希望设计师在建立 Symbol 组件库的过程中,得到的不仅是设计效率的提升,还有其他各个方面的知识储备与能力提升。


共勉。



undefined




🎄 今日份彩蛋 🎄  






UED 原创潮玩“ 脑玩童 ”限量款  




神秘筹备中…

更多动态,请保持关注


▼  往期精彩回顾  

undefined



184
- 位站酷推荐设计师推荐 -
一下给作者疯狂打call吧!
(推荐 + 收藏 + 关注作者)
+1 +1 +1

声明:站酷(ZCOOL)内网友所发表的所有内容及言论仅代表其本人,并不反映任何站酷(ZCOOL)之意见及观点。

    喜欢TA的作品吗?喜欢就快来夸夸TA吧!
    夸夸

    夸夸

    文章信息

    • 文章标签

    没有新消息
    已收藏到: