如果您想訂閱本博客內(nèi)容，每天自動發(fā)到您的郵箱中， 請點這里

簡介說明

1. 原理表述

系統(tǒng)需要在 400ms 內(nèi)對使用者的操作做出響應(yīng)，這樣才能夠讓使用者保持專注，并提高生產(chǎn)效率。

2. 實驗背景

上世紀(jì) 70 年代后期，計算機研究人員依然認(rèn)為計算機可以花費兩秒的時間對使用者的操作做出反饋，因為他們認(rèn)為人們大概正好需要兩秒時間來決定下一步的操作，所以 2s（2000ms）一度成為了當(dāng)年計算機響應(yīng)時間的標(biāo)準(zhǔn)值。直到 1979 年計算機的算力開始大幅提升，也有了足夠的能力在 2000ms 內(nèi)做出響應(yīng)，這時 IBM 的研究員 Walter Doherty 進(jìn)行了一系列研究來評估算力的增長對生產(chǎn)力的影響。

研究結(jié)果表明，計算機的響應(yīng)速度直接影響了使用者做出下一個決定所要花費的時間（這個時間被稱為用戶響應(yīng)時間），換句話說，計算機相應(yīng)的時間越長，用戶就要花費越多的時間來思考和決定下一步的操作。

上面這張表格充分說明了這一觀點，橫縱坐標(biāo)分別為用戶響應(yīng)時間和系統(tǒng)響應(yīng)時間，我們可以看到系統(tǒng)響應(yīng)時間如果從之前的 2000ms 降低到 300ms ，使用者作出下一步指令所需要的時間就能夠縮短 5s 以上。Doherty 認(rèn)為人們會將工作需要的一系列操作步驟存儲在短時記憶之內(nèi)，如果系統(tǒng)響應(yīng)時間太長，就會打斷人們的短時記憶，換句話說，思路都不連貫了。

不僅如此，Doherty 還認(rèn)為響應(yīng)速度低于 400ms 的系統(tǒng)或者程序，會讓人上癮。放在當(dāng)下的環(huán)境來看，這當(dāng)然只是一句比較夸張的話，但是結(jié)論是需要我們重視的，程序的響應(yīng)時間，務(wù)必在 400ms 之內(nèi)。

設(shè)計案例

1. 響應(yīng)時間的多爾蒂閾值

要說「多爾蒂門檻」帶給我們的啟示，上一節(jié)最后一句已經(jīng)表達(dá)得足夠清楚：系統(tǒng)或程序的響應(yīng)時間小于 400ms 。為了讓讀者有更加直觀得感受，我們先來一組小動畫感受一下高響應(yīng)延遲有多讓人抓狂，快速響應(yīng)又多么讓人舒服：

應(yīng)用案例 1：模擬延遲效果

注：請務(wù)必挨個觀察，不要看整體，看單個的效果。

從動畫中可以感受到，50ms、200ms 還算可以讓人接受，當(dāng)響應(yīng)時間達(dá)到 600ms 時已經(jīng)讓人有些不耐煩，而達(dá)到 1000ms 時會讓人不自覺多點幾下，2000ms 時我手機已經(jīng)被我砸了。

2. 另一個因素不能忽視

在如今的計算機算力之下，響應(yīng)時間輕輕松松便能夠達(dá)到多爾蒂門檻的閾值，甚至能夠遠(yuǎn)比 400ms 更小，但是這就夠了嗎？「多爾蒂門檻」說到底只是給出了響應(yīng)時間的上限，400ms 的響應(yīng)時間或許在多爾蒂那個時代確實能夠大幅提升操作員的操作效率從而產(chǎn)出更大的經(jīng)濟(jì)效益（比如銀行系統(tǒng)），但是現(xiàn)在互聯(lián)網(wǎng)已經(jīng)越發(fā)成熟，不少公司的用戶體驗研究者都已經(jīng)意識到，系統(tǒng)響應(yīng)時間已然不是影響用戶響應(yīng)時間的唯一因素了，另一個因素是過渡動畫的持續(xù)時間。

就像谷歌在 Material Design 中明確規(guī)定了過渡動畫的 Speed 這一項，這是為什么呢？用戶體驗是一門關(guān)于情感和邏輯的學(xué)問，而不僅僅是一個統(tǒng)計數(shù)字就能解釋的，讓程序?qū)δ骋徊僮鞯姆答仌r間（包括響應(yīng)+動畫）符合用戶對該操作的預(yù)期才是讓用戶「上癮」的關(guān)鍵。

應(yīng)用案例 2：iOS 中的動畫

所以，哪怕我們的手機、電腦已經(jīng)可以做到在 100ms 之內(nèi)做出響應(yīng)，快到完全有能力在用戶反應(yīng)不過來的情況下給出反饋和結(jié)果，但是這樣是不夠的，我們依然需要「合適時長的」動畫作為計算機反饋和大腦反應(yīng)之間的潤滑劑，而不至于讓程序使用起來太「干澀」，也不至于讓大腦一直處于應(yīng)激反應(yīng)的階段而感到疲勞。

3. 有時不可避免高延遲

在真實世界中我們使用應(yīng)用時會發(fā)現(xiàn)，有時候響應(yīng)速度沒辦法做到如此迅捷快速，比如 APP 啟動時；還有時候即便系統(tǒng)可以響應(yīng)，網(wǎng)絡(luò)卻不行。網(wǎng)絡(luò)并不能在用戶操作的一瞬間就把所有需要的資源都下載好，用戶必須等待幾秒的時間，那么這時候就需要考慮如何減少用戶等待的焦灼感，優(yōu)化等待的體驗。

比如有趣的加載動畫、閃屏頁等，都算是解決辦法。

應(yīng)用案例 3：Netflix 的啟動動畫以及新草的加載動畫

注意事項

動畫的持續(xù)時間應(yīng)當(dāng)在適當(dāng)?shù)膮^(qū)間中取到最短，而不能太突然或太緩慢。

反面案例 1：過快或過慢的動畫

在現(xiàn)實的上線 APP 中，也會有故意把動畫做得很慢的例子，這比較影響操作的流暢性。

反面案例 2：Eggzy

左右滑動的時候動畫效果在實際體驗中非常慢，對于想要進(jìn)行連續(xù)滑動操作的用戶（即便這樣的使用場景不多），已經(jīng)慢得無法忍受，有一種「不跟手」的感覺，這么慢的動畫已經(jīng)很輕易就能讓用戶感受到自己在等它了。

仔細(xì)瀏覽 Material Design 中給出的案例便可以發(fā)現(xiàn)，動畫的持續(xù)時間大致可以參照以下幾條規(guī)律去嘗試：

• 動畫元素越小、動畫幅度越小，持續(xù)時間就越短。
• 復(fù)雜的動畫比簡單的動畫持續(xù)時間更長。
• 一個頁面出現(xiàn)的動畫總是比消失的稍稍長一點（相差大致50ms）。

總結(jié)

• 合理的操作響應(yīng)時長、方式有助于用戶保持專注和提率
• 軟件操作的過度動畫時間不宜太短或太長，最常見于 400ms 左近
• 如果無法避免操作中較長讀取、等待時間，那么就用其他更有趣的動畫、頁面來減少用戶的焦慮感
• 藍(lán)藍(lán)設(shè)計( www.cqzjtgb.com )是一家專注而深入的界面設(shè)計公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計、BS界面設(shè)計 、 cs界面設(shè)計 、 ipad界面設(shè)計 、 包裝設(shè)計 、 圖標(biāo)定制 、 用戶體驗 、交互設(shè)計、 網(wǎng)站建設(shè) 、平面設(shè)計服務(wù)。