运用Sketch快速制作表格

在UI设计中，制作表格是让很多设计师头疼的一件事呢～倒不在于绘制表格有多麻烦，而在于如果后期要改动（一般都要改个几版～）很麻烦。那下面就给大家介绍一个创建方便、可扩展性强（迭代方便）的表格制作方法。主要是用到了Sketch的Resizing功能。

首先要确定颜色和字体。

创建一个颜色库，也就是每种颜色都要设为Symbol。如下图，我做的一份ColorSymbol。

第二步是关键，分析表格由哪几种单元格构成，比如带图标和文字的单元格，只有图标的单元格，或者只有文字的单元格。其中文字与图标的位置也会有变化。比如说内容居中、左对齐、右对齐；比如说图标在文字之前、图标在文字之后。一般不是很复杂的表格，单元格种类也就3种左右。哦，对了，最好确定好单元格的高度。

现在我想制作一个表头的单元格，内容有文字也有图标，图标在文字之后，图标和文字整体左对齐。

这张图中，大家注意到了吗？整个单元格分为图标、文字和背景三个部分。图标和背景均为Symbol，文字不需要设为Symbol。这样做的目的是后续修改起来方便。

好，重点来了。文字、图标、和背景要设为一个组。然后看图片右上方“Resizing”部分，我设定了文字与单元格的左边间距固定，勾选“Fix Height”（注意：对于文字，不要勾选“Fix Width”，因为文字个数会有变化），这样之后在拉伸单元格时，文字与单元格左边的间距就始终都是这个固定值。

然后设置图标的Resizing。

图标只要勾选“Fix Width”和“Fix Height”就可以了。

好，接下来将这个组设为Symbol。命名为Title。

同理设置了以下三种类型的单元格。

接下来我们就来制作表格啦。

插入单元格，像下图显示那个，先摆好一列，然后将这列编组。

设定最上方的单元格的Resizing上边距和左边距固定。

设定最下方的单元格下边距与左边距固定。

好，现在你就可以随意拉伸啦～

变宽～

变矮～

内容修改也很方便哦

只需要在右方的Overrides那里修改文字、图标、背景颜色就OK了。这里只能修改文字的内容而修改不了文字的Style，有好方法的小伙伴欢迎来我们交流一下。

通过快速复制粘贴，以及修改内容，一个具有高度可扩展性的表格就完成啦～