DIV CSS 佈局教程網

 DIV+CSS佈局教程網 >> 網頁腳本 >> WEB網站前端 >> 關於網頁技巧 >> 改善網站可讀性的30個事
改善網站可讀性的30個事
編輯:關於網頁技巧     

網頁制作poluoluo文章簡介:什麼是網站設計中最重要的一個環節?很多人會回答是網站的可讀性,怎麼樣才能使你的內容更容易閱讀。

什麼是網站設計中最重要的一個環節?很多人會回答是網站的可讀性,怎麼樣才能使你的內容更容易閱讀。

讀者來到你的網站是在閱讀他們關心的內容,如果文章的內容被設計所掩蓋,導致讀者難於閱讀,這樣只會使他們遠離你的網站。

那麼我們可以做些什麼來改善網站的可讀性,使那些讀者留下來繼續閱讀呢?

原文鏈接:30 Ways to Improve Readability

你現在就可以做的 30 件事情

  1. 為你的鏈接添加下劃線。讀者期待看到帶有下劃線的鏈接,因此不要讓他們失望。
  2. 為段落中的文字使用適當的行高。一種快速、簡單的方法,用段落中字體的大小來測算行高。較為理想的情況是行高大約為字體大小的1.5倍。
  3. 在設計中明確區分你發表的內容。你發表的內容從哪裡開始,到哪裡結束都應該是顯而易見的,其它諸如側邊欄、文章評論、文章附加信息等模塊應該在視覺上有別於實際內容。
  4. 如果你使用Pull-quotes,要保證這部分內容明顯,並處於靠近文章頂部的地方。如果用戶沒有很快地識別它們,那它們就沒有什麼用處。
  5. 保持簡短。同樣的意思,你用書面文字寫出來需要50個字,但是用嘴說的話可能只需要30個字。
  6. 文字與背景的對比度。使用Snook's 的Color Contrast Checker檢測網頁的文字與背景的顏色,確保那些有視覺障礙的用戶也可以正常閱讀你的內容。
  7. 為你的文檔使用結構層次。例如:文章標題——介紹——正文標題——內容——副標題——內容,這樣會讓你的網頁更符合邏輯流程。
  8. 避免在中間插入廣告破壞文章的完整性,這樣做會打斷讀者的思路。
  9. 為以斜體和粗體顯示的文字應用樣式時,不要改變它們的顏色。這樣做容易讓讀者混淆,會讓他們停下來思考:這是不是一個鏈接?
  10. 使用語義標記。比如為文章的標題使用<h1> ,<h2> ,<h3> 等標簽來突出它們。可能你的讀者當中有很多人在使用新聞聚合器閱讀你的內容,諸如<span class=”myheading”> 這樣的標簽對他們而言是不會顯示任何效果的。
  11. 在開始的文章上使用貼圖。這樣做的目的是為了吸引讀者的注意,通常會在最頂部的文章上應用貼圖。
  12. 避免整塊的文本。沒有什麼能比像一面牆一樣的文字更能嚇跑訪問者的了。
  13. 將文本居左對齊通常是最好的選擇。我們很少能看到將文字居中或兩邊對齊的示例(標題除外),而將文字居右對齊我想在任何時候都不是一個最好的選擇。
  14. 文本繞圖。這主要取決於你如何將文本環繞在一個圖像旁,你可以重新考慮文字的措辭,也可以調整圖像的大小。
  15. 文章標題和副標題必須突出。這樣做的一個好處是可以讓讀者在第一時間了解這篇文章標題下面的內容是什麼。使標題突出顯示要做的工作只是使用更大的字體,為字體添加下劃線、更改顏色等。
  16. 了解何時使用有序列表,何時使用無序列表。如果你的項目列表有一個特定的順序,最好用數字給它們添加編號。
  17. 縮進列表。用以表明它們不僅僅是多個段落。
  18. 圖像居中。如果有一些特定圖片是你文章中無法劃分出來的一部分(比如流程圖、統計圖),最好把這些圖像居中顯示,並在圖像前後指定一條分隔線。
  19. 創建一個打印樣式表。記住並不是所有的讀者都在電腦屏幕上閱讀你的文章,建立一個打印樣式表保證你的文章在紙上的效果同樣出色。
  20. 選擇通用字體。在你決定使用何種字體後,最好再選擇一種人人都有的通用字體。
  21. 添加補充內容時最好與原文章空開一些距離。
  22. 突出的句子使用相同的字體大小。改變字體大小,將改變該行的高度,打亂頁面布局。
  23. 不要把正文中所有文字設置成使用全部大寫。僅針對英文。
  24. 不要在鏈接上使用SnapShots
  25. 使文章內容保持一個合理的寬度。浮動布局常常會使文章的內容超出屏幕之外,使人無法閱讀。
  26. 太多的段落總比太少的段落要好。在紙上寫作時,通常每一段話有4-5個句子組成;而在網絡上,每個段落有2-3句話組成是更加常見的。這樣做是為了使段落呈現在一個漂亮的容易理解的小塊中。
  27. 保持側邊欄的短小。
  28. 分頁。如果你為一篇文章使用分頁樣式,要保證文章的導航是清晰且易於使用的。
  29. 使用淡化的顏色。為一些非關鍵信息使用淡化的顏色,比如發表時間、作者等。此外,淡顏色的線條不太會引起人的注意。
  30. 使用<acronym>標簽。為一些縮寫詞使用<acronym>添加說明,並不是所有的讀者都了解縮寫詞的含義。<acronym> 的常規樣式中在縮寫詞下面加一條虛下劃線。

XML學習教程| jQuery入門知識| AJAX入門| Dreamweaver教程| Fireworks入門知識| SEO技巧| SEO優化集錦|
Copyright © DIV+CSS佈局教程網 All Rights Reserved