成人亚洲综合,日韩高清一区二区三区五区七区,三级网址日本,亚洲激情成人,av成人在线电影,亚洲免费成人在线,超清首页国产亚洲丝袜

免費高效!用 Paddy 讓你的 Sketch 學會自動排版!

作者: 徐小馬
分類: 教程
2018-04-25
10836

很多中后臺項目的界面設計涉及大量的表格,每份終稿的輸出,都要經(jīng)歷反復的調(diào)整間距、邊距、對齊,Sketch 自帶的排版功能已經(jīng)遠遠不夠用了

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

一、閱讀準備和核心流程

插件官網(wǎng):GitHub – Paddy

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

第一步:設置邊距

uisdc-cj-20180424-1.gif

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

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

uisdc-cj-20180424-2.jpg

有一點點 CSS 基礎的同學可以很快掌握。

第二步:設置間距

uisdc-cj-20180424-3.gif

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

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

uisdc-cj-20180424-4.jpg

注意二者不可同時存在。

第三步:設置對齊

uisdc-cj-20180424-5.gif

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

uisdc-cj-20180424-6.jpg

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

當然,Paddy 還有很多其他實用的功能。

二、其他功能

1. 忽略特定項

uisdc-cj-20180424-7.gif

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

uisdc-cj-20180424-8.gif

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

2. 設置邊界

uisdc-cj-20180424-9.gif

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

3. 支持 Symbol

uisdc-cj-20180424-10.gif

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

0
0
分享到:

0

喜歡他,就推薦他上首頁吧^_^

推薦閱讀

×

賽事服務聯(lián)系方式

0371-86068866

4008887269

cndesign@163.com

好的,我知道了

官方微信

聯(lián)系我們

  • QQ:33143335 QQ:1904200230
  • 電話:18569912460
  • 投稿:cndesign@163.com
  • 地址:鄭州市國家大學科技園東區(qū)9號樓2層

版權信息

  移動 Android 版 豫 ICP 備16038122號-2 豫公網(wǎng)安備 41019702002261號