飞特网

  • 飞特网官方微博
  • 飞特网微信公众号

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

留苏发布于:2019-11-7 10:02 |原作者: 顺丰科技UED
简介: 这是一篇关于 Symbol 的进阶教程。为保证更好地理解文章内容,你需要对以下知识点有一定的了解(部分内容已附注释)。

版权申明:本教程出自“顺丰科技UED”原创,感谢“顺丰科技UED”的原创教程分享!

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

Text style¹

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

FEVTE编注:更多经典SKETCH教程和SKETCH经验分享、作品交流请访问飞特网SKETCH教程栏目:https://www.fevte.com/plan/sketch/

▲图片来自Sketch手册

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

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

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

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

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

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

Layer style³

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

▲图片来自Sketch手册

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

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

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

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

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

Symbol⁴

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

▲图片来自Sketch手册

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

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

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

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

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

▲Symbol替换

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

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

英文命名

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

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

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

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

组件库的构建思路

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

「解构」

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

「拆分」

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

「重构」

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

⁵Symbol嵌套:

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

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

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

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

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

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

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

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

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

基础规范

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,其他元素根据不同情况进行调整即可。

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

图标规范

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

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

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

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

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

1234下一页
2

好评

差评

刚表态过的朋友 (2 人)

留苏
河北省 石家庄市 平面设计师
+ 关注 私信
  • 【干货】美术字体设计的N中方法
  • sketch入门教程
  • sketch新手教程
发表评论

最新评论(1)

回 复 1楼
wjkrfaie发布于:2019-11-7 10:02
干货,有用!

查看全部评论(1)

我来说两句:
B Color Image Link Quote Code Smilies |上传
您需要登录后才可以评论和提交作业 登录 | 立即注册

上传作业

本周热点文章

关于飞特| 广告服务| 付款方式| 友情链接| 网站地图| 联系我们| 加入我们| 举报| 飞特网旧版| 飞特网