徐小馬：很多中后臺項(xiàng)目的界面設(shè)計(jì)涉及大量的表格，每份終稿的輸出，都要經(jīng)歷反復(fù)的調(diào)整間距、邊距、對齊，Sketch 自帶的排版功能已經(jīng)遠(yuǎn)遠(yuǎn)不夠用了。所以推薦給大家一個(gè)自動排版的插件：Paddy，合理的使用會提升設(shè)計(jì)師的時(shí)薪。

一、閱讀準(zhǔn)備和核心流程

• 插件官網(wǎng)：GitHub - Paddy
• 相關(guān)下載：插件 | 演示文檔

掌握三個(gè)核心功能即可快速上手，筆者在這里以一張簡單表格的制作為例子。

第一步：設(shè)置邊距

首先我們制作一個(gè)上下左右間距為 16px 的單元格。只更改背景圖層的名稱，在其原有名稱后按格式添加參數(shù)即可完成邊距的自動調(diào)整。

快捷鍵為：Control + Alt + p，邊距參數(shù)命名規(guī)則見下表：

有一點(diǎn)點(diǎn) CSS 基礎(chǔ)的同學(xué)可以很快掌握。

第二步：設(shè)置間距

我們將錯(cuò)亂的單元格垂直間距調(diào)整為0，在原有組名稱后面添加參數(shù)即可完成垂直或水平方向間距的自動調(diào)整。

快捷鍵為：Control + Alt + Command + p，間距參數(shù)命名規(guī)則見下表：

注意二者不可同時(shí)存在。

第三步：設(shè)置對齊

將調(diào)整好間距的單元格進(jìn)行左對齊，在添加間距參數(shù)的組名稱后面添加對齊參數(shù)即可完成組內(nèi)對象的自動對齊。對齊參數(shù)命名規(guī)則見下表，其中 l、c、r、t、m、b 分別是 left、center、right、top、middle、bottom 的首字母。

對齊參數(shù)既可以和間距參數(shù)復(fù)合使用，也可以單獨(dú)使用

當(dāng)然，Paddy 還有很多其他實(shí)用的功能。

二、其他功能

1. 忽略特定項(xiàng)

在邊距參數(shù)中某項(xiàng)使用「x」可以讓 Paddy 忽略對應(yīng)邊的邊距自動調(diào)整。

在圖層或組的名稱前面添加「-」可以讓 Paddy 在自動調(diào)整時(shí)忽略該對象。

2. 設(shè)置邊界

可以在邊距參數(shù)中使用「>=, >, <, <=, =」來設(shè)定邊距的最大值、最小值。

3. 支持 Symbol

不得不說這是個(gè)異常好用的功能，解決了很多執(zhí)行時(shí)遇到的問題。越來越多的插件開始和 Symbol 掛鉤，這才是整個(gè) Sketch 的精髓。

本文來自知乎專欄「非科班設(shè)計(jì)」，作者徐小馬。

「提升效率的 Sketch 技巧與插件」

• 《簡單實(shí)用！七步學(xué)會用 Sketch 搭建復(fù)雜表格》
• 《學(xué)會這4大Sketch 高階技巧，讓你的效率猛翻10倍！》
• 《6個(gè)能大幅度提升 UI 設(shè)計(jì)效率的 Sketch 插件》
• 《用了這9個(gè)最強(qiáng)大的Sketch插件，工作效率提高了一倍！》

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

優(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)備了貼心的知識樹專欄。開啟免費(fèi)自學(xué)新篇章，按照我們的專欄一步步學(xué)習(xí)，一定可以迅速上手并制作出酷炫的視覺效果。

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