Envision的Jeremy Girard回顧了響應式設計中最常見的錯誤。

響應式設計已經不僅僅是一個流行的設計趨勢，這是從桌面端瀏覽轉移至移動端瀏覽的一次巨大轉變。為了從行業現狀中生存，網頁設計師們不得不支持多屏幕多設備，而一個響應式策略可以解決適配的問題。

圖片來源于PlasmaComp，原地址http://www.plasmacomp.com/blogs/are-you-making-these-responsive-design-mistakes

在想法形成的過渡階段，原型在整個設計過程中分量很重。這篇文章評述了在響應式設計中最常犯的原型錯誤，以確保你的響應式設計是具有前瞻性的，而不是倒退的。

01.不針對屏幕而針對設備設計

根據OpenSignal提供的數據，現在市場上有24，093個不同的安卓設備，從去年的18，796個起——這還沒有算上iOS和其它操作系統的設備。

這難以置信的差異使得針對某一機型進行設計是不可能的。一個聰明的解決辦法是專注于屏幕的尺寸。

圖片來源于Luke Wrobelwski，原地址https://www.flickr.com/photos/lukew

不要從可穿戴設備、手機、平板和臺式機的角度進行考慮。將你的原型分成：

• 超小屏幕
• 小屏幕
• 中等屏幕
• 大屏
• 超大屏

特定的屏幕尺寸將會在確定原型尺寸時提供更可靠的標準，因為不同設備間的區別實在太大了?？紤]所有不同的屏幕大小的手機：有的比小平板還大呢。

此外，專注于屏幕尺寸還能防止在設置響應式的臨界點時太依賴設備的尺寸，這是我下面要描述的另一個常見錯誤。（譯者注：此處的臨界點是指響應式網頁發生布局變化的關鍵點，如當屏幕寬度小于480px時加載A樣式，當寬度在480-600px之間時加載B樣式 。我們不可能也沒有必要為每個尺寸都做設計，需要做的一般是選定幾個臨界點做設計。）

02.只依賴設備尺寸進行臨界點設定

新的設備總是會不斷推出，即使你能數得出每個可用設備的臨界點，你的響應式網站將在下一個更大設備出現的時候變得過小。

圖片來源于Stephanie Walter，原地址http://blog.stephaniewalter.fr/illustration-content-is-like-water-et-traduction-responsive-webdesign-present-et-futur-de-ladaptation-mobile/

就像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%的流量仍然來自桌面端的訪問者。這兩種屏幕尺寸均需要被考慮到。

圖片來源于UXPin

這里有些來自《原型指南》的關于考慮“更大的視圖”的建議：

• 你需要做的不僅僅是將小屏幕的設計放大。利用額外的空間，加一些新的元素，或重新創建視覺層級。
• 檢查圖片的質量——它們可能會在大屏幕中變得模糊。
• 相似地，檢查文字長度的可讀性。在45至75字符之間是最優的。你可以用Chris Coyer的書簽測試你設計的長寬。
• 不要把字體放得太大。過大的字體會占用有意義的水平空間，這將導致讀者放慢閱讀速度或跳過內容。

06.在不同的屏幕大小使用一樣的導航

同一設備中用一致的導航絕對是件好事。但別太執迷于一種布局并將其反復地在其它設備上實踐。這與響應式設計的本質是相違背的。

圖片來源于FiveSimpleSteps（桌面端）

圖片來源于FiveSimpleSteps（移動端）

為維持一致的用戶體驗，有些一致性是好的。為了建立一個易被認知的界面，并提示用戶如何使用新設備的界面，某些元素應該保留和原來一樣。以下元素應該維持一致：

• 鏈接或按鈕文案
• 字體
• 顏色處理

當今，不同的屏幕尺寸需要不同的導航系統。以下元素在它們適應不同屏幕尺寸的細微差別時，不應該保持一致：

• 按鈕尺寸
• 視覺布局
• 導航功能——包括觸屏控制

比如，一個桌面端導航可以固定在屏幕的頂部。當你為移動端屏幕重建布局時，你可以使導航持續出現并縮小尺寸來解決（但保持一個相似的顏色主題、字體和按鈕文案）。

07.隱藏內容

一個常見的錯誤觀念曾經認為移動端用戶是匆忙的，并且只想要“整個網站”的縮小版本。諸如聯系信息和指南這類內容被優先考慮，其它內容則被隱藏了。

現在我們知道大多數移動端用戶一點也不匆忙，有68%的使用場景還是在家中。大多數用戶想要在移動設備上訪問整個網站，他們想要無內容刪減但重新排版的版本。

圖片來源于UXPin

知道某些人偏好的設備，并不等同于知道他們偏好的內容。如果某內容在一臺設備上對用戶是重要的，那么很可能在另一臺不同設備上對用戶也是重要的。

此外，你必須考慮涉及多個設備的任務流。用戶經常在一臺設備上開始任務，又在另一設備上完成，期間輪換使用這兩臺設備。依賴設備的限制內容同時限制了用戶如何交互。

根據漸進增強（譯者注：一種網頁設計策略，它強調可訪問性、語義化HTML標記、外部樣式表和腳本技術），為不同的屏幕尺寸呈現不同內容并區分優先級，但絕不要隱藏或限制內容本身。

擴展閱讀

這里提到的建議僅僅是免費電子書《2015和2016年用戶體驗設計趨勢》的一個預覽。

通過分析71個當今最好的UX實例，這份指南為日常設計將實用的趨勢轉變為簡單的設計策略。

文字：Jeremy Girard

Jeremy Girard是有遠見的頂級網頁設計師/工程師，是羅得島州的Envision公司的技術顧問。他也在羅德州島大學教授網頁設計和前端開發。他通過一款合作設計原型的應用UXPin為免費設計資源庫貢獻著內容。

推薦閱讀：

• How to design mockups that developers won’t hate
• 7 best practices for creating mockups
• 15 common mistakes designers make

版權所有：UXRen翻譯組

譯者：Denise

審校：冬冬

原文作者：Jeremy Girard

原文地址：http://www.creativebloq.com/web-design/common-mistakes-responsive-mockups-111517922

頭圖來源：http://cms.csdnimg.cn

譯文地址：http://uxren.cn/?p=30038