因為對時間的焦慮，我們都不喜歡等待，寄希望于能更快響應自己的需求。今天的文章，寫的就是關于如何使應用看起來更快秘密。本文的作者是一位Google的設計師，同時也是一位開發(fā)者。他所分享的案例非常有意思，同時，他的某些思路不局限于設計，這樣才可能產(chǎn)出最棒的設計！

回想一下你給一個給公共服務臺打電話的時候，如果碰巧遇到話務忙，電話里是不是會想起音樂？如果沒有這個音樂，只是沉默的話，你感覺如何？

CNN（美國在線電視新聞網(wǎng)）進行了一項調查顯示：

70%沉默不語的來電者會在60秒內掛斷電話，因為沉默會讓你覺得這條線可能已經(jīng)斷開了，并且會感覺等待的時間要比實際時間更長。放背景音樂的想法是填滿空閑時間，讓你覺得時間沒那么漫長。

休斯敦機場也有類似的問題，乘客們抱怨他們等待行李的時間太長了。 當飛機降落在航站樓附近時，乘客很快就能到達行李處，然后他們需要接著等7分鐘才能拿到行李。 即使機場雇傭了更多員工，投訴仍然存在。

然后他們決定將飛機降落點遠離航站樓，這意味著乘客必須走得更遠。雖然這讓乘客走路的時間更長了，但這樣做使得最終投訴率幾乎降到了0左右。

對時間的感知

人們對時間的感知取決于他們的焦慮程度，他們是在戶外還是在家里。在谷歌進行的研究中，相同網(wǎng)速情況下，我們發(fā)現(xiàn)75%的用戶在家的時候感覺網(wǎng)站運行得很快，但當他們在外面的時候，這個數(shù)字下降到了52%。年輕人相較于老年人，會覺得網(wǎng)站加載速度更慢。

總的來說，我們認為加載的延遲比實際情況要多80毫秒。所以，如果你焦急等待，時間就好像會變得更漫長。

網(wǎng)站和應用目前的加載速度其實已經(jīng)不算太慢了，即使繼續(xù)優(yōu)化，仍然有30%的用戶會感覺它比實際的更慢。

那我們怎么解決這個問題呢？

我們需要創(chuàng)建一些事情來占用他們的空閑時間。

加載

顯示一個空白頁面是糟糕的，讓用戶等待卻不給任何反饋，但是只顯示一個旋轉圖同樣是有缺陷的。

在本例中，你看到一個我模擬的報紙應用，叫做Tailpiece。因為用戶等待的是內容，這樣的加載會感覺時間更長。此外，它顯示的是該應用處于“思考”狀態(tài)，而不是“工作”狀態(tài)。

填充界面

在本例中，我們使用了骨架內容填充界面，而不是使用旋轉圖。雖然這比上面的會好一些，但是僅使用它來代替并不好。因為它仍然會給人錯誤的感覺，因為內容中還是不會顯示任何內容類型。

交錯模式

使用骨架界面，上下文元數(shù)據(jù)和部分加載的像素化圖像的組合，這可以占用用戶大量時間（譯者注：用戶可以花時間預先去閱讀骨架內容）并能使整個體驗感覺更快。 我們的想法是盡可能快地為用戶提供即將發(fā)生和加載的內容。

你也可以利用交錯動畫來隱藏加載時間，我們在谷歌的material studies（https://material.io/design/material-studies）中就這么做了，如你所見。

Material studies 中交錯動畫的例子

交錯是非常有用的，因為它在頁面轉換之前就創(chuàng)建了一個很好的結構，能再次占用用戶的時間。

使用交錯動畫為重要的過渡增添特色

導航

Facebook、RedBooth、Spotify和Google Plus的研究表明：隱藏菜單項意味著用戶不會去切換或點擊它們。Facebook還發(fā)現(xiàn)：底部導航切換會讓應用看起來速度更快。

因為在視野之外，能快速看到東西也會使得體驗變得更爽。所以，快速響應用戶的動作在任何情況下都是有幫助的。

下面的例子中能看到，我們的app Owl，做了一個很棒的展示，它是一個定制化的設計，但仍然與主要導航項目的理念保持一致。在移動設備上，底部導航也更符合人體工程學，因為用戶可以用一只手操作按鈕，這也有助于保持快速、自然的體驗。

反饋與保證

讓用戶知道將要發(fā)生什么是至關重要的，但是告訴他們觸發(fā)了什么動作也會讓你的應用和網(wǎng)站感覺更快。使用移動、懸停狀態(tài)和波紋，可以向用戶保證他們所采取的操作正在進行中。

通過這些設計，幫助引導用戶到他們想去的地方，還可以通過減少用戶焦慮來讓應用感覺更快。

作者：Mustafa Kurtuldu

原文：https://medium.com/dev-channel/hacking-user-perception-to-make-your-websites-and-apps-feel-faster-922636b620e3

譯者：彩云Sky，公眾號：彩云譯設計

本文由 @彩云Sky 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理。未經(jīng)許可，禁止轉載

題圖來自Unsplash，基于CC0協(xié)議