徐小馬：筆者之前去華潤(rùn)置地東北大區(qū)做用戶調(diào)研，需要現(xiàn)場(chǎng)理解需求，快速搭建用于用戶測(cè)試的可交互原型。由于方案中涉及大量的表格，有點(diǎn)措手不及。回來(lái)后，我構(gòu)思做一個(gè) Sketch 模版沉淀，以防下次再遇到這種情況。這篇分享主要涉及兩個(gè) Sketch 的重要 feature：Symbol 嵌套和 Resizing。關(guān)于前者之前已經(jīng)分享過(guò)一篇，補(bǔ)課的同學(xué)請(qǐng)點(diǎn)擊這里。本篇將專注于 Resizing。

效果預(yù)覽

△ 用 Resizing Symbol 搭建的虛擬任務(wù)列表

第一步，了解 Resizing

Sketch 從44開始，對(duì)之前的布局功能進(jìn)行了優(yōu)化，重新整合為 Resizing。Resizing 由兩部分組成：

• Pin：選中某對(duì)象上下左右某一邊后，拉伸 Group 時(shí)該對(duì)象距離該邊的距離恒定。
• Fix：選中某對(duì)象寬/高固定后，拉伸 Group 時(shí)該對(duì)象寬/高的數(shù)值恒定。

光從字面不太容易理解，筆者直接上圖，舉四個(gè)例子幫助大家：

第二步，設(shè)計(jì)一個(gè)單元格

單元格看似簡(jiǎn)單，其實(shí)是由不同的元素和屬性組合而成，筆者根據(jù)工作的需要，整理出來(lái)一張腦圖。大家可以根據(jù)自己的切身需求進(jìn)行增刪。

大體上這些信息可以分成兩部分，定量和變量。根據(jù)我司設(shè)計(jì)規(guī)范 Clarity Design 規(guī)定好間距以及基本元素尺寸：

所以我們現(xiàn)在看到的應(yīng)該是這樣一個(gè)單元格，這里提前演示下拉伸后的效果。

第三步，圖標(biāo)和顏色

整理好可能用到的圖標(biāo)。我這里以文件類型為例子，大家也可根據(jù)需要放入其他圖標(biāo)。

整理好會(huì)用到的顏色。

整理好操作按鈕，利用 Mask 功能實(shí)現(xiàn)按鈕變色，不懂的同學(xué)請(qǐng)點(diǎn)擊這里補(bǔ)課。

第四步很關(guān)鍵，請(qǐng)醒一醒。

第四步，對(duì)齊樣式

一般表格中的單元格都會(huì)視情況選擇對(duì)齊方式，不同的對(duì)齊方式也有各自細(xì)分的用法。筆者對(duì)自己的用法進(jìn)行一個(gè)歸納：

三種對(duì)齊方式中，左對(duì)齊的制作最為復(fù)雜，因?yàn)樯婕暗綀D標(biāo)、字和操作。我在這里就以此為例，其他兩種對(duì)齊方式希望大家可以舉一反三。首先，按照下圖創(chuàng)建三個(gè)同樣大小的 Symbol，參數(shù)如圖所示。放上字和操作按鈕，按照?qǐng)D示 Resizing 配置。

tip：當(dāng)文字的設(shè)置為 auto 時(shí)，圖標(biāo)跟隨在字后方足夠近的地方，在 override 更多文字時(shí)會(huì)跟隨文字圖層的寬度而自動(dòng)移動(dòng)。

然后，創(chuàng)建兩個(gè)新的相同大小的 Symbol，尺寸與上述三個(gè)不同，如圖。加入圖標(biāo)并設(shè)置好 Resizing。其中嵌入上面三個(gè) Symbol 中任意一個(gè)。

最后，創(chuàng)建一個(gè)新的 Symbol，尺寸與上述五個(gè)不同。其中嵌入上面兩個(gè) Symbol 中任意一個(gè)。同時(shí)，完成右對(duì)齊和居中對(duì)齊相關(guān)步驟，我們可以得到三種對(duì)齊方式的 Symbol，它們的尺寸一致。

我們將左/中/右中任意一個(gè) Symbol 嵌入第二步中的單元格內(nèi)，左右間距5 qu。

這樣對(duì)齊方式就設(shè)置完了，我們得到一個(gè)叫做 Cell 的 Symbol。可以選擇對(duì)齊方式，復(fù)寫文字內(nèi)容，選擇是否需要操作圖標(biāo)。

第五步，分隔樣式

單元格的分隔樣式有兩種樣式，下劃線和描邊。首先我們來(lái)實(shí)現(xiàn)可以改變顏色和粗細(xì)的下劃線。拿出到之前準(zhǔn)備好的顏色 Symbol 進(jìn)行拼接。

然后我們來(lái)實(shí)現(xiàn)可以改變顏色和粗細(xì)的描邊。

我們創(chuàng)建兩個(gè)相同大小的 Symbol，置入不同的分割樣式。再把設(shè)置完的分割方式放入第三步準(zhǔn)備好的單元格中，我們得到一個(gè)可以改變分割樣式，顏色和粗細(xì)的 Symbol。當(dāng)然，背景顏色也是可以改變的。

第六步，字色

我制作的表格中會(huì)用到六種顏色的文字，如果用顏色 Symbol，采用 Screen 疊加的方式會(huì)比較便捷，但是當(dāng)切換單元格背景色后，這個(gè)方法會(huì)帶來(lái)問(wèn)題。于是我們這里使用一個(gè)比較笨拙的方法。

此時(shí)我們得到一個(gè)可以改變文字顏色的單元格。

第七步，整理命名

此時(shí)的 Cell 已經(jīng)可以使用，但是復(fù)寫項(xiàng)標(biāo)題非常的亂，不便于操作。所以我們需要整理一下產(chǎn)生元素的命名。整體過(guò)程比較繁瑣，不在這里演示了，大家可以參考我給出的學(xué)習(xí)資料。tip：

• ?整個(gè) Symbol 的名稱會(huì)出現(xiàn)在 Overrides 里某一項(xiàng)的下拉選框中。
• Layer （Text 或 Symbol）的名稱會(huì)成為 Overrides 中某一項(xiàng)的名稱。

另外，這時(shí)大家會(huì)發(fā)現(xiàn) Symbol 里面選項(xiàng)太多，很多只是輔料，所以我們需要插件 Rename It 將用不到的 Symbol 裝起來(lái)。

文章總結(jié)

做了這次設(shè)計(jì)工具的沉淀，希望在下一次處理涉及表格的需求時(shí)能夠兵來(lái)將擋，無(wú)往不利。至于設(shè)計(jì)資源共享，筆者之前寫過(guò)相關(guān)教程，請(qǐng)點(diǎn)擊這里。

歡迎關(guān)注微信公眾號(hào)：「非科班設(shè)計(jì)」

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

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

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

優(yōu)優(yōu)教程網(wǎng)： UiiiUiii.com 是優(yōu)設(shè)旗下優(yōu)質(zhì)中文教程網(wǎng)站，分享了大量PS、AE、AI、C4D等中文教程，為零基礎(chǔ)設(shè)計(jì)愛好者也準(zhǔn)備了貼心的知識(shí)樹專欄。開啟免費(fèi)自學(xué)新篇章，按照我們的專欄一步步學(xué)習(xí)，一定可以迅速上手并制作出酷炫的視覺效果。

設(shè)計(jì)導(dǎo)航：國(guó)內(nèi)人氣最高的設(shè)計(jì)網(wǎng)址導(dǎo)航，設(shè)計(jì)師必備： http://hao.uisdc.com