網頁開發的那些小事

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

Image for post
Image for post

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

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

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

Image for post
Image for post
Logo 沒有連結到首頁

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

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

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

Image for post
Image for post
填寫表單時沒有狀態

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

Image for post
Image for post
圖片中沒有 alt 圖片描述信息

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

Image for post
Image for post
背景圖片後面沒有設置背景色

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

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

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

Image for post
Image for post
忽略麵包削的重要性

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

Image for post
Image for post
下劃線的內容並不是連結

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

Image for post
Image for post
沒有做 Form 狀態判斷

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

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

Written by

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store