本文章中的內(nèi)容是個(gè)人在工作中的經(jīng)驗(yàn)，并沿用至今，不一定是最優(yōu)的方法，歡迎同行討論。

----------------直接殺入主題----------------

以下是某原型圖的某片段(舉例說明)

如果你是ps玩家，單純用ps畫表格，那工作量是相當(dāng)大的； 如果你是sketch玩家，單純用sketch畫表格，似乎也輕松不到哪里去。

我 也很 好奇，sketch公司為什么一直沒有做能生成表格并任意修改表格各種樣式的功能

當(dāng)然，sketch有百家插件支持著他，到目前為止，能在sketch中稍微部署，就能快速生成表格的插件是 “Kitchen”。

那我們先用該插件來試驗(yàn)：

1.安裝并打開kitchen插件中的組件功能。

2.按照原型圖上的內(nèi)容部署好，并生成表格。

最終生成的表格，邊框，背景，顏色，對(duì)齊方式等等都已經(jīng)定死了樣式，每一列的寬度也不夠靈活，比如 性別這一列，只會(huì)有一個(gè)字，寬度可以適當(dāng)縮小。

當(dāng)然，kitchen給出了 自行調(diào)整的功能，你可以在部署的時(shí)候拖動(dòng)表格邊框，來大概調(diào)整列寬

最終得到的結(jié)果似乎也不太理想：

---------------------------用sketch自身功能老老實(shí)實(shí)做表格，做出的表格靈活性更高---------------

從原型圖和設(shè)計(jì)師自己的經(jīng)驗(yàn)來看，有以下設(shè)計(jì)注意點(diǎn)

1. 字體顏色有灰色，黑色，藍(lán)色，關(guān)于金額的 內(nèi)容一般還會(huì)用紅色字體

2. 文案的對(duì)齊方式有居中對(duì)齊，左對(duì)齊

3. 文案后面可能會(huì)跟著圖標(biāo)，并且圖標(biāo)會(huì)隨文案的字?jǐn)?shù)個(gè)數(shù)增多而后移。

解決問題：

1 建立單元格，尺寸隨意，因?yàn)槲覀儠?huì)用到sketch的 Resizing功能，今后單元格尺寸都可以任意變化的。

2 對(duì)單元格中的各個(gè)對(duì)象建立組件

3 把整個(gè)單元格也建立組件

4 回到Sym文檔中，可以看到 一個(gè)單元格是有三個(gè)嵌套關(guān)系組成，根據(jù)前面提到的，我們把單元格文案復(fù)制多個(gè)出來，各自設(shè)置各自的樣式，并命名區(qū)分。

5 這里要注意的是，如果按照上圖的命名方式，最終在設(shè)計(jì)稿里插入sym對(duì)象的時(shí)候，sketch會(huì)以以下方式列舉給你以供選擇。

6 回到sym文檔，在命名的時(shí)候 以 "/ " 隔斷相同前綴不同后綴。 這樣一來，你在使用過程中就更方便管理選擇。

7 回到畫布中插入制作好的單元格，并  靈活 調(diào)整 好 每一列的寬度。

8 利用override為每一項(xiàng)寫入不同文案，為了方便管理，對(duì)每一項(xiàng)命名。

9 可以將一類對(duì)象放置在一個(gè)文件里以方便管理

10 插入單元格制作表體

在職位那一列，我們是希望 文案能左對(duì)齊的，所以我們 要修改sym文檔里的 黑色文案對(duì)齊方式。

為了方便管理，我們從“單元格文案/黑”  復(fù)制一個(gè)出來，將其文案對(duì)齊方式設(shè)置為左對(duì)齊。

然后將兩個(gè)黑色文案命名好區(qū)分開來。

 

然后在畫布插入的sym里選擇黑色文案左對(duì)齊的即可

同理可得：薪資那一列的紅色文案，也一定是預(yù)先設(shè)置好左對(duì)齊的。

11  編輯圖標(biāo)會(huì)跟隨文案?jìng)€(gè)數(shù)而右移的，所以將 編輯圖標(biāo) 方式在  文案對(duì)象中。

        ！注意，別放在單元格對(duì)象中！

        ！注意，如圖設(shè)置好該圖標(biāo)的Resizing屬性！  (關(guān)于Resizing屬性的介紹請(qǐng)查看我的其他文章)

12 再回到畫布，你就已經(jīng)看到了你想要的結(jié)果。

13 這個(gè)操作圖標(biāo)可能是會(huì)變化的，所以將其組件化

14 復(fù)制一個(gè)出來，并畫其他的所要用到的圖標(biāo)，然后命名好以區(qū)分

15 同樣的方式，對(duì)灰色文案 也做這樣的組合，然后再到畫布里選擇 一下表達(dá)方式，你就得到了想要的結(jié)果。

16 接下來，我們將“單元格背景” 復(fù)制幾個(gè)出來，命名好名，你完全可以依照自己的愛好命名，在形狀上做不同的調(diào)整，如圖

17  到畫布中，把表格的寬度稍微縮小一些，這樣看起來，不會(huì)表格直接挨著屏幕左右而顯示  很生硬。

18 找到左上角，左下角，右上角，右下角四個(gè)單元格，然后在右側(cè)去 選擇不同的背景形狀

最終使得表格看起來更加不會(huì)生硬

最后提一下，也許會(huì)碰到一個(gè)單元格占兩行高度，實(shí)際上你只有注意在部署單元格樣式的時(shí)候，設(shè)置好 Y軸上的 Resizing屬性即可。

有了以上思路，你還可以針對(duì)表格背景做出不同的樣式。

------------總結(jié)--------------

 用sketch自帶的 組件嵌套，及Resizing功能，制作出來的表格 比起 Kitchen 來說，更加靈活，方便修改文案，方便做各種樣式，方便各種布局。

傳一個(gè)粗糙的源文件 供大家剖析。

如果你知道更加牛逼的表格制作插件，或者畫表格的方法，歡迎留言。