100%容易閱讀的標準

譯自Information Architects Japan網站上的一篇文章，有興趣讀原文或看看它的排版的可點擊下行標題連結。

The 100% Easy-2-Read Standard

許多網站愛用一堆難以閱讀的小字將畫面填滿，為什麼？

別告訴我們滿滿的畫面比較好看：擁擠的畫面一點兒也不好看，它只顯得雜亂。

別告訴我們許多連結很有幫助：放上一堆的連結並不會更實用。把一堆連結扔給我們是懶惰的表現。你得去思考什麼是重要的再呈現給我們，而不是要我們幫你幹這些事。

別告訴我們可以自行調整字型：我們並不想進入每個網站都得調整瀏覽器設定。

別告訴我們捲動畫面不好：若是那樣，那沒有任何網站是好的。捲動畫面沒有什麼不對，完完全全沒有。就好像看書要翻頁一樣天經地義。

別告訴我們文字無關緊要：通常網站設計的95%是關於排版。（譯注：這裡有本文的中譯）

別告訴我們該載眼鏡了：與其把臉貼到螢幕上，我們寧可靠著後背輕鬆的閱讀。

把所有資訊填滿螢幕並沒有道理。尤其在使用者只有小螢幕的時候，這麼做只是件愚蠢的事。

1. 長篇文章使用標準字級

你正在讀的這段文字字型並不大。它正是瀏覽器預設的大小。也正是瀏覽器設計來顯示的字型大小。（譯注：大小請見原文的網頁。本Blogger原始版型字型對於舒適的閱讀仍嫌太小，而經過我調整後的字型則較瀏覽器預設顯示的中文字略大。）

我們不想再去按放大、縮小鍵，或是更改瀏覽器的預設值。我們要的是直接的閱讀。我們要你先將字型調成適合閱讀的大小。

一開始用較大的字型來設計版面或許比較困難，但能幫助你設計出一個清爽易讀的網站。把網站填滿資訊很容易，要讓網站方便使用卻很難。一開始你或許會覺得文字太大，但不久你就不會想再看到比100%或1em還小的文字了。一開始或許看來大了些，但使用後你就會知道為什麼瀏覽器把它作為預設的大小了。

2. 提供空白

“欄寬必須與字體大小呈適當的比例。過長的欄寬容易使眼睛產生疲倦感，在心理上也有不好的效果。過短的欄寬則不停打斷閱讀，使讀者在閱讀時過於頻繁的換行。” Josef Brockmann, Grid Systems

讓文字能夠呼吸。空白並不是設計者的罪惡，也無關品味。留白可以降低閱讀時的壓力，讓注意力更容易集中在內文上。你並不須要把整個視窗給填滿。空白更容易閱讀並不是什麼副作用，而是好的設計的功效。誰說網站就非要填滿東西？

Brookmann:“欄寬的設定不光是設計上或排版上的問題；易讀性為相同重要的考量。”

文字的行長（即文字欄的寬度）不宜太長，並在左右都留一些空間讓眼睛更易於換行。我們不想調整字型或視窗的大小。當我們打開一個網站希望的是可以直接閱讀。比例適當的欄寬讓網站更好讀，而行長超過螢幕的文字則相反。

基本的原則是：每行10-15個英文字，如果是液態佈局（譯注：liquid layouts，欄寬會自動隨視窗大小而調整的設計），字級100%、欄寬50%（相對於視窗的寬度）對大於多數的螢幕解析度都是不錯的標準。

3. 適合閱讀的行高

以下是專家的說法：

「太窄的行距會降低閱讀的速度，因為上下行會使眼睛的注意力分散而無法專注在正閱讀的文 字上…讀者將精力分散在其他地方，也更容易造成疲倦；當行距太寬時亦然。」

HTML語言所預設的行距略小。如果你將行距調大一些會使文字比較容易閱讀。將行距調為140%左右是不錯的選擇。（譯注：出版經驗豐富的老貓建議理想的中文行距在160%-170%）

4. 清晰的顏色對比

這應該是不用多加解釋的。但是如果你打算用以下任一種配色：

1. 使用淺灰色文字在更淡的淺灰色背景上
2. 使用「銀白」的文字在雪白的背景上
3. 使用黃底灰字
4. 使用紅底黃字
5. 使用紅底綠字…等等

…那麼你絕對不是什麼好的設計者，而是過於自負的那種。如果你還堅持非要設計的話，你最好先知道一下，沒有人能夠讀懂你的網站上的東西，捨棄那些配色讓大家看懂你的文字吧。注意：對於螢幕上太強烈的對比色（全部使用黑與白）也並非最理想的配色，那會使文字閃爍不定。建議使用#333的文字在#fff的背景上。（譯注：即用白底配上深灰色的字）

5. 不用圖顯示文字

我們要能夠搜尋、複製與儲存文字，當閱讀時能使用滑鼠來作記號。使用圖片檔的文字看起來可能比較漂亮，但漂亮並不是網路的重點。網路講的是交流與資訊，而資訊必需是可以閱讀、可以使用、可以調整、可以引用也可以轉寄的。

如果你非使用圖片型式的文字才能使網站美觀的話，恐怕你得從頭學起了。