「技」??七步學會用 Sketch 的功能 Resizing 搭建複雜表格

筆者之前去華潤置地東北大區做用戶調研，需要現場理解需求，快速搭建用於用戶測試的可交互原型。由於方案中涉及大量的表格，有點措手不及。回來後，我構思做一個 Sketch 模版沉澱，以防下次再遇到這種情況。這片分享主要涉及兩個 Sketch 的重要 feature：Symbol 嵌套和 Resizing。關於前者之前已經分享過一篇，補課的同學請點擊這裡。本篇將專註於 Resizing。

??閱讀信息：

• 閱讀時間：約11分鐘
• 操作時間：約40分鐘
• 相關下載：軟體下載 | 學習資料
• Sketch 技巧：Library | 換色文字 symbol | Symbol 嵌套 | Shared Text
• Sketch 插件：CRAFT | Sketch Material | WeSketch | Runner

??效果預覽：

??第一步，了解 Resizing：

Sketch 從44開始，對之前的布局功能進行了優化，重新整合為 Resizing。Resizing 由兩部分組成：

1. Pin：選中某對象上下左右某一邊後，拉伸 Group 時該對象距離該邊的距離恆定；

2. 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：

1. 整個 Symbol 的名稱會出現在 Overrides 里某一項的下拉選框中；

2. Layer （Text 或 Symbol）的名稱會成為 Overrides 中某一項的名稱。

另外，這時大家會發現 Symbol 裡面選項太多，很多只是輔料，所以我們需要插件 Rename It 將用不到的 Symbol 裝起來。

??文章總結：

做了這次設計工具的沉澱，希望在下一次處理涉及表格的需求時能夠兵來將擋，無往不利哈哈。至於設計資源共享，筆者之前寫過相關教程，請點擊這裡。在這感謝一下我司設計師 @鍾二信，他製作的共享圖標庫非常好用。

??擴展閱讀：

• Graffle 教程：繪製流程圖 | 搭建文檔 | 繪製表格
• 設計工具：InVison Studio
• 設計譯文：Swarm | Do & Don』t | YouTube | Uber | iPhone X HIG | Oscar 2.0 | Atlassian | Adobe 圖標改版 | Adobe 品牌系統升級

??感謝閱讀：

我是 Teambition 的交互設計師徐小馬（微信：heiheilaugh），歡迎交流。