溝通在設(shè)計(jì)中扮演著核心角色。通過網(wǎng)站與用戶之間建立清晰聯(lián)系,幫助用戶實(shí)現(xiàn)他們的目標(biāo)至關(guān)重要。當(dāng)我們談?wù)摼W(wǎng)頁設(shè)計(jì)中的溝通時(shí),主要指的是文字。超過95%的網(wǎng)絡(luò)信息是以書面形式呈現(xiàn)的,因此排版在這個(gè)過程中起著至關(guān)重要的作用。
好的排版能夠讓閱讀變得更加輕松,而差的排版則會(huì)讓用戶感到厭煩。正如Oliver Reichenstein在他的文章中所說,優(yōu)化排版可以優(yōu)化可讀性、可訪問性、可用性以及整體圖形平衡。因此,排版在網(wǎng)頁設(shè)計(jì)中起著至關(guān)重要的作用。
換句話說,優(yōu)化排版也能夠改善用戶界面。在接下來的文章中,我將分享一組規(guī)則來幫助你提高文本內(nèi)容的可讀性和易讀性。
1.盡量減少使用的字體數(shù)量
使用超過3種不同的字體會(huì)讓網(wǎng)站看起來沒有條理且缺乏專業(yè)性。要記住,同時(shí)使用過多的字體大小和樣式也會(huì)破壞布局。為了避免這種情況,請(qǐng)盡量將字體系列的數(shù)量控制在最低。
一般來說,最好將字體系列數(shù)量限制在最低(兩個(gè)就足夠了,一個(gè)通常就足夠了),并在整個(gè)網(wǎng)站上堅(jiān)持使用相同的字體系列。如果你確實(shí)使用了多種字體,請(qǐng)確保這些字體系列的字符寬度相互補(bǔ)充。
2.嘗試使用標(biāo)準(zhǔn)字體
使用字體嵌入服務(wù)(例如Google Web Fonts或Typekit)雖然可以為您的設(shè)計(jì)帶來許多有趣和新穎的字體,但這種方法存在一個(gè)嚴(yán)重的問題。有趣的字體可能會(huì)分散用戶的注意力,使他們?cè)陂喿x文本時(shí)花費(fèi)更多的時(shí)間去思考設(shè)計(jì)師使用的字體。
因此,除非您的網(wǎng)站需要使用自定義字體來實(shí)現(xiàn)品牌推廣目的或創(chuàng)建沉浸式體驗(yàn),否則最好堅(jiān)持使用系統(tǒng)默認(rèn)字體。請(qǐng)記住,好的排版應(yīng)該將讀者的注意力集中在內(nèi)容上,而不是字體本身。
3.限制線長(zhǎng)
文本的可讀性與其每行的字符數(shù)量有很大關(guān)系。決定文本寬度的應(yīng)該是易讀性而不是設(shè)計(jì)。Baymard Institute提出過一項(xiàng)關(guān)于可讀性和行長(zhǎng)的建議:“如果你想獲得良好的閱讀體驗(yàn),每行應(yīng)該有大約60個(gè)字符。每行有適當(dāng)數(shù)量的字符是文本可讀性的關(guān)鍵?!?/p>
如果一行文本太短,讀者的眼睛需要經(jīng)常來回移動(dòng),打斷了閱讀節(jié)奏。而如果一行文本太長(zhǎng),讀者的眼睛很難集中精力在文本上。
對(duì)于移動(dòng)設(shè)備來說,應(yīng)該選擇每行30到40個(gè)字符的文本。以下是在移動(dòng)設(shè)備上查看的兩個(gè)網(wǎng)站的示例。第一個(gè)網(wǎng)站使用每行50到75個(gè)字符(這是打印和桌面設(shè)備的最佳每行字符數(shù)),而第二個(gè)網(wǎng)站使用最佳的30到40個(gè)字符。
在網(wǎng)頁設(shè)計(jì)中,可以通過使用em或像素來限制文本塊的寬度,從而確保每行的最佳字符數(shù)。
4.選擇適合各種尺寸的字體
用戶將通過具有不同屏幕尺寸和分辨率的設(shè)備訪問您的網(wǎng)站。大多數(shù)用戶界面需要各種大小的文本元素(按鈕、字段標(biāo)簽、部分標(biāo)題等)。選擇適合多種尺寸和粗細(xì)的字體非常重要,以保持每種尺寸的可讀性和可用性。因此,您應(yīng)當(dāng)選擇在較小的屏幕上也能清晰易讀的字體,并盡量避免使用草書字體,以確保文本的可讀性。
5.使用可區(qū)分字母的字體
很多字體容易混淆相似的字母形狀,比如“i”和“L”。因此,在選擇字體時(shí),務(wù)必在不同的背景下檢查字體,以確保它不會(huì)給用戶帶來困擾。
6.避免全部大寫
雖然所有大寫字母看起來很美觀,但在需要閱讀的情況下,使用全大寫字母會(huì)降低閱讀速度。Miles Tinker在他的著作《Legibility of Print》中提到,與小寫字母相比,全大寫字母的閱讀速度要慢得多。因此,在需要快速閱讀和理解文本的情況下,最好不要使用全大寫字母。
7.不要最小化行間距
在排版中,兩行文本之間的間距被稱為前導(dǎo)或行高。通過增加行距,可以增加文本行之間的垂直空白,通常會(huì)提高可讀性,但會(huì)占用更多屏幕空間。一般來說,前導(dǎo)的高度應(yīng)該是字符高度的30%左右,以獲得良好的可讀性。
正如Dmitry Fadeyev所指出的,正確使用段落之間的空白可以顯著提高理解力。使用空白的技巧在于提供適量的內(nèi)容量,然后剝離無關(guān)的細(xì)節(jié),從而讓用戶更容易理解和吸收信息。
8.確保你有足夠的色彩對(duì)比
不要使用與背景相同或相似的顏色來呈現(xiàn)文本。選擇對(duì)比度更高的文本顏色有助于用戶更快地掃描和閱讀。根據(jù)W3C的建議,小文本與其背景的對(duì)比度應(yīng)至少為4.5:1,而大文本(14 pt粗體/18 pt常規(guī)及以上)與其背景的對(duì)比度至少應(yīng)為3:1。
一旦您選擇了文本顏色,最好在大多數(shù)設(shè)備上與真實(shí)用戶一起進(jìn)行測(cè)試。如果測(cè)試顯示閱讀您的文本時(shí)存在問題,那么可以確定您的用戶也會(huì)遇到相同的問題。
9.避免用紅色或綠色著色文本
色盲是一種常見的問題,特別是在男性中(8%的男性受其影響)。建議使用除了顏色之外的其他方式來區(qū)分重要信息。此外,應(yīng)避免僅使用紅色和綠色來傳遞信息,因?yàn)檫@是最常見的色盲類型。
10.避免使用閃爍文本
閃爍或頻繁閃爍的內(nèi)容可能會(huì)導(dǎo)致易受影響的個(gè)體發(fā)生癲癇病發(fā)作,不僅會(huì)引發(fā)健康問題,而且通常會(huì)干擾用戶,使他們感到煩惱或分心。因此,應(yīng)該避免使用閃爍的文字。
排版是一項(xiàng)重要的工作。不恰當(dāng)?shù)呐虐孢x擇可能會(huì)分散用戶的注意力,影響他們的閱讀體驗(yàn)。因此,確保排版的可讀性、可理解性和易讀性至關(guān)重要。排版的目的是為了突出內(nèi)容,并以一種易于理解和使用的方式呈現(xiàn)出來,而不應(yīng)該增加用戶的認(rèn)知負(fù)擔(dān)。