字體排版需要掌握的10條原則!

選擇合適的字體是排版開始的第一步。當然排版中除了改變字體大小,其實還有很多內容可以調節。

這裏分享UI設計中字體排版需要掌握的技巧和標準原則~

01行高/行間距

首先介紹兩個容易混淆的概念—— 行高和行間距,兩者在中英文的用法也有差異。

字體排版需要掌握的10條原則!

中文行高:上一行文字的最底部與下一行文字的最底部之間的距離。

中文行間距:上一行文字的最底部與下一行文字的最頂部之間的距離(行與行之間的距離)。

基線是英文字體結構中的概念,英文的行高由基線決定。

字體排版需要掌握的10條原則!

英文行高:上一行的基線到下一行基線之間的距離(藍線標註);

英文行間距:兩行字體之間的距離,即上一行的下限線與下一行的上限線之間的距離(橙線標註)。

02字重/襯線

字體排版需要掌握的10條原則!

字重(weight)是指字體的粗細程度。字重的粗細變化為我們在不同場景使用提供了更多選擇。

襯線體(serif)是指字形筆畫在首尾的裝飾和筆畫的粗細不同; 無襯線體(sans-serif)沒有筆畫首尾的裝飾,筆畫粗細相同。

在同等字號下,無襯線字體看上去要比襯線更大,結構也更清晰,所以無襯線字體更適合在屏幕上使用。

03層級結構

絕大多數UI界面是由一些標準元素組成—— 文本、矩形/框、按鈕和圖標。

字體排版需要掌握的10條原則!

字體大小對比明顯的層級結構讓用户更容易地找到重要信息,提升界面的可讀性。

04最佳行長

合適的行長能確保文本在不同的設備上都能易於閲讀。

當字體變小時,增大行高可以獲得更好的可讀性和易讀性。

05限制字體數量

字體排版需要掌握的10條原則!

混合太多不同的字體會讓界面設計變得混亂。選擇字體時儘量使用帶有多種字重的同一款字體,通過靈活調節字重達到界面統一的效果。

06定義字體比例

字體排版需要掌握的10條原則!

頁面中不同的位置(標題、正文、備註)要使用不同比例的字體,從而產生連貫的排版體驗。

07 使用可識別的提示

字體排版需要掌握的10條原則!

通過上面的原則可以提升界面的可讀性和美觀性。但是如何提高界面中信息的可理解性呢?

只有真正把設計與信息結合在一起,才能使傳達的效率最優化:

避免使用專業術語。除非是為特定人羣設計產品,否則應避免使用行業術語。

08強調重要信息

字體排版需要掌握的10條原則!

使用 顏色視覺權重來強調重要信息,用較淺的文本來展示次要信息。這樣能將更多的注意力集中到更具活力的文本上,幫助用户快速做出選擇。

09考慮語言支持

字體排版需要掌握的10條原則!

同一個詞語的拼寫長度會隨着語言的不同而變化,所以要有足夠的空間來容納字符。

10系統字體

字體排版需要掌握的10條原則!

如果在字體選擇上出現困難,可以考慮使用iOS和Android原生的系統字體。它們支持豐富的字重、尺寸和樣式,利用這些字體也能打造舒適的閲讀體驗。

最後分享兩個實用的字體網站:

字體排版需要掌握的10條原則!

字體排版需要掌握的10條原則!

文章來源:Clip設計夾(ID:ClipppDesign)

作者:Clip

原文鏈接:

https://mp.weixin.qq.com/s/MSWfWwb6IGaNY40GnlkU5g

點這裏,解鎖更多精彩內容

版權聲明:本文源自 網絡, 於,由 楠木軒 整理發佈,共 1131 字。

轉載請註明: 字體排版需要掌握的10條原則! - 楠木軒