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

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

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

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

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

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

提取碼：3jfv

對于選擇，目前有5個序號，如果是幾十個，選擇操作會很麻煩，需要一個個點選。這里再提供一個插件，叫做 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 功能還是挺實用的，一共內(nèi)置了形狀、文本、圖片、組、切片、原型和symbol七種類型，好好利用會帶來很多效率提升。

一些注意點

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

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

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

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

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

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

總結(jié)

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

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

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

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