閱讀型網頁設計怎么做?

2023-06-05    分類: 網站建設

一個閱讀型網頁,比如各新聞資訊網站、閱讀型社區、web端讀書網站等,在去除廣告等干擾元素后,純內容的閱讀體驗會受到以下幾個因素的影響:字體、字號、字色、行寬、行間距、段間距。

字體:

襯線字體 or 非襯線字體:調研了多個網站,均采用非襯線字體。

查閱資料,襯線字體更富表現力,可提高辨識度和閱讀效率,多用于報紙、書籍等印刷品,以及電子雜志和藝術網站的正文字體。

在電子屏上顯示時,由于字號、顯示器尺寸、顯示器分辨率等影響因素,使用襯線字體時過細的筆畫可能會顯示不清難以辨認。

從穩妥角度考慮,這可能是各大網站均采用非襯線字體作為選字體的原因。

推薦以下字體:

MacOS

中文:選 蘋方regular 次選 冬青黑體簡體。

英文:選 Helvetica Neue 次選 Arial。

Windows

中文:選 微軟雅黑 次選 冬青黑體簡體。

英文:選 Arial 次選 Tahoma。

字號:

字號太小看不清累眼睛,太大頁面不精致且顯示效率低。

一個字在顯示器上顯示出來有多大,取決于字號和單個像素方塊的物理尺寸。單像素塊尺寸,取決于顯示器尺寸和顯示器分辨率。

隨著顯示器技術發展,在顯示器尺寸沒有變大的情況下,顯示器分辨率越來越高,這意味著單像素方塊的物理尺寸越來越小,因此網頁端設計時的推薦字號也在變大,從12px 到 14px 到 16px。

穩妥起見,正文建議使用 16px 。以此為基準,擴大和減小后確定標題和輔助文本的字號,此處建議以 4px 為步長,使對比明顯。

字色和背景色:

閱讀體驗受文字和背景的對比度影響。高對比度時,識別清晰,但眼睛容易疲勞。只有找到一個合適的對比度,才能做到既識別清晰,長時間閱讀又不容易累。

首先是白底黑字和黑底白字。二者本身對比較強,加上人類眼睛側抑制等視覺機制,會讓反差特別大,因此識別起來很清晰。由于白底黑字相較于黑底白字的反差更小[1],故而可讀性更高,適用于注重文字閱讀的網站;黑底白字視覺刺激性強,適用于注重視覺表現力或營造氛圍的單頁面,比如海報、主題網站首頁等。另外,對于視覺受損的用戶,此兩種配色方案也是較人性化的選擇。

然而,白底黑字并非好。由于白色具有100%的亮度,黑色是0%,巨大的亮度對比讓眼睛在閱讀時要盡全力去適應,容易引起眼部疲勞,因此白底黑字仍不適宜長時間的閱讀,所以印刷品讀物的紙張多用乳白色或淡黃色的紙張。又因為顯示器本身就發光,所以在電腦上閱讀純白色背景的文字,比在紙上閱讀時,眼睛會更容易疲乏。

然而Hill(1997)的研究卻表明:黑色和白色一直被認為是可讀的;有黑色在內的色彩組合比沒有黑色的色彩組合更易于閱讀;較淺背景上較深的文本比較暗的背景上較淺的文本的評價高。因此,更好的組合可能是保證了對比度(大于4.5)的淺灰背景 + 深灰文本。

行寬:

行寬過大,閱讀時要轉動脖子,降低閱讀效率,而且目光從行尾移至下一行首容易串行。行寬過小,用戶注視點要在行間頻繁跳躍,降低了閱讀速度,體驗也不好。為防止此現象,文本寬度好在450-700px之間。

確定具體數值時,要注意行寬應該是正文字號的整數倍。這是因為中文是方塊字,好的排版應該像小學時的作文本那樣,每一列字都對齊,除后一行外,每一行應該寫滿,這樣才能整整齊齊。

如果采用左對齊,可以達到每一列字都對齊(有半角字符的行,會破壞隊形),但當后一個字符為標點時,會直接換行,導致此行會缺一塊,不好。

如果采用兩端對齊,就能避免這種情況。但兩端對齊有另一個問題,段落的后一行不一定寫滿行。當后一行未寫滿行,且,行寬不是正文字號的整數倍時,為了達到兩端對齊,前面行會增加字間距,但后一行不會增加字間距。這樣,后一行的每個字都不能與其所在列對齊。

如果行寬是正文字號的整數倍,就能避免這種情況。達到兩端對齊不留空,每列對齊像閱兵的效果。

行間距:

行間距太小,有密不透氣的感覺,讀者瀏覽文章時容易串行;行間距太大,閱讀時會感覺文章不夠連貫,頁面也不夠精致。網頁上行距常用em為單位,不管是中文網站還是英文網站,大多用1.5em-1.8em的行距。

段間距:

分情況。文章較短,就不需要很寬的段距;文章很長,好利用段距分隔文章的節奏,給閱讀者喘息和思考的機會,提高文章的可讀性。經驗值是,段間距一般為行間距的75% 。

標題名稱:閱讀型網頁設計怎么做?
當前網址:http://m.kartarina.com/news19/262969.html

成都網站建設公司_創新互聯,為您提供品牌網站制作品牌網站建設自適應網站App開發商城網站營銷型網站建設

廣告

聲明:本網站發布的內容(圖片、視頻和文字)以用戶投稿、用戶轉載內容為主,如果涉及侵權請盡快告知,我們將會在第一時間刪除。文章觀點不代表本網站立場,如需處理請聯系客服。電話:028-86922220;郵箱:631063699@qq.com。內容未經允許不得轉載,或轉載時需注明來源: 創新互聯

營銷型網站建設
主站蜘蛛池模板: 亚洲精品无码不卡在线播放HE| 久久中文字幕无码专区| 精品人妻系列无码天堂| 无码粉嫩虎白一线天在线观看| 日韩精品无码久久一区二区三| 蜜桃无码一区二区三区| 国产精品白浆无码流出| 麻豆精品无码国产在线果冻 | 亚洲aⅴ无码专区在线观看春色 | 亚洲级αV无码毛片久久精品| 色爱无码AV综合区| 亚洲VA中文字幕无码毛片| 国产成人精品一区二区三区无码| 精品人妻中文无码AV在线| 精品欧洲av无码一区二区 | 亚洲国产无套无码av电影| 无码一区二区三区爆白浆| 免费无码成人AV在线播放不卡| 亚洲AV无码久久精品狠狠爱浪潮| 亚洲日韩欧洲无码av夜夜摸| 亚洲AV成人无码天堂| 无码人妻一区二区三区在线视频 | 国产午夜av无码无片久久96| 亚洲AV无码成人精品区在线观看 | 无码毛片一区二区三区中文字幕 | 亚洲乱亚洲乱妇无码麻豆| 国产精品成人99一区无码| 国产成人无码免费看视频软件 | 亚洲午夜无码片在线观看影院猛| 久久亚洲精品无码网站| 日韩一区二区三区无码影院| 亚洲大尺度无码无码专区| 中文午夜乱理片无码| 东京热无码一区二区三区av| 亚洲国产精品无码久久九九| 亚洲AV无码不卡在线观看下载| 国产成人无码区免费A∨视频网站| 精品少妇人妻AV无码专区不卡 | 中字无码av电影在线观看网站| 日韩精品专区AV无码| 曰韩人妻无码一区二区三区综合部|