簡單實用！七步學會用?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 裝起來。

文章總結

做了這次設計工具的沉淀，希望在下一次處理涉及表格的需求時能夠兵來將擋，無往不利。至于設計資源共享，筆者之前寫過相關教程，請點擊這里。

歡迎關注微信公眾號：「非科班設計」

「提高效率，Sketch還有這些好方法」

• 《用了這9個最強大的Sketch插件，工作效率提高了一倍！》
• 《新鮮出爐！五個超方便的Sketch 48 新功能介紹》
• 《提高溝通效率！幫設計師記錄修改位置的Sketch插件PinLog》

================明星欄目推薦================

優優教程網： UiiiUiii.com 是優設旗下優質中文教程網站，分享了大量PS、AE、AI、C4D等中文教程，為零基礎設計愛好者也準備了貼心的知識樹專欄。開啟免費自學新篇章，按照我們的專欄一步步學習，一定可以迅速上手并制作出酷炫的視覺效果。

設計導航：國內人氣最高的設計網址導航，設計師必備： http://hao.uisdc.com