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

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

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

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

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

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

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

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

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

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

02.只依靠設(shè)備尺度進(jìn)行臨界點設(shè)定

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

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

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

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

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

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

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

03.忽視觸屏操控

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

06.在不同的屏幕巨細(xì)運用一樣的導(dǎo)航

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

（桌面端）

（移動端）

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

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

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

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

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

07.躲藏內(nèi)容

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

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

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

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

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