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

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

互聯網的(of)飛速發展使我(I)們(them)每天在(exist)網頁上(superior)花費越來(Come)越多的(of)時(hour)間。 網頁設計的(of)重要(want)性不(No)言而喻。 本文的(of)作(do)者以(by)閱讀網頁設計爲(for)例，讨論一(one)些需要(want)特别注意的(of)方面，希望對您有所幫助。

  最近，我(I)負責一(one)個(indivual)知識型社區的(of)修訂，其中之一(one)是(yes)增強讀者在(exist)網絡上(superior)的(of)閱讀體驗。 在(exist)研究了(Got it)一(one)些網站的(of)設計規範并查閱了(Got it)一(one)些文檔之後，結合我(I)自己的(of)想法，我(I)總結了(Got it)以(by)下幾點以(by)供參考。

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

  下一(one)張一(one)張

  字型：

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

  檢查信息，襯線字體更具表現力，可以(by)提高識别和(and)閱讀效率。 它們(them)主要(want)用(use)于(At)報紙，書籍和(and)其他(he)印刷材料，以(by)及電子雜志和(and)藝術網站中的(of)文字字體。

  在(exist)電子屏幕上(superior)顯示時(hour)，由于(At)字體大(big)小，顯示大(big)小和(and)顯示分辨率等因素的(of)影響，使用(use)襯線字體時(hour)，過細的(of)筆劃可能顯示不(No)清晰且難以(by)識别。

  從審慎的(of)角度來(Come)看，這(this)可能是(yes)主要(want)網站使用(use)非serif字體作(do)爲(for)首選字體的(of)原因。

  建議使用(use)以(by)下字體：

  蘋果系統

  中文：首選平芳定期第二選擇冬青黑簡化。

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

  視窗

  中文：首選Microsoft Yahei第二選擇Holly Black簡化。

  英文：Arial偏愛Tahoma。

  字體大(big)小：

  字體太小，看不(No)到(arrive)疲倦的(of)眼睛，頁面太細膩，顯示效率低。

  顯示屏上(superior)顯示的(of)單詞大(big)小取決于(At)字體大(big)小和(and)單個(indivual)像素正方形的(of)物理大(big)小。 單個(indivual)像素塊的(of)大(big)小取決于(At)顯示大(big)小和(and)顯示分辨率。

  随着顯示技術的(of)發展，在(exist)不(No)增加顯示器尺寸的(of)情況下，顯示器的(of)分辨率越來(Come)越高，這(this)意味着單個(indivual)像素塊的(of)物理尺寸越來(Come)越小，因此在(exist)設計時(hour)建議使用(use)的(of)字體大(big)小 網絡端也越來(Come)越大(big)，從12px到(arrive)14px到(arrive)16px。

  爲(for)了(Got it)穩定起見，建議在(exist)文本中使用(use)16px。 基于(At)此，在(exist)擴展和(and)縮小之後确定标題和(and)輔助文本的(of)大(big)小。 建議使用(use)4px作(do)爲(for)步長，以(by)使對比度明顯。

  字符顔色和(and)背景顔色：

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

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

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

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

  行寬：

如果行寬太大(big)，則在(exist)閱讀時(hour)應轉過脖子以(by)降低閱讀效率，并且很容易從行尾到(arrive)下一(one)行的(of)開頭對眼睛進行序列化。 如果線寬太小，則用(use)戶的(of)注視點必須在(exist)線之間頻繁跳動，這(this)會降低讀取速度，并且體驗不(No)好。 爲(for)了(Got it)防止這(this)種現象，文本的(of)寬度最好在(exist)450-700像素之間。

  在(exist)确定特定值時(hour)，應注意，線寬應爲(for)正文本符号的(of)整數倍。 這(this)是(yes)因爲(for)中文是(yes)方形字符。 最好的(of)排版應該像小學時(hour)的(of)文字一(one)樣。 每列單詞應對齊。 除了(Got it)最後一(one)行，每行都應填充以(by)使其整齊。

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

  如果使用(use)兩端對齊，則可以(by)避免這(this)種情況。 但是(yes)，合理性還有另一(one)個(indivual)問題。 段落的(of)最後一(one)行不(No)一(one)定充滿行。 當最後一(one)行不(No)滿行且行寬不(No)是(yes)正字符大(big)小的(of)整數倍時(hour)，爲(for)了(Got it)實現對齊，第一(one)行将增加單詞間距，但最後一(one)行不(No)會增加單詞間距 。 這(this)樣，最後一(one)行的(of)每個(indivual)單詞都無法與其所在(exist)的(of)列對齊。

  如果行寬是(yes)正字符數的(of)整數倍，則可以(by)避免這(this)種情況。 實現兩端的(of)對齊而不(No)留空白，每個(indivual)列的(of)對齊就像閱兵一(one)樣。

  左對齊

  證明

  行間距：

  行距太小，有松緊和(and)透氣的(of)感覺。 讀者在(exist)浏覽文章時(hour)可以(by)輕松地(land)序列化； 如果行距太大(big)，他(he)們(them)會覺得文章不(No)連貫，頁面也不(No)夠精緻。  em的(of)單位通常用(use)作(do)網頁上(superior)遊距離的(of)單位。 無論是(yes)中文網站還是(yes)英文網站，大(big)多數都使用(use)1.5em-1.8em的(of)行距。

  段間距：

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

  結論：

  實際上(superior)，純内容的(of)閱讀體驗遠不(No)止于(At)此。 在(exist)實際工作(do)中，環境光，設備尺寸和(and)分辨率以(by)及用(use)戶視覺都應在(exist)設計者的(of)考慮之内。 魔鬼将在(exist)細節上(superior)考慮更多，并改善用(use)戶體驗。