你應該避開的 3 個響應式 Web 設計的陷阱
設計師們無法迴避移動裝置的大勢所趨,當然在網站設計上有大量新的概念來迎合移動裝置。但是單獨的網站,無法在移動裝置層出不窮的大潮中站穩腳跟。無論是在個人電腦、筆記本、智慧手機、平板電腦、大螢幕手機、智慧電視、上網本以及其它有前景的裝置,都需引人入勝的設計。
響應式佈局是這種情況下唯一理智的方式。
儘管不是所有人確信響應式Web設計是未來的方向,但是響應式Web設計已經獲得全世界Web設計師的廣泛支援。 而我們許多人還是通過簡單使用響應式Web設計來解決不同大小螢幕的佈局問題——這解決了普通設計量使用者體驗差的問題。在我頭幾個響應式Web設計專案中,按我的工作方式已經犯了很多錯誤。 這裡有我或其他響應式網頁設計師曾經犯的3個錯誤。
陷阱 1: 網站載入時間過長
構建響應式網站的缺點之一是你被迫將太多的資源壓縮在一個頁面中。你需要這些資源以便在不同裝置上展示你的網站。大部分響應式網站在頁面載入之前首先載入這些資源。毫無疑問,這個過程需要耗費大量時間。
針對大部分使用筆記本、PC訪問你網站的使用者來說,似乎沒什麼問題。但如果在智慧手機載入你的網站需要5至7秒之久,那麼你將失去大量使用者。智慧手機使用者不喜歡等,即便是1秒鐘——短短的等待將產生致命的後果。所以,如何處理該問題呢?參照最佳實踐,刪減贅餘,使用conditional loading這樣的先進技術。
陷阱 2: 為小螢幕裝置刪減內容
為智慧手機提供更少的內容,已被廣泛採納。故意為移動使用者提供低質量的使用者體驗,無疑是在折損你網站的利益。實際上,使用者總是在不停地切換裝置來完成各種任務。這就意味著,如果使用者在他們的智慧手機上找不到某一特定內容,那你也就失去了銷售機會。
更好的解決方案是以一種緊湊的、易於導航的格式顯示所有資訊。在設計中,可能需要花費更多努力,但這是值得去做的。請記住,即便你用CSS隱藏了特定資訊,它仍會被下載的。所以要為移動使用者提供完整的Web體驗,不要丟棄任何東西。
陷阱 3: 忽視各裝置間的相通之處
響應式Web設計不僅僅針對PC和智慧手機。在進行設計時,還要考慮到其他的眾多裝置。使用者如何與平板電腦、網際網路電視、智慧手機進行互動,都需要考慮在內。這並不是說你要為所有的裝置建立一個本地化的UI體驗,但你可以根據各裝置的環境為它們建立一個響應式導航,再分別建立出使用者易於理解的設計。
總結
雖然響應式Web設計仍處於發展初期,但已經有很多指導和最佳實踐,當你建立可跨裝置工作的設計時可以採用。對於那些希望為使用不同裝置的使用者提供頂尖Web體驗的設計師來說,則需要更多的思考與努力。
相關文章
- Spring響應式Reactive程式設計的10個陷阱 -Jeroen RosenbergSpringReact程式設計ROS
- 符號營銷的規劃設計,那些應該被規避的營銷陷阱符號
- Responsive Web Design 響應式網頁設計Web網頁
- SpringBoot中的響應式web應用Spring BootWeb
- Web前端程式設計師應該遵循的15個開發原則!Web前端程式設計師
- 響應式設計?響應式設計的基本原理是什麼?如何做?
- 響應式網頁中的高度設計,你認真的嗎?網頁
- [譯] 響應式 Web 應用(四)Web
- [譯] 響應式 Web 應用(五)Web
- 你應該知道的 5 種 TypeScript設計模式TypeScript設計模式
- 對響應式程式設計的懷疑 - lukaseder程式設計
- 使用Reactor響應式程式設計React程式設計
- 規避立項陷阱,國內開發者應該如何解決選品難點?
- 開發響應式web頁面的經驗Web
- Vue3設計思想及響應式原始碼剖析Vue原始碼
- 函式響應式程式設計與RxSwift函式程式設計Swift
- 移動 WEB 開發的佈局方式 ---- 響應式佈局Web
- Vue3中的Ref與Reactive:深入理解響應式程式設計VueReact程式設計
- 一文帶你響應式網頁設計入門網頁
- 淺談前端響應式設計(一)前端
- 淺談前端響應式設計(二)前端
- 響應式程式設計入門(RxJava)程式設計RxJava
- 響應式程式設計庫RxJava初探程式設計RxJava
- vue3 響應式Vue
- Vue3響應式Vue
- 【python socket程式設計】—— 3.響應Python程式設計
- Web3的應用發展及其影響Web
- 你應該知道的16個linux命令Linux
- 遊戲開發者應避免掉進“過度設計”的陷阱遊戲開發
- 【架構設計】你的應用該如何分層呢?架構
- Web前端開發應該避免的幾個思維誤區Web前端
- web app響應式字型設定!rem之我見WebAPPREM
- Spring 5與Spring cloud的響應式程式設計之旅SpringCloud程式設計
- 3 年 Java 程式設計師應該具備的技能!Java程式設計師
- 響應式程式設計在 SAP 標準產品 UI 開發中的一個實踐程式設計UI
- 自己實現一個VUE響應式--VUE響應式原理Vue
- web前端程式設計小白應該從哪個環節開始,這裡來解析!Web前端程式設計
- 每個開發都應該懂的正規表示式
- 程式設計師你應該勇敢說不程式設計師