閱讀型網(wǎng)頁(yè)設(shè)計(jì)怎么做？

一個(gè)閱讀型網(wǎng)頁(yè)，比如各新聞資訊網(wǎng)站、閱讀型社區(qū)、web端讀書(shū)網(wǎng)站等，在去除廣告等干擾元素后，純內(nèi)容的閱讀體驗(yàn)會(huì)受到以下幾個(gè)因素的影響：字體、字號(hào)、字色、行寬、行間距、段間距。

字體：

襯線字體 or 非襯線字體：調(diào)研了多個(gè)網(wǎng)站，均采用非襯線字體。

查閱資料，襯線字體更富表現(xiàn)力，可提高辨識(shí)度和閱讀效率，多用于報(bào)紙、書(shū)籍等印刷品，以及電子雜志和藝術(shù)網(wǎng)站的正文字體。

在電子屏上顯示時(shí)，由于字號(hào)、顯示器尺寸、顯示器分辨率等影響因素，使用襯線字體時(shí)過(guò)細(xì)的筆畫(huà)可能會(huì)顯示不清難以辨認(rèn)。

從穩(wěn)妥角度考慮，這可能是各大網(wǎng)站均采用非襯線字體作為選字體的原因。

推薦以下字體：

MacOS

中文：選 蘋(píng)方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)妥起見(jià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)，加上人類(lèi)眼睛側(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)該寫(xiě)滿，這樣才能整整齊齊。

如果采用左對(duì)齊，可以達(dá)到每一列字都對(duì)齊(有半角字符的行，會(huì)破壞隊(duì)形)，但當(dāng)后一個(gè)字符為標(biāo)點(diǎn)時(shí)，會(huì)直接換行，導(dǎo)致此行會(huì)缺一塊，不好。

如果采用兩端對(duì)齊，就能避免這種情況。但兩端對(duì)齊有另一個(gè)問(wèn)題，段落的后一行不一定寫(xiě)滿行。當(dāng)后一行未寫(xiě)滿行，且，行寬不是正文字號(hào)的整數(shù)倍時(shí)，為了達(dá)到兩端對(duì)齊，前面行會(huì)增加字間距，但后一行不會(huì)增加字間距。這樣，后一行的每個(gè)字都不能與其所在列對(duì)齊。

如果行寬是正文字號(hào)的整數(shù)倍，就能避免這種情況。達(dá)到兩端對(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% 。

當(dāng)前文章：閱讀型網(wǎng)頁(yè)設(shè)計(jì)怎么做？
當(dāng)前地址：http://muchs.cn/news/262969.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供域名注冊(cè)、品牌網(wǎng)站建設(shè)、搜索引擎優(yōu)化、App開(kāi)發(fā)、網(wǎng)站改版、全網(wǎng)營(yíng)銷(xiāo)推廣

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來(lái)源： 創(chuàng)新互聯(lián)