關(guān)于閱讀型網(wǎng)頁(yè)設(shè)計(jì),這幾點(diǎn)你要注意
互聯(lián)網(wǎng)的高速發(fā)展使得我們每天花在網(wǎng)頁(yè)上的時(shí)間越來(lái)越多,網(wǎng)頁(yè)設(shè)計(jì)的重要性不言而喻。本文作者以閱讀型網(wǎng)頁(yè)設(shè)計(jì)為例,談?wù)勀膸c(diǎn)是需要特別注意的,希望對(duì)你有幫助。
最近負(fù)責(zé)某知識(shí)型社區(qū)的改版,其中一塊是提升讀者在網(wǎng)頁(yè)端閱讀的體驗(yàn)。在調(diào)研一些網(wǎng)站的設(shè)計(jì)規(guī)范和查閱部分文獻(xiàn)后,結(jié)合自己的思考,總結(jié)如下幾點(diǎn),以供參考。
一個(gè)閱讀型網(wǎng)頁(yè),比如各新聞資訊網(wǎng)站、閱讀型社區(qū)、web端讀書網(wǎng)站等,在去除廣告等干擾元素后,純內(nèi)容的閱讀體驗(yàn)會(huì)受到以下幾個(gè)因素的影響:字體、字號(hào)、字色、行寬、行間距、段間距、背景色。
接下來(lái)一一介紹。
字體:
襯線字體 or 非襯線字體:調(diào)研了多個(gè)網(wǎng)站,均采用非襯線字體。
查閱資料,襯線字體更富表現(xiàn)力,可提高辨識(shí)度和閱讀效率,多用于報(bào)紙、書籍等印刷品,以及電子雜志和藝術(shù)網(wǎng)站的正文字體。
在電子屏上顯示時(shí),由于字號(hào)、顯示器尺寸、顯示器分辨率等影響因素,使用襯線字體時(shí)過(guò)細(xì)的筆畫可能會(huì)顯示不清難以辨認(rèn)。
從穩(wěn)妥角度考慮,這可能是各大網(wǎng)站均采用非襯線字體作為首選字體的原因。
推薦以下字體:
MacOS
中文:首選 蘋方regular 次選 冬青黑體簡(jiǎn)體。
英文:首選 Helvetica Neue 次選 Arial。
Windows
中文:首選 微軟雅黑 次選 冬青黑體簡(jiǎn)體。
英文:首選 Arial 次選 Tahoma。
字號(hào):
字號(hào)太小看不清累眼睛,太大頁(yè)面不精致且顯示效率低。
一個(gè)字在顯示器上顯示出來(lái)有多大,取決于字號(hào)和單個(gè)像素方塊的物理尺寸。單像素塊尺寸,取決于顯示器尺寸和顯示器分辨率。
隨著顯示器技術(shù)發(fā)展,在顯示器尺寸沒(méi)有變大的情況下,顯示器分辨率越來(lái)越高,這意味著單像素方塊的物理尺寸越來(lái)越小,因此網(wǎng)頁(yè)端設(shè)計(jì)時(shí)的推薦字號(hào)也在變大,從12px 到 14px 到 16px。
穩(wěn)妥起見,正文建議使用 16px 。以此為基準(zhǔn),擴(kuò)大和減小后確定標(biāo)題和輔助文本的字號(hào),此處建議以 4px 為步長(zhǎng),使對(duì)比明顯。
字色和背景色:
閱讀體驗(yàn)受文字和背景的對(duì)比度影響。高對(duì)比度時(shí),識(shí)別清晰,但眼睛容易疲勞。只有找到一個(gè)合適的對(duì)比度,才能做到既識(shí)別清晰,長(zhǎng)時(shí)間閱讀又不容易累。
首先是白底黑字和黑底白字。二者本身對(duì)比較強(qiáng),加上人類眼睛側(cè)抑制等視覺(jué)機(jī)制,會(huì)讓反差特別大,因此識(shí)別起來(lái)很清晰。由于白底黑字相較于黑底白字的反差更小[1],故而可讀性更高,適用于注重文字閱讀的網(wǎng)站;黑底白字視覺(jué)刺激性強(qiáng),適用于注重視覺(jué)表現(xiàn)力或營(yíng)造氛圍的單頁(yè)面,比如海報(bào)、主題網(wǎng)站首頁(yè)等。另外,對(duì)于視覺(jué)受損的用戶,此兩種配色方案也是較人性化的選擇。
然而,白底黑字并非最好。由于白色具有100%的亮度,黑色是0%,巨大的亮度對(duì)比讓眼睛在閱讀時(shí)要盡全力去適應(yīng),容易引起眼部疲勞,因此白底黑字仍不適宜長(zhǎng)時(shí)間的閱讀,所以印刷品讀物的紙張多用乳白色或淡黃色的紙張。又因?yàn)轱@示器本身就發(fā)光,所以在電腦上閱讀純白色背景的文字,比在紙上閱讀時(shí),眼睛會(huì)更容易疲乏。
然而Hill(1997)的研究卻表明:黑色和白色一直被認(rèn)為是最可讀的;有黑色在內(nèi)的色彩組合比沒(méi)有黑色的色彩組合更易于閱讀;較淺背景上較深的文本比較暗的背景上較淺的文本的評(píng)價(jià)高。因此,更好的組合可能是保證了對(duì)比度(大于4.5)的淺灰背景 + 深灰文本。
行寬:
行寬過(guò)大,閱讀時(shí)要轉(zhuǎn)動(dòng)脖子,降低閱讀效率,而且目光從行尾移至下一行首容易串行。行寬過(guò)小,用戶注視點(diǎn)要在行間頻繁跳躍,降低了閱讀速度,體驗(yàn)也不好。為防止此現(xiàn)象,文本寬度最好在450-700px之間。
確定具體數(shù)值時(shí),要注意行寬應(yīng)該是正文字號(hào)的整數(shù)倍。這是因?yàn)橹形氖欠綁K字,最好的排版應(yīng)該像小學(xué)時(shí)的作文本那樣,每一列字都對(duì)齊,除最后一行外,每一行應(yīng)該寫滿,這樣才能整整齊齊。
如果采用左對(duì)齊,可以達(dá)到每一列字都對(duì)齊(有半角字符的行,會(huì)破壞隊(duì)形),但當(dāng)最后一個(gè)字符為標(biāo)點(diǎn)時(shí),會(huì)直接換行,導(dǎo)致此行會(huì)缺一塊,不好。
如果采用兩端對(duì)齊,就能避免這種情況。但兩端對(duì)齊有另一個(gè)問(wèn)題,段落的最后一行不一定寫滿行。當(dāng)最后一行未寫滿行,且,行寬不是正文字號(hào)的整數(shù)倍時(shí),為了達(dá)到兩端對(duì)齊,前面行會(huì)增加字間距,但最后一行不會(huì)增加字間距。這樣,最后一行的每個(gè)字都不能與其所在列對(duì)齊。
如果行寬是正文字號(hào)的整數(shù)倍,就能避免這種情況。達(dá)到兩端對(duì)齊不留空,每列對(duì)齊像閱兵的效果。
左對(duì)齊
兩端對(duì)齊
行間距:
行間距太小,有密不透氣的感覺(jué),讀者瀏覽文章時(shí)容易串行;行間距太大,閱讀時(shí)會(huì)感覺(jué)文章不夠連貫,頁(yè)面也不夠精致。網(wǎng)頁(yè)上行距常用em為單位,不管是中文網(wǎng)站還是英文網(wǎng)站,大多用1.5em-1.8em的行距。
段間距:
分情況。文章較短,就不需要很寬的段距;文章很長(zhǎng),最好利用段距分隔文章的節(jié)奏,給閱讀者喘息和思考的機(jī)會(huì),提高文章的可讀性。經(jīng)驗(yàn)值是,段間距一般為行間距的75% 。
結(jié)語(yǔ):
實(shí)際上,影響純內(nèi)容閱讀體驗(yàn)的遠(yuǎn)不止以上這些。實(shí)際工作中,環(huán)境光、設(shè)備尺寸和分辨率、用戶視力等都應(yīng)該在設(shè)計(jì)師的考慮范圍內(nèi)。魔鬼在細(xì)節(jié)中,多考慮一些,用戶體驗(yàn)就會(huì)提升一些。
參考文獻(xiàn):
https://www.zcool.com.cn/article/ZNTEyNjMy.html
https://marijohannessen.github.io/color-contrast-checker/
https://zhuanlan.zhihu.com/p/62766232
本文由 @Tzufeng 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理。未經(jīng)許可,禁止轉(zhuǎn)載
題圖來(lái)自Unsplash,基于CC0協(xié)議
- 目前還沒(méi)評(píng)論,等你發(fā)揮!