對于大部分UI設(shè)計(jì)師來說，每天的工作都充實(shí)且富有挑戰(zhàn)性。比如：界面設(shè)計(jì)、工具運(yùn)用、動效制作、代碼切圖、前后端協(xié)作等等，但是偶爾也要面對一些非常費(fèi)時間的設(shè)計(jì)需求。

尤其是大批量文字排版，看起來簡單，但是總會讓很多設(shè)計(jì)師頭疼。一般情況下，對于大批量的文字，我們都會用測試文本臨時代替，等技術(shù)開發(fā)的時候再直接文本錄入。定義好樣式，后期的文案變動和設(shè)計(jì)師基本無關(guān)。

不過，也有很多設(shè)計(jì)師為了界面展示目的，或在需求方的奇葩要求下，把文本嚴(yán)格按照需求提供的填充到界面中來。比如我們做一個簡單的活動規(guī)則手機(jī)頁面，總共有5個段落。

很簡單，直接復(fù)制粘貼，做一個文本圖層，調(diào)整好樣式即可。同時不要忘了右側(cè)的Paragraph屬性，讓每個段落產(chǎn)生間距。

遇到的問題

雖然這么做很快，但畢竟是一種討巧的方案，會出現(xiàn)下面幾個問題。

1：如果需求方后期要在中間加入圖片，我們只能通過原始的換行來給圖片騰出空間；

2：由于是一個文本圖層，如果出現(xiàn)標(biāo)題等樣式，無法進(jìn)行text-style樣式控制；

3：數(shù)字序號和文本沒有區(qū)分，可讀性不強(qiáng)，影響用戶體驗(yàn)。

對于第三個問題數(shù)字序號出現(xiàn)的影響閱讀，可以看下圖對比。PS和AI有對應(yīng)的小技巧，就是段落的首行縮進(jìn)，改成負(fù)值即可。技術(shù)上也有解決方案，比如前端CSS中的text-indent屬性，也可以改成負(fù)值來實(shí)現(xiàn)。具體可以看這篇文章《神奇的負(fù)值縮進(jìn)，文本段落的另類對齊方式》。

但是在Sketch中卻沒有對應(yīng)的樣式，我們只能單獨(dú)把序號分離出來進(jìn)行排列?？傊厦娴膫鹘y(tǒng)方法無法滿足快速、方便、可修改的要求。如果是更多的條目，無疑會加大我們的設(shè)計(jì)成本。

解決方案

所以該拿出我們的殺手锏了：Kitchen插件。

關(guān)于這個插件，UI黑客之前寫過一篇文章《你不知道的Sketch黑科技-智能排版》，詳細(xì)介紹了Kitchen自動排版的用法。我們其實(shí)可以把這個功能擴(kuò)展利用在文本段落中，來解決上文出現(xiàn)的問題。還是拿這個活動規(guī)則為例，我們一起試試把它的樣式完全掌握在自己手中。

1：做出段落標(biāo)號

一般的標(biāo)號都是從數(shù)字1開始的，一直到N。這里我們做個簡單的樣式，同時轉(zhuǎn)化為symbol，方便后期統(tǒng)一修改，養(yǎng)成良好的設(shè)計(jì)習(xí)慣。

2：做出段落層

這里我們就不能用一大段文字加段落間距來處理了，需要把每段規(guī)則單獨(dú)建文本層。這里寬度我們先隨便拉伸固定到一個差不多的值，高度需要它的彈性特點(diǎn)，所以不要進(jìn)行拉伸。

3：段落間距固定

現(xiàn)在我們有了第一條暫時還沒有內(nèi)容的規(guī)則，序號symbol和右側(cè)文本進(jìn)行編組。接下來復(fù)制四個，然后利用Kitchen設(shè)置好每行的間距，這里我設(shè)置了20。

同時我們現(xiàn)在再看下目前的圖層狀況。

4：在Kitchen增加規(guī)則文本

接下來我們要在Kitchen的數(shù)據(jù)填充功能中，添加活動規(guī)則的全部5條文本內(nèi)容。需要注意兩點(diǎn)：一是不要帶序號，二是每段之間換行即可，不要空行。實(shí)際操作中，我們可以讓需求方提供遵守上述規(guī)則的文本txt文件，直接復(fù)制粘貼。同時要勾選保持順序，否則每段會隨機(jī)排列。

5：規(guī)則文案填充

最后一步，選中五個段落層，點(diǎn)擊剛才在Kitchen創(chuàng)建的規(guī)則文本，即可實(shí)現(xiàn)快速文案填充，而且每段的高度雖不固定，但是間距卻能在Kitchen自動排版功能下一直保持在我們設(shè)置的20。

6：數(shù)字序號填充

基本搞定，剩下的就是數(shù)字序號。當(dāng)然了，我們可以一個個修改，但是如果有很多項(xiàng)，改起來就特別費(fèi)勁，所以可以利用剛才的文案填充來實(shí)現(xiàn)。

同樣的方法，建立數(shù)字序號填充文本1、2、3、4、5……每個數(shù)字換行。這里需要注意的是，對于順序數(shù)字來說，我們在設(shè)計(jì)的時候經(jīng)常會用到，頻率非常高。所以設(shè)計(jì)師很有必要建立一個順序數(shù)字文本源。這里給大家提供1-200的數(shù)字源，實(shí)際工作中已足夠使用，點(diǎn)擊下載。

鏈接:https://pan.baidu.com/s/1DvSS6bwHzU-aV79KweLYjA

提取碼: 3jfv

對于選擇，目前有5個序號，如果是幾十個，選擇操作會很麻煩，需要一個個點(diǎn)選。這里再提供一個插件叫做Select Similar Layers，可以根據(jù)名稱、樣式、描邊等屬性進(jìn)行同時選擇。由于數(shù)字序號開始就被我們做成了symbol，因此它們具有相同的name屬性，而且symbol中的text由于被嵌套了一層，所以同一層級上是無法被Kitchen文本填充識別的，不會被影響。

先選中第一個序號，然后按Select Similar Layers的快捷鍵control+alt+7（其他常用屬性都有對應(yīng)快捷鍵），就可以選擇相同名稱的圖層。接下來用Kitchen填充順序數(shù)字編號。

當(dāng)然了，我們也可以利用Sketch的Filter圖層過濾功能來進(jìn)行同類篩選。選擇symbol，會篩選當(dāng)前頁所有symbol元素，接下來還可以利用文字名稱再次進(jìn)行二次篩選，之后按shift鍵進(jìn)行全選即可。

Sketch的Filter功能還是挺實(shí)用的，一共內(nèi)置了形狀、文本、圖片、組、切片、原型和symbol七種類型，好好利用會帶來很多效率提升。

一些注意點(diǎn)

到此為止，我們已經(jīng)建立好能全局控制的活動規(guī)則頁面。

如果后面需求方說規(guī)則1下面需要加一張圖片，很簡單，直接放入圖片，每條之間的間距會自動排列。

如果第1條的文案變化了，高度也相繼改變，那么下面的元素也會自動補(bǔ)充，始終保持固定的間距。

如果我們是先加好圖片在進(jìn)行文案填充也是可以的，Kitchen的數(shù)據(jù)填充會忽略掉圖片和同一層級的symbol。

還有一點(diǎn)，如果圖層是6個，只有5段文案，那么全部填充后，第6條會填充第一段的文案，多余的我們最后刪掉即可，不用擔(dān)心發(fā)生混亂。

最后我們再看下利用Sketch強(qiáng)大的Resizing功能，實(shí)現(xiàn)彈性寬度的圖文段落自動排列。序號symbol寬高固定，位置左固定；圖片寬高固定，位置左固定；段落只需要位置左固定即可。

總結(jié)

我一直認(rèn)為，一名合格的UI設(shè)計(jì)師應(yīng)該成為公司（或項(xiàng)目）中設(shè)計(jì)問題解決方案提供者。面對各種問題，除了自身的能力和經(jīng)驗(yàn)外，還應(yīng)該充分了解和利用眾多工具的特點(diǎn)來解決相應(yīng)問題，提高設(shè)計(jì)效率，避免無用的工作量。

比如本文的活動規(guī)則排版解決方案，如果面對的是十幾條甚至幾十條就會凸顯出巨大優(yōu)勢。其實(shí)Sketch本身也有數(shù)據(jù)源文本填充功能，但是只能隨機(jī)填充，無法按照順序，所以Kitchen插件還是給我們提供了一個比較不錯的解決方案的。

希望這篇文章能給各位設(shè)計(jì)師帶來一些其他方面的啟發(fā)和實(shí)際應(yīng)用。

END