AV无码AV无码专区,激情五月综合综合图片区

搜索

APP

起點(diǎn)課堂會員權(quán)益

職業(yè)體系課特權(quán)

線下行業(yè)大會特權(quán)

個人IP打造特權(quán)

30+門專項(xiàng)技能課

1300+專題課程

12場職場軟技能直播

12場求職輔導(dǎo)直播

12場專業(yè)技能直播

會員專屬社群

榮耀標(biāo)識

發(fā)布

注冊 | 登錄

毒害移動端用戶的正確姿勢

Zoe Yin

2016-11-18

1 評論 7386 瀏覽 28 收藏

27 分鐘

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

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

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

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

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

今天就讓我們諷刺一把，去毒害移動端用戶。聽上去如何？只要照著我的指示做就行。

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

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

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

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

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

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

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

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

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

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

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

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

優(yōu)化后端

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

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

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

這樣用戶再也不會回來了。

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

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

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

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

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

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

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

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

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

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

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

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

4. 始終依賴滑動手勢

用滑動手勢劃去所有用戶。

我認(rèn)為，對于移動端UI，不常見的手勢有一定風(fēng)險，原因有二：

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

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

使用輪播圖也許不一定是個問題。然而，我見過有些新聞網(wǎng)站支持滑動手勢來切換文章。對于用戶而言，這樣的手勢不常用并且難以理解。

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

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

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

一毫米就夠了。

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

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

不過對于網(wǎng)頁，毫米是不切實(shí)際的。我們使用像素單位，對吧？那么，我們該如何處理移動設(shè)備上的各種DPI？也許會讓大部分讀者感到驚訝，Josh Clark在書中這樣寫道：

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

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

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

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

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

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

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

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

我們在移動設(shè)備上正面臨著各式各樣的屏幕分辨率。以前，只有Android平臺受到影響，如今蘋果設(shè)備也是。

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

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

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

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

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

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

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

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

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

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

但是我們有一個問題。人們通常無法從桌面瀏覽器撥打電話。然而，桌面瀏覽器不會忽略這些電話鏈接，而是打開一個令人無法理解的對話框，讓用戶去選擇一個應(yīng)用來撥打電話。而大部分情況下，桌面上并沒有可以撥電話的應(yīng)用。

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

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

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

使用jQuery和isMobile的檢測庫，我們會用phone-number類和一個鏈接替換元素：

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. 禁用縮放功能

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

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

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

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

正如桌面端用戶不可以沒有后退按鈕和滾動條一樣，移動端用戶也需要縮放功能。

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

11. 用社交媒體按鈕胡亂地塞滿頁面

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

Facebook，Twitter和Google的按鈕會讓移動用戶感到不舒服，原因有二：

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

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

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

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

12. 桌面到移動端的重定向錯誤

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

我們在幾乎每一個有m-dot版本的網(wǎng)站上都見到過錯誤的重定向。

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

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

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

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

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

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

13. 藏好內(nèi)容

把內(nèi)容藏起來。反正移動端用戶也不想看。

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

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

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

Cookie欄

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

在線聊天窗口或新聞訂閱廣告

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

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

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

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