選擇合適的字型是排版開始的第一步。當然排版中除了改變字型大小,其實還有很多內容可以調節。
這裡分享UI設計中字型排版需要掌握的技巧和標準原則~
01行高/行間距
首先介紹兩個容易混淆的概念—— 行高和行間距,兩者在中英文的用法也有差異。
中文行高:上一行文字的最底部與下一行文字的最底部之間的距離。
中文行間距:上一行文字的最底部與下一行文字的最頂部之間的距離(行與行之間的距離)。
基線是英文字型結構中的概念,英文的行高由基線決定。
英文行高:上一行的基線到下一行基線之間的距離(藍線標註);
英文行間距:兩行字型之間的距離,即上一行的下限線與下一行的上限線之間的距離(橙線標註)。
02字重/襯線
字重(weight)是指字型的粗細程度。字重的粗細變化為我們在不同場景使用提供了更多選擇。
襯線體(serif)是指字形筆畫在首尾的裝飾和筆畫的粗細不同; 無襯線體(sans-serif)沒有筆畫首尾的裝飾,筆畫粗細相同。
在同等字號下,無襯線字型看上去要比襯線更大,結構也更清晰,所以無襯線字型更適合在螢幕上使用。
03層級結構
絕大多數UI介面是由一些標準元素組成—— 文字、矩形/框、按鈕和圖示。
字型大小對比明顯的層級結構讓使用者更容易地找到重要資訊,提升介面的可讀性。
04最佳行長
合適的行長能確保文字在不同的裝置上都能易於閱讀。
當字型變小時,增大行高可以獲得更好的可讀性和易讀性。
05限制字型數量
混合太多不同的字型會讓介面設計變得混亂。選擇字型時儘量使用帶有多種字重的同一款字型,透過靈活調節字重達到介面統一的效果。
06定義字型比例
頁面中不同的位置(標題、正文、備註)要使用不同比例的字型,從而產生連貫的排版體驗。
07 使用可識別的提示
透過上面的原則可以提升介面的可讀性和美觀性。但是如何提高介面中資訊的可理解性呢?
只有真正把設計與資訊結合在一起,才能使傳達的效率最最佳化:
避免使用專業術語。除非是為特定人群設計產品,否則應避免使用行業術語。
08強調重要資訊
使用 顏色和 視覺權重來強調重要資訊,用較淺的文字來展示次要資訊。這樣能將更多的注意力集中到更具活力的文字上,幫助使用者快速做出選擇。
09考慮語言支援
同一個詞語的拼寫長度會隨著語言的不同而變化,所以要有足夠的空間來容納字元。
10系統字型
如果在字型選擇上出現困難,可以考慮使用iOS和Android原生的系統字型。它們支援豐富的字重、尺寸和樣式,利用這些字型也能打造舒適的閱讀體驗。
最後分享兩個實用的字型網站:
文章來源:Clip設計夾(ID:ClipppDesign)
作者:Clip
原文連結:
https://mp.weixin.qq.com/s/MSWfWwb6IGaNY40GnlkU5g
點這裡,解鎖更多精彩內容