Envision的Jeremy Girard回顧了響應(yīng)式設(shè)計(jì)中最常見的錯誤。

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

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

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

01.不針對屏幕而針對設(shè)備設(shè)計(jì)

根據(jù)OpenSignal提供的數(shù)據(jù)，現(xiàn)在市場上有24，093個不同的安卓設(shè)備，從去年的18，796個起——這還沒有算上iOS和其它操作系統(tǒng)的設(shè)備。

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

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

不要從可穿戴設(shè)備、手機(jī)、平板和臺式機(jī)的角度進(jìn)行考慮。將你的原型分成：

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

特定的屏幕尺寸將會在確定原型尺寸時提供更可靠的標(biāo)準(zhǔn)，因?yàn)椴煌O(shè)備間的區(qū)別實(shí)在太大了。考慮所有不同的屏幕大小的手機(jī)：有的比小平板還大呢。

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

02.只依賴設(shè)備尺寸進(jìn)行臨界點(diǎn)設(shè)定

新的設(shè)備總是會不斷推出，即使你能數(shù)得出每個可用設(shè)備的臨界點(diǎn)，你的響應(yīng)式網(wǎng)站將在下一個更大設(shè)備出現(xiàn)的時候變得過小。

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

就像UXPin的《Web UI最佳實(shí)踐》中解釋過的一樣，“建立在設(shè)計(jì)上，而不是設(shè)備”：

• 從移動優(yōu)先的策略開始：為最小的屏幕創(chuàng)建原型，然后調(diào)大比例。順帶一提，iPhone在豎屏下是320像素寬。
• 如果你的很多用戶都擁有可穿戴設(shè)備，你需要考慮微型的屏幕，用甚至更小的設(shè)計(jì)。Apple Watch——繼Pebble Time之后最小的設(shè)備——僅有272像素的寬度。
• 當(dāng)你的設(shè)計(jì)工作開始感受到壓力，添加media queries特性來做任一必要的改變，這樣你的設(shè)計(jì)才能看起來舒服并在每一步中表現(xiàn)良好。
• 設(shè)計(jì)一個最大寬度為2000像素的已經(jīng)能滿足今天所有的可用的最大設(shè)備了。根據(jù)W3Schools最新的瀏覽器數(shù)據(jù)統(tǒng)計(jì)，99%的訪問者所用的瀏覽器遠(yuǎn)遠(yuǎn)不到2000像素寬。
• 根據(jù)設(shè)計(jì)的需要引入響應(yīng)臨界點(diǎn)，以避免在中間尺寸的設(shè)備中體驗(yàn)不佳。建立一種能“響應(yīng)”屏幕尺寸的設(shè)計(jì)方案，是響應(yīng)式設(shè)計(jì)的天性。

03.忽視觸屏控制

觸屏控制是眾多移動設(shè)備的巨大優(yōu)勢之一：它們有趣，它們易用，同時它們還幫你節(jié)省時間。不要在某些設(shè)備上疏忽了它們，因?yàn)槠渌O(shè)備不能使用。這里有一些包含觸屏控制的建議：

• 了解每個設(shè)備的最佳實(shí)踐。在小屏設(shè)備上，左下角是大拇指最容易接觸的地方，所以將你點(diǎn)擊最頻繁的按鈕放在這里。然而對平板來說，因?yàn)樗鼈儽荒玫姆绞讲煌敳康倪吔鞘屈S金接觸點(diǎn)。
• 點(diǎn)擊目標(biāo)（如CTA按鈕。譯者注：CTA即call to action。）必須有足夠的尺寸。一個最小44點(diǎn)的點(diǎn)擊區(qū)域需服從fat-finger-friendly（譯者注：即較粗的手指也能點(diǎn)得到）原則。
• 元素之間的建議間距為至少23pt，以免點(diǎn)錯。
• 為無hover狀態(tài)適配。你可以代替點(diǎn)擊激活功能，或從一開始揭示hover元素的原生狀態(tài)。
• 不要重復(fù)造輪子。常用的手勢比如滑動用于導(dǎo)航和其他功能，因?yàn)樗鼈円呀?jīng)被用戶熟知。

04.鏈接到手機(jī)上顯示效果不佳的內(nèi)容

你不能設(shè)計(jì)讓訪問者從鏈接跳轉(zhuǎn)到其他頁面或內(nèi)容，不管是在你的網(wǎng)站或其它地方。響應(yīng)式體驗(yàn)的一大問題就是當(dāng)與你的響應(yīng)式網(wǎng)站鏈接到非響應(yīng)式設(shè)計(jì)的網(wǎng)頁。

如果你的響應(yīng)式網(wǎng)站鏈接到外站，你無法對此做些什么，除非考慮用一個可替換的網(wǎng)站。然而，當(dāng)鏈接到你可以控制的網(wǎng)站或資源，包括小網(wǎng)站或合作方的網(wǎng)站，你絕對想要確保它們提供了一系列良好的響應(yīng)式體驗(yàn)。

05.對更大的屏幕缺乏計(jì)劃

我建議先為移動端設(shè)計(jì)，當(dāng)并不意味著僅僅設(shè)計(jì)移動端。即使更小的屏幕可能更受歡迎，42%的流量仍然來自桌面端的訪問者。這兩種屏幕尺寸均需要被考慮到。

圖片來源于UXPin

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

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

06.在不同的屏幕大小使用一樣的導(dǎo)航

同一設(shè)備中用一致的導(dǎo)航絕對是件好事。但別太執(zhí)迷于一種布局并將其反復(fù)地在其它設(shè)備上實(shí)踐。這與響應(yīng)式設(shè)計(jì)的本質(zhì)是相違背的。

圖片來源于FiveSimpleSteps（桌面端）

圖片來源于FiveSimpleSteps（移動端）

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

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

當(dāng)今，不同的屏幕尺寸需要不同的導(dǎo)航系統(tǒng)。以下元素在它們適應(yīng)不同屏幕尺寸的細(xì)微差別時，不應(yīng)該保持一致：

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

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

07.隱藏內(nèi)容

一個常見的錯誤觀念曾經(jīng)認(rèn)為移動端用戶是匆忙的，并且只想要“整個網(wǎng)站”的縮小版本。諸如聯(lián)系信息和指南這類內(nèi)容被優(yōu)先考慮，其它內(nèi)容則被隱藏了。

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

圖片來源于UXPin

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

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

根據(jù)漸進(jìn)增強(qiáng)（譯者注：一種網(wǎng)頁設(shè)計(jì)策略，它強(qiáng)調(diào)可訪問性、語義化HTML標(biāo)記、外部樣式表和腳本技術(shù)），為不同的屏幕尺寸呈現(xiàn)不同內(nèi)容并區(qū)分優(yōu)先級，但絕不要隱藏或限制內(nèi)容本身。

擴(kuò)展閱讀

這里提到的建議僅僅是免費(fèi)電子書《2015和2016年用戶體驗(yàn)設(shè)計(jì)趨勢》的一個預(yù)覽。

通過分析71個當(dāng)今最好的UX實(shí)例，這份指南為日常設(shè)計(jì)將實(shí)用的趨勢轉(zhuǎn)變?yōu)楹唵蔚脑O(shè)計(jì)策略。

文字：Jeremy Girard

Jeremy Girard是有遠(yuǎn)見的頂級網(wǎng)頁設(shè)計(jì)師/工程師，是羅得島州的Envision公司的技術(shù)顧問。他也在羅德州島大學(xué)教授網(wǎng)頁設(shè)計(jì)和前端開發(fā)。他通過一款合作設(shè)計(jì)原型的應(yīng)用UXPin為免費(fèi)設(shè)計(jì)資源庫貢獻(xiàn)著內(nèi)容。

推薦閱讀：

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

版權(quán)所有：UXRen翻譯組

譯者：Denise

審校：冬冬

原文作者：Jeremy Girard

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

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

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