讓移動(dòng)網(wǎng)站看起來(lái)像本地應用只需4個(gè)步驟

譯自：
A Beginner’s Guide to Perceived Performance: 4 Ways to Make Your Mobile Site Feel Like a Native App
原作者：Kyle leads
譯者：  TAT.sheran

注：該文章大約3000字。它覆蓋了移動(dòng)端網(wǎng)頁(yè)交互體驗優(yōu)化的很多不同方面的實(shí)際解決方案，用來(lái)優(yōu)化你的網(wǎng)頁(yè)運行速度。注意不是讓你的站點(diǎn)運行的有多快，而是讓你的用戶(hù)感覺(jué)有多快。

 

當下在移動(dòng)端構建一個(gè)優(yōu)秀的網(wǎng)站逐漸變得越來(lái)越簡(jiǎn)單。無(wú)論是響應式設計還是自適應式，只要清楚你要做的樣式，精心制作一個(gè)好看的站點(diǎn)就不是什么問(wèn)題。

也許你的用戶(hù)和我們一樣，想要一個(gè)像本地應用體驗的網(wǎng)站，所以構建這樣的體驗將會(huì )帶來(lái)很大的挑戰。

大多數時(shí)候，當人們說(shuō)一個(gè)應用就像一個(gè)原生程序或者像本地應用，他們并不是在討論這個(gè)網(wǎng)站的外觀(guān)。相反，他們討論的是當他們做出的一些操作之后的響應效果。

本地應用相對于Web應用要快得多，動(dòng)畫(huà)效果渲染也更加平滑；當點(diǎn)擊按鈕時(shí)，按鈕自身會(huì )立即響應變化的樣式，不管操作是否加載成功，都不會(huì )報錯。

使你的站點(diǎn)看起來(lái)想本地應用，意味著(zhù)要盡一切可能的方法使你的站點(diǎn)快速的響應。

當今，性能優(yōu)化是一個(gè)非常熱門(mén)的話(huà)題。最近，網(wǎng)站開(kāi)發(fā)已經(jīng)越來(lái)越重量級，網(wǎng)頁(yè)越重代表運行得越慢，所以有人聲稱(chēng)做一個(gè)高性能的網(wǎng)頁(yè)應用程序幾乎是不可能的。

這就是為什么Facebook不得不轉向本地應用的原因。因為從目前所擁有的Web資源來(lái)看，并不能達到他們期望的運行速度和交互體驗。

盡管Facebook也這么認為，但是構建一個(gè)高性能的網(wǎng)站還是有可能的。雖然并不容易，但還是在我們可控制的范圍內。我們只是需要花更多的精力去將它實(shí)現而已。從技術(shù)上說(shuō)，我們有能力使我們的網(wǎng)站運行地更快，看上去更現代化，以及擁有更完美的交互體驗。

體驗性能 VS 實(shí)際性能

雖然提高實(shí)際性能很重要，但這并不意味著(zhù)用戶(hù)最終能夠感覺(jué)到改善。

年初在西雅圖的一次An Event Apart會(huì )議中，Luke Wroblewski 講述了下關(guān)于他們的移動(dòng)應用Polar。他闡述到他和他的團隊非常努力地優(yōu)化每次加載新的選票所需時(shí)間。

于此同時(shí)，當發(fā)送加載選票的異步請求時(shí)，他們用了一個(gè)輕量的微調控件提示用戶(hù)。但是用戶(hù)反饋在加載新的選票時(shí)顯示微調控件讓他們感覺(jué)比以前慢了好多，盡管實(shí)際上它比以前更快。Polar迅速發(fā)布了一個(gè)版本移除了這個(gè)微調控件，然后用戶(hù)馬上就覺(jué)得頁(yè)面加載快了好多。

這個(gè)例子能很好的說(shuō)明用戶(hù)對性能感知的重要性。你的網(wǎng)站是否真正運行非?？觳⒉恢匾?。就像這個(gè)微調控件的例子，它只是吸引了用戶(hù)的注意力，但事實(shí)上仍然讓用戶(hù)感覺(jué)在等待響應，而正確的做法是，我們應該去分散用戶(hù)的注意力。

作為設計師和開(kāi)發(fā)者，我們的目標不僅僅是從學(xué)術(shù)理論上創(chuàng )造一個(gè)快速的站點(diǎn)，而更應該從體驗上去創(chuàng )造一個(gè)最快的站點(diǎn)。

用戶(hù)是如何感知你的站點(diǎn)的運行速度才是最重要的，任何實(shí)際速度的提升不過(guò)是一個(gè)已經(jīng)精心裝飾好的蛋糕外帽。我認為體驗性能優(yōu)化比實(shí)際性能優(yōu)化更重要，但絕不代表不應該去做實(shí)際性能優(yōu)化。

綜上所述，你該做些什么來(lái)優(yōu)化你站點(diǎn)的體驗性能呢？

這里有四個(gè)技巧，你可以立即開(kāi)始實(shí)施。

1. 給你的按鈕增加觸摸狀態(tài)

在移動(dòng)設備上改善網(wǎng)站體驗性能最容易的方法之一就是使用激活狀態(tài)。

眾所周知，用戶(hù)在任何時(shí)候點(diǎn)擊你網(wǎng)頁(yè)上的按鈕，在網(wǎng)頁(yè)響應前他都必須等待約300毫秒。

瀏覽器會(huì )保持這個(gè)延時(shí)，這樣它才能確保用戶(hù)并不是想做其它動(dòng)作（準確地說(shuō)就是雙擊）。所以瀏覽器在這三分之一秒內檢測用戶(hù)是否有其它操作，如果沒(méi)有，則響應用戶(hù)上一次點(diǎn)擊。當這個(gè)事件最終發(fā)生時(shí)，它會(huì )給出一個(gè)灰色的高亮展示給用戶(hù)。

這是一個(gè)糟糕的體驗，Nielsen團隊進(jìn)行了一項調查，結果顯示任何超過(guò)100毫秒的響應都會(huì )讓用戶(hù)感到他們在等待——而用戶(hù)想要的僅僅是瀏覽你的網(wǎng)頁(yè)。

然而大多數的移動(dòng)站點(diǎn)，包括我自己創(chuàng )建的，并沒(méi)有應用這個(gè)體驗設計，設計師們總是使用鏈接或者按鈕的默認觸摸狀態(tài)。

要使你的站點(diǎn)感覺(jué)快，就要讓你的按鈕能夠及時(shí)響應用戶(hù)的點(diǎn)擊事件，并且在狀態(tài)改變時(shí)給用戶(hù)一個(gè)可見(jiàn)的反饋。

有一個(gè)非常好用的CSS偽類(lèi)叫做 active 狀態(tài)，它可以用來(lái)在網(wǎng)頁(yè)上顯示一個(gè)按鈕或者鏈接被點(diǎn)擊了。我們也可以同時(shí)把它使用在PC端瀏覽器上。

不幸的是，無(wú)論是iOS還是Android上的鏈接或者按鈕被點(diǎn)擊的時(shí)候都會(huì )忽略這個(gè)屬性。為了使用這個(gè)active狀態(tài)，你需要使用JavaScript給頁(yè)面添加一個(gè)簡(jiǎn)單的事件:

這樣，你就可以使用CSS來(lái)給按鈕添加active狀態(tài)或者移除點(diǎn)擊高亮的狀態(tài)了:

給你創(chuàng )建的按鈕添加了這些屬性和active狀態(tài)之后，用戶(hù)就可以立即感覺(jué)到頁(yè)面的反饋，即使實(shí)際上真實(shí)的反饋速度并沒(méi)有改變。你只是讓用戶(hù)針對自己的行為得到了一個(gè)及時(shí)的反饋，而不是讓他們等待300毫秒后才看到頁(yè)面響應。

如果你想要使頁(yè)面立即響應，你可以做進(jìn)一步的改進(jìn)。

使用一個(gè)fasttap或者fastclick函數，可以完全消除點(diǎn)擊按鈕時(shí)300毫秒的延時(shí)，與active狀態(tài)搭配使用，可以讓你的站點(diǎn)擁有飛一般的速度。

關(guān)于更多fasttap的信息，可以參考谷歌的這篇文章 this article by Google 或者Github上的一個(gè)現成的實(shí)現this repo on Github。

2. 使用默認滾動(dòng)

你曾經(jīng)是否嘗試在自己的站點(diǎn)上創(chuàng )建一個(gè)可滾動(dòng)的容器，或者被一個(gè)運行起來(lái)非常慢，并且沒(méi)有任何響應的滾動(dòng)條困??？

幸運的是，Android 3+ 和iOS 5+ 都實(shí)現了一個(gè)新的名叫overflow-scroll的屬性，用來(lái)開(kāi)啟原生的滾動(dòng)條，它運行起來(lái)非常完美。

這個(gè)滾動(dòng)條使用起來(lái)就像是使用本地程序的感覺(jué)，實(shí)際上它就是原生的，你需要做的只是給你的滾動(dòng)容器添加這個(gè)屬性：

然而，關(guān)于這個(gè)屬性還存在一個(gè)問(wèn)題，那就是當滾動(dòng)到頁(yè)面最頂部的時(shí)候會(huì )禁止你的iphone顯示狀態(tài)欄。這個(gè)BUG已經(jīng)存在有段時(shí)間了，即使是最新版本iOS7上的移動(dòng)版Safari都沒(méi)有解決這個(gè)問(wèn)題。

解決這個(gè)問(wèn)題的方法之一是：創(chuàng )建一個(gè)類(lèi)來(lái)給容器添加 overflow-scrolling:touch屬性。然后只有當容器處于可見(jiàn)狀態(tài) 時(shí)，使用JavaScript去應用這個(gè)類(lèi)，使其生效。

在A(yíng)ndroid 4上你不需要這個(gè)屬性，因為每個(gè)可滾動(dòng)的容器都包含了原生滾動(dòng)條。

在比較老的Android版本下，你有兩個(gè)選擇方案。我最喜歡的一個(gè)方法是檢測容器是否支持滾動(dòng)溢出屬性來(lái)判斷是否支持原生滾動(dòng)。如果不支持，有幾個(gè)JavaScript庫可以用來(lái)代替，Filament Group’s Overthrow 和 iScroll 都是很不錯的實(shí)現方案。

3. 創(chuàng )建高性能動(dòng)畫(huà)

在Web網(wǎng)站和本地應用之間最顯著(zhù)的差別是動(dòng)畫(huà)的使用。

多年前，本地應用在當今設備中就能夠充分利用硬件圖形加速。而在Web端，開(kāi)發(fā)者卻只能基于JavaScript來(lái)實(shí)現動(dòng)畫(huà)，對于移動(dòng)端功能比較弱的CPU來(lái)說(shuō)，運行起來(lái)會(huì )比較慢。

但是現在，隨著(zhù)移動(dòng)瀏覽器的支持，我們可以大量利用CSS3動(dòng)畫(huà)來(lái)實(shí)現硬件加速。

這是一個(gè)英明的方法來(lái)添加那些我們喜歡的，本地應用都已經(jīng)炫耀了多年的動(dòng)畫(huà)特效。

如果還是覺(jué)得不夠快？要讓W(xué)eb動(dòng)畫(huà)感覺(jué)像本地動(dòng)畫(huà)，你必須確保你的動(dòng)畫(huà)運行起來(lái)不會(huì )慢或者足夠穩定，這些都是相當困難的。

Allen Pike of Steamclock Software(一家軟件公司) 2011年發(fā)表了一篇很贊的文章，大意為給用戶(hù)提供一個(gè)有趣的不影響性能的動(dòng)畫(huà)，可以使用戶(hù)對這個(gè)應用有一個(gè)非常好的印象。

有趣的是，這篇文章是關(guān)于本地應用開(kāi)發(fā)的，但我們可以參考這篇文章用來(lái)在網(wǎng)頁(yè)站點(diǎn)上創(chuàng )建類(lèi)似本地應用的動(dòng)畫(huà)。

在這篇文章中，他描述了一個(gè)他所謂的“時(shí)間感知”：

1.動(dòng)畫(huà)的幀數至少要有60fps。這意味著(zhù)每幀最起碼都要在16毫秒內完成，這樣才能讓人感覺(jué)動(dòng)畫(huà)是原生的或者是平滑的。所有iOS的內置動(dòng)畫(huà)都保持在60fps的運行速度，這就是為什么在iPhone設備上滾動(dòng)的感覺(jué)明顯比Android設備好的原因（雖然谷歌最近在這個(gè)領(lǐng)域取得了很大的改善）。你應該確保所有跟用戶(hù)有直接交互的動(dòng)畫(huà)都保持在這個(gè)速度才行。

2.所有事件的響應都應該保持在100毫秒以?xún)取?/strong>如果超過(guò)這個(gè)心理門(mén)檻，用戶(hù)就會(huì )有慢的感覺(jué)，反之任何低于100毫秒的響應對用戶(hù)來(lái)說(shuō)都是一瞬間的體驗。

3.如果一個(gè)動(dòng)畫(huà)一定需要超過(guò)100毫秒，那也至少要保證在1000毫秒內完成。Allen認為任何需要在這么長(cháng)時(shí)間的行為都需要給用戶(hù)一個(gè)反饋，比如一個(gè)進(jìn)度控件或者一個(gè)滾動(dòng)條。

但是正如我們前面介紹的Polar的例子，轉移用戶(hù)注意力實(shí)際上是弊大于利的。稍后我們將介紹一個(gè)不同的方法來(lái)處理這個(gè)問(wèn)題。

4.任何一個(gè)超過(guò)1秒的響應都是不好的，并且需要謹慎。

當創(chuàng )建一個(gè)網(wǎng)站的時(shí)候，你還不得不考慮動(dòng)畫(huà)運行時(shí)間，知道這一切之后是否有種想轉行的沖動(dòng)？

不要擔心，有些很好的資源可以使這些東西變得容易得多。

首先，有一個(gè)基于HTML5的一個(gè)CSS庫，叫做Effeckt.css。這個(gè)庫的目的是創(chuàng )建一個(gè)公用的動(dòng)畫(huà)，它們的幀數都處于60fps。雖然這個(gè)庫還沒(méi)有完全完成，但是庫里的很多動(dòng)畫(huà)都已經(jīng)可以很好的運行了，我們強烈推薦使用這個(gè)庫來(lái)滿(mǎn)足你們的項目需求。

另外一個(gè)非常好用的庫就是Adobe公司的前端團隊開(kāi)發(fā)的Topcoat庫，這是一個(gè)以性能為中心的CSS組件庫，這個(gè)庫里全是能夠運行得非常順暢的組件。因為動(dòng)畫(huà)性能是他們的主要目標，組件的每一部分，你都可以看到它究竟是如何執行的。

Topcoat和Effeckt.css可以結合一起使用，Topcoat可以直接使用Effeckt.css的功能，并且可以很完美的融合在一起。

接下來(lái)，我們來(lái)討論前面提到的盡可能避免spinners問(wèn)題的方法。

我的首選方法是避免spinners的等待時(shí)間不會(huì )超過(guò)100毫秒，但對于小于250毫秒的等待我會(huì )(使用spinner實(shí)際上是弊大于利的)用一個(gè)動(dòng)畫(huà)來(lái)隱藏它。

例如，你正在異步拉取一段內容的時(shí)候，嘗試使用動(dòng)畫(huà)讓容器縮上去，再縮回來(lái)以適應新的內容。這樣一個(gè)簡(jiǎn)短的動(dòng)畫(huà)可以分散用戶(hù)注意力，而不是盯著(zhù)一個(gè)spinner，他們只需等待一個(gè)很短的動(dòng)畫(huà)完成。甚至他們都不知道是否有新的內容。

當然，那些重復且需要花費長(cháng)時(shí)間完成的動(dòng)畫(huà)有可能讓人覺(jué)得厭煩，所以一定要確保有節制的使用這些技術(shù)，對于大多數的動(dòng)畫(huà)而言這都是一個(gè)很好的建議。

4. 手勢利用

本地應用優(yōu)于Web應用的優(yōu)勢在于他們能夠利用手勢，對于使用觸摸屏幕的用戶(hù)來(lái)說(shuō)，這樣能夠更加友好。

移動(dòng)開(kāi)發(fā)者已經(jīng)意識到手勢的魅力所在，并很快就使其得到了很好的利用。

看看類(lèi)似Mailbox 或者Clear這樣的例子，這些應用都使用了簡(jiǎn)單的手勢，充分發(fā)揮了移動(dòng)設備最大的優(yōu)勢——能夠直接觸摸屏幕的能力。

大多數網(wǎng)站都只會(huì )使用手勢點(diǎn)擊來(lái)觸發(fā)事件，設計師甚至不想去實(shí)現其它手勢，這樣給用戶(hù)像一個(gè)二等公民待遇的感覺(jué)。

我們開(kāi)始考慮直接為這些設備開(kāi)發(fā)特定的網(wǎng)站。如果用戶(hù)的設備支持手勢功能，那么為什么不利用他們呢？

當然，移動(dòng)操作系統都存在一個(gè)問(wèn)題那就是：劫持在瀏覽器中的手勢，而去執行系統自身的響應。

對于本地應用，比如Facebook 使用屏幕左右邊緣的滑動(dòng)開(kāi)拓導航。然而不幸的是，對于Web應用來(lái)說(shuō)，這種行為叫出界，Chrome會(huì )使用這個(gè)操作來(lái)切換選項卡，新版本的iOS7的Safari瀏覽器卻會(huì )使用它來(lái)歷史前進(jìn)和后退。

好把，這些手勢還是有相當多的限制的，究竟哪些可供我們使用呢？這里有4個(gè)：

手勢1 一側到另一側的滑動(dòng)

即使即將出界，一側到另外一側的滑動(dòng)也是一個(gè)相當不錯的手勢，只是需要注意的是不要太靠近屏幕的邊緣了。

手勢2 拉取刷新

拉取刷新是讓用戶(hù)去獲取數據的另外一個(gè)手勢，有一大堆JavaScript庫可以很簡(jiǎn)單的去實(shí)現這個(gè)手勢，有一個(gè)我以前用過(guò)的庫叫Hook.js。

手勢3 長(cháng)按

有一個(gè)很有用的屬性叫做 –Webkit-touch-callout: none; 它將關(guān)閉移動(dòng)端Safari默認的長(cháng)按事件，但是你想要在A(yíng)ndroid上關(guān)閉它還需要額外的工作。

長(cháng)按手勢主要用于拖動(dòng)一個(gè)元素（比如重排一個(gè)列表的順序）或者展示更多操作給用戶(hù)（例如，社交分享）。

手勢4 縮放功能

每個(gè)人都理解縮放，大多數人在網(wǎng)站上看到一個(gè)照片的時(shí)候都會(huì )去縮放來(lái)查看更多細節。

有時(shí)候瀏覽器也會(huì )劫持這種手勢，即使這樣，也沒(méi)有那么糟糕。

無(wú)論是否需要鎖定整個(gè)窗口的放大或者縮小，有時(shí)你也并不希望用戶(hù)去縮放整個(gè)頁(yè)面。為了接管這些多點(diǎn)觸摸，你可以使用一個(gè)非常輕量庫叫Hammer.js，這個(gè)庫里有一堆手勢，你可以使用內置的手勢，也可以創(chuàng )建你自己的。

這有一個(gè)很優(yōu)秀的圖片縮放示例網(wǎng)站 imgur.com mobile Website，它能夠檢測你的觸摸方法。

但是要注意的是，如果你使用了一個(gè)手勢，請確保它是一個(gè)讓用戶(hù)感覺(jué)自然或有意義的行為。

總結

但愿有那么一天，我們不需要再區分本地應用還是Web應用。雖然這一天還沒(méi)達到，但只要我們一直努力，使我們的網(wǎng)站讓用戶(hù)感受到是為他們量身打造，我相信那天一定會(huì )很快到來(lái)。

我覺(jué)得專(zhuān)注性能優(yōu)化雖然是件好事，但我們也必須記住，我們的用戶(hù)不是機器。

他們不關(guān)心你的網(wǎng)站發(fā)出了多少請求，也不在乎你的屏幕渲染得有多快。他們只關(guān)心網(wǎng)站帶給他們體驗上的感覺(jué)。

重要的是如何讓你的網(wǎng)站看起來(lái)或者感覺(jué)上是最快的。那些用戶(hù)無(wú)法感知的高速網(wǎng)站是毫無(wú)意義的。

如果你有更多提高體驗性能的建議，請在評論中發(fā)表。

本文地址：http://m.nwafulive.cn/c/2013122953.html

分享到：

---

【刷新頁(yè)面】【加入收藏】【打印此文】 【關(guān)閉窗口】

• 上一篇：前端自動(dòng)生成/加載CSS代碼
• 下一篇：網(wǎng)站策劃方案一般需要多久完成?其中的流程是什么