對于大部分UI設(shè)計師來說紊服，每天的工作都充實且富有挑戰(zhàn)性檀轨。比如：界面設(shè)計、工具運用欺嗤、動效制作参萄、代碼切圖、前后端協(xié)作等等煎饼，但是偶爾也要面對一些非常費時間的設(shè)計需求讹挎。
尤其是大批量文字排版，看起來簡單吆玖，但是總會讓很多設(shè)計師頭疼筒溃。一般情況下，對于大批量的文字沾乘，我們都會用測試文本臨時代替怜奖，等技術(shù)開發(fā)的時候再直接文本錄入。定義好樣式翅阵，后期的文案變動和設(shè)計師基本無關(guān)歪玲。
不過，也有很多設(shè)計師為了界面展示目的掷匠，或在需求方的奇葩要求下滥崩，把文本嚴(yán)格按照需求提供的填充到界面中來。比如我們做一個簡單的活動規(guī)則手機頁面讹语，總共有5個段落夭委。
很簡單，直接復(fù)制粘貼募强，做一個文本圖層，調(diào)整好樣式即可崇摄。同時不要忘了右側(cè)的Paragraph屬性擎值，讓每個段落產(chǎn)生間距。
遇到的問題
雖然這么做很快逐抑，但畢竟是一種討巧的方案鸠儿，會出現(xiàn)下面幾個問題。
1：如果需求方后期要在中間加入圖片厕氨，我們只能通過原始的換行來給圖片騰出空間进每；
2：由于是一個文本圖層，如果出現(xiàn)標(biāo)題等樣式命斧，無法進(jìn)行text-style樣式控制田晚；
3：數(shù)字序號和文本沒有區(qū)分，可讀性不強国葬，影響用戶體驗贤徒。
對于第三個問題數(shù)字序號出現(xiàn)的影響閱讀芹壕，可以看下圖對比。PS和AI有對應(yīng)的小技巧接奈，就是段落的首行縮進(jìn)踢涌，改成負(fù)值即可。技術(shù)上也有解決方案序宦，比如前端CSS中的text-indent屬性睁壁，也可以改成負(fù)值來實現(xiàn)。具體可以看這篇文章《神奇的負(fù)值縮進(jìn)互捌，文本段落的另類對齊方式》潘明。
但是在Sketch中卻沒有對應(yīng)的樣式，我們只能單獨把序號分離出來進(jìn)行排列疫剃《ひ撸總之上面的傳統(tǒng)方法無法滿足快速、方便巢价、可修改的要求牲阁。如果是更多的條目，無疑會加大我們的設(shè)計成本壤躲。
解決方案
所以該拿出我們的殺手锏了：Kitchen插件城菊。
關(guān)于這個插件，UI黑客之前寫過一篇文章《你不知道的Sketch黑科技-智能排版》碉克，詳細(xì)介紹了Kitchen自動排版的用法凌唬。我們其實可以把這個功能擴(kuò)展利用在文本段落中，來解決上文出現(xiàn)的問題漏麦。還是拿這個活動規(guī)則為例客税，我們一起試試把它的樣式完全掌握在自己手中。
1：做出段落標(biāo)號
一般的標(biāo)號都是從數(shù)字1開始的撕贞，一直到N更耻。這里我們做個簡單的樣式，同時轉(zhuǎn)化為symbol捏膨，方便后期統(tǒng)一修改秧均，養(yǎng)成良好的設(shè)計習(xí)慣。
2：做出段落層
這里我們就不能用一大段文字加段落間距來處理了号涯，需要把每段規(guī)則單獨建文本層目胡。這里寬度我們先隨便拉伸固定到一個差不多的值，高度需要它的彈性特點链快，所以不要進(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)容。需要注意兩點：一是不要帶序號疼阔，二是每段之間換行即可戒劫，不要空行。實際操作中婆廊，我們可以讓需求方提供遵守上述規(guī)則的文本txt文件迅细，直接復(fù)制粘貼。同時要勾選保持順序淘邻，否則每段會隨機排列茵典。
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ù)字源刮刑，實際工作中已足夠使用喉祭，點擊下載养渴。
鏈接: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條的文案變化了勘畔，高度也相繼改變所灸，那么下面的元素也會自動補充，始終保持固定的間距炫七。
如果我們是先加好圖片在進(jìn)行文案填充也是可以的爬立，Kitchen的數(shù)據(jù)填充會忽略掉圖片和同一層級的symbol。
還有一點诉字，如果圖層是6個懦尝，只有5段文案，那么全部填充后壤圃，第6條會填充第一段的文案陵霉，多余的我們最后刪掉即可，不用擔(dān)心發(fā)生混亂伍绳。
最后我們再看下利用Sketch強大的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ù)源文本填充功能，但是只能隨機填充抵怎，無法按照順序奋救，所以Kitchen插件還是給我們提供了一個比較不錯的解決方案的。
希望這篇文章能給各位設(shè)計師帶來一些其他方面的啟發(fā)和實際應(yīng)用反惕。
END
