Sketch 的智能单元格

先看一个Sketch智能单元格该有的样子吧：

再看一下把我整哭，让我怀疑人生的表格大概就是长这个样子：

看一眼头皮发麻，看两眼头晕目眩，看三眼能直接螺旋式升天。

做第三个表格的时候，反应有点迟钝的我终于意识到了这好像有点问题。我认真的想了想，应该有聪明点的办法吧？不然B端设计师不得疯了？

麻木地做一个么得感情的表格机器人不是我的风格，在一番寻寻觅觅后，发现 Sketch 自身就有 Symbol 和 Resizing 两大buff……是什么蒙蔽了我的卡姿兰大眼睛......我反省。

首先梳理一下这个项目中单元格样式的可能性：

梳理完之后，可以明确接下来的操作：

虽然我个人建议直接往下翻看步骤～

但我还是决定先概括性地说一堆你们可能会看不懂的废话，再展示详细操作步骤。

概括性地说就是，把文字、颜色、icon分别组件化一下，然后利用这些创建好的组件组合出单元格内容样式的所有可能性，并且建立好布局。然后整体组件一下，再在此基础上分别列举出需要用到的字符样式（包括字号、字重、字体颜色的自由组合），然后分别创建组件。到此为止，一个可以灵活改变字符样式、icon、内容布局的单元格组件就算完成了，姑且把它叫做组件1.0吧。

但组件1.0还不能充分满足实际应用，因此要在1.0的基础继续组件化。

再继续概括性地说就是，先把组件1.0放在一边，开始做单元格框架样式组件。一个成熟的单元格不仅能自由改变内容样式，框架也应该能够灵活配置才行。

先建立一个可灵活改变颜色的单元格背景，在这个单元格背景的基础上叠加一个比较小的也可以灵活改变颜色的单元格背景，并且设置好内单元格背景的布局。这样既能创造出可以灵活改变颜色的背景和可以灵活改变颜色的描边，又能保证在拉伸单元格的时候描边不变形。

哇！这个想法超棒对不对！我真是个小机灵鬼。

单元格框架除了背景、描边外，还有圆角和下划线。先把下划线给搞定吧，和单元格背景是一个做法，并且一样需要做好布局。把背景、描边、下划线一起打个组，复制多几个出来，可以着手搞定圆角可配置的问题。

把复制出来的样式分别改为左上角圆角、右上角圆角、右下角圆角、左下角圆角，无圆角。然后把组件1.0放置在列举出各个组里，设置好组件1.0在组里的布局，然后分别创建组件。到这里为止，一个可以灵活改变字符样式、icon、内容布局、单元格背景、单元格描边、单元格下划线的单元格组件就算完成了，姑且把它叫做组件2.0吧。

但组件2.0还是不能充分满足实际应用，因此要在2.0的基础上继续组件化。

建立一个和组件2.0一样大小的矩形充当容器，把组件2.0放置在容器上方，两者一起打个组，创建组件3.0，到此为止，组件化工作算是完成了，已经能够很灵活地满足这个项目需求了。

组件3.0是一个可以灵活改变字符样式、icon、内容布局、单元格背景、单元格描边、单元格下划线、单元格圆角的相对成熟的单元格组件。

嗯，相信你已经懵了。

懵了就对了。贴心的我把步骤都记下来了，还把坑都填满了，继续往下看看详细步骤吧。

先把文字、颜色、icon这些基础做好先吧：

以上基础做好之后，我们就要进入第一个重点了——单元格内容的组件化： 

在实际使用中，标题字重和正文字重是不一样的，颜色也是不一样的。而当组件嵌套组件的时候，字体的字符样式变得不可变了…...哇！简直要疯了！

为了能灵活改变这个单元格里字体的字符样式，需要列举出不同字符样式的单元格内容组件，并且分别创建组件。

接下来把字符样式进行组件化操作：

上面的组件化1.0做好之后，我们就要进入第二个重点了——单元格框架的组件化：

把各类型圆角单元格的背景、描边、下划线做好之后，我们就要进入第三个重点了——把单元格内容组件1.0嵌套进单元格框架组件里：

上面的组件化2.0做好之后，我们就要进入第四个重点了——单元格圆角可配置化：

至此，组件3.0就完成了。它是一个可以灵活改变字符样式、icon、内容布局、单元格背景、单元格描边、单元格下划线、单元格圆角的相对成熟的单元格组件。

总结

哇！好复杂！

嗯！很高兴我又成长了！

啊！我真是太棒了！一个不小心就掌握了sketch的高阶用法——俄罗斯套娃…...

“懒”果然是一切生产力～

来归纳一下智能单元格的要点吧：

1、做好基础组件，包括字体组件化、颜色组件化、icon组件化。工作量挺大，但是是组件化必须经历的过程。

2、做好单元格内容组件1.0，争取把可能会用到的样式都列举出来：

① 一个技术难点应该就是「icon跟随文本」，解决跟随问题要靠两点，分别是「透明矩形」+「紧挨」。指在icon和文本之间放置一个透明矩形，然后把三个元素紧挨着放在一起。

② 第二个要切记的是，要在这一步骤中分别做好元素的布局，在「跟随」问题上创建组件时，要选择布局方式。

③ 第三个顺带提一下组件命名，不要瞎命名。文件夹分组用「/」符号，尽量就是建立一个好线索，方便查找。

④ 比较坑的字符样式可灵活配置的问题，工作量是字体组件化的N倍，所以建议一般情况下，能不做这个不做这个，工作量太大是一回事，主要是过程中需要保持头脑清醒和需要特别细心。但如果时间充裕的话，推荐可以做一下，毕竟后期用起来真的非常舒适。

3、做好单元格框架组件，也是争取把可能用到的样式都列举出来：

① 边框颜色的处理，需要换一种思维方式。采取两个大小不一的矩形叠加在一起的方式制造边框颜色可配置化的错觉。 

4、把内容组件1.0嵌套到框架组件中，要注意设置内容组件1.0的布局，这一步整体进行打组并创建组件化2.0。到这里，单元格已经可以灵活改变字符样式、icon、内容布局、单元格背景、单元格描边、单元格下划线了。

5、在组件2.0的基础上，创建组件3.0，实现单元格圆角可配置化。

整理思路到最后，发现还是有点点晕，虽然本质上其实就是组件嵌套组件再嵌套组件......俄罗斯套娃用法。

在摸索的时候，障碍多到怀疑人生，动次卡次，就像播放有损的唱片，顺畅地播放一段之后又卡住，然后再顺畅地播放一段，又卡住……着实难受，但好在一切都搞定了，开心?