在设计包含大量文本的界面时,许多图层拥有相同的文本属性。将它们保存为TextStyle,即可复用这些文本属性,无需逐一设置。
TextStyle用于设置文字规范,涵盖字体、字号、字重、颜色、字间距、行高2、段间距等内容。
2.Layerstyle3
将一组风格元素保存为LayerStyle,这些元素便可复用在文档中的任何图层。
LayerStyle用于制作颜色规范,涵盖填充颜色、描边颜色、内外阴影、模糊效果等内容。
3.Symbol
作为Sketch的一项主打功能,Symbol可以在画板、页面甚至其他Sketch文件中复用。Sketch52后,新功能令Symbol更加灵活化、轻量化。
△Symbol替换
4.英文命名
之所以使用英文命名组件,有以下几点原因:
5.组件库的构建思路
建立组件库之前,先来谈谈构建思路:解构、拆分、重构。
「解构」
通用类设计规范包含:基础规范、图标规范、组件规范,第一步,将这三类规范一一解构。例:基础规范解构为文字规范、颜色规范、布局规范…
「拆分」
将解构后的规范拆分为最基本的元素Symbol,基础规范与图标规范到这一步就完成了。例:文字规范中,拆分为标题、副标题、正文、辅助文字、标签文字…
「重构」
重构或称为Symbol嵌套。用于制作组件规范,将拆分后的元素Symbol组合为模块Symbol,再将模块Symbol组合为组件Symbol。
6.利用Symbol组件库建立设计规范
其实,一套优秀的Symbol组件库=一套简洁易用的设计规范。组件库中不仅涵盖了常用组件,同时也包含TextStyle与LayerStyle,三者共同组成了一套设计规范。
先来看看优秀的Symbol组件库(常用组件规范)是什么样子的:
图示内容为AntDesign团队出品的Web端组件库,使用SymbolManager插件预览。
根据上文的思路,我们将基础规范、图标规范、组件规范解构并将部分拆分为基础元素,得出以下内容:
1.文字规范(创建为TextStyle)
2.颜色规范(创建为LayerStyle)
3.布局规范
4.标签规范
……
5.其他样式
基础规范中的主要内容为文字规范与颜色规范,将文字规范中的元素创建为TextStyle,颜色规范中的元素分类后创建为LayerStyle,其他元素根据不同情况进行调整即可。
图标规范中,可根据图标尺寸、业务场景、图标功能等进行层级区分,笔者根据图标尺寸来区分层级(暂不考虑最小可交互区域):
在制作图标规范时,需要根据设计师自身情况作出相应调整。但在设计图标时,以下几点是共通的:
「构成简单」
根据简洁法则我们知道,简洁图形的识别需要用户最少的认知和努力。对于通用规范中的图标来说,尽可能的简洁以保证用户的辨识度。当然,像TabBar、金刚区等特殊区域的图标,需要我们在工作中单独设计。
「视觉尺寸统一」
使用图标盒子作为设计时的参照,保证整套图标在视觉大小上的统一。当然图标盒子并不是一个定死的数值,日常工作中需要根据图标形状进行微调。
「像素对齐」
对齐像素网格,路径锚点的位置使用整数,避免虚边情况的发生。
在Sketch中,可以通过打开像素模式或使用自动对齐像素功能来进行像素对齐。
「使用偶数」
适配原因,尤其在@2x的情况下作图时需格外注意。
「矢量形状」
使用ConverttoOutlines与布尔运算功能,将图标转化为矢量形状。
TIPS:在矢量形状上套用LayerStyle中的任意颜色,在之后的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中,点击下方AddLibrary…按钮,将.sketch文件导入即可。
2.如何规范化管理Symbol组件库?
当Symbol名称中存在「/」符号时,Sketch会将他们作为组独立对待。举个栗子:两个Symbol,一个名为「Button/normal」,另一个名为「Button/pressed」,这两个Symbol将被归类在Buttom分组中。
当然,也可以使用SketchManager插件来帮助你规范化管理你的Symbol。
相对于Sketch那死板的修改名称管理Symbol组件库的方法,SymbolsManager插件能够以类似Finder的形式来帮助你查看、修改、删除你的组件库。当然,9.99刀买断的价格、加上只有搭梯子才能正常使用的限制也许会让你望而却步。
然而我们相信,正版意识、英文化组件管理、以及为优秀内容付费的概念会慢慢渗透到每个设计师的潜意识当中。
3.如何令Symbol组件更加灵活?
Resizing智能缩放是Sketch39中加入的新功能,有多智能呢?
如何在Symbol组件库中运用呢?举个栗子:
可运用Resizing的类似组件还有很多,在制作Symbol组件库中稍加留意,就能让你的Symbol更加的灵活易用。
4.Symbol的拓展使用
Humaaans是由PabloStanley提供的可免费用于商业或个人的插画图库。你可以替换人物的发型、肤色、上衣、裤子、鞋子…也可以旋转各元素的方向,再添加一点氛围,它便是能适用于各种场合的插图。
最后,希望设计师在建立Symbol组件库的过程中,得到的不仅是设计效率的提升,还有其他各个方面的知识储备与能力提升。