2010/04/05

網頁設計最常犯的 34 項錯誤

翻譯自:
Top 34 Web Design Mistakes
http://www.bootstrike.com/Articles/DesignMistakes/

  1. 不當的使用 Javascript:請見說明
  2. 拼字或文法錯誤。
  3. Flash、Shockwave、Java:無法被搜尋引擎建立所以,下載時間較長。
  4. 建立縮圖:使用 HTML 語法縮小圖片寬度、高度並不能減少流量,必須手動或是使用程式將圖片縮小。
  5. 使用 GIF、Flash 動畫:動畫容易使人分心,也容易惹惱使用者。
  6. 背景音樂、自動播放:想想看當你正在聽卡農時網頁卻播放重金屬音樂,尤其是每次點選子網頁都從頭自動播放。
  7. 分頁、幻燈片模式:把內容放在同一個網頁,不要讓使用者點選「下一頁」以節省時間。
  8. 將 F&Q 的解答分開放在不同網頁上:不要將每個問題獨立放在不同的網頁上,這樣使用者必須一直切換頁面。放在相同的網頁上就好。
  9. 使用高對比文字顏色:請勿使用「黑底黑字」或是「白底白字」。
  10. 螢幕寬度:應考慮 800x600 為最小螢幕寬度,盡可能不要讓瀏覽器出現水平捲軸。
  11. 字型:不要使用其他人沒有的字型,設定方式請見說明
  12. 讓字體能任意放大、縮小:在 CSS 中使用 em 或 %,請見說明
  13. 使用標準、一致的版面設計。
  14. 圖片最佳化:最好能將圖片縮小到四百萬象素以下,螢幕看得清楚也能節省下載時間,原作強力推薦 GIMP 製作縮圖。
  15. 別忘記 title、meta、keyword 標籤:讓使用者方便做紀錄,也讓搜尋引擎建立索引。
  16. 在表單中加入 label 標籤:讓使用者填選更輕鬆,請看說明
  17. 使用 Fieldset 組織表單:讓表單看的更清楚。
  18. 為圖片、超連結加上說明:在圖片加上 alt 屬性、超連結加上 title 屬性,可在滑鼠游標旁顯示註解。
  19. 進站畫面:好能在 Flash 動畫旁加上「進入本站」或是「略過」的超連結,不要強迫使用者看完影片,搜尋引擎也能建立索引。
  20. 回饋連結及頁面:在網頁上放置 email 聯絡方式,並在伺服器上處理郵件,避免使用者畫面跳出 Outlook 等視窗。
  21. 檔案命名方式:盡量以英文小寫命名,特殊字元會造成使用者存檔時的不便,如空白會變成「%20」
  22. 文字區塊:文章段落中間最好留幾行空白,文字與邊框應保留間隔距離。
  23. 禁止右鍵選單:不要在網頁上使用 Javascript 禁止使用者按滑鼠右鍵,要讓網頁、圖片不被其他人取用:請不要放到網路上!
  24. 使用頁框:頁框中的內容並不會儲存到書籤,造成使用者的困擾。
  25. 文字底線:不要在沒有超連結的文字上加底線,改用其他方式強調,請看說明
  26. 不同檔案類型的特性:壓縮率、串流等特性。
  27. 彈跳視窗:不要讓超連結跳出新視窗,也不要在新視窗放廣告,這樣只會讓使用者厭惡。
  28. AJAX:在 IE6 上面執行 AJAX 仍需要使用到 ActiveX,直到 IE7 才將 XMLHTTP object 獨立出來
  29. 背景顏色:不要假設所有使用者預設的背景都是白色,請自行加上背景顏色設定
  30. 網頁測試:針對各種瀏覽器以及各種情況做測試,請見說明
  31. 友善的介面但無法調整:讓所有的設定值都可以被調整,以免發生字體變大但是行距不變的情況。
  32. 偵測到不支援 Javascript 時強制重新導向:使用 noscript 標籤來告知使用者,不要重新導向到其他頁面或是跳到瀏覽器更新頁面。
  33. 不支援列印格式或列印預覽:可在 CSS 設定列印專用樣式,隱藏目錄及導覽列可以在列印時節省紙張。
  34. 不支援基本搜尋功能:在網站上放置搜尋欄位,讓使用者可以搜尋整個網站。

如有翻譯不當的地方,請大家多多指教。謝謝!

2 則留言:

  1. 第五點:惹腦 => 惹惱

    回覆刪除
  2. 已更正
    十分感謝!

    回覆刪除