UI Sketch技巧教程:學習怎么樣讓段落自動排版,文字排版教程。
不過,也有很多設計師為了界面展示目的,或在需求方的奇葩要求下,把文本嚴格按照需求提供的填充到界面中來。比如我們做一個簡單的活動規則手機頁面,總共有5個段落。
很簡單,直接復制粘貼,做一個文本圖層,調整好樣式即可。同時不要忘了右側的 Paragraph 屬性,讓每個段落產生間距。
遇到的問題
雖然這么做很快,但畢竟是一種討巧的方案,會出現下面幾個問題。
如果需求方后期要在中間加入圖片,我們只能通過原始的換行來給圖片騰出空間;
由于是一個文本圖層,如果出現標題等樣式,無法進行 text-style樣式控制;
數字序號和文本沒有區分,可讀性不強,影響用戶體驗。
對于第三個問題數字序號出現的影響閱讀,可以看下圖對比。PS和AI有對應的小技巧,就是段落的首行縮進,改成負值即可。技術上也有解決方案,比如前端 CSS 中的 text-indent屬性,也可以改成負值來實現。具體可以看這篇文章《神奇的負值縮進,文本段落的另類對齊方式》。
但是在 Sketch 中卻沒有對應的樣式,我們只能單獨把序號分離出來進行排列。總之上面的傳統方法無法滿足快速、方便、可修改的要求。如果是更多的條目,無疑會加大我們的設計成本。