扫一扫 扫一扫 扫一扫 扫一扫 这是一篇 Sketch 进阶教程,让你学会利用 Symbol 建立一套设计规范组件库。 文章目录
为保证更好地理解文章内容,你需要对以下知识点有一定的了解(部分内容已附注释)。 1. Text style ¹ △ 图片来自Sketch手册 在设计包含大量文本的界面时,许多图层拥有相同的文本属性。将它们保存为 Text Style,即可复用这些文本属性,无需逐一设置。 Text Style 用于设置文字规范,涵盖字体、字号、字重、颜色、字间距、行高² 、段间距等内容。 ¹ Text Style:https://sketchapp.com/docs/text/text-styles ² 行高:参考知乎专栏《聊一聊 Sketch 与 iOS 文字的行高》 2. Layer style ³ △ 图片来自Sketch手册 将一组风格元素保存为 Layer Style,这些元素便可复用在文档中的任何图层。 Layer Style 用于制作颜色规范,涵盖填充颜色、描边颜色、内外阴影、模糊效果等内容。 ³ Layer Style:https://sketchapp.com/docs/styling/shared-styles 3. Symbol ⁴ △ 图片来自Sketch手册 作为 Sketch 的一项主打功能,Symbol 可以在画板、页面甚至其他 Sketch 文件中复用。Sketch 52 后,新功能令 Symbol 更加灵活化、轻量化。
△ Symbol替换 ⁴ Symbol:https://sketchapp.com/docs/symbols 4. 英文命名 之所以使用英文命名组件,有以下几点原因:
5. 组件库的构建思路 建立组件库之前,先来谈谈构建思路:解构、拆分、重构。 「 解构 」 通用类设计规范包含:基础规范、图标规范、组件规范,第一步,将这三类规范一一解构。例:基础规范解构为文字规范、颜色规范、布局规范… 「 拆分 」 将解构后的规范拆分为最基本的元素 Symbol,基础规范与图标规范到这一步就完成了。例:文字规范中,拆分为标题、副标题、正文、辅助文字、标签文字… 「 重构 」 重构或称为 Symbol 嵌套⁵ 。用于制作组件规范,将拆分后的元素 Symbol 组合为模块 Symbol,再将模块 Symbol 组合为组件 Symbol。 ⁵ Symbol嵌套:https://sketchapp.com/docs/symbols/nested-symbols 6. 利用Symbol组件库建立设计规范 其实,一套优秀的Symbol组件库 = 一套简洁易用的设计规范。组件库中不仅涵盖了常用组件,同时也包含 Text Style 与 Layer Style,三者共同组成了一套设计规范。 先来看看优秀的 Symbol 组件库(常用组件规范)是什么样子的: 图示内容为 Ant Design 团队出品的 Web 端组件库⁶ ,使用 Symbol Manager 插件预览。 ⁶ Ant.Design.Components.Beta.3.10.5.sketch:https://ant.design/docs/spec/download-cn 根据上文的思路,我们将基础规范、图标规范、组件规范解构并将部分拆分为基础元素,得出以下内容: 基础规范1. 文字规范(创建为Text Style)
2. 颜色规范(创建为Layer Style)
3. 布局规范
4. 标签规范 ↳ …… 5. 其他样式
基础规范中的主要内容为文字规范与颜色规范,将文字规范中的元素创建为 Text Style,颜色规范中的元素分类后创建为 Layer Style,其他元素根据不同情况进行调整即可。 图标规范图标规范中,可根据图标尺寸、业务场景、图标功能等进行层级区分,笔者根据图标尺寸来区分层级(暂不考虑最小可交互区域):
在制作图标规范时,需要根据设计师自身情况作出相应调整。但在设计图标时,以下几点是共通的: 「 构成简单 」 根据简洁法则我们知道,简洁图形的识别需要用户最少的认知和努力。对于通用规范中的图标来说,尽可能的简洁以保证用户的辨识度。当然,像 TabBar、金刚区等特殊区域的图标,需要我们在工作中单独设计。 「 视觉尺寸统一 」 使用图标盒子作为设计时的参照,保证整套图标在视觉大小上的统一。当然图标盒子并不是一个定死的数值,日常工作中需要根据图标形状进行微调。 「 像素对齐 」 对齐像素网格,路径锚点的位置使用整数,避免虚边情况的发生。 在 Sketch 中,可以通过打开像素模式或使用自动对齐像素功能来进行像素对齐。 「 使用偶数 」 适配原因,尤其在@2x的情况下作图时需格外注意。 「 矢量形状 」 使用 Convert to Outlines 与布尔运算功能,将图标转化为矢量形状。 TIPS:在矢量形状上套用 Layer Style 中的任意颜色,在之后的 Symbol 嵌套中就可以更改图标的颜色了。 组件规范由于篇幅有限,本文只介绍通用类组件,解构并归类后,得出以下内容(设计师可以根据项目情况自行补充) 但仅仅解构分类是不够的,想要完成一整套 Symbol 组件库,还需要将解构后的组件拆分为单独的元素 Symbol,以方便嵌套并组成 Symbol 组件。 篇幅有限,我们通过 List 组件举例分析: 同上文制作 Symbol 组件库的思路一样,对于单一组件,同样运用解构 → 拆分 → 重构的思路。不同的是,单一组件需要考虑到组件的不同形式 / 状态。 「 解构为模块 」 将 List 模块化解构,得到 背景 Background、分割线 Divider、左侧内容 Left、右侧内容 Right 「 拆分为元素 」 左、右两侧内容还可以继续拆分,得到 图标 Icon、标题 Title、文字 Text、箭头 Arrow 「 添加其他形式 / 状态 」 仅涵盖一种形式 / 状态并不能称之为完整的规范,我们需要考虑到List常见的所有形式 如图,分割线的各种状态,左右侧内容的各种形式都需要考虑在内。对比前文拆分的结果,去除重复项,你会发现多出了一个开关 Switch 元素(Arrow、Check属于Icon类),把它加入列表,就得到了构成 List 组件的所有元素 Symbol。 是不是有点眼熟?没错,这些元素 Symbol 正是基础规范与图标规范中的内容。 「 Symbol嵌套(重构)」 反向进行上面三步的思路,进行 Symbol 嵌套:首先将最基础的元素 Symbol 组合成模块化 Symbol,然后将模块化 Symbol 组合成为 List 组件。 由于使用了 Symbol 嵌套,所以最后组合而成的 List 组件可以在右侧的 Overrides 中进行各个模块与元素的设置。 重复利用解构为模块、拆分为元素、添加状态/形式、重构(元素 Symbol → 模块 Symbol → 组件 Symbol)这 4 个步骤,完成组件规范列表中的所有组件,这套利用了 Symbol 功能制作的通用规范组件库就完成了。 写在后面1. 如何将Symbol组件库运用在设计稿中? 将制作好的 Symbol 组件库保存为 .sketch 文件,在 Sketch 上方菜单中找到:Sketch—Preferences—Libraries 中,点击下方 Add Library… 按钮,将 .sketch 文件导入即可。 2. 如何规范化管理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 刀买断的价格、加上只有搭梯子才能正常使用的限制也许会让你望而却步。 然而我们相信,正版意识、英文化组件管理、以及为优秀内容付费的概念会慢慢渗透到每个设计师的潜意识当中。 3. 如何令Symbol组件更加灵活? Resizing 智能缩放是 Sketch 39 中加入的新功能,有多智能呢? 看看 Sketch 官方的答案 https://sketchapp.com/docs/layer-basics/constraints
如何在 Symbol 组件库中运用呢?举个栗子:
可运用 Resizing 的类似组件还有很多,在制作 Symbol 组件库中稍加留意,就能让你的 Symbol 更加的灵活易用。 4. Symbol的拓展使用 Humaaans 是由 Pablo Stanley 提供的可免费用于商业或个人的插画图库。你可以替换人物的发型、肤色、上衣、裤子、鞋子…也可以旋转各元素的方向,再添加一点氛围,它便是能适用于各种场合的插图。 △ 内容来自网络,官网链接 https://www.humaaans.com/ Avataaars 同样是来自 Pablo Stanley 的可免费用于商业或个人的头像素材库,头像中的任何元素都可以 DIY 组合,包含头像、胡子、眼睛、眼镜、脸部以及肤色均可自由搭配。(内容来自网络,官网链接 https://avataaars.com/) 最后,希望设计师在建立 Symbol 组件库的过程中,得到的不仅是设计效率的提升,还有其他各个方面的知识储备与能力提升。 欢迎关注顺丰科技用户体验设计部公众号:「SFUED」 「制作有效设计规范的实用方法」
手机扫一扫,阅读下载更方便˃ʍ˂ |
@版权声明
1、本网站文章、帖子等仅代表作者本人的观点,与本站立场无关。
2、转载或引用本网版权所有之内容须注明“转自(或引自)网”字样,并标明本网网址。
3、本站所有图片和资源来源于用户上传和网络,仅用作展示,如有侵权请联系站长!QQ: 13671295。