對于網頁和APP而言，良好的排版不僅僅是擺上漂亮的字體就可以搞定的，高度的可讀性和可識別性并不是簡單的要求，視覺設計和內容風格也應當做好一致性。

雖然這些要求看起來和“高大上”的需求一樣空泛，但是找準方向稍加訓練，并不難做到。

所以，今天的文章我們將為你奉上10條可以幫你提升用戶體驗的排版規則，每條規則都附上實際案例助你理解和運用。

可讀性原則

網頁必須使用非襯線體字體這種想法已經過時了，但是這種說法背后的核心思想并不過時：文本必須是易于閱讀的。

想要挑選易于閱讀的字體，手寫字體、哥特字體和過于新穎的字體應當盡量避免使用。當然，如果是需要藝術性字體來做裝飾的場景就另當別論了。

可讀性優秀的字體在可識別性上也不錯，并且他們通常不會特別的“顯眼”。這些字體應該是“透明”的，這樣可以讓用戶無障礙、下意識地接受，這就是他們的工作原理。

確保行間距足夠寬

行間距是影響用戶閱讀體驗的關鍵因素之一，太過致密會令人閱讀困難，有呼吸感的行間距則會令人著迷。尤其是如今大量用戶在手機和平板上閱讀，相對寬一點的行間距對于緩解閱讀大量內容有相當的緩解作用。

而要控制好行間距需要牽涉到好幾個變量：

·字體尺寸
·段落長度
·字體樣式
·屏幕寬度

而非常遺憾的一點在于，并不存在一個固定的換算公式可以幫你搞定這一切，不過可以這么做：

·對于絕大多數網站而言，最佳行間距應該是字體高度的125%
·對于絕大多數移動端設備而言，最佳行間距是字體高度的150%
·寬松的行間距（比如直接空一行作為行間距）能讓內容更易于被識別和掃描
·控制行間距的松緊，用雙眼來瀏覽段落進行測試，基于感覺來進行調整

選擇有字母含有大圓角的字體

對于西文字體，含有較大圓角和內空的字體更易于閱讀。明顯的圓角弧度讓B和R這樣的字體易于被識別，而內空則是O和Q這樣字母的標志。

緊湊和致密的字體讓眼睛難于辨識，而曾經在紙媒上流行過的較寬的標題字體，識別度就相當不錯，因為當字體拉寬之后，不同字母的差異就越發明顯。圓角弧度更大的字體看起來更接近于給孩子們設計的字體，而幼年時期對于字體所構建起的美學認知，是會伴隨人的一生的。

讓字體更大一點

毫無疑問，字體適當的放大會讓人感覺更舒服。當然，字體的大小通常取決于你的實際需求，而在處理大段文字的時候，就需要注意了。

雖然不同的設計師在文字的處理上有著不同的想法，但是通常大家會認為每行的字符數量應當控制在45~60個之間（中文也有一個約定俗成的數量），而在移動端上，這個數量通常需要減半看起來才足夠舒適。

找x高度較高的字體

和中文字體不同，西文字體有上伸區和下降區，小寫字母x的高度是這套字體的x高度。小寫字母的整體比例會直接影響到閱讀的體驗。

x高度相對比例更大的字體更易于閱讀，換句話來說，就是小寫字母的高度更接近大寫字母的高度。最理想的情況是，字體的x高度處于大寫字母高度的三分之二到四分之三之間。

顯示字體的字距調整

細致到位的字距調整能創造好的排版。

正文的內容如此之多，仔細調整所有的字母間的字距當然是不現實的，而且也沒有這個必要。但是對于標題字體和展示字體，字距的調整就相當有必要了。不同字母的筆畫角度都不盡相同，每對字母之間的距離進行適當調整，讓它們看起來像是天生一對那樣。這樣的細節能讓你的設計在諸多網站設計中脫穎而出。

其實中文和日文的字體排版中也同樣用到了字距調整的技巧，使用平假名和片假名尤其多的日本，在標題和展示字體的排版上經常會用到字距調整，來確保整體的視覺體驗。

仔細思考比例

當你在為一個項目挑選字體樣式的時候，將不同部分的尺寸比例想清楚對于后續的設計相當有幫助。可能聽起來好像有許多計算工作要做，但是并不一定麻煩，并且會對你的整個項目有極大的幫助。

我們之前所提到的行間距的設定，就是需要考慮的比例之一。除此之外，標題、副標題和正文的字體大小比例應當如何設定，怎么樣設定尺寸大小才能營造出視覺的和諧感。剛剛開始把控比例的時候可能還不是太跟手，但是Tut Plus 有一個不錯的教程，可以幫你理解這件事。

筆畫統一的字體最理想

再看字體筆畫樣式，筆畫的寬度無疑是最重要的事情。超細的筆畫由于缺乏對比度大多難于識別，而筆畫太過于粗壯的字體可能存在同樣的問題，閱讀起來也相當的費眼睛。如果字體的粗細部分對比過于強烈、過于突然也可能帶來一定的顯示問題。

其實解決方案也不難，挑選字母筆畫粗細適中，且筆畫相對比較一致的字體就好了。這類字體可以兼容更多的背景，在可讀性和適用性上相對更強。

克制地使用字體

只用兩種字體。再強調一次，只能用兩種字體。

控制字體類型的數量應該是每一個項目的目標。太多用戶喜歡在一個界面當中瘋狂地塞進各種不同類型的字體，這對于眼睛是災難性的，閱讀困難，甚至招致用戶厭倦。

你可以挑選兩個字體族作為常用字體——最多再挑選一款藝術字體用作展示之用——然后堅持使用這幾種字體。想清楚每個字體在什么時候使用，在什么地方使用，這其中應當涉及到字體的顏色、大小和位置。另外，在不同的頁面、不同設備上，字體的使用應該是一致的。

提升對比度

有許多時尚的網頁設計會讓背景和文字之間的對比度降低，營造出炫酷和融合的效果，但是內容的識別度就很低了，對于用戶而言并不友好。

你的內容是網站的核心之一，所以重要性是毋庸置疑的。將內容和背景之間的對比度提升起來，讓每個詞都能在屏幕上清晰的識別出來，讓用戶輕松地獲取信息。

網站所包含的文字內容越多，排版設計的重要性就越突出。排版結構舒適穩定、對比度明顯和諧、安全用色都是你必須做到的事情。

【技多不壓身的設計師才有高薪資！】

1. 平面設計：《超贊！設計師完全自學指南》
2. 交互設計：《交互設計師修煉指南！教你從零開始成為優秀交互設計師》
3. UI設計：《超實用新手指南！零基礎如何自學UI設計？》
4. 前端開發：《天貓高手來教你！零基礎如何系統地學習前端開發？》
5. 摳圖技巧：《從菜鳥到高手！PHOTOSHOP摳圖全方位攻略》
6. 配色方案：《色彩搭配速成！3個實用方法幫你全面搞定配色》
7. DPI指南：《基礎知識學起來！為設計師量身打造的DPI指南》
8. 交互設計自學路徑圖：《零基礎入門！給非科班生的自學路徑圖之交互設計篇》

原文地址：designshack
原文作者：Carrie Cousins
優設譯文：@陳子木

本文由優設網原創翻譯，請尊重版權和譯者成果，轉摘請附上優設鏈接，違者必究。謝謝各位編輯同仁配合。

【優設網 原創文章 投稿郵箱：2650232288@qq.com】

================關于優設網================
"優設網uisdc.com"是國內人氣最高的網頁設計師學習平臺，專注分享網頁設計、無線端設計以及PS教程。
【特色推薦】
設計師需要讀的100本書：史上最全的設計師圖書導航：http://hao.uisdc.com/book/。
設計微博：擁有粉絲量112萬的人氣微博@優秀網頁設計 ，歡迎關注獲取網頁設計資源、下載頂尖設計素材。
設計導航：全球頂尖設計網站推薦，設計師必備導航：http://hao.uisdc.com