對于大部分UI設計師來說,每天的工作都充實且富有挑戰性。比如:界面設計、工具運用、動效制作、代碼切圖、前后端協作等等,但是偶爾也要面對一些非常費時間的設計需求。
尤其是大批量文字排版,看起來簡單,但是總會讓很多設計師頭疼。一般情況下,對于大批量的文字,我們都會用測試文本臨時代替,等技術開發的時候再直接文本錄入。定義好樣式,后期的文案變動和設計師基本無關。
不過,也有很多設計師為了界面展示目的,或在需求方的奇葩要求下,把文本嚴格按照需求提供的填充到界面中來。比如我們做一個簡單的活動規則手機頁面,總共有5個段落。
很簡單,直接復制粘貼,做一個文本圖層,調整好樣式即可。同時不要忘了右側的 Paragraph 屬性,讓每個段落產生間距。
雖然這么做很快,但畢竟是一種討巧的方案,會出現下面幾個問題。
- 如果需求方后期要在中間加入圖片,我們只能通過原始的換行來給圖片騰出空間;
- 由于是一個文本圖層,如果出現標題等樣式,無法進行 text-style樣式控制;
- 數字序號和文本沒有區分,可讀性不強,影響用戶體驗。
對于第三個問題數字序號出現的影響閱讀,可以看下圖對比。PS和AI有對應的小技巧,就是段落的首行縮進,改成負值即可。技術上也有解決方案,比如前端 CSS 中的 text-indent屬性,也可以改成負值來實現。具體可以看這篇文章《神奇的負值縮進,文本段落的另類對齊方式》。
但是在 Sketch 中卻沒有對應的樣式,我們只能單獨把序號分離出來進行排列。總之上面的傳統方法無法滿足快速、方便、可修改的要求。如果是更多的條目,無疑會加大我們的設計成本。
所以該拿出我們的殺手锏了——Kitchen插件。
關于這個插件,之前寫過一篇文章《用這個 Sketch 的黑科技,讓你快速掌握智能排版!》,詳細介紹了Kitchen自動排版的用法。我們其實可以把這個功能擴展利用在文本段落中,來解決上文出現的問題。還是拿這個活動規則為例,我們一起試試把它的樣式完全掌握在自己手中。
一般的標號都是從數字1開始的,一直到N。這里我們做個簡單的樣式,同時轉化為 symbol,方便后期統一修改,養成良好的設計習慣。
這里我們就不能用一大段文字加段落間距來處理了,需要把每段規則單獨建文本層。這里寬度我們先隨便拉伸固定到一個差不多的值,高度需要它的彈性特點,所以不要進行拉伸。
現在我們有了第一條暫時還沒有內容的規則,序號 symbol 和右側文本進行編組。接下來復制四個,然后利用 Kitchen 設置好每行的間距,這里我設置了20。
同時我們現在再看下目前的圖層狀況。
接下來我們要在 Kitchen 的數據填充功能中,添加活動規則的全部5條文本內容。需要注意兩點:一是不要帶序號,二是每段之間換行即可,不要空行。實際操作中,我們可以讓需求方提供遵守上述規則的文本txt文件,直接復制粘貼。同時要勾選保持順序,否則每段會隨機排列。
最后一步,選中五個段落層,點擊剛才在 Kitchen 創建的規則文本,即可實現快速文案填充,而且每段的高度雖不固定,但是間距卻能在 Kitchen 自動排版功能下一直保持在我們設置的20。
基本搞定,剩下的就是數字序號。當然了,我們可以一個個修改,但是如果有很多項,改起來就特別費勁,所以可以利用剛才的文案填充來實現。
同樣的方法,建立數字序號填充文本1、2、3、4、5……每個數字換行。這里需要注意的是,對于順序數字來說,我們在設計的時候經常會用到,頻率非常高。所以設計師很有必要建立一個順序數字文本源。這里給大家提供1-200的數字源,實際工作中已足夠使用,點擊下載。
數字源鏈接:https://pan.baidu.com/s/1DvSS6bwHzU-aV79KweLYjA
提取碼:3jfv
對于選擇,目前有5個序號,如果是幾十個,選擇操作會很麻煩,需要一個個點選。這里再提供一個插件,叫做 Select Similar Layers,可以根據名稱、樣式、描邊等屬性進行同時選擇。由于數字序號開始就被我們做成了 symbol,因此它們具有相同的 name屬性,而且 symbol 中的 text 由于被嵌套了一層,所以同一層級上是無法被 Kitchen 文本填充識別的,不會被影響。
先選中第一個序號,然后按 Select Similar Layers 的快捷鍵 control+alt+7(其他常用屬性都有對應快捷鍵),就可以選擇相同名稱的圖層。接下來用 Kitchen 填充順序數字編號。
當然了,我們也可以利用 Sketch 的 Filter 圖層過濾功能來進行同類篩選。選擇 symbol,會篩選當前頁所有 symbol 元素,接下來還可以利用文字名稱再次進行二次篩選,之后按 shift鍵進行全選即可。
Sketch 的 Filter 功能還是挺實用的,一共內置了形狀、文本、圖片、組、切片、原型和symbol七種類型,好好利用會帶來很多效率提升。
到此為止,我們已經建立好能全局控制的活動規則頁面。
如果后面需求方說規則1下面需要加一張圖片,很簡單,直接放入圖片,每條之間的間距會自動排列。
如果第1條的文案變化了,高度也相繼改變,那么下面的元素也會自動補充,始終保持固定的間距。
如果我們是先加好圖片再進行文案填充也是可以的,Kitchen 的數據填充會忽略掉圖片和同一層級的 symbol。
還有一點,如果圖層是6個,只有5段文案,那么全部填充后,第6條會填充第一段的文案,多余的我們最后刪掉即可,不用擔心發生混亂。
最后我們再看下利用 Sketch 強大的 Resizing 功能,實現彈性寬度的圖文段落自動排列。序號symbol 寬高固定,位置左固定;圖片寬高固定,位置左固定;段落只需要位置左固定即可。
我一直認為,一名合格的UI設計師應該成為公司(或項目)中設計問題解決方案提供者。面對各種問題,除了自身的能力和經驗外,還應該充分了解和利用眾多工具的特點來解決相應問題,提高設計效率,避免無用的工作量。
比如本文的活動規則排版解決方案,如果面對的是十幾條甚至幾十條就會凸顯出巨大優勢。其實 Sketch 本身也有數據源文本填充功能,但是只能隨機填充,無法按照順序,所以 Kitchen 插件還是給我們提供了一個比較不錯的解決方案的。
希望這篇文章能給各位設計師帶來一些其他方面的啟發和實際應用。
歡迎關注作者的微信公眾號:「UI黑客」
復制本文鏈接 文章為作者獨立觀點不代表優設網立場,未經允許不得轉載。
發評論!每天贏獎品
點擊 登錄 后,在評論區留言,系統會隨機派送獎品
2012年成立至今,是國內備受歡迎的設計師平臺,提供獎品贊助 聯系我們
AI輔助海報設計101例
已累計誕生 737 位幸運星
發表評論 為下方 11 條評論點贊,解鎖好運彩蛋
↓ 下方為您推薦了一些精彩有趣的文章熱評 ↓