火星網(wǎng)校
字體排版需要掌握的10條原則
發(fā)布時間：2024-01-24 16:50:20 瀏覽量：235次
選擇合適的字體是排版開始的第一步。當然排版中除了改變字體大小，其實還有很多內容可以調節(jié)。
這里分享UI設計中字體排版需要掌握的技巧和標準原則～
01
行高/行間距
▼
首先介紹兩個容易混淆的概念——行高和行間距，兩者在中英文的用法也有差異。
中文行高：上一行文字的最底部與下一行文字的最底部之間的距離。
中文行間距：上一行文字的最底部與下一行文字的最頂部之間的距離(行與行之間的距離)。
基線是英文字體結構中的概念，英文的行高由基線決定。
英文行高:上一行的基線到下一行基線之間的距離(藍線標注)；
英文行間距:兩行字體之間的距離，即上一行的下限線與下一行的上限線之間的距離(橙線標注)。
02
字重/襯線
▼
字重(weight)是指字體的粗細程度。字重的粗細變化為我們在不同場景使用提供了更多選擇。
襯線體(serif)是指字形筆畫在首尾的裝飾和筆畫的粗細不同；無襯線體(sans-serif)沒有筆畫首尾的裝飾，筆畫粗細相同。
在同等字號下，無襯線字體看上去要比襯線更大，結構也更清晰，所以無襯線字體更適合在屏幕上使用。
03
層級結構
▼
絕大多數(shù)UI界面是由一些標準元素組成——文本、矩形/框、按鈕和圖標。
字體大小對比明顯的層級結構讓用戶更容易地找到重要信息，提升界面的可讀性。
04
最佳行長
▼
合適的行長能確保文本在不同的設備上都能易于閱讀。這里有行長的基本用法：
- 中文一個字占兩字符，英文一個字占一字符，行長在頁面中的最大長度不能超過110個字符；
- 當字體變小時，增大行高可以獲得更好的可讀性和易讀性。
05
限制字體數(shù)量
▼
混合太多不同的字體會讓界面設計變得混亂。
選擇字體時盡量使用帶有多種字重的同一款字體，通過靈活調節(jié)字重達到界面統(tǒng)一的效果。
06
定義字體比例
▼
頁面中不同的位置(標題、正文、備注)要使用不同比例的字體，從而產生連貫的排版體驗。
07
使用可識別的提示
▼
通過上面的原則可以提升界面的可讀性和美觀性。但是如何提高界面中信息的可理解性呢？只有真正把設計與信息結合在一起，才能使傳達的效率最優(yōu)化：
- 避免使用專業(yè)術語。除非是為特定人群設計產品，否則應避免使用行業(yè)術語。
- 保持提示簡潔明了。例如在訪問網(wǎng)站時，將“只有會員才可以訪問此功能”修改成“加入會員即可訪問”，這樣的提示更能切中要點。
08
強調重要信息
▼
使用顏色和視覺權重來強調重要信息，用較淺的文本來展示次要信息。這樣能將更多的注意力集中到更具活力的文本上，幫助用戶快速做出選擇。
09
考慮語言支持
▼
同一個詞語的拼寫長度會隨著語言的不同而變化，所以要有足夠的空間來容納字符。
10
系統(tǒng)字體
▼
如果在字體選擇上出現(xiàn)困難，可以考慮使用iOS和Android原生的系統(tǒng)字體。它們支持豐富的字重、尺寸和樣式，利用這些字體也能打造舒適的閱讀體驗。
最后分享兩個實用的字體網(wǎng)站：
Google Fonts：在線調試、預覽各種字體
Type Wolf：最新的字體流行趨勢
福利互動
答謝客官閱讀完此文后的支持
準備新人平面設計學習大禮包贈送領取
獲取方式：私信“領取”2字即可~
熱門課程推薦
熱門資訊
-
1. iPhone6的UI設計尺寸規(guī)范，原來如此重要！
想要了解iPhone6界面設計的尺寸規(guī)范嗎？這里為您詳細介紹iPhone6的UI設計尺寸規(guī)范，包括界面尺寸、圖標尺寸、可點擊高度規(guī)范、搜索欄高度規(guī)范以及界面元素之間的距離規(guī)范。
-
2. 12個絕佳的UI設計網(wǎng)站，助力你的創(chuàng)作之旅!
將為大家介紹12個絕佳的UI設計網(wǎng)站,這些網(wǎng)站不僅可以為你提供靈感,還可以幫助你學習新的技巧,助力你的創(chuàng)意之旅!dribbbleDribbble 是一個面向設計師的...
-
3. 移動端UI設計中常見的5種APP界面類型，你get到了嗎？
通過介紹移動端UI設計中的閃屏頁、引導頁、浮層引導頁、空白頁和首頁等5種APP界面類型，幫助大家更好地了解UI設計的基本知識
-
4. 10個免費學習UI設計的網(wǎng)站 提升你的設計能力
怎樣可以提升你的UI設計能力!第一個:站酷站酷想必是設計師都知道的一個網(wǎng)站,里面不止有UI設計的資源,還有其他設計的,不如:平面設計、網(wǎng)頁設計、字體...
-
在移動端設計中,列表頁和表單頁是不可或缺的部分。一個好的列表頁和表單頁設計能夠讓用戶輕松地獲取信息并產生點擊欲望,從而提高點擊率。本文將為你...
-
對于想要提高自己的設計能力和創(chuàng)造力的小白和UI設計師來說,這本書是一個很好的選擇。4.《設計的覺醒》(IKKO TANAKA)推薦理由: 這本書是日本現(xiàn)代平面...
-
探索零基礎UI設計培訓的時長與薪資前景。了解數(shù)字藝術教育領域的專業(yè)課程，以及培訓后的職業(yè)發(fā)展機會。
-
8. 物聯(lián)網(wǎng)APP UI設計:創(chuàng)造智能硬件領域的沉浸式體驗
ui設計應該讓用戶一目了然,能夠快速找到所需的信息和功能。在設計過程中,應盡量使用簡潔的圖標、文字和色彩,避免過多的視覺干擾。符合用戶習慣:ui設...
-
想了解武漢UI設計培訓班的費用是多少嗎？不知道學UI設計要花多少錢？不妨看看這篇文章，了解UI設計培訓班的學費價格以及學習內容。
-
10. 設計中的色彩心理學:淺析中西方色彩的歷史演變與設計應用
摘要:本文探討了色彩的歷史演變和設計應用。通過對色彩在早期文明社會中的實用運用、不同文化背景下色彩觀念的差異、色彩在設計中的重要性以及新興技...
