選擇合適的字體是排版開始的第一步。當然排版中除了改變字體大小,其實還有很多內容可以調節。下麵跟大家分享UI設計中字體排版需要掌握的10條小技巧,一起來看下吧!
1、行高/行間距
首先介紹兩個容易混淆的概念——行高和行間距,兩者在中英文的用法也有差異。

中文行高:上一行文字的最底部與下一行文字的最底部之間的距離。
中文行間距:上一行文字的最底部與下一行文字的最頂部之間的距離(行與行之間的距離)。
基線是英文字體結構中的概念,英文的行高由基線決定。

英文行高:上一行的基線到下一行基線之間的距離(藍線標注);
英文行間距:兩行字體之間的距離,即上一行的下限線與下一行的上限線之間的距離(橙線標注)。
2、字重/襯線

字重(weight)是指字體的粗細程度。字重的粗細變化為我們在不同場景使用提供了更多選擇。
襯線體(serif)是指字形筆畫在首尾的裝飾和筆畫的粗細不同;無襯線體(sans-serif)沒有筆畫首尾的裝飾,筆畫粗細相同。
在同等字號下,無襯線字體看上去要比襯線更大,結構也更清晰,所以無襯線字體更適合在屏幕上使用。
3、層級結構
絕大多數UI界麵是由一些標準元素組成——文本、矩形/框、按鈕和圖標。

字體大小對比明顯的層級結構讓用戶更容易地找到重要信息,提升界麵的可讀性。
4、最佳行長
合適的行長能確保文本在不同的設備上都能易於閱讀。
這裏有行長的基本用法:
中文一個字占兩字符,英文一個字占一字符,行長在頁麵中的最大長度不能超過110個字符;
當字體變小時,增大行高可以獲得更好的可讀性和易讀性。
5、限製字體數量

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

頁麵中不同的位置(標題、正文、備注)要使用不同比例的字體,從而產生連貫的排版體驗。
7、使用可識別的提示

通過上麵的原則可以提升界麵的可讀性和美觀性。但是如何提高界麵中信息的可理解性呢?
隻有真正把設計與信息結合在一起,才能使傳達的效率最優化:
避免使用專業術語。除非是為特定人群設計產品,否則應避免使用行業術語。
保持提示簡潔明了。例如在訪問網站時,將“隻有會員才可以訪問此功能”修改成“加入會員即可訪問”,這樣的提示更能切中要點。
8、強調重要信息

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

同一個詞語的拚寫長度會隨著語言的不同而變化,所以要有足夠的空間來容納字符。
10、係統字體

如果在字體選擇上出現困難,可以考慮使用iOS和Android原生的係統字體。它們支持豐富的字重、尺寸和樣式,利用這些字體也能打造舒適的閱讀體驗。
原文地址:Clip設計夾(公眾號)
作者:Clip
上一篇 禁用按鈕應該怎麼用?
下一篇 B端產品按鈕設計技巧
熱門課程
專業講師指導 快速擺脫技能困惑相關文章
多種教程 總有一個適合自己專業問題谘詢
你擔心的問題,火星幫你解答為給新片造勢,迪士尼這次豁出去了,拿出壓箱底的一眾經典IP,開啟了夢幻聯動朱迪和尼克奉命潛入偏遠地帶臥底調查 截至11月24日......
此前Q2問答環節,鄒濤曾將《解限機》首發失利歸結於“商業化保守”和“灰產猖獗”,導致預想設計與實際遊玩效果偏差大,且表示該遊戲......
2025 Google Play年度遊戲頒獎:洞察移動遊戲新趨勢
玩家無需四處收集實體卡,輕點屏幕就能開啟驚喜開包之旅,享受收集與對戰樂趣庫洛遊戲的《鳴潮》斬獲“最佳持續運營遊戲”大獎,這不僅......
說明:文中所有的配圖均來源於網絡 在人們的常規認知裏,遊戲引擎領域的兩大巨頭似乎更傾向於在各自賽道上激烈競爭,然而,隻要時間足......
在行政服務優化層麵,辦法提出壓縮國產網絡遊戲審核周期,在朝陽、海澱等重點區將審批納入綜合窗口;完善版權服務機製,將遊戲素材著作......
未畢業先就業、組團入職、紮堆拿offer...這種好事,再多來一打!
眾所周知,火星有完善的就業推薦服務圖為火星校園招聘會現場對火星同學們來說,金三銀四、金九銀十並不是找工作的唯一良機火星時代教育......
同學您好!