如何用Sketch中Symbol/Styled Text制作设计规范

在做app设计时，或者说开始任何一个新项目设计时，建立设计规范是非常有必要的。下面我举例来说明如何在sketch中建立一套高效、实用的设计规范。

首先说一下涉及到的软件功能：

1、Create symbol、symbol

2、styled Text、Create new Text Style

symbol、styled Text

其次说一下关于建立设计规范与设计页面的先后关系，根据个人习惯和能力，可以选择：

1、先建立一个套设计规范，然后按照设计规范来设计页面。

2、先设计页面，根据设计的页面整理出一套设计规范。

本次将选择第二种方式讲解，原因是这样方便理解，且门槛很低，哪怕你是一个新手。

---

设计页面就不在说了，直接进入建立

准备工作1

整理好自己设计的页面，按各个模块排列好，根据自己的习惯，怎么排都行。例如：

按模块排列好

准备工作2

建立Symbols页面。你可以选择任意一个icon，点击【Create symbol】，就会出现Symbols页面，点击进Symbols页面你可以看到刚才那个icon。

建立Symbols页面

---

现在我们要在Symbols页面中整理我们的设计规范了。根据页面的和项目的不同，最后建立的规范内容多少和类型都有所差别。本次我从一个APP设计中挑选了如下几个页面作为例子来讲解。

项目样例页面

规范大致分为：颜色、字体、字号、icon、按钮、导航、列表...等一切具有公共组件属性的东西都可以放在设计规范中，现在我们将一项一项说。

设计规范

第一部分：颜色

规范中的颜色一般分这几类：主题色、背景色、文字色、提示色。步骤如下：

1、建立80*80（尺寸随意）的画板，绘制一个矩形，填充上颜色对应的颜色。

2、对该画板进行命名，例如：颜色/主题色。（这个名字就是之后建立symbol的名字）

3、选择画板，点击【Create symbol】。

有多少个颜色就重复多少次，最后你将会在顶部工具栏的symbol看到。

建立颜色symbol

第二部分：icon

这个很简单，将你所有用到的icon，全部粘贴到Symbols页面中，归类排列好命好名，然后选择画板，点击【Create symbol】即可。例如：

icon symbol

画板命名技在之前的如何切图中提到过：http://www.jianshu.com/p/0d2430e4c9f8

第三部分：文字

1、这个也很简单，先不用建画板，将你用到文字都输入进去，排列整体，有规律的命好名。整理好后，在建立画板，把这些内容都框起来。比如：

文字整理

最后整理出来的字体里可能有一些在设计图上并没有用到的，但是也要先放上去，比如：提示文字中白色的那个，设计图上并没有用上，但为保证规范输出物的统一性和之后的可扩展性，还是放上的比较好。

2、选择一个文字，点击右侧属性栏中No Text Style > Create new Style，然后重命名即可。以此类推将所有文本都Create new Style。查找可点击Styled Text，就能看到。

Create new Style

第四部分：通用模块

我们暂且把任何具有一定规律和通用性的部分称为通用模块，比如：导航、表单、按钮、卡片等。以下将抽出几块内容举例说明怎么整理。

举例1：标题栏

标题栏

1、首先分解元素，此标题栏有四个元素组成分别是：文本、icon、背景、分割线。文本和背景之前我们已建立好规范。背景和分割线我们可以将它做在一起，矩形加0.5px描边。所以我们首先需要再建一个symbol。如图：新建80px*48px的画板，因为表单尺寸一般为48px，由于是做的1倍设计图，所以描边是0.5px。

列表背景symbol

2、现在标题栏中所有的元素均已有对应的symbol。新建一个画板750px*48px，点击顶部工具栏中的symbol选择对应的元素，放置到这个画板里排列好。输入文字，点击右侧属性栏中No Text Style选择对应的文字样式。最后选择画板点击【Create symbol】再生成一个symbol即可。

symbol中的东西是可以改变大小的，比如：列表背景可根据需要的宽的设定它的尺寸。

举例2：按钮

按钮symbol

1、同上，分解元素，补充缺失symbol。次按钮包含两个元素，其中背景的色块是缺失的，所以现在要新建一个按钮背景symbol，新建80px*48px的画板，画一个圆角矩形，填充上主题色，将画板命好名后选择画板点击【Create symbol】即可。

背景icon

2、创建按钮symbol，新建80px*48px的画板，将所需元素放置在画板中，排列好，然后选择文字，点击右侧属性栏中Rasizing > Fix Width，此功能是为保证创建的symbol在横向拉伸时文字适中居中。最后将画板命好名后选择画板点击【Create symbol】即可。

举例3：卡片

图片卡片

绘制所需矩形，用插件content Generator > Images > Apply from folder，选择图片。填充好之后将画板命好名选择画板点击【Create symbol】即可。

填充图片

卡片

总结：

以上举了三个例子，任何一块内容都能做成symbol，原理很简单，以最小的基本元素作为一个symbol，symbol+symbol组成新的symbol，每一个symbol都是一个变量，在使用的时候选择替换即可。根据项目的不同整理出来的内容看起来也会有所差别。例如：

设计规范

end

如有问题可添加微信biudesign，一起交流学习。