今天就讓我們諷刺一把，去毒害移動(dòng)端用戶(hù)。聽(tīng)上去如何？只要照著我的指示做就行。讓我們做一個(gè)緩慢的網(wǎng)站，禁用縮放，隱藏導(dǎo)航，并且在頁(yè)面里填滿(mǎn)固定位置的元素。我打賭這會(huì)讓那些可憐的移動(dòng)端用戶(hù)活不下去。

在捷克，最受歡迎的兒童電視英雄是小鼴鼠（The Little Mole），它是一只天真的、不說(shuō)話的、快樂(lè)的小動(dòng)物，常常幫助森林里的其他動(dòng)物。

電視英雄經(jīng)常跟那些破壞自然環(huán)境的人類(lèi)作斗爭(zhēng)。當(dāng)我陪著孩子們看小鼴鼠時(shí)，我有時(shí)會(huì)把它想象成一個(gè)移動(dòng)網(wǎng)站用戶(hù)。你想知道為什么嗎？

作為網(wǎng)頁(yè)設(shè)計(jì)師，我們經(jīng)常像“壞人們”對(duì)待小鼴鼠一樣，對(duì)待我們的用戶(hù)，尤其在移動(dòng)網(wǎng)站上。

這個(gè)節(jié)目里有一集非常戲劇性。一個(gè)老人用盡各種方法想擺脫花園里的小鼴鼠，最后試圖毒死它。當(dāng)設(shè)計(jì)師們把移動(dòng)版的網(wǎng)站做得很難用時(shí)，他們其實(shí)干的是一樣的事，他們要“毒死”用戶(hù)，最終迫使用戶(hù)離開(kāi)。

今天就讓我們諷刺一把，去毒害移動(dòng)端用戶(hù)。聽(tīng)上去如何？只要照著我的指示做就行。

讓我們做一個(gè)緩慢的網(wǎng)站，禁用縮放，隱藏導(dǎo)航，并且在頁(yè)面里填滿(mǎn)固定位置的元素。我打賭這會(huì)讓那些可憐的移動(dòng)端用戶(hù)活不下去。

1. 讓網(wǎng)站緩慢地加載

讓網(wǎng)站緩慢地加載是對(duì)付移動(dòng)端用戶(hù)的最佳武器。你要是能讓網(wǎng)站慢到加載所用的時(shí)間足夠訪問(wèn)者往返一趟郵局，那就太棒了！你正在有效地對(duì)移動(dòng)端用戶(hù)們下毒。

現(xiàn)在，讓我們認(rèn)真點(diǎn)。移動(dòng)網(wǎng)絡(luò)的傳輸速度較為緩慢，即便速度增加到3G和4G，也不是哪里都有網(wǎng)絡(luò)，它們無(wú)法與有線網(wǎng)絡(luò)競(jìng)爭(zhēng)。

各項(xiàng)測(cè)試和調(diào)查表明，網(wǎng)站的速度對(duì)于用戶(hù)的轉(zhuǎn)化及網(wǎng)站的整體有效性有重大影響力。就算用戶(hù)用的是EDGE連接，他們也沒(méi)必要為網(wǎng)站內(nèi)容的呈現(xiàn)而等上好幾秒鐘。

此外，別忘了網(wǎng)站速度是Google考慮搜索結(jié)果和AdWords廣告的選擇標(biāo)準(zhǔn)之一。因此，它不單單影響著用戶(hù)轉(zhuǎn)化，還會(huì)影響到用戶(hù)一開(kāi)始是否會(huì)登陸你的網(wǎng)站。

解決方案很簡(jiǎn)單：在開(kāi)發(fā)網(wǎng)站概念的時(shí)候就考慮到訪問(wèn)速度的問(wèn)題。從性能預(yù)算展開(kāi)工作。

優(yōu)化訪問(wèn)速度沒(méi)有那么復(fù)雜。讓我來(lái)分享一些來(lái)自Google的最佳實(shí)踐：

讓數(shù)據(jù)傳輸最小化

• 優(yōu)化圖片
• 減少CSS，JavaScript和HTML

不要阻礙頁(yè)面呈現(xiàn)

• 優(yōu)化CSS交付
• 刪除阻礙頁(yè)面呈現(xiàn)的JavaScript
• 區(qū)分可見(jiàn)內(nèi)容的優(yōu)先級(jí)

優(yōu)化后端

• 提升服務(wù)器的響應(yīng)時(shí)間
• 啟動(dòng)壓縮
• 利用瀏覽器緩存
• 避免不必要的重定向

現(xiàn)在沒(méi)時(shí)間讀這些？完全理解。留著這些文字以后讀好了。幸運(yùn)的是，有些工具能告訴你，你的網(wǎng)站有什么問(wèn)題。首先，用PageSpeed Insights測(cè)試你的網(wǎng)站，接著用WebPagetest。

2. 把輪播圖設(shè)計(jì)的很糟糕

這樣用戶(hù)再也不會(huì)回來(lái)了。

確實(shí)，對(duì)于輪播圖的各類(lèi)研究中并沒(méi)有明確表示它們是不合適的。然而，輪播圖在實(shí)現(xiàn)和用戶(hù)體驗(yàn)方面都是較為復(fù)雜的。所用，使用輪播圖有一定的風(fēng)險(xiǎn)。

耐克的輪播圖（左圖）沒(méi)有清晰地表達(dá)出右方還有內(nèi)容。百思買(mǎi)（右圖）做的更好：后續(xù)項(xiàng)目是可見(jiàn)的，因而很明顯你可以向右滾動(dòng)。

使用輪播圖時(shí)，你極有可能隱藏一些內(nèi)容，而非推廣它們。根據(jù)一些調(diào)查，絕大多數(shù)用戶(hù)只會(huì)看到第一張圖片，由于“橫幅盲點(diǎn)”，基于橫幅的輪播圖通常都會(huì)被忽略掉。

如果你準(zhǔn)備采用移動(dòng)端輪播圖，請(qǐng)確保它符合以下條件：

• 不要只為了養(yǎng)眼或是為了隱藏不必要的內(nèi)容而使用輪播圖。對(duì)于宣傳和主要內(nèi)容相關(guān)的次要內(nèi)容，輪播圖是極好的工具。
• 用第一張圖片預(yù)告后面幾張的內(nèi)容。第一張圖的主要功能在于誘導(dǎo)用戶(hù)去看第二張和第三張。
• 讓導(dǎo)航能用于小型手機(jī)上。用在桌面界面上的那些小點(diǎn)對(duì)于手機(jī)而且可算不上是“能用”的！
• 確保自定義手勢(shì)不會(huì)和默認(rèn)的瀏覽器手勢(shì)相沖突。你要用滑動(dòng)手勢(shì)嗎？確保它不會(huì)和瀏覽器內(nèi)置的手勢(shì)相沖突。
• 不要拖慢網(wǎng)站速度。這主要涉及輪播圖的數(shù)據(jù)需求和實(shí)現(xiàn)方式。

Newegg的輪播圖（左圖）代表一種常規(guī)的做法。B&H的（右圖）是一個(gè)很好的例子，節(jié)省了縱向空間，利用下一個(gè)內(nèi)容的顯示，誘使用戶(hù)瀏覽額外的圖片。

3. 把菜單藏在漢堡包圖標(biāo)下面

你要把導(dǎo)航做的容易訪問(wèn)？拜托，認(rèn)真點(diǎn)！你這樣會(huì)有上千的用戶(hù)的。

當(dāng)你在一個(gè)網(wǎng)站上隱藏了菜單，人們會(huì)不再使用它。在最近發(fā)表的一項(xiàng)研究中，Nielsen Norman Group發(fā)現(xiàn)，在手機(jī)界面上隱藏導(dǎo)航，對(duì)內(nèi)容的可發(fā)現(xiàn)性、任務(wù)完成度及花費(fèi)在任務(wù)上的時(shí)間有負(fù)面的影響。

如果在導(dǎo)航里有一些重要的項(xiàng)目，而你能夠展示它，那就把它展示出來(lái)吧。如果你無(wú)法展示整個(gè)菜單，那么將它簡(jiǎn)化，或者至少顯示出菜單里重要的部分。因此，我傾向于推薦“優(yōu)先+”的導(dǎo)航模式。

如果導(dǎo)航還帶有內(nèi)容，始終顯示若干個(gè)項(xiàng)目。

如果你無(wú)法顯示重要的項(xiàng)目怎么辦？那好吧，把菜單隱藏在漢堡包圖標(biāo)下面，標(biāo)簽里寫(xiě)上“菜單”，并且確保用戶(hù)在沒(méi)有菜單的情況下也能使用這個(gè)網(wǎng)站。

4. 始終依賴(lài)滑動(dòng)手勢(shì)

用滑動(dòng)手勢(shì)劃去所有用戶(hù)。

我認(rèn)為，對(duì)于移動(dòng)端UI，不常見(jiàn)的手勢(shì)有一定風(fēng)險(xiǎn)，原因有二：

（1）自定義手勢(shì)可能會(huì)和瀏覽器的默認(rèn)手勢(shì)沖突。例如，如果你的輪播圖支持滑動(dòng)手勢(shì)，那么用戶(hù)可能會(huì)意外地操作了“邊緣滑動(dòng)”（和普通滑動(dòng)非常接近的一個(gè)手勢(shì)），這個(gè)動(dòng)作會(huì)被一些移動(dòng)端瀏覽器解讀為導(dǎo)航至瀏覽歷史的一個(gè)命令。

（2）許多用戶(hù)不會(huì)用那些不常見(jiàn)的手勢(shì)。因此，你必須教會(huì)用戶(hù)使用這些手勢(shì)。如果我們討論的是日常應(yīng)用，這是合理的，但是對(duì)于網(wǎng)站這并不合理。

使用輪播圖也許不一定是個(gè)問(wèn)題。然而，我見(jiàn)過(guò)有些新聞網(wǎng)站支持滑動(dòng)手勢(shì)來(lái)切換文章。對(duì)于用戶(hù)而言，這樣的手勢(shì)不常用并且難以理解。

滑動(dòng)手勢(shì)不是唯一的問(wèn)題。點(diǎn)擊Sarafri瀏覽器的底部會(huì)顯示被隱藏的菜單。因此，如果你把導(dǎo)航元素粘在底部位置，用戶(hù)可能要被迫點(diǎn)擊兩次。

在使用任何不常見(jiàn)手勢(shì)之前，要測(cè)試它不會(huì)和瀏覽器的內(nèi)置手勢(shì)相沖突。

5. 把所有的點(diǎn)擊目標(biāo)都做的細(xì)致小巧

一毫米就夠了。

好吧，讓我們認(rèn)真點(diǎn)。你的點(diǎn)擊目標(biāo)是否足夠大，能讓一個(gè)籃球運(yùn)動(dòng)員用拇指輕松地?fù)糁兴麄儯?/p>

Josh Clark在《Designing for Touch》一書(shū)中提到了Steven Hoober和Patti Shank的一項(xiàng)研究。研究者們發(fā)現(xiàn)，如果放置在手機(jī)屏幕的中心，點(diǎn)擊的目標(biāo)可以小至7平方毫米；然而，如果放置在頂端或者底部，則至少為11平方毫米。

不過(guò)對(duì)于網(wǎng)頁(yè)，毫米是不切實(shí)際的。我們使用像素單位，對(duì)吧？那么，我們?cè)撊绾翁幚硪苿?dòng)設(shè)備上的各種DPI？也許會(huì)讓大部分讀者感到驚訝，Josh Clark在書(shū)中這樣寫(xiě)道：

如今，幾乎所有的移動(dòng)端瀏覽器在宣告設(shè)備寬度的時(shí)候，基本上都使用相同的像素密度：160DPI是觸屏網(wǎng)頁(yè)像素的實(shí)際標(biāo)準(zhǔn)。

同樣，你需要做的就是正確地設(shè)置viewport的元標(biāo)簽：

<meta name=”viewport” content=”width=device-width, initial-scale=1″>

還有一個(gè)步驟：使用最適用于響應(yīng)式設(shè)計(jì)的em或rem單位。大部分瀏覽器的默認(rèn)字體大小為16像素，因此我們可以使用以下轉(zhuǎn)換：

/ 7mm = 44px = 2.75rem /
.touch { height: 2.75rem; }
/ 11mm = 69px = 4.3125rem /
.touch-big { height: 4.3125rem; }

這樣就好了。別忘了為舊瀏覽器提供一個(gè)fallback。如果你想查看細(xì)節(jié)，建議你購(gòu)買(mǎi)Josh的書(shū)。

6. 讓網(wǎng)站可響應(yīng)，但是僅針對(duì)特定的分辨率

迫使用戶(hù)離開(kāi)你的網(wǎng)站。逼著他們?nèi)ベI(mǎi)一個(gè)分辨率“正確”的手機(jī)。

我們?cè)谝苿?dòng)設(shè)備上正面臨著各式各樣的屏幕分辨率。以前，只有Android平臺(tái)受到影響，如今蘋(píng)果設(shè)備也是。

即便你的網(wǎng)站不是為了移動(dòng)設(shè)備而準(zhǔn)備的，也沒(méi)有理由一眼都不讓移動(dòng)用戶(hù)看。有一些網(wǎng)站在特定的視窗尺寸下無(wú)法使用。真是遺憾！

我們不能想當(dāng)然地認(rèn)為智能手機(jī)的屏幕大約為320像素，平板電腦大約768像素，桌面屏幕就是超過(guò)1024像素。頁(yè)面需要在768以及更小的像素尺寸下無(wú)縫調(diào)整。

那么，我們應(yīng)該為哪些分辨率做考慮呢？朋友們，所有的都需要。

在我的開(kāi)發(fā)生涯中，我測(cè)過(guò)從240到約2600像素寬的各種響應(yīng)式網(wǎng)站。我承認(rèn)，讓頁(yè)面在所有的尺寸下看起來(lái)都很完美，是幾乎不可能的事情，但底線是網(wǎng)站布局不應(yīng)該分崩離析——除非你的意圖是嚇跑移動(dòng)端用戶(hù)。

和你們大多數(shù)人一樣，我所做的就是把瀏覽器窗口從最小調(diào)整到最寬的尺寸（或是使用開(kāi)發(fā)者工具的響應(yīng)式模式）。這跟Brad Frost的測(cè)試工具里面提及的“Hay!模式”差不多。

另外，不要在切換手機(jī)的豎橫屏模式時(shí)，更換設(shè)計(jì)。

我認(rèn)為，用戶(hù)不論用哪個(gè)方向使用手機(jī)， 都會(huì)希望瀏覽網(wǎng)站時(shí)看到的是一個(gè)相同、或者至少是非常相似的界面。我記得有一個(gè)講座的參加者告訴我這樣一個(gè)故事。當(dāng)他的公司重新設(shè)計(jì)網(wǎng)站之后，很多人開(kāi)始撥打支持電話。他們抱怨的都是一個(gè)特定的錯(cuò)誤：網(wǎng)站的菜單不見(jiàn)了。過(guò)了一陣子，他們發(fā)現(xiàn)這些都是平板電腦的用戶(hù)。當(dāng)他們?cè)跈M屏視圖訪問(wèn)網(wǎng)站的時(shí)候，菜單是在的。當(dāng)豎屏使用平板的時(shí)候，菜單就被隱藏在一個(gè)“漢堡包”圖標(biāo)下面了。

7. 不要讓電話號(hào)碼可點(diǎn)擊

要惹惱用戶(hù)。不要讓他們直接從網(wǎng)站撥打電話。

對(duì)于移動(dòng)端用戶(hù)而言，聯(lián)系是件很簡(jiǎn)單的事。只要把電話號(hào)碼做成鏈接，點(diǎn)擊進(jìn)入撥打。這類(lèi)似于在蘋(píng)果手機(jī)上激活FaceTimes，短信和Skype。

但是我們有一個(gè)問(wèn)題。人們通常無(wú)法從桌面瀏覽器撥打電話。然而，桌面瀏覽器不會(huì)忽略這些電話鏈接，而是打開(kāi)一個(gè)令人無(wú)法理解的對(duì)話框，讓用戶(hù)去選擇一個(gè)應(yīng)用來(lái)?yè)艽螂娫?。而大部分情況下，桌面上并沒(méi)有可以撥電話的應(yīng)用。

親愛(ài)的朋友們，我也不想去毒害桌面端用戶(hù)。因此，在這種罕見(jiàn)的情況下，我建議采用設(shè)備檢查功能，僅為移動(dòng)端用戶(hù)插入可撥打電話的鏈接。

在HTML中，電話號(hào)碼是未激活的。我們只需要用一個(gè)span tag包住它，之后再使用Javascript：

Phone: <span class=”phone-number”>123456789</span>

使用jQuery和isMobile的檢測(cè)庫(kù)，我們會(huì)用phone-number類(lèi)和一個(gè)鏈接替換元素：

if(isMobile.phone) {
$(‘.phone-number’).each(function() {
$(this).replaceWith(
$(‘<a href=”tel:’ + this.innerHTML + ‘”>’ + this.innerHTML + ‘</a>’)
);
});
}

在智能手機(jī)上，標(biāo)記如下所示：

Phone: <a href=”tel:123456789″ class=”phone-number”>123456789</a>

8. 禁用縮放功能

如果你真心想要保持用戶(hù)的視圖大小，禁用縮放功能吧。這是不人道的——而且非常有效。

但是說(shuō)真的，禁用縮放功能不僅僅會(huì)讓那些視力不佳的用戶(hù)難受。出于種種原因，連視力良好的用戶(hù)也會(huì)在移動(dòng)設(shè)備上使用縮放功能：

• 為了近距離查看圖片
• 為了更易選擇文本；
• 為了在對(duì)比較弱的情況下放大內(nèi)容

實(shí)際上，大量移動(dòng)網(wǎng)站都禁用了縮放功能。即便對(duì)于在線商店這種很需要查看圖片細(xì)節(jié)的網(wǎng)站也是如此。根據(jù)Baymard Institute的測(cè)試結(jié)果，40%的電子商務(wù)網(wǎng)站禁用了縮放功能。令人難以置信，對(duì)嗎？

正如桌面端用戶(hù)不可以沒(méi)有后退按鈕和滾動(dòng)條一樣，移動(dòng)端用戶(hù)也需要縮放功能。

WCAG的易用性原則告訴我們，用戶(hù)必須要能夠?qū)⑽谋痉糯蟮?a target="_blank" rel="noopener">200%。

當(dāng)然，有些情況下你必須禁用縮放——例如為了固定元素。但有時(shí)候縮放功能是不小心被禁用的，例如是因?yàn)椴迦肓隋e(cuò)誤的meta viewport標(biāo)簽。下面的示例是唯一正確的用法，而錯(cuò)誤的標(biāo)簽則包含了諸如maximum-scale=1和user-scalable=no這樣的參數(shù)。

<meta name=”viewport” content=”width=device-width, initial-scale=1″>

9. 設(shè)置 * { user-select: none }，然后就天下太平了

有些用戶(hù)會(huì)訪問(wèn)你心愛(ài)的網(wǎng)站并且復(fù)制走所有的文本。這樣的行為是令人震驚的，必須被阻止。

親愛(ài)的朋友們，將user-select的屬性設(shè)為none有時(shí)候是有用的，不過(guò)僅限于那些你希望用戶(hù)會(huì)與之交互的部分，而且在這些部分選擇文本也沒(méi)有什么用處。

因此，我建議僅對(duì)以下元素使用user-select: none：

• 圖標(biāo)導(dǎo)航;
• 疊加文字的輪播圖；
• 控制元素，例如下拉列表、導(dǎo)航

請(qǐng)永遠(yuǎn)不要禁用靜態(tài)文本和圖片的選擇。

10. 用錯(cuò)誤的方式加載網(wǎng)頁(yè)字體

如果用戶(hù)活著看到網(wǎng)頁(yè)加載，用閃爍的字體或者完全隱藏內(nèi)容，來(lái)殺死他們。

使用網(wǎng)頁(yè)字體并沒(méi)有錯(cuò)，但我們必須確保它們是網(wǎng)站第一個(gè)要加載的元素。有些瀏覽器在顯示內(nèi)容前，會(huì)等待網(wǎng)頁(yè)字體的加載。這被稱(chēng)為不可見(jiàn)文本的閃爍（FOIT: flash of invisible text). 其他瀏覽器（Edge和Explorer）會(huì)顯示你最不想要的那個(gè)系統(tǒng)字體，這被稱(chēng)為無(wú)樣式文本的閃爍（FOUT: flash of unstyled text ）。

有第三種可能性，人造文本的閃爍（FOFT: flash of faux text）。這時(shí)候，頁(yè)面內(nèi)容會(huì)被渲染成網(wǎng)頁(yè)字體的一種規(guī)律性的剪切，緊接著就會(huì)出現(xiàn)粗體和斜體的剪切樣式。

FOUT實(shí)踐：加載網(wǎng)頁(yè)字體的時(shí)候，顯示系統(tǒng)字體好過(guò)空白的屏幕。

我的項(xiàng)目通常是基于內(nèi)容的網(wǎng)站，所以我更喜歡使用系統(tǒng)字體（FOUT）盡快地展示出內(nèi)容。這就是為什么我喜歡微軟的瀏覽器。我還會(huì)使用一個(gè)叫做Font Face Observer的小庫(kù)。讓我們看看代碼。首先，JavaScript:

var font = new FontFaceObserver(‘Webfont family’);
font.load().then(function () {
document.documentElement.className += ‘ webfont-loaded’;
});

然后是CSS：

body { font-family: sans-serif;
}
.webfont-loaded body {
font-family: Webfont Family;
}

每個(gè)網(wǎng)站的需求都不一樣。可參考Zach Leatherman的“字體加載策略綜合指南”。

11. 用社交媒體按鈕胡亂地塞滿(mǎn)頁(yè)面

如果用你自己的混合毒藥還不夠毒死他們，那就把鄰居的也用上。

Facebook，Twitter和Google的按鈕會(huì)讓移動(dòng)用戶(hù)感到不舒服，原因有二：

（1）它們會(huì)下載大量數(shù)據(jù)，導(dǎo)致網(wǎng)站的加載和頁(yè)面呈現(xiàn)緩慢。測(cè)試結(jié)果顯示，當(dāng)使用官方的社交分享按鈕時(shí)，訪問(wèn)者將下載比20次請(qǐng)求還多300KB的數(shù)據(jù)。

（2）它們通常是無(wú)用的。社交分享功能通常會(huì)被集成在操作系統(tǒng)里。在Moovweb所做的一項(xiàng)歷時(shí)一年，超過(guò)六千一百多萬(wàn)個(gè)移動(dòng)進(jìn)程的研究結(jié)果中顯示，僅有0.2%的移動(dòng)用戶(hù)用過(guò)社交分享功能。

大多數(shù)的社交按鈕都是無(wú)用的，即便在桌面上也是如此。尤其對(duì)于在線商店，分享沒(méi)有什么用處，因?yàn)榈头窒頂?shù)字會(huì)讓購(gòu)買(mǎi)者喪失購(gòu)買(mǎi)動(dòng)力。不過(guò)我們別去那兒。我們是要去毒死這只移動(dòng)野獸。

如果你不想毒死移動(dòng)用戶(hù)，但又需要社交分享按鈕，可以試著使用社交分享鏈接，或者類(lèi)似Social Likes的插件，使用這些方法對(duì)加載速度的影響較小。

12. 桌面到移動(dòng)端的重定向錯(cuò)誤

擁有m-dot版本網(wǎng)站的“殺手”開(kāi)發(fā)者會(huì)多一樣毒害用戶(hù)的方法。萬(wàn)歲！

我們?cè)趲缀趺恳粋€(gè)有m-dot版本的網(wǎng)站上都見(jiàn)到過(guò)錯(cuò)誤的重定向。

正確的實(shí)現(xiàn)看起來(lái)是這樣的：

1. 如果移動(dòng)端的訪問(wèn)者訪問(wèn)了www.example.com/example，服務(wù)器會(huì)檢測(cè)到他們的設(shè)備，并且將他們重定向到m.example.com/example（不是去m.example.com）。從桌面端訪問(wèn)移動(dòng)版本也是如此。
2. 如果該URL不存在，那么讓用戶(hù)留在桌面版本，好過(guò)將他們重定向到m-dot的主頁(yè)。
3. 通過(guò)用<link rel=“alternate”>，或是指明在sitemap.xml文件里，讓搜索引擎知道網(wǎng)站有兩個(gè)版本。Google的網(wǎng)站管理員幫助文檔里提供了詳細(xì)的指南。

理想的方案是做一個(gè)響應(yīng)式網(wǎng)站，在所有的設(shè)備都使用同一個(gè)URL。網(wǎng)站的m-dot版本增加了開(kāi)發(fā)和維護(hù)成本。此外，它不是唯一一個(gè)需要為更強(qiáng)大的智能手機(jī)體驗(yàn)或移動(dòng)網(wǎng)絡(luò)速度而做出優(yōu)化的網(wǎng)站類(lèi)型。

讀一下Karen McGrane在《Going Responsive》一書(shū)中所寫(xiě)的，參考自Doug Sillars（AT&T開(kāi)發(fā)者項(xiàng)目性能方面的技術(shù)帶頭人）的一項(xiàng)研究：

m-dot是唯一一個(gè)能做出快速加載的網(wǎng)站的方法，這樣的說(shuō)法是不實(shí)的。良好的編碼及決策實(shí)踐可以使響應(yīng)式與其他方法一樣快。

現(xiàn)在，剩下唯一要做的事就是隱藏不必要的東西——例如網(wǎng)站內(nèi)容。

13. 藏好內(nèi)容

把內(nèi)容藏起來(lái)。反正移動(dòng)端用戶(hù)也不想看。

不管你喜歡與否，人們?cè)L問(wèn)網(wǎng)站是來(lái)查看內(nèi)容的。是的，我們被迫和這些惡意的生物一起生活。

用戶(hù)會(huì)尋找內(nèi)容。要盡快地把內(nèi)容提供給他們。接著，你就可以強(qiáng)迫他們下載應(yīng)用或者提交詳細(xì)的聯(lián)系方式。

不幸的是，很多網(wǎng)站把內(nèi)容隱藏起來(lái)了，原因我不明白。也許它們的內(nèi)容沒(méi)有價(jià)值，但是我很難相信這一點(diǎn)。許多元素會(huì)導(dǎo)致內(nèi)容被隱藏：

Cookie欄

有些歐洲網(wǎng)站不得不顯示一項(xiàng)不幸的cookie許可通知。我們沒(méi)法改變這個(gè)規(guī)定。但是，這并不意味著cookie欄就該被固定在頁(yè)面上，而且占據(jù)一半的屏幕。

在線聊天窗口或新聞?dòng)嗛啅V告

在移動(dòng)設(shè)備上放置固定的元素是一件很不幸的事情。你隱藏了用戶(hù)想看的內(nèi)容，卻顯示了他們根本不感興趣的東西。使用這些元素是可以的，但要避免在移動(dòng)設(shè)備上固定住它們的位置。

下載應(yīng)用的插播式廣告

這些廣告令人痛苦。有些網(wǎng)站邀請(qǐng)你去下載它們隨附的應(yīng)用，卻不向你展示網(wǎng)站內(nèi)容?？墒怯脩?hù)是來(lái)看網(wǎng)站內(nèi)容的！相反的，可以用iOS的smart app banners或Android的native app install banners來(lái)宣傳你的原生應(yīng)用。

Google已經(jīng)決定自2017年1月起，將處罰移動(dòng)網(wǎng)站上的重疊內(nèi)容：

[被插播式廣告遮擋而看不清的內(nèi)容]會(huì)使用戶(hù)沮喪，因?yàn)樗麄儧](méi)法輕松地訪問(wèn)那些想要看的搜索結(jié)果的內(nèi)容。

相比那些內(nèi)容可以立即訪問(wèn)的網(wǎng)站，顯示了干擾的插播式廣告的頁(yè)面對(duì)用戶(hù)體驗(yàn)的損害更大。

為準(zhǔn)確起見(jiàn)，Google不會(huì)懲罰一些顯示插播式廣告的網(wǎng)站，例如cookie欄或者成人網(wǎng)站上的年齡確認(rèn)。

今天你毒害了多少移動(dòng)端用戶(hù)？

差不多就是這樣了?，F(xiàn)在，讓我們嚴(yán)肅點(diǎn)。上面沒(méi)提到什么“新的”東西，對(duì)嗎？

令人格外抱歉的是絕大多數(shù)的響應(yīng)式網(wǎng)站都在毒害移動(dòng)端用戶(hù)。

讓我們用一個(gè)簡(jiǎn)短的清單來(lái)總結(jié)下關(guān)鍵信息：

你的網(wǎng)站在移動(dòng)端呈現(xiàn)的足夠快嗎？

是否不太重要的元素阻擋了那些更重要的呢？你是否選擇了最佳策略來(lái)顯示網(wǎng)頁(yè)字體？那些第三方插件（例如社交媒體）有沒(méi)有拖慢網(wǎng)站速度？

你把內(nèi)容隱藏起來(lái)了嗎？

固定的元素是否阻擋了內(nèi)容？你有沒(méi)有在特定分辨率或者橫屏、豎屏模式下隱藏內(nèi)容？

UI是否移動(dòng)友好？

點(diǎn)擊目標(biāo)是否夠大？復(fù)雜的UI元素，例如輪播圖，是否在移動(dòng)端采用了正確的實(shí)現(xiàn)方式？電話號(hào)碼是否可點(diǎn)擊？?jī)?nèi)容選擇是否一直都是可用的？你是否讓導(dǎo)航盡量在任何地方都可見(jiàn)？

你是否考慮到了原生瀏覽器？

你有沒(méi)有不小心禁用了縮放功能？你是否支持和瀏覽器默認(rèn)操作相沖突的手勢(shì)？

你的重定向是否采用了正確的實(shí)現(xiàn)方式（如果你使用的是m-dot版本）?

要善待移動(dòng)端用戶(hù)。別成為那個(gè)想要擺脫小鼴鼠的邪惡老人。你想知道這個(gè)童話的結(jié)局是什么嗎？小鼴鼠活下來(lái)了，嘲笑著那個(gè)老人，然后跑去了另一個(gè)花園。

原文作者：Martin Michálek

原文地址：https://www.smashingmagazine.com/2016/10/how-to-poison-the-mobile-user/

翻譯：ZoeYin

譯文地址：http://www.jianshu.com/p/1478f82565f1

本文由 @ZoeYin 授權(quán)發(fā)布于人人都是產(chǎn)品經(jīng)理，未經(jīng)作者許可，禁止轉(zhuǎn)載。