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