關于閱讀網頁設計您應注意以下(xià)幾點

關于閱讀網頁設計您應注意以下(xià)幾點

互聯網的飛速發展使我(wǒ)們每天在網頁上花費(fèi)越來越多的時間。 網頁設計的重要性不言而喻。 本文的作者以閱讀網頁設計爲例，讨論一(yī)些需要特别注意的方面，希望對您有所幫助。

  最近，我(wǒ)負責一(yī)個知(zhī)識型社區的修訂，其中(zhōng)之一(yī)是增強讀者在網絡上的閱讀體(tǐ)驗。 在研究了一(yī)些網站的設計規範并查閱了一(yī)些文檔之後，結合我(wǒ)自己的想法，我(wǒ)總結了以下(xià)幾點以供參考。

  閱讀網頁（例如各種新聞網站，閱讀社區，網絡端閱讀站點等），在删除廣告等幹擾元素後，純内容閱讀體(tǐ)驗将受到以下(xià)因素的影響：字體(tǐ)，字體(tǐ)大(dà)小(xiǎo)， 字體(tǐ)顔色，線條寬度，線條間距，段落間距，背景色。

  下(xià)一(yī)張一(yī)張

  字型：

  襯線或無襯線字體(tǐ)：已經研究了許多網站，所有網站都使用非襯線字體(tǐ)。

  檢查信息，襯線字體(tǐ)更具表現力，可以提高識别和閱讀效率。 它們主要用于報紙(zhǐ)，書(shū)籍和其他印刷材料，以及電(diàn)子雜(zá)志(zhì)和藝術網站中(zhōng)的文字字體(tǐ)。

  在電(diàn)子屏幕上顯示時，由于字體(tǐ)大(dà)小(xiǎo)，顯示大(dà)小(xiǎo)和顯示分(fēn)辨率等因素的影響，使用襯線字體(tǐ)時，過細的筆劃可能顯示不清晰且難以識别。

  從審慎的角度來看，這可能是主要網站使用非serif字體(tǐ)作爲首選字體(tǐ)的原因。

  建議使用以下(xià)字體(tǐ)：

  蘋果系統

  中(zhōng)文：首選平芳定期第二選擇冬青黑簡化。

  英語：Helvetica Neue是第一(yī)選擇，Arial是第二選擇。

  視窗

  中(zhōng)文：首選Microsoft Yahei第二選擇Holly Black簡化。

  英文：Arial偏愛Tahoma。

  字體(tǐ)大(dà)小(xiǎo)：

  字體(tǐ)太小(xiǎo)，看不到疲倦的眼睛，頁面太細膩，顯示效率低。

  顯示屏上顯示的單詞大(dà)小(xiǎo)取決于字體(tǐ)大(dà)小(xiǎo)和單個像素正方形的物(wù)理大(dà)小(xiǎo)。 單個像素塊的大(dà)小(xiǎo)取決于顯示大(dà)小(xiǎo)和顯示分(fēn)辨率。

  随着顯示技術的發展，在不增加顯示器尺寸的情況下(xià)，顯示器的分(fēn)辨率越來越高，這意味着單個像素塊的物(wù)理尺寸越來越小(xiǎo)，因此在設計時建議使用的字體(tǐ)大(dà)小(xiǎo) 網絡端也越來越大(dà)，從12px到14px到16px。

  爲了穩定起見，建議在文本中(zhōng)使用16px。 基于此，在擴展和縮小(xiǎo)之後确定标題和輔助文本的大(dà)小(xiǎo)。 建議使用4px作爲步長，以使對比度明顯。

  字符顔色和背景顔色：

  閱讀體(tǐ)驗受文本和背景之間的對比影響。 高對比度時，識别清晰，但眼睛容易疲勞。 隻有找到合适的對比度，它才能被清晰識别，長時間閱讀并且不容易疲勞。

  第一(yī)個是黑底白(bái)字和黑底白(bái)字。 這對眼鏡本身比較結實，視覺機制（如人眼的側面抑制）會使對比度特别大(dà)，因此很容易識别。 因爲白(bái)色背景上的黑色文本比黑色背景上的白(bái)色文本具有較低的對比度[1]，所以它更具可讀性，适合強調文本閱讀的網站； 黑色背景上的白(bái)色文本具有視覺刺激性，适合視覺表達或創造。大(dà)氣的頁面，例如海報，主題網站的首頁等。此外(wài)，對于有視覺障礙的用戶，這兩種配色方案也更加人性化 選擇。

  但是，黑底白(bái)字不是最好的。 由于白(bái)色的亮度爲100％，黑色的爲0％，巨大(dà)的亮度對比使眼睛在閱讀時必須盡力而爲，這容易造成眼睛疲勞，因此白(bái)色的黑色字符仍然不适合長時間閱讀， 所以印刷品的紙(zhǐ)張主要是乳白(bái)色或淺黃色的紙(zhǐ)張。 由于顯示屏本身會發光，因此在計算機上閱讀白(bái)色背景上的文本比在紙(zhǐ)上閱讀更容易引起疲勞。

  但是，希爾（Hill，1997）的研究表明，黑白(bái)一(yī)直被認爲是最易讀的。 與沒有黑色的顔色組合相比，帶有黑色的顔色組合更易于閱讀； 在較淺的背景上較暗的文本較暗在背景上較淺的文本獲得很高的評價。 因此，更好的組合可能是淺灰色背景+深灰色文本，并保證對比度（大(dà)于4.5）。

  行寬：

如果行寬太大(dà)，則在閱讀時應轉過脖子以降低閱讀效率，并且很容易從行尾到下(xià)一(yī)行的開(kāi)頭對眼睛進行序列化。 如果線寬太小(xiǎo)，則用戶的注視點必須在線之間頻(pín)繁跳動，這會降低讀取速度，并且體(tǐ)驗不好。 爲了防止這種現象，文本的寬度最好在450-700像素之間。

  在确定特定值時，應注意，線寬應爲正文本符号的整數倍。 這是因爲中(zhōng)文是方形字符。 最好的排版應該像小(xiǎo)學時的文字一(yī)樣。 每列單詞應對齊。 除了最後一(yī)行，每行都應填充以使其整齊。

  如果使用左對齊，則可以實現單詞的每一(yī)列都是對齊的（具有半角字符的行将破壞形式），但是當最後一(yī)個字符爲标點符号時，将被直接換行，從而導緻缺少一(yī)行 這條線，這不好。

  如果使用兩端對齊，則可以避免這種情況。 但是，合理性還有另一(yī)個問題。 段落的最後一(yī)行不一(yī)定充滿行。 當最後一(yī)行不滿行且行寬不是正字符大(dà)小(xiǎo)的整數倍時，爲了實現對齊，第一(yī)行将增加單詞間距，但最後一(yī)行不會增加單詞間距 。 這樣，最後一(yī)行的每個單詞都無法與其所在的列對齊。

  如果行寬是正字符數的整數倍，則可以避免這種情況。 實現兩端的對齊而不留空白(bái)，每個列的對齊就像閱兵一(yī)樣。

  左對齊

  證明

  行間距：

  行距太小(xiǎo)，有松緊和透氣的感覺。 讀者在浏覽文章時可以輕松地序列化； 如果行距太大(dà)，他們會覺得文章不連貫，頁面也不夠精緻。  em的單位通常用作網頁上遊距離(lí)的單位。 無論是中(zhōng)文網站還是英文網站，大(dà)多數都使用1.5em-1.8em的行距。

  段間距：

  點。 如果文章短，則無需較大(dà)的段落間距； 如果文章很長，則最好使用段落間距分(fēn)隔文章的節奏，使讀者有機會進行思考和思考，并提高文章的可讀性。 經驗值是段間距通常爲行間距的75％。

  結論：

  實際上，純内容的閱讀體(tǐ)驗遠不止于此。 在實際工(gōng)作中(zhōng)，環境光，設備尺寸和分(fēn)辨率以及用戶視覺都應在設計者的考慮之内。 魔鬼将在細節上考慮更多，并改善用戶體(tǐ)驗。