優(yōu)化網(wǎng)站排版也是一種優(yōu)化用戶界面的方法。在本文中,作者將分享一套規(guī)則,幫助您提高文本內(nèi)容的可讀性和可讀性。
溝通在設(shè)計(jì)中起著至關(guān)重要的作用——它建立網(wǎng)站和用戶之間的聯(lián)系,幫助他們實(shí)現(xiàn)他們的目標(biāo)。當(dāng)我們談?wù)摼W(wǎng)頁設(shè)計(jì)中的交流時(shí),我們通常指的是文本的輸出。
印刷術(shù)在這一過程中起著至關(guān)重要的作用:超過95%的信息是以書面形式出現(xiàn)的。好的排版使閱讀行為變得容易,而糟糕的排版使用戶關(guān)閉頁面。網(wǎng)頁設(shè)計(jì)是95%種排版設(shè)計(jì):
換句話說,優(yōu)化網(wǎng)站排版也是優(yōu)化用戶界面的一種方式。在下面的文章中,我將提供一組規(guī)則來幫助您提高文本內(nèi)容的可讀性和可讀性。
使用超過3種不同字體會(huì)使網(wǎng)站看起來不結(jié)構(gòu)化和不專業(yè)。請注意,使用更多字體樣式可以一次性破壞所有布局。
一般來說,字體的數(shù)量被限制在最小(兩個(gè)以上,一個(gè)正好)。如果使用多個(gè)字體,請確保字體具有序列感,并且其字符寬度是相輔相成的。以以下字體的組合為例:格魯吉亞和韋爾達(dá)河。Na(左)結(jié)合創(chuàng)建一對和諧的相似價(jià)值觀。相比之下,巴斯克維爾和沖擊(右)顯著地掩蓋了SerIFs的不匹配,創(chuàng)造了更好的視覺體驗(yàn)。
字體嵌入式服務(wù)(如谷歌Web字體或Type KIT)有許多有趣的字體,為您的設(shè)計(jì)提供創(chuàng)新、新鮮和意想不到的效果,而且它們也非常方便使用。以谷歌為例:
除非你的網(wǎng)站有足夠吸引人的自定義字體(例如品牌化或創(chuàng)建沉浸式體驗(yàn)),最好使用系統(tǒng)字體。更安全的方式是使用系統(tǒng)字體:Arial、Calibri、Tebe等。記住好排版會(huì)吸引讀者而不是文本I。我自己。
每行放置適當(dāng)數(shù)量的字符是文本可讀性的關(guān)鍵。它不僅是你的設(shè)計(jì),它決定了你的文字寬度,它也應(yīng)該是一個(gè)可讀的問題。
如果你想要一個(gè)好的閱讀體驗(yàn),你應(yīng)該限制每行大約60個(gè)字符。每行有合適的字符數(shù)是文本可讀性的關(guān)鍵。
如果一條線太短,眼睛必須經(jīng)?;剡^頭來打破讀者的節(jié)奏。如果一行文字太長,用戶的眼睛將不能長時(shí)間聚焦在單行文本上。圖像來源:材料設(shè)計(jì)
對于移動(dòng)設(shè)備,每行基本上是30-40個(gè)字符。下面是移動(dòng)設(shè)備上瀏覽的兩個(gè)網(wǎng)站的例子。第一個(gè)使用每行50-75個(gè)字符(每行和桌面最好的字符數(shù)),而第二個(gè)使用最好的30-40個(gè)字符。
用戶將從具有不同屏幕大小和分辨率的設(shè)備訪問您的網(wǎng)站。大多數(shù)用戶界面需要不同大小的文本元素(按鈕文本、字段標(biāo)簽、部件標(biāo)題等)。選擇適合各種尺寸和分辨率的字體以保持每個(gè)尺寸是很重要的??勺x性和可用性。
確保你選擇的字體在較小的屏幕上是清晰可辨的。盡量避免像Vivaldi這樣的腳本字體(在下面的例子中):雖然它們很漂亮,但是很難閱讀。
許多字體可以很容易混淆類似的字母形式,特別是與I和L(如下所示)和字母間距差。
例如,當(dāng)R和N看起來像M.時(shí),在選擇類型時(shí),一定要在不同的上下文中檢查類型,以確保它不會(huì)對用戶造成問題。
所有的大寫字母——意思是所有字母的文本——在沒有閱讀的上下文中(例如縮寫詞或徽標(biāo))看起來都很漂亮,但是當(dāng)你的信息涉及閱讀時(shí),不要強(qiáng)迫所有的大寫字母被使用。正如Miles Tinker所說,在他里程碑式的工作可讀性中,所有大寫字母都會(huì)增加。掃描和讀取的速度,與小寫類型相比。
在排版中,我們有兩個(gè)文本行(或行高)之間的間距的特殊術(shù)語。通過增加行的高度,可以增加文本行之間的垂直空白空間,并且通常增加屏幕空間返回的可讀性。字符高度提高可讀性。
正如Dmitry Fadeyev指出的,正確地使用段落之間的空格可以增加20%的理解力。使用空白技能可以為用戶提供知識,這些知識可以改變知識,然后斷開無關(guān)的細(xì)節(jié)。
文本和背景不應(yīng)使用相同或相似的顏色。文本越明顯,用戶掃描和閱讀的速度就越快。W3C建議正文文本和圖像文本之間的對比如下:
一旦選擇了顏色,在大多數(shù)設(shè)備上測試真實(shí)用戶是絕對必要的。如果任何測試都顯示了閱讀文本的問題,那么您可以確保您的用戶有完全相同的問題,然后以統(tǒng)一的方式解決。
色盲是一種常見的情況,尤其是男性(8%的人是色盲),建議使用除顏色以外的其他光纜來區(qū)分重要信息。此外,避免使用紅色和綠色單獨(dú)傳達(dá)信息,因?yàn)榧t色和綠色的色盲是最多的。色盲的常見形式。
閃爍本身或閃爍的內(nèi)容可能觸發(fā)敏感個(gè)體的神經(jīng)攻擊,它不僅會(huì)引起神經(jīng)阻力,而且可能對一般用戶來說是惱人的或分散注意力的。
文本排版是一個(gè)重要的設(shè)計(jì)領(lǐng)域。正確的排版選項(xiàng)可以使您的網(wǎng)站感覺更新,因此排版的可讀性、清晰度和清晰度非常重要。文本排版的存在是為了突出內(nèi)容,內(nèi)容的可讀性應(yīng)該以一種方式來增強(qiáng)。不增加用戶的認(rèn)知負(fù)荷。