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

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

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

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

遇到的問題

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

• 如果需求方后期要在中間加入圖片，我們只能通過原始的換行來給圖片騰出空間；
• 由于是一個(gè)文本圖層，如果出現(xiàn)標(biāo)題等樣式，無法進(jìn)行 text-style樣式控制；
• 數(shù)字序號(hào)和文本沒有區(qū)分，可讀性不強(qiáng)，影響用戶體驗(yàn)。

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

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

解決方案

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

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

? 1. 做出段落標(biāo)號(hào)

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

? 2. 做出段落層

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

? 3. 段落間距固定

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

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

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

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

? 5. 規(guī)則文案填充

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

? 6. 數(shù)字序號(hào)填充

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

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

數(shù)字源鏈接：https://pan.baidu.com/s/1DvSS6bwHzU-aV79KweLYjA

提取碼：3jfv

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

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

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

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

一些注意點(diǎn)

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

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

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

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

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

最后我們?cè)倏聪吕?Sketch 強(qiáng)大的 Resizing 功能，實(shí)現(xiàn)彈性寬度的圖文段落自動(dòng)排列。序號(hào)symbol 寬高固定，位置左固定；圖片寬高固定，位置左固定；段落只需要位置左固定即可。

總結(jié)

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

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

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

歡迎關(guān)注作者的微信公眾號(hào)：「UI黑客」