網際網路的高速發展使得我們每天花在網頁上的時間越來越多，網頁設計的重要性不言而喻。本文作者以閱讀型網頁設計為例，談談哪幾點是需要特別注意的，希望對你有幫助。
最近負責某知識型社群的改版，其中一塊是提升讀者在網頁端閱讀的體驗。在調研一些網站的設計規範和查閱部分文獻後，結合自己的思考，總結如下幾點，以供參考。
一個閱讀型網頁，比如各新聞資訊網站、閱讀型社群、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% 。
結語：
實際上，影響純內容閱讀體驗的遠不止以上這些。實際工作中，環境光、裝置尺寸和解析度、使用者視力等都應該在設計師的考慮範圍內。魔鬼在細節中，多考慮一些，使用者體驗就會提升一些。
參考文獻：
https://www.zcool.com.cn/article/ZNTEyNjMy.html
https://marijohannessen.github.io/color-contrast-checker/
https://zhuanlan.zhihu.com/p/62766232
本文由 @Tzufeng 原創釋出於人人都是產品經理。未經許可，禁止轉載
題圖來自Unsplash，基於CC0協議