網頁開發的那些小事

徐桃花 Flora
Aug 23, 2017 · 4 min read

在開發網站常常會忘記的小事情,雖說是小事情但是好像也很重要

不一致的界面設計

有些設計師為了提高網頁水平,為網站中的每個網頁都設計了不同的設計。但是這只會混淆用戶,會讓使用者不知所措。

  1. 每個頁面使用標準一致的 Style Guide 。
  2. 關鍵字要簡單。設計應該美觀簡潔,這樣用戶在使用時才不會困惑。
參考資料:https://dribbble.com/shots/2544546-UI-Style-guide

Logo 沒有連結到首頁

使用者點選 Logo 到首頁已經是反射動作了,還有 Logo 放在左上角也是已經是反射動作了

Logo 沒有連結到首頁

表單的 label 標籤跟表單文字沒有關聯

for 屬性允許用戶單擊 label 也可以選中表單中的內容,可擴大復選框和單選框的點擊區域。

表單的 label 標籤跟表單文字沒有關聯

填寫表單時沒有狀態

使用 :focus 展現選中的文本區域處於動態中。

填寫表單時沒有狀態

圖片中沒有 alt 圖片描述信息

在 SEO 使用 alt 可讓 google 搜尋到這張照片所要提供的照片,加說明性的 alt 屬性到圖片上。
如果是使用圖片作為鏈接點,那麼可以輸入鏈接地址。

圖片中沒有 alt 圖片描述信息

背景圖片後面沒有設置背景色

內容文字後面使用背景圖片是很普遍的,但是同時要考慮到如果背景圖片被客戶端所禁用的情況,所以最好背景圖後面再設置一個相似色調的背景顏色,以免文本變得不可閱讀。

背景圖片後面沒有設置背景色

無法區分是否已經訪​​問過該鏈接

有點選過連結狀態與沒有點選過的狀態應該要有區別,讓用戶直觀地明白哪個鏈接已經點擊過了。

無法區分是否已經訪​​問過該

忽略麵包削的重要性

麵包屑設計可以讓瀏覽者更快的跳換不同層級的頻道,也能夠讓搜尋引擎藉此瞭界頁面的層級關係

忽略麵包削的重要性

下劃線的內容並不是連結

帶有下劃線的內容很容易被當成鏈接,不要隨便地在文字中加上下劃線,這樣會讓人困惑。

下劃線的內容並不是連結

沒有做 Form 狀態判斷

在做表單的時候其實有很多判斷,往往被設計師忽略,導致工程師自行製作,常與製作版面不符合。

沒有做 Form 狀態判斷

網頁速度過慢

為了讓網站美觀放了許多的設計圖片,卻忽視帶來網站的速度,根據Google提供的一份報告指出,當使用這瀏覽行動版頁面超過3秒的話,有53%的人會離開,可見網站速度影響的不僅僅是搜尋排名還有使用者體驗。

https://www.thinkwithgoogle.com/marketing-resources/data-measurement/mobile-page-speed-new-industry-benchmarks/

)

    徐桃花 Flora

    Written by

    Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
    Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
    Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade