優(yōu)秀的排版可以提高用戶的閱讀積極性,反之,差的排版只會(huì)降低用戶的閱讀積極性。 優(yōu)化排版就是優(yōu)化界面,今天小編分享一些網(wǎng)頁排版的小技巧。
1. 減少不同類型字體的使用
不要使用太多的字體,只破壞你的布局。
為了避免上圖這種情況,盡量把字體數(shù)量限制到最小,一般兩個(gè)就很充足,其實(shí)一個(gè)也足夠。如下圖的字體組合:
2. 使用標(biāo)準(zhǔn)字體
用戶對(duì)標(biāo)準(zhǔn)字體更熟悉,因此可以快速的讀取。除非你的網(wǎng)站的自定義字體很有吸引力,否則最好還是使用系統(tǒng)字體。一個(gè)安全的方法是用一個(gè)系統(tǒng)的字體:如Arial,Calibri,Trebuchet等。
3. 選擇一種能在各種尺寸中工作的字體
用戶可能會(huì)從不同的屏幕尺寸和分辨率的設(shè)備中訪問網(wǎng)站,選擇一種能在多尺寸和重量上運(yùn)行良好的字體,保持每個(gè)尺寸的可讀性。
Google的Roboto字體
保證你的字體在比較小的屏幕種依然清晰可辨,確保你說選擇的字體在較小的屏幕上清晰可辨!盡量避免草書,如Vivaldi(在下面的示例中):雖然很漂亮,但很難閱讀。
Vivaldi字體很難以在小屏幕上閱讀
4. 限制行的長度
Baymard Institute關(guān)于行的長度這樣說:
“如果你想要有一個(gè)好的閱讀體驗(yàn),每行應(yīng)約60個(gè)字符。每行擁有適當(dāng)?shù)淖址麛?shù)量是讓你的文本具有可讀性的關(guān)鍵?!?/span>
行太短,視線要經(jīng)常返回,會(huì)打破讀者的節(jié)奏。行太長,用戶的視線又很難專注于文本。
5. 行間距的重要性
增加行高,可以增加文本之間的垂直空白空間,提高可讀性,換取屏幕空間。一個(gè)規(guī)則,行高應(yīng)該是字符高度的30%。
左:幾乎重疊的文字。右:良好的間距有助于可讀性。
6. 確保你有足夠的顏色對(duì)比度
在文本和背景中不要使用相同或相似的顏色,文本越明顯,用戶才能更快的閱讀。
上圖難以根據(jù)背景顏色進(jìn)行閱讀。
上圖則易于閱讀背景顏色。
你一旦選擇了顏色,就要在大多數(shù)設(shè)備上進(jìn)行測(cè)試。如果測(cè)試時(shí)顯示閱讀副本有問題,那么你的用戶使用時(shí)也會(huì)有相同得到問題。
7. 避免紅色或綠色的文本
色盲很常見,尤其是男性,據(jù)調(diào)查8%的男性是紅綠色盲,避免單獨(dú)使用紅色和綠色來傳達(dá)信息。
8. 避免使用閃爍的文字
首先,閃爍的內(nèi)容可能會(huì)導(dǎo)致個(gè)體癲癇發(fā)作,其次,對(duì)于大多數(shù)用戶,這很令人反感而且容易分心。
避免閃爍文字!
結(jié)論
排版是一件重要的事情。做出正確的排版選擇可以讓你的網(wǎng)站看上去更優(yōu)雅。另一方面,糟糕的排版選擇會(huì)讓人分心,往往會(huì)引起對(duì)排版的注意。讓排版具有可讀性,可理解性和清晰度是至關(guān)重要。