@短腿僵尸木：網(wǎng)絡(luò)上95％以上的信息是書(shū)面形式的。優(yōu)化排版則是優(yōu)化可讀性，可訪問(wèn)性，可用性，整體圖形平衡。換句話說(shuō)：優(yōu)化排版也是優(yōu)化用戶(hù)界面。本文將提供一組規(guī)則，幫助您提高文本內(nèi)容的可讀性和易讀性。

1. 最少使用字體數(shù)量

使用超過(guò)3種不同的字體使網(wǎng)站看起來(lái)非結(jié)構(gòu)化和不專(zhuān)業(yè)，太多的類(lèi)型尺寸和樣式一次也可能破壞任何布局。

?

一般來(lái)說(shuō)，整個(gè)網(wǎng)站字體的數(shù)量限制在最多兩種，一種一般就足夠了。如果您使用多個(gè)字體，請(qǐng)確保字體系基于字符寬度互補(bǔ)。如圖：左邊組的字體相對(duì)就比較和諧，而右邊字體的粗細(xì)對(duì)比太明顯，則顯得輕重比例很不和諧了。

?

2. 嘗試使用標(biāo)準(zhǔn)字體

字體嵌入服務(wù)（如Google Web字體或Typekit）有許多有趣而標(biāo)準(zhǔn)的系統(tǒng)字體，而因?yàn)橛脩?hù)更加熟悉標(biāo)準(zhǔn)字體，所以可以更快地讀取它們。

除非您的網(wǎng)站對(duì)于自定義字體（如品牌宣傳或創(chuàng)建身臨其境的體驗(yàn)）非常有吸引力，否則通常最好使用系統(tǒng)字體。

3. 限制線長(zhǎng)度

如果你想要一個(gè)良好的閱讀體驗(yàn)，你應(yīng)該每行約60個(gè)字符。在每行上擁有適當(dāng)?shù)淖址麛?shù)量是您的文本可讀性的關(guān)鍵。如果每行文字太短，視線必須反復(fù)折回來(lái)，打破讀者的節(jié)奏。如果一行文字太長(zhǎng)，用戶(hù)的眼睛將很難專(zhuān)注于文本。

?

對(duì)于移動(dòng)設(shè)備，您應(yīng)該每行30-40個(gè)字符 。以下是在移動(dòng)設(shè)備上查看的兩個(gè)網(wǎng)站的示例。第一個(gè)使用每行50-75個(gè)字符（打印和桌面的每行最佳字符數(shù)），而第二個(gè)使用最佳30-40個(gè)字符。

?

4. 選擇各種尺寸的字體

確保您選擇的字體在較小的屏幕上清晰可辨！

?

維瓦爾第字體將難以在小屏幕上閱讀：

?5. 使用可區(qū)分字母的字體

許多字體使得很容易混淆類(lèi)似的字母，特別是與“i”和“L”（如下圖所示），所以當(dāng)選擇你的字體類(lèi)型時(shí)，請(qǐng)確保在不同的上下文中檢查你的類(lèi)型，以確保不會(huì)為你的用戶(hù)造成問(wèn)題。

?

6. 避免英文全部大寫(xiě)

請(qǐng)勿強(qiáng)制用戶(hù)閱讀所有大寫(xiě)字母，與小寫(xiě)類(lèi)型相比，那只會(huì)大大延緩了用戶(hù)掃描和閱讀的速度，讓他們分分鐘爆炸。

?

7. 不要最小化線間距

行間距一般是字符高度的30%，以便良好的可讀性。

?

而段落之間的間距可以比行間距提高20%，留白可以為用戶(hù)提供消化內(nèi)容的時(shí)間。下圖左：幾乎重疊的文字。右：良好的間距有助于可讀性。

?8. 確保您有足夠的顏色對(duì)比度

不要對(duì)文本和背景使用相同或相似的顏色。文本越明顯，用戶(hù)能夠掃描和閱讀的速度越快。

△ 這些文本行不符合顏色對(duì)比度建議，難以根據(jù)背景顏色進(jìn)行閱讀

?

△ 這些文本行符合顏色對(duì)比度建議，并且易于閱讀背景顏色

?9. 避免將文字著色為紅色或綠色

建議使用除顏色以外的其他線索來(lái)區(qū)分重要信息。也避免單獨(dú)使用紅色和綠色來(lái)傳達(dá)信息，避免有色盲用戶(hù)無(wú)法順利閱讀的情況。

?10. 避免使用閃爍的文字

閃爍或閃爍的內(nèi)容可能會(huì)使一些敏感人群發(fā)瘋，并且對(duì)于一般使用者來(lái)說(shuō)，這可能是令人討厭或分心的。

結(jié)論

使排版具有可讀性，可理解性、清晰明了至關(guān)重要。至關(guān)重要。好的排版可以讓您的網(wǎng)站感覺(jué)清爽而令人眼前一亮。另一方面，糟糕的排版選擇令人分心。排版是為了內(nèi)容更好的呈現(xiàn)，應(yīng)以不會(huì)增加用戶(hù)認(rèn)知負(fù)荷的方式來(lái)尊重內(nèi)容。

同時(shí)推薦一個(gè)非常棒的免費(fèi)UI教程網(wǎng)站給大家：uiiiuiii.com

今天的文章就到這里咯，歡迎同學(xué)們關(guān)注最充滿(mǎn)智（dou）慧（bi）的設(shè)計(jì)賬號(hào)：

「提高網(wǎng)頁(yè)排版的好文合集」

1. 《想讓網(wǎng)頁(yè)可讀性更強(qiáng)？你得善用F式布局》
2. 《從這些基本的字體排版規(guī)則入手，搞定網(wǎng)頁(yè)排版這件事》
3. 《想讓你的網(wǎng)頁(yè)設(shè)計(jì)脫穎而出，可以從這5個(gè)維度入手》

原文作者：Nick Babich
作者網(wǎng)站：http://babich.biz/

【優(yōu)設(shè)網(wǎng) 原創(chuàng)文章 投稿郵箱：yuan@uisdc.com】

================明星欄目推薦================

優(yōu)優(yōu)教程網(wǎng)： UiiiUiii.com 是優(yōu)設(shè)旗下優(yōu)質(zhì)中文教程網(wǎng)站，分享了大量PS、AE、AI、C4D等中文教程，為零基礎(chǔ)設(shè)計(jì)愛(ài)好者也準(zhǔn)備了貼心的知識(shí)樹(shù)專(zhuān)欄。開(kāi)啟免費(fèi)自學(xué)新篇章，按照我們的專(zhuān)欄一步步學(xué)習(xí)，一定可以迅速上手并制作出酷炫的視覺(jué)效果。

設(shè)計(jì)導(dǎo)航：國(guó)內(nèi)人氣最高的設(shè)計(jì)網(wǎng)址導(dǎo)航，設(shè)計(jì)師必備：http://hao.uisdc.com