简单实用！七步学会用 Sketch 搭建复杂表格

　　笔者之前往华润置天东北年夜区做用户调研，需求现场了解需供，快速拆建用于用户测试的可交互本型。因为计划中触及年夜量的表格，有面措脚没有及。返来后，我构想做一个 Sketch 模版沉淀，以防下次再逢到那种状况。那篇分享次要触及两个 Sketch 的主要 feature：Symbol 嵌套战 Resizing。闭于前者之前曾经分享过一篇，补课的同窗请面击那里。本篇将专注于 Resizing。

　　结果预览

　　△ 用 Resizing Symbol 拆建的实拟使命列表

　　第一步，理解 Resizing

　　Sketch 从44开端，对之前的规划功用停止了劣化，从头整开为 Resizing。Resizing 由两部门构成：

　　Pin：选中某工具高低阁下某一边后，推伸 Group 时该工具间隔该边的间隔恒定。

　　Fix：选中某工具宽/下牢固后，推伸 Group 时该工具宽/下的数值恒定。

　　光从字里没有太简单了解，笔者间接上图，举四个例子协助各人：

　　第两步，设想一个单位格

　　单位格看似简朴，实在是由差别的元素战属性组开而成，笔者按照事情的需求，收拾整顿出去一张脑图。各人能够按照本人的亲身需供停止删删。

　　大致上那些疑息能够分红两部门，定量战变量。按照我司设想标准 Clarity Design 划定好间距和根本元素尺寸：

　　以是我们如今看到的该当是那样一个单位格，那里提早演示下推伸后的结果。

　　第三步，图标战色彩

　　收拾整顿好能够用到的图标。我那里以文件范例为例子，各人也可按照需求放进其他图标。

　　收拾整顿好会用到的色彩。

　　收拾整顿好操纵按钮，操纵 Mask 功用真现按钮变色，没有懂的同窗请面击那里补课。

　　第四步很枢纽，请醉一醉。

　　第四步，对齐款式

　　普通表格中的单位格城市视状况挑选对齐方法，差别的对齐方法也有各自细分的用法。笔者对本人的用法停止一个回纳：

　　三种对齐方法中，左对齐的造做最为庞大，果为触及到图标、字战操纵。我正在那里便以此为例，其他两种对齐方法期望各人能够触类旁通。尾先，根据下图创立三个一样巨细的 Symbol，参数如图所示。放上字战操纵按钮，根据图示 Resizing 设置。

　　tip：当笔墨的设置为 auto 时，图标跟从正在字前方充足远的处所，正在 override 更多笔墨时会跟从笔墨图层的宽度而主动挪动。

　　然后，创立两个新的不异巨细的 Symbol，尺寸取上述三个差别，如图。参加图标并设置好 Resizing。此中嵌进上里三个 Symbol 中随便一个。

　　最初，创立一个新的 Symbol，尺寸取上述五个差别。此中嵌进上里两个 Symbol 中随便一个。同时，完成左对齐战居中对齐相干步调，我们能够获得三种对齐方法的 Symbol，它们的尺寸分歧。

　　我们将左/中/左中随便一个 Symbol 嵌进第两步中的单位格内，阁下间距5 qu。

　　那样对齐方法便设置完了，我们获得一个叫做 Cell 的 Symbol。能够挑选对齐方法，复写笔墨内容，挑选能否需求操纵图标。

　　第五步，分开款式

　　单位格的分开款式有两种款式，下划线战描边。尾先我们去真现能够改动色彩战细细的下划线。拿出到之前筹办好的色彩 Symbol 停止拼接。

　　然后我们去真现能够改动色彩战细细的描边。

　　我们创立两个不异巨细的 Symbol，置进差别的朋分款式。再把设置完的朋分方法放进第三步筹办好的单位格中，我们获得一个能够改动朋分款式，色彩战细细的 Symbol。固然，布景色彩也是能够改动的。

　　第六步，字色

　　我造做的表格中会用到六种色彩的笔墨，假如用色彩 Symbol，接纳 Screen 叠减的方法会比力便利，可是当切换单位格布景色后，那个办法会带去成绩。因而我们那里利用一个比力鸠拙的办法。

　　此时我们获得一个能够改动笔墨色彩的单位格。

　　第七步，收拾整顿定名

　　此时的 Cell 曾经能够利用，可是复写项题目十分的治，未便于操纵。以是我们需求收拾整顿一下发生元素的定名。团体历程比力烦琐，没有正在那里演示了，各人能够参考我给出的进修材料。tip：

　　全部 Symbol 的称号会呈现正在 Overrides 里某一项的下推选框中。

　　Layer (Text 或 Symbol)的称号会成为 Overrides 中某一项的称号。

　　别的，那时各人会发明 Symbol 内里选项太多，许多只是辅料，以是我们需求插件 Rename It 将用没有到的 Symbol 拆起去。

　　文章总结

　　做了此次设想东西的沉淀，期望正在下一次处置触及表格的需供时可以兵去将挡，无往倒霉。至于设想资本同享，笔者之前写过相干教程，请面击https://zhuanlan.zhihu.com/p/29008906。