對于大部分UI設計師來說，每天的工作都充實且富有挑戰性。比如：界面設計、工具運用、動效制作、代碼切圖、前后端協作等等，但是偶爾也要面對一些非常費時間的設計需求。

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

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

很簡單，直接復制粘貼，做一個文本圖層，調整好樣式即可。同時不要忘了右側的 Paragraph 屬性，讓每個段落產生間距。

遇到的問題

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

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

由于是一個文本圖層，如果出現標題等樣式，無法進行 text-style樣式控制;

數字序號和文本沒有區分，可讀性不強，影響用戶體驗。

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

但是在 Sketch 中卻沒有對應的樣式，我們只能單獨把序號分離出來進行排列。總之上面的傳統方法無法滿足快速、方便、可修改的要求。如果是更多的條目，無疑會加大我們的設計成本。

解決方案

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

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

  1. 做出段落標號

一般的標號都是從數字1開始的，一直到N。這里我們做個簡單的樣式，同時轉化為 symbol，方便后期統一修改，養成良好的設計習慣。

  2. 做出段落層

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

  3. 段落間距固定

現在我們有了第一條暫時還沒有內容的規則，序號 symbol 和右側文本進行編組。接下來復制四個，然后利用 Kitchen 設置好每行的間距，這里我設置了20。

同時我們現在再看下目前的圖層狀況。

  4. 在Kitchen增加規則文本

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