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

回想一下你給一個(gè)給公共服務(wù)臺(tái)打電話的時(shí)候，如果碰巧遇到話務(wù)忙，電話里是不是會(huì)想起音樂？如果沒有這個(gè)音樂，只是沉默的話，你感覺如何？

CNN（美國在線電視新聞網(wǎng)）進(jìn)行了一項(xiàng)調(diào)查顯示：

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

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

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

對(duì)時(shí)間的感知

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

總的來說，我們認(rèn)為加載的延遲比實(shí)際情況要多80毫秒。所以，如果你焦急等待，時(shí)間就好像會(huì)變得更漫長(zhǎng)。

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

那我們?cè)趺唇鉀Q這個(gè)問題呢？

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

加載

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

在本例中，你看到一個(gè)我模擬的報(bào)紙應(yīng)用，叫做Tailpiece。因?yàn)橛脩舻却氖莾?nèi)容，這樣的加載會(huì)感覺時(shí)間更長(zhǎng)。此外，它顯示的是該應(yīng)用處于“思考”狀態(tài)，而不是“工作”狀態(tài)。

填充界面

在本例中，我們使用了骨架內(nèi)容填充界面，而不是使用旋轉(zhuǎn)圖。雖然這比上面的會(huì)好一些，但是僅使用它來代替并不好。因?yàn)樗匀粫?huì)給人錯(cuò)誤的感覺，因?yàn)閮?nèi)容中還是不會(huì)顯示任何內(nèi)容類型。

交錯(cuò)模式

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

你也可以利用交錯(cuò)動(dòng)畫來隱藏加載時(shí)間，我們?cè)诠雀璧膍aterial studies（https://material.io/design/material-studies）中就這么做了，如你所見。

Material studies 中交錯(cuò)動(dòng)畫的例子

交錯(cuò)是非常有用的，因?yàn)樗陧撁孓D(zhuǎn)換之前就創(chuàng)建了一個(gè)很好的結(jié)構(gòu)，能再次占用用戶的時(shí)間。

使用交錯(cuò)動(dòng)畫為重要的過渡增添特色

導(dǎo)航

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

因?yàn)樵谝曇爸?，能快速看到東西也會(huì)使得體驗(yàn)變得更爽。所以，快速響應(yīng)用戶的動(dòng)作在任何情況下都是有幫助的。

下面的例子中能看到，我們的app Owl，做了一個(gè)很棒的展示，它是一個(gè)定制化的設(shè)計(jì)，但仍然與主要導(dǎo)航項(xiàng)目的理念保持一致。在移動(dòng)設(shè)備上，底部導(dǎo)航也更符合人體工程學(xué)，因?yàn)橛脩艨梢杂靡恢皇植僮靼粹o，這也有助于保持快速、自然的體驗(yàn)。

反饋與保證

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

通過這些設(shè)計(jì)，幫助引導(dǎo)用戶到他們想去的地方，還可以通過減少用戶焦慮來讓應(yīng)用感覺更快。

作者：Mustafa Kurtuldu

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

譯者：彩云Sky，公眾號(hào)：彩云譯設(shè)計(jì)

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

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