2010年11月1日 星期一

簡易網頁設計理論

許多網站填滿了難以閱讀的小字,為什麼要這樣呢?

不要說擁擠的頁面看著好
擁擠的網站絕不舒服,它們看上去讓人噁心。

不要說大量鏈結更有用
往頁面上塞滿東西對易用性沒有幫助。你扔出這麼多東西的唯一原因只是懶惰。我們希望你能想一下什麼是重要的,並預先做出選擇;這不是我們的事。

不要說捲軸不好
因此所有網站都不好。捲軸並沒有錯,就像看書時翻頁沒錯一樣。

不要說文字不重要
95%的網站設計工作其實就是排版。

不要說帶上眼鏡再看
還是不要舔螢幕了,往後靠找個舒服的姿勢更好。

沒有任何理由往螢幕上塞那麼多東西。這只是個愚蠢的錯誤。

1. 長篇文字要用標準的字體
原站上的字體尺寸不大,它是流覽器缺省的大小,也就是流覽器希望用來顯示的大小。

我們不想點更大或更小按鈕,也不想修改流覽器選項。我們只想直接閱讀。我們希望你根據我們的設置來調整,而不是其他途徑。

用大字體來設計一個好看的佈局是挺難的,但這個困難能幫助您設計一個更簡單更清晰的網站。在網站上塞滿東西不難,把它搞簡單並且易用,這很難。一開始你會想這缺省的字體真大,但過上一天,你就不會想看任何小於100%1em的字體。它開始看上去是大,但一旦你用了它,你會很快明白為什麼流覽器設計者們會選擇這個尺寸做為缺省值。

2. 活動的空白
讓你的文字呼吸。讓你的讀者呼吸。用空白不是設計者的怪癖,它也無關品味。讓文字周圍充滿空氣可以降低緊張度,也讓人更容易把精神集中在重要的內容上。你不需要把整個視窗都填滿。更漂亮的空白不是副作用,而是功能性設計的自然結果。誰說網站一定要塞滿東西呢?

請確保行寬(或欄寬)不要太大,左右都加上空白會讓眼睛更輕鬆。我們不想調整字體大小,也不想調整視窗大小。打開一個網站,我們只想讀一下。可調整的欄寬也不錯,但文字橫跨整個螢幕就不好了 SEO

基本規則:每行10-15個字。對流動佈局來說,100%的字體大小,50%的欄寬(和螢幕有關)對多數解析度都是個不錯的基準。(我想應該是500-600圖元寬)

3. 讀者友好的行距
閱讀專家這樣說:“太小的行距會影響閱讀速度,因為眼睛會同時看到上一行和下一行,於是就不能聚焦......讀者會在錯誤的地方發更多精力,也更容易疲勞。同樣,行距太大也有同樣的問題。”

缺省的HTML行距太小,如果能增加一點,文字就會更易讀。140%是個不錯的基準。

4. 清晰的色彩對比
這甚至不用再說。但如果你還在用下面這些對比:
* 淺灰色文字,更淺的灰色背景
* 銀色的文字,雪白的背景
* 灰色文字,黃色背景
* 黃色文字,紅色背景
* 綠色文字,紅色背景等等

那麼你就不是個網頁設計師(Web Design),只是裝個樣子罷了。如果你堅持你是,你就必須注意到如果沒有人能讀你說的話,就沒人知道那是什麼。停止這種荒謬的設計,讓我們看看你寫了些什麼。注意:對螢幕設計來說,太強的對比(全黑全白)並不理想,或者文字閃爍也不好。基準:#333的文字,#fff的背景。(這個漢字似乎還不一樣,現在正常的字體還是點陣更清楚,全黑全白也完全可接受)

5. 不要把文字做在圖片裏
我們希望能搜索、拷貝、保存你的文字,在閱讀時還想用游標來標記它。圖片中的文字看上去很漂亮,但漂亮不是WEB需要的,它需要的是交流、資訊,而資訊需要可閱讀、可用,可擴展,可引用以及可以發送。

如果你不用這個圖片文字,就不能把網站變得漂亮,恐怕你得從頭開始設計了


沒有留言:

張貼留言