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

2017-12-02 本文已影响4242人赵小客

在做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即可。