你應該避開的 3 個響應式 Web 設計的陷阱

oschina發表於2013-06-01

  設計師們無法迴避移動裝置的大勢所趨,當然在網站設計上有大量新的概念來迎合移動裝置。但是單獨的網站,無法在移動裝置層出不窮的大潮中站穩腳跟。無論是在個人電腦、筆記本、智慧手機、平板電腦、大螢幕手機、智慧電視、上網本以及其它有前景的裝置,都需引人入勝的設計。

  響應式佈局是這種情況下唯一理智的方式。

  儘管不是所有人確信響應式Web設計是未來的方向,但是響應式Web設計已經獲得全世界Web設計師的廣泛支援。 而我們許多人還是通過簡單使用響應式Web設計來解決不同大小螢幕的佈局問題——這解決了普通設計量使用者體驗差的問題。在我頭幾個響應式Web設計專案中,按我的工作方式已經犯了很多錯誤。 這裡有我或其他響應式網頁設計師曾經犯的3個錯誤。 

  陷阱 1: 網站載入時間過長

  構建響應式網站的缺點之一是你被迫將太多的資源壓縮在一個頁面中。你需要這些資源以便在不同裝置上展示你的網站。大部分響應式網站在頁面載入之前首先載入這些資源。毫無疑問,這個過程需要耗費大量時間。

  針對大部分使用筆記本、PC訪問你網站的使用者來說,似乎沒什麼問題。但如果在智慧手機載入你的網站需要5至7秒之久,那麼你將失去大量使用者。智慧手機使用者不喜歡等,即便是1秒鐘——短短的等待將產生致命的後果。所以,如何處理該問題呢?參照最佳實踐,刪減贅餘,使用conditional loading這樣的先進技術。

  陷阱 2: 為小螢幕裝置刪減內容

  為智慧手機提供更少的內容,已被廣泛採納。故意為移動使用者提供低質量的使用者體驗,無疑是在折損你網站的利益。實際上,使用者總是在不停地切換裝置來完成各種任務。這就意味著,如果使用者在他們的智慧手機上找不到某一特定內容,那你也就失去了銷售機會。

  更好的解決方案是以一種緊湊的、易於導航的格式顯示所有資訊。在設計中,可能需要花費更多努力,但這是值得去做的。請記住,即便你用CSS隱藏了特定資訊,它仍會被下載的。所以要為移動使用者提供完整的Web體驗,不要丟棄任何東西。

  陷阱 3: 忽視各裝置間的相通之處

  響應式Web設計不僅僅針對PC和智慧手機。在進行設計時,還要考慮到其他的眾多裝置。使用者如何與平板電腦、網際網路電視、智慧手機進行互動,都需要考慮在內。這並不是說你要為所有的裝置建立一個本地化的UI體驗,但你可以根據各裝置的環境為它們建立一個響應式導航,再分別建立出使用者易於理解的設計。

  總結

  雖然響應式Web設計仍處於發展初期,但已經有很多指導和最佳實踐,當你建立可跨裝置工作的設計時可以採用。對於那些希望為使用不同裝置的使用者提供頂尖Web體驗的設計師來說,則需要更多的思考與努力。

  英文原文:3 Top Responsive Web Design Traps You Should Avoid

相關文章