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

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

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

01.不針對屏幕而針對設備規(guī)劃

依據(jù)OpenSignal供給的數(shù)據(jù)，現(xiàn)在商場上有24，093個不同的安卓設備，還沒有算上iOS和其它操作系統(tǒng)的設備。

這難以置信的差異使得針對某一機型進行規(guī)劃是不可能的。一個聰明的處理辦法是專心于屏幕的尺度。

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

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

特定的屏幕尺度將會在斷定原型尺度時供給更可靠的規(guī)范，由于不同設備間的差異實在太大了�？紤]一切不同的屏幕巨細的手機：有的比小平板還大呢。

此外，專心于屏幕尺度還能防止在設置呼應式的臨界點時太依靠設備的尺度，這是我下面要描繪的另一個常見過錯。（譯者注：此處的臨界點是指呼應式網(wǎng)頁發(fā)作布局改動的要害點，如當屏幕寬度小于480px時加載A款式，當寬度在480-600px之間時加載B款式 。我們不可能也沒有必要為每個尺度都做規(guī)劃，需求做的一般是選定幾個臨界點做規(guī)劃。）

02.只依靠設備尺度進行臨界點設定

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

就像UXPin的《Web UI最佳實踐》中解說過的一樣，“樹立在規(guī)劃上，而不是設備”：

從移動優(yōu)先的戰(zhàn)略開端：為最小的屏幕創(chuàng)立原型，然后調大比例。順帶一提，iPhone在豎屏下是320像素寬。

如果你的許多用戶都具有可穿戴設備，你需求考慮微型的屏幕，用乃至更小的規(guī)劃。Apple Watch——繼Pebble Time之后最小的設備——僅有272像素的寬度。

當你的規(guī)劃作業(yè)開端感受到壓力，添加media queries特性來做任一必要的改動，這樣你的規(guī)劃才干看起來舒服并在每一步中體現(xiàn)杰出。

規(guī)劃一個最大寬度為2000像素的現(xiàn)已能滿意今日一切的可用的最大設備了。依據(jù)W3Schools最新的閱讀器數(shù)據(jù)統(tǒng)計，99%的拜訪者所用的閱讀器遠遠不到2000像素寬。

依據(jù)規(guī)劃的需求引進呼應臨界點，以防止在中心尺度的設備中體會欠安。樹立一種能“呼應”屏幕尺度的規(guī)劃方案，是呼應式規(guī)劃的天分。

03.忽視觸屏操控

觸屏操控是很多移動設備的巨大優(yōu)勢之一：它們風趣，它們易用，一起它們還幫你節(jié)省時間。不要在某些設備上忽略了它們，由于其它設備不能運用。這兒有一些包含觸屏操控的主張：

了解每個設備的最佳實踐。在小屏設備上，左下角是大拇指最簡單觸摸的當?shù)�，所以將你點擊最頻繁的按鈕放在這兒。但是對平板來說，由于它們被拿的方法不同，頂部的邊角是黃金觸摸點。

點擊方針（如CTA按鈕。譯者注：CTA即call to action。）有必要有滿足的尺度。一個最小44點的點擊區(qū)域需服從fat-finger-friendly（譯者注：即較粗的手指也能點得到）準則。

元素之間的主張距離為至少23pt，避免點錯。

為無hover狀況適配。你能夠替代點擊激活功用，或從一開端揭示hover元素的原生狀況。

不要重復造輪子。常用的手勢比方滑動用于導航和其他功用，由于它們現(xiàn)已被用戶熟知。

04.鏈接到手機上顯現(xiàn)作用欠安的內容

你不能規(guī)劃讓拜訪者從鏈接跳轉到其他頁面或內容，不管是在你的網(wǎng)站或其它當?shù)�。呼應式體會的一大問題就是當與你的呼應式網(wǎng)站鏈接到非呼應式規(guī)劃的網(wǎng)頁。

如果你的呼應式網(wǎng)站鏈接到外站，你無法對此做些什么，除非考慮用一個可替換的網(wǎng)站。但是，當鏈接到你能夠操控的網(wǎng)站或資源，包含小網(wǎng)站或合作方的網(wǎng)站，你肯定想要保證它們供給了一系列杰出的呼應式體會。

05.對更大的屏幕缺少方案

我主張先為移動端規(guī)劃，當并不意味著只是規(guī)劃移動端。即便更小的屏幕可能更受歡迎，42%的流量依然來自桌面端的拜訪者。這兩種屏幕尺度均需求被考慮到。

這兒有些來自《原型攻略》的關于考慮“更大的視圖”的主張：

你需求做的不只是是將小屏幕的規(guī)劃擴大。運用額外的空間，加一些新的元素，或從頭創(chuàng)立視覺層級。

查看圖片的質量——它們可能會在大屏幕中變得含糊。

相似地，查看文字長度的可讀性。在45至75字符之間是最優(yōu)的。你能夠用Chris Coyer的書簽測驗你規(guī)劃的長寬。

不要把字體放得太大。過大的字體會占用有意義的水平空間，這將導致讀者怠慢閱讀速度或跳過內容。

06.在不同的屏幕巨細運用一樣的導航

同一設備頂用共同的導航肯定是件功德。但別太執(zhí)迷于一種布局并將其反復地在其它設備上實踐。這與呼應式規(guī)劃的實質是相違反的。

（桌面端）

（移動端）

為堅持共同的用戶體會，有些共同性是好的。為了樹立一個易被認知的界面，并提示用戶怎么運用新設備的界面，某些元素應該保留和本來一樣。以下元素應該堅持共同：

• 鏈接或按鈕案牘
• 字體
• 色彩處理

當今，不同的屏幕尺度需求不同的導航系統(tǒng)。以下元素在它們習慣不同屏幕尺度的細微差別時，不應該堅持共同：

• 按鈕尺度
• 視覺布局
• 導航功用——包含觸屏操控

比方，一個桌面端導航能夠固定在屏幕的頂部。當你為移動端屏幕重建布局時，你能夠使導航繼續(xù)呈現(xiàn)并縮小尺度來處理（但堅持一個相似的色彩主題、字體和按鈕案牘）。

07.躲藏內容

一個常見的過錯觀念曾經(jīng)以為移動端用戶是匆忙的，并且只想要“整個網(wǎng)站”的縮小版別。比如聯(lián)絡信息和攻略這類內容被優(yōu)先考慮，其它內容則被躲藏了。

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

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

此外，你有必要考慮涉及多個設備的使命流。用戶經(jīng)常在一臺設備上開端使命，又在另一設備上完結，期間輪換運用這兩臺設備。依靠設備的約束內容一起約束了用戶怎么交互。

依據(jù)漸進增強（注：一種網(wǎng)頁規(guī)劃戰(zhàn)略，它著重可拜訪性、語義化HTML符號、外部款式表和腳本技能），為不同的屏幕尺度呈現(xiàn)不同內容并區(qū)別優(yōu)先級，但絕不要躲藏或約束內容本身。