網(wǎng)站設(shè)計(jì)：把握5元素，讓頁(yè)面文字閱讀更舒適

上網(wǎng)在線閱讀，是大多人獲取信息的重要途徑。用戶會(huì)在網(wǎng)上閱讀到大量的新聞及各類(lèi)文章，特別是網(wǎng)絡(luò)小說(shuō)，這些頁(yè)面展示的主體就是通篇大段的文字。對(duì)于這種看似簡(jiǎn)單的文字堆砌的頁(yè)面，有沒(méi)有人抱怨過(guò)："這樣的頁(yè)面還需要出效果圖?。?quot;作為網(wǎng)頁(yè)設(shè)計(jì)師的你是怎樣處理這樣的界面的？
  
  是習(xí)慣性的使用宋體字或者微軟雅黑？
  是直接設(shè)為12px或者14px的字號(hào)？
  你有想過(guò)為什么要使用這種字體、字號(hào)嗎？
  你有考慮過(guò)文字排布與閱讀效率的關(guān)系嗎？
  你的頁(yè)面背景會(huì)影響到用戶的瀏覽舒適度嗎？ 

 讓我們從以下5個(gè)元素具體分析。 

  

 字體和字號(hào)這兩個(gè)元素必須捏在一起說(shuō)。 

 字體分為襯線體（serif）與非襯線體（sans serif）。簡(jiǎn)單的說(shuō)，襯線體（serif）就是帶有襯線的字體，筆畫(huà)粗細(xì)不同并帶有額外的裝飾，開(kāi)始和結(jié)尾有明顯的筆觸（如下圖）。常用的英文襯線體有Times New Roman和Georgia，中文即是我們?cè)趙indows下最常見(jiàn)的中易宋體。 

 與襯線體相反，無(wú)襯線裝飾，筆畫(huà)粗細(xì)無(wú)明顯查差異的字體就是非襯線體（sans serif）。Arial、Helvetica、Verdanad都是我們熟悉的英文非襯線體，中文有微軟雅黑和mac下默認(rèn)的中文－華文細(xì)黑。 

  

 在過(guò)去，普遍認(rèn)為有筆觸裝飾的襯線體，可提高辨識(shí)度和閱讀效率，更適合做為閱讀的字體。多用于報(bào)紙、書(shū)籍等印刷品的正文。非襯線體飽滿醒目，常用做標(biāo)題或者用于較短的段落。 

 很長(zhǎng)一段時(shí)間里，在互聯(lián)網(wǎng)上我們會(huì)注意這樣的一個(gè)現(xiàn)象，國(guó)外網(wǎng)站大部分以非襯線體為主，而中文網(wǎng)站基本就是宋體。其實(shí)不難理解，襯線字體筆畫(huà)有粗細(xì)之分，很小字的情況下細(xì)筆畫(huà)就被弱化，受限于電腦的分辨率，10-12px的襯線字體在顯示器上是相當(dāng)難辨認(rèn)的（見(jiàn)下圖）；同字號(hào)的非襯線體筆畫(huà)簡(jiǎn)潔而飽滿，更適于做網(wǎng)頁(yè)字體。windows下，中文宋體小字點(diǎn)陣的特性，12px、14px的字號(hào)顯示仍然相當(dāng)清晰美觀，便于閱讀。這也就是為什么大多網(wǎng)頁(yè)設(shè)計(jì)制作人員容易機(jī)械性的選用特定字號(hào)或英文或中文的字體。 

 如今隨著顯示器越來(lái)越大，分辨率越來(lái)越高，經(jīng)常會(huì)覺(jué)得看12px的文字有點(diǎn)吃力，做為設(shè)計(jì)師也會(huì)不自覺(jué)的開(kāi)始大量使用14px的字體，而且越來(lái)越多的網(wǎng)站開(kāi)始使用15、16px甚至18px以上的字號(hào)做正文文字。大字號(hào)的使用，對(duì)英文字體來(lái)講，襯線體的高辨識(shí)度和流暢閱讀的優(yōu)勢(shì)就體現(xiàn)出來(lái)了。中文宋體在顯示14號(hào)以上字體時(shí)，單線條大字總是看上去有些單薄不那么協(xié)調(diào)，特別是這款點(diǎn)陣字在ClearType（http://baike.baidu.com/view/755822.htm） 強(qiáng)制平滑顯示狀態(tài)下尤其顯得模糊不清。微軟雅黑就是微軟在這個(gè)字體顯示問(wèn)題上的解決方案。 

 讓我們分別對(duì)比下中英文的襯線體與非襯線體在不同字號(hào)時(shí)的顯示效果。 

 英文以Times和Verdanad為例，中文以宋體和微軟雅黑為例。 

  

  

 我們隨手拿起一本書(shū)或者一份報(bào)紙，數(shù)一數(shù)每行的文字，一般情況下都不會(huì)超過(guò)40個(gè)漢字。這是因?yàn)槿绻啃形淖诌^(guò)長(zhǎng)，讀者會(huì)不停的轉(zhuǎn)動(dòng)脖子，感到疲憊的同時(shí)也會(huì)降低閱讀效率；目光從行尾移至下一行首，也很容易串行，影響讀者瀏覽文章的節(jié)奏。這點(diǎn)同樣適用于網(wǎng)頁(yè)上的文章閱讀。由于顯示器是橫向的，我們更要注意劃分閱讀區(qū)域。 

 文本寬度控制在450-700px為宜，此范圍內(nèi)參照字號(hào)大?。?br />   英文每行80-100個(gè)字母（空格算一個(gè)字母）為宜；
  中文每行30-40個(gè)漢字為宜。 

 通過(guò)設(shè)置間距，我們就可以控制文字的密度。如果每行間距太小，與文字過(guò)長(zhǎng)一樣，讀者瀏覽文章時(shí)也容易串行；如果行距過(guò)寬，閱讀時(shí)就會(huì)感覺(jué)文章不夠連貫。 

 間距沒(méi)有固定的值，通常是根據(jù)字體大小來(lái)定義的。在word里我們?？吹诫p倍行距、單倍行距和1.5倍行距的選項(xiàng)。網(wǎng)頁(yè)上行距的單位常用em來(lái)表示，不管是中文網(wǎng)站還是英文網(wǎng)站，大家多喜歡用1.5em－1.8em的行距。以1.6em的行距為例，字號(hào)16px的字，行距就是25.6px。 

 如（圖）所示，1.5-1.8em的行距的確是非常適于閱讀的文字密度。 

 關(guān)于段距，我們要考慮一下具體實(shí)際情況。比如文章篇幅較短，就不需要很寬的段距；二文章篇幅很長(zhǎng)，特別是那些偏學(xué)術(shù)的比較枯燥的文章，就要多利用段距把握文章的節(jié)奏，給閱讀者喘息和思考的機(jī)會(huì)，且使文章更有層次和可讀性。 

  

 白色是全頻光，全放射光對(duì)人眼睛的最有刺激，所以很多印刷品讀物的紙張都選用乳白色或者淡黃色的紙張。由于顯示器本身就發(fā)光，所以同是純白色背景的文字，在電腦上比在紙上閱讀會(huì)使眼睛更容易疲乏，另有研究表明：在電腦上閱讀只有在紙上閱讀速度的78%，閱讀效率大大減低。因此，為了提高頁(yè)面瀏覽的舒適度和效率，越來(lái)越多的頁(yè)面采用淺灰色和淡黃色做為頁(yè)面背景。 

 另外，印刷品以文字為主的出版物往往會(huì)采用低光澤度的紙張，也是因?yàn)楣鉂啥雀叩募垙埛瓷涠雀?，?dǎo)致閱讀質(zhì)量下降，容易使人視覺(jué)疲勞。頁(yè)面背景仿造低光澤度的紙張（紙張紋理）也能否提高閱讀的舒適度呢？ 

 我曾做過(guò)這樣一個(gè)小調(diào)研，同樣一段文字放在不同顏色的背景上（僅考慮自然光源），其中有兩個(gè)背景加了紙張紋理的效果。結(jié)果75%的人認(rèn)為帶有紙張紋理的背景長(zhǎng)時(shí)間閱讀舒適度最高。 

  

 結(jié)語(yǔ)：實(shí)際工作中，我們需要思考的更多，僅僅這5個(gè)元素是不夠的。瀏覽環(huán)境、設(shè)備、網(wǎng)站特點(diǎn)、用戶人群、個(gè)人偏好等等都需要設(shè)計(jì)師根據(jù)具體情況來(lái)把握界面文字的展示效果。差別也許是細(xì)微的，就像蝴蝶效應(yīng)，多一點(diǎn)點(diǎn)的思考，就能為用戶帶來(lái)更好的體驗(yàn)感受。