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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

03.忽視觸屏操控

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

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

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

元素之間的主張距離為至少23pt，避免點(diǎn)錯(cuò)。

為無(wú)hover狀況適配。你能夠替代點(diǎn)擊激活功用，或從一開(kāi)端揭示hover元素的原生狀況。

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

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

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

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

05.對(duì)更大的屏幕缺少方案

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

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

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

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

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

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

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

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

（桌面端）

（移動(dòng)端）

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

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

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

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

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

07.躲藏內(nèi)容

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

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

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

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

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