Envision的Jeremy Girard回顧了響應式設計中最常見的錯誤。
響應式設計已經不僅僅是一個流行的設計趨勢，這是從桌面端瀏覽轉移至移動端瀏覽的一次巨大轉變。為了從行業現狀中生存，網頁設計師們不得不支援多螢幕多裝置，而一個響應式策略可以解決適配的問題。
在想法形成的過渡階段，原型在整個設計過程中分量很重。這篇文章評述了在響應式設計中最常犯的原型錯誤，以確保你的響應式設計是具有前瞻性的，而不是倒退的。
01.不針對螢幕而針對裝置設計
根據OpenSignal提供的資料，現在市場上有24，093個不同的安卓裝置，從去年的18，796個起——這還沒有算上iOS和其它作業系統的裝置。
這難以置信的差異使得針對某一機型進行設計是不可能的。一個聰明的解決辦法是專注於螢幕的尺寸。
不要從可穿戴裝置、手機、平板和桌上型電腦的角度進行考慮。將你的原型分成：
- 超小螢幕
- 小螢幕
- 中等螢幕
- 大屏
- 超大屏
特定的螢幕尺寸將會在確定原型尺寸時提供更可靠的標準，因為不同裝置間的區別實在太大了。考慮所有不同的螢幕大小的手機：有的比小平板還大呢。
此外，專注於螢幕尺寸還能防止在設定響應式的臨界點時太依賴裝置的尺寸，這是我下面要描述的另一個常見錯誤。（譯者注：此處的臨界點是指響應式網頁發生佈局變化的關鍵點，如當螢幕寬度小於480px時載入A樣式，當寬度在480-600px之間時載入B樣式 。我們不可能也沒有必要為每個尺寸都做設計，需要做的一般是選定幾個臨界點做設計。）
02.只依賴裝置尺寸進行臨界點設定
新的裝置總是會不斷推出，即使你能數得出每個可用裝置的臨界點，你的響應式網站將在下一個更大裝置出現的時候變得過小。
就像UXPin的《Web UI最佳實踐》中解釋過的一樣，“建立在設計上，而不是裝置”：
- 從移動優先的策略開始：為最小的螢幕建立原型，然後調大比例。順帶一提，iPhone在豎屏下是320畫素寬。
- 如果你的很多使用者都擁有可穿戴裝置，你需要考慮微型的螢幕，用甚至更小的設計。Apple Watch——繼Pebble Time之後最小的裝置——僅有272畫素的寬度。
- 當你的設計工作開始感受到壓力，新增media queries特性來做任一必要的改變，這樣你的設計才能看起來舒服並在每一步中表現良好。
- 設計一個最大寬度為2000畫素的已經能滿足今天所有的可用的最大裝置了。根據W3Schools最新的瀏覽器資料統計，99%的訪問者所用的瀏覽器遠遠不到2000畫素寬。
- 根據設計的需要引入響應臨界點，以避免在中間尺寸的裝置中體驗不佳。建立一種能“響應”螢幕尺寸的設計方案，是響應式設計的天性。
03.忽視觸屏控制
觸屏控制是眾多移動裝置的巨大優勢之一：它們有趣，它們易用，同時它們還幫你節省時間。不要在某些裝置上疏忽了它們，因為其它裝置不能使用。這裡有一些包含觸屏控制的建議：
- 瞭解每個裝置的最佳實踐。在小屏裝置上，左下角是大拇指最容易接觸的地方，所以將你點選最頻繁的按鈕放在這裡。然而對平板來說，因為它們被拿的方式不同，頂部的邊角是黃金接觸點。
- 點選目標（如CTA按鈕。譯者注：CTA即call to action。）必須有足夠的尺寸。一個最小44點的點選區域需服從fat-finger-friendly（譯者注：即較粗的手指也能點得到）原則。
- 元素之間的建議間距為至少23pt，以免點錯。
- 為無hover狀態適配。你可以代替點選啟用功能，或從一開始揭示hover元素的原生狀態。
- 不要重複造輪子。常用的手勢比如滑動用於導航和其他功能，因為它們已經被使用者熟知。
04.連結到手機上顯示效果不佳的內容
你不能設計讓訪問者從連結跳轉到其他頁面或內容，不管是在你的網站或其它地方。響應式體驗的一大問題就是當與你的響應式網站連結到非響應式設計的網頁。
如果你的響應式網站連結到外站，你無法對此做些什麼，除非考慮用一個可替換的網站。然而，當連結到你可以控制的網站或資源，包括小網站或合作方的網站，你絕對想要確保它們提供了一系列良好的響應式體驗。
05.對更大的螢幕缺乏計劃
我建議先為移動端設計，當並不意味著僅僅設計移動端。即使更小的螢幕可能更受歡迎，42%的流量仍然來自桌面端的訪問者。這兩種螢幕尺寸均需要被考慮到。
這裡有些來自《原型指南》的關於考慮“更大的檢視”的建議：
- 你需要做的不僅僅是將小螢幕的設計放大。利用額外的空間，加一些新的元素，或重新建立視覺層級。
- 檢查圖片的質量——它們可能會在大螢幕中變得模糊。
- 相似地，檢查文字長度的可讀性。在45至75字元之間是最優的。你可以用Chris Coyer的書籤測試你設計的長寬。
- 不要把字型放得太大。過大的字型會佔用有意義的水平空間，這將導致讀者放慢閱讀速度或跳過內容。
06.在不同的螢幕大小使用一樣的導航
同一裝置中用一致的導航絕對是件好事。但別太執迷於一種佈局並將其反覆地在其它裝置上實踐。這與響應式設計的本質是相違背的。
為維持一致的使用者體驗，有些一致性是好的。為了建立一個易被認知的介面，並提示使用者如何使用新裝置的介面，某些元素應該保留和原來一樣。以下元素應該維持一致：
- 連結或按鈕文案
- 字型
- 顏色處理
當今，不同的螢幕尺寸需要不同的導航系統。以下元素在它們適應不同螢幕尺寸的細微差別時，不應該保持一致：
- 按鈕尺寸
- 視覺佈局
- 導航功能——包括觸屏控制
比如，一個桌面端導航可以固定在螢幕的頂部。當你為移動端螢幕重建佈局時，你可以使導航持續出現並縮小尺寸來解決（但保持一個相似的顏色主題、字型和按鈕文案）。
07.隱藏內容
一個常見的錯誤觀念曾經認為移動端使用者是匆忙的，並且只想要“整個網站”的縮小版本。諸如聯絡資訊和指南這類內容被優先考慮，其它內容則被隱藏了。
現在我們知道大多數移動端使用者一點也不匆忙，有68%的使用場景還是在家中。大多數使用者想要在移動裝置上訪問整個網站，他們想要無內容刪減但重新排版的版本。
知道某些人偏好的裝置，並不等同於知道他們偏好的內容。如果某內容在一臺裝置上對使用者是重要的，那麼很可能在另一臺不同裝置上對使用者也是重要的。
此外，你必須考慮涉及多個裝置的任務流。使用者經常在一臺裝置上開始任務，又在另一裝置上完成，期間輪換使用這兩臺裝置。依賴裝置的限制內容同時限制了使用者如何互動。
根據漸進增強（譯者注：一種網頁設計策略，它強調可訪問性、語義化HTML標記、外部樣式表和指令碼技術），為不同的螢幕尺寸呈現不同內容並區分優先順序，但絕不要隱藏或限制內容本身。
擴充套件閱讀
這裡提到的建議僅僅是免費電子書《2015和2016年使用者體驗設計趨勢》的一個預覽。
通過分析71個當今最好的UX例項，這份指南為日常設計將實用的趨勢轉變為簡單的設計策略。
文字：Jeremy Girard
Jeremy Girard是有遠見的頂級網頁設計師/工程師，是羅得島州的Envision公司的技術顧問。他也在羅德州島大學教授網頁設計和前端開發。他通過一款合作設計原型的應用UXPin為免費設計資源庫貢獻著內容。
推薦閱讀：