呼應式原型規劃中最常犯的7個過錯

呼應式規劃現已不只是是一個盛行的規劃趨勢，這是從桌面端閱讀轉移至移動端閱讀的一次巨大改動。為了從職業現狀中生計，網頁規劃師們不得不支持多屏幕多設備，而一個呼應式戰略能夠處理適配的問題。

為了保證你的呼應式規劃師具有前瞻性的，你需求留意防止呈現以下7個最簡單犯的原型過錯：

01.不針對屏幕而針對設備規劃

依據OpenSignal供給的數據，現在商場上有24，093個不同的安卓設備，還沒有算上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符號、外部款式表和腳本技能），為不同的屏幕尺度呈現不同內容并區別優先級，但絕不要躲藏或約束內容本身。