在網(wǎng)頁設(shè)計(jì)中，排版對于網(wǎng)站與用戶之間建立良好的溝通，幫助用戶實(shí)現(xiàn)自己的目標(biāo)起著重要的作用。當(dāng)我們談到網(wǎng)頁是否能與用戶建立有效的溝通時(shí)，這里通常指的是文本布局的作用：
網(wǎng)頁中95%以上的信息是文本
好的排版讓用戶更容易閱讀，而混亂的排版讓用戶失去繼續(xù)瀏覽的意圖。正如奧利弗·賴森斯坦在他的文章《網(wǎng)頁設(shè)計(jì)是95%的印刷術(shù)》中所寫，排版的目的是優(yōu)化可讀性、訪問率、可用性以及與圖形的平衡
換句話說，優(yōu)化布局也有助于優(yōu)化界面。在本文中，我們提供了一組規(guī)則，這些規(guī)則將幫助您提高文本內(nèi)容的可讀性和可讀性。
1.不要使用太多字體
建議在網(wǎng)站布局中不要超過三種字體類型，否則網(wǎng)站會顯得松散和不專業(yè)。太多的字體不僅會導(dǎo)致這個(gè)問題，而且太多的字體大小也會破壞網(wǎng)頁的布局。
一般來說，將字體系列的數(shù)量限制在最低限度(2個(gè)是多個(gè)，1個(gè)通常就足夠了)，整個(gè)網(wǎng)站都遵循同樣的原則。如果使用多個(gè)字體，請確保兩個(gè)字體協(xié)調(diào)。以下面的字體組合為例。佐治亞州和威爾達(dá)那州相輔相成，相對和諧。與對巴斯克維爾的影響相比，會有明顯的沖突感。非線性沖擊明顯超過巴斯克維爾的視覺沖擊。
在中英文排版中，建議使用標(biāo)準(zhǔn)的中文字體，英文、數(shù)字和字符使用標(biāo)準(zhǔn)的英文字體。以下圖為例，看看能不能比較一下美。
2.嘗試使用標(biāo)準(zhǔn)字體
Google Web字體或typekit中有很多有趣的字體，中國的“字體庫”中也有字體嵌入服務(wù)。對于國內(nèi)設(shè)計(jì)師來說，痛苦的是中文字體會非常大，一個(gè)字體會移動(dòng)幾兆和十兆，因此用戶會增加瀏覽網(wǎng)站的加載時(shí)間;相反，26個(gè)英文字母和數(shù)百個(gè)K數(shù)字標(biāo)點(diǎn)符號在網(wǎng)頁中很容易使用。
盡量選擇標(biāo)準(zhǔn)字體(近年來，網(wǎng)站通常使用思源、平房的粗體字體，英文可以使用Arial、Calibri或其他屏幕上容易閱讀的常用粗體字。如果沒有特別的概念指導(dǎo)，盡量避免使用襯線字體，如宋體)
不是每個(gè)用戶都能在終端上看到相同的字體，這意味著用戶可能看不到您選擇的適當(dāng)字體。
用戶更熟悉標(biāo)準(zhǔn)字體，因此閱讀速度更快
特殊的和少量的字體可以做成。SVG格式的嵌入到web中供使用的材料
好的字體設(shè)計(jì)允許用戶更多地關(guān)注內(nèi)容本身而不是字體類型。
3.限制文本行的長度
文本可讀性的關(guān)鍵是確保每行中的字符數(shù)。不是設(shè)計(jì)師定義文本的寬度，而是用戶的可讀性。
太寬-會使單行文字太長，讀者的眼睛很難集中在文字上。由于長時(shí)間閱讀容易連讀，在一大段文字中很難找到正確的行。
太短-會使用戶的眼睛經(jīng)?；氐较乱恍形淖?，會打破讀者的閱讀節(jié)奏，長時(shí)間閱讀會造成視覺疲勞。太短也容易向讀者發(fā)出信號，使讀者在閱讀當(dāng)前行之前跳到下一行，并可能忽略潛在的重要單詞和句子。
以谷歌和百度為例。我們可以看到
對于移動(dòng)設(shè)備，每行應(yīng)為30-40個(gè)字符(半角)，顯示的具體字?jǐn)?shù)取決于屏幕、文本寬度和不同分辨率的字體大小。設(shè)計(jì)原則是保證用戶能順利閱讀文字，文字不能太小或太大。以IOS(手機(jī))為例，文本的最小字體大小不能小于24px，對于用戶來說太小，無法閱讀。比如百度，可以作為參考。
4.選擇具有多個(gè)字號和良好顯示效果的字體
用戶將通過具有不同屏幕分辨率的終端設(shè)備訪問您的網(wǎng)站。大多數(shù)用戶界面需要不同大小的文本(標(biāo)題、副標(biāo)題、文本、注釋等)。選擇一種能夠在不同屏幕分辨率的設(shè)備上運(yùn)行良好的字體，以確保其不同大小的字體具有較高的可讀性和可用性，這一點(diǎn)也非常重要。
近兩年來，無論是流行的思源粗體還是平房字體都是不錯(cuò)的選擇。當(dāng)然，我認(rèn)為漢儀旗黑色在家族字體數(shù)量、字體質(zhì)量、屏幕顯示和紙張打印等方面都不遜于前兩種字體。參與字體設(shè)計(jì)的設(shè)計(jì)師都表示，思源粗體還是一種比較粗糙的字體。
此外，為了確保它們在屏幕上清晰可見，請盡量避免使用襯線，即使它們很漂亮。
5.使用識別度高的字體
在選擇英文字體時(shí)，有些字體的個(gè)別字母容易混淆，特別是“I”和“L”(如下圖所示)，以及字距。使用較小字體(如上圖)時(shí)，許多中文字體會粘在一起，不易區(qū)分;因此，在選擇字體類型時(shí)，請檢查您選擇使用的字體，確保不會給用戶和產(chǎn)品造成不必要的損失。
6.避免在界面的大部分使用大寫字母
不要對所有文本使用大寫字母，強(qiáng)迫用戶閱讀大寫字母、大寫字母、有特殊意義的縮寫等，只是大量的大寫字母會比小寫字母嚴(yán)重降低用戶的閱讀效率和閱讀樂趣。
7.將行距控制在字體的1.5-2倍之間
在文本排版中，另一個(gè)特殊術(shù)語用來表示行之間的距離：行距(或行高)。為了保證文本的可讀性和可讀性，使文本形成線性閱讀體驗(yàn)，將行距控制在字號(中文字體)的1.5-2倍之間。建議使用英文字體的默認(rèn)行距，或根據(jù)默認(rèn)行距進(jìn)行微調(diào)。
8.適當(dāng)?shù)念伾珜Ρ榷?
一般來說，盡量避免對文本和背景使用相同或相似的顏色。文本越明顯，用戶掃描和閱讀的速度就越快。當(dāng)然，也要學(xué)會通過文本顏色、大小和背景的顏色關(guān)系來控制視覺層次。
小文本與背景的對比度至少為背景的4.5:1
大文本(14px/18px以上)應(yīng)與背景保持3:1以上的對比度
灰色通常用作輔助色。根據(jù)之前的項(xiàng)目經(jīng)驗(yàn)，有必要共享一組灰色、灰色和層次結(jié)構(gòu)，并清楚地區(qū)分我一直使用的信息級別
9.避免將文本染成紅色或綠色
色盲和色弱是我必須照顧的一些用戶，特別是男性(其中8%是色盲)。建議使用其他方式區(qū)分重要信息(如下劃線、粗體等)，而不是顏色。避免使用紅色和綠色作為單獨(dú)的消息。因?yàn)榧t綠色盲是色盲中最常見的一種。(現(xiàn)在想一想，那些因?yàn)榧t綠色盲而不能拿到駕照的童鞋，是否恨那些每分鐘都要制定紅綠燈規(guī)則的人。當(dāng)然，這只是個(gè)玩笑。交通燈的使用是因?yàn)楣鈱W(xué)的物理通信，這里沒有解釋。)
雖然在我們的日常生活中，我們總是用這種方式告訴用戶，綠色意味著正確的操作，紅色意味著錯(cuò)誤的操作。反思一下我們是否考慮過色盲用戶的操作和體驗(yàn)?；蛟S我們可以考慮用另一種方式來表達(dá)對與錯(cuò)?
10.避免文本閃爍
閃爍的文本或內(nèi)容可能會讓一些用戶感到不舒服，這可能會分散或惹惱普通用戶的注意力。
盡管在網(wǎng)頁設(shè)計(jì)中還有很多事情需要注意，最后，我想和大家分享一個(gè)觀點(diǎn)，排版在網(wǎng)頁設(shè)計(jì)中是非常重要的。正確的排版可以讓你的網(wǎng)站煥然一新，而糟糕的排版會分散用戶的注意力，傾向于關(guān)注他們的感受，而不是他們的內(nèi)容。排版的關(guān)鍵是使信息層次清晰，便于用戶閱讀，并確保文本可讀。文字排版不應(yīng)增加使用者的認(rèn)知整合，以達(dá)到尊重內(nèi)容和使用者的目的。
TAG：
網(wǎng)站建設(shè)案例
黃巖醫(yī)藥
華逸逸品
臺州市璟航環(huán)?？萍加邢薰?/a>
樂夢科技
小聰明幼兒園
力松機(jī)械