2019-4-25 資深UI設(shè)計(jì)者
1. 原理表述
系統(tǒng)需要在 400ms 內(nèi)對使用者的操作做出響應(yīng)，這樣才能夠讓使用者保持專注，并提高生產(chǎn)效率。
2. 實(shí)驗(yàn)背景
上世紀(jì) 70 年代后期，計(jì)算機(jī)研究人員依然認(rèn)為計(jì)算機(jī)可以花費(fèi)兩秒的時(shí)間對使用者的操作做出反饋，因?yàn)樗麄冋J(rèn)為人們大概正好需要兩秒時(shí)間來決定下一步的操作，所以 2s（2000ms）一度成為了當(dāng)年計(jì)算機(jī)響應(yīng)時(shí)間的標(biāo)準(zhǔn)值。直到 1979 年計(jì)算機(jī)的算力開始大幅提升，也有了足夠的能力在 2000ms 內(nèi)做出響應(yīng)，這時(shí) IBM 的研究員 Walter Doherty 進(jìn)行了一系列研究來評估算力的增長對生產(chǎn)力的影響。
研究結(jié)果表明，計(jì)算機(jī)的響應(yīng)速度直接影響了使用者做出下一個決定所要花費(fèi)的時(shí)間（這個時(shí)間被稱為用戶響應(yīng)時(shí)間），換句話說，計(jì)算機(jī)相應(yīng)的時(shí)間越長，用戶就要花費(fèi)越多的時(shí)間來思考和決定下一步的操作。
上面這張表格充分說明了這一觀點(diǎn)，橫縱坐標(biāo)分別為用戶響應(yīng)時(shí)間和系統(tǒng)響應(yīng)時(shí)間，我們可以看到系統(tǒng)響應(yīng)時(shí)間如果從之前的 2000ms 降低到 300ms ，使用者作出下一步指令所需要的時(shí)間就能夠縮短 5s 以上。Doherty 認(rèn)為人們會將工作需要的一系列操作步驟存儲在短時(shí)記憶之內(nèi)，如果系統(tǒng)響應(yīng)時(shí)間太長，就會打斷人們的短時(shí)記憶，換句話說，思路都不連貫了。
不僅如此，Doherty 還認(rèn)為響應(yīng)速度低于 400ms 的系統(tǒng)或者程序，會讓人上癮。放在當(dāng)下的環(huán)境來看，這當(dāng)然只是一句比較夸張的話，但是結(jié)論是需要我們重視的，程序的響應(yīng)時(shí)間，務(wù)必在 400ms 之內(nèi)。
要說「多爾蒂門檻」帶給我們的啟示，上一節(jié)最后一句已經(jīng)表達(dá)得足夠清楚：系統(tǒng)或程序的響應(yīng)時(shí)間小于 400ms 。為了讓讀者有更加直觀得感受，我們先來一組小動畫感受一下高響應(yīng)延遲有多讓人抓狂，快速響應(yīng)又多么讓人舒服：
應(yīng)用案例 1：模擬延遲效果
注：請務(wù)必挨個觀察，不要看整體，看單個的效果。
從動畫中可以感受到，50ms、200ms 還算可以讓人接受，當(dāng)響應(yīng)時(shí)間達(dá)到 600ms 時(shí)已經(jīng)讓人有些不耐煩，而達(dá)到 1000ms 時(shí)會讓人不自覺多點(diǎn)幾下，2000ms 時(shí)我手機(jī)已經(jīng)被我砸了。
在如今的計(jì)算機(jī)算力之下，響應(yīng)時(shí)間輕輕松松便能夠達(dá)到多爾蒂門檻的閾值，甚至能夠遠(yuǎn)比 400ms 更小，但是這就夠了嗎？「多爾蒂門檻」說到底只是給出了響應(yīng)時(shí)間的上限，400ms 的響應(yīng)時(shí)間或許在多爾蒂那個時(shí)代確實(shí)能夠大幅提升操作員的操作效率從而產(chǎn)出更大的經(jīng)濟(jì)效益（比如銀行系統(tǒng)），但是現(xiàn)在互聯(lián)網(wǎng)已經(jīng)越發(fā)成熟，不少公司的用戶體驗(yàn)研究者都已經(jīng)意識到，系統(tǒng)響應(yīng)時(shí)間已然不是影響用戶響應(yīng)時(shí)間的唯一因素了，另一個因素是過渡動畫的持續(xù)時(shí)間。
就像谷歌在 Material Design 中明確規(guī)定了過渡動畫的 Speed 這一項(xiàng)，這是為什么呢？用戶體驗(yàn)是一門關(guān)于情感和邏輯的學(xué)問，而不僅僅是一個統(tǒng)計(jì)數(shù)字就能解釋的，讓程序?qū)δ骋徊僮鞯姆答仌r(shí)間（包括響應(yīng)+動畫）符合用戶對該操作的預(yù)期才是讓用戶「上癮」的關(guān)鍵。
應(yīng)用案例 2：iOS 中的動畫
所以，哪怕我們的手機(jī)、電腦已經(jīng)可以做到在 100ms 之內(nèi)做出響應(yīng)，快到完全有能力在用戶反應(yīng)不過來的情況下給出反饋和結(jié)果，但是這樣是不夠的，我們依然需要「合適時(shí)長的」動畫作為計(jì)算機(jī)反饋和大腦反應(yīng)之間的潤滑劑，而不至于讓程序使用起來太「干澀」，也不至于讓大腦一直處于應(yīng)激反應(yīng)的階段而感到疲勞。
在真實(shí)世界中我們使用應(yīng)用時(shí)會發(fā)現(xiàn)，有時(shí)候響應(yīng)速度沒辦法做到如此迅捷快速，比如 APP 啟動時(shí)；還有時(shí)候即便系統(tǒng)可以響應(yīng)，網(wǎng)絡(luò)卻不行。網(wǎng)絡(luò)并不能在用戶操作的一瞬間就把所有需要的資源都下載好，用戶必須等待幾秒的時(shí)間，那么這時(shí)候就需要考慮如何減少用戶等待的焦灼感，優(yōu)化等待的體驗(yàn)。
比如有趣的加載動畫、閃屏頁等，都算是解決辦法。
應(yīng)用案例 3：Netflix 的啟動動畫以及新草的加載動畫
動畫的持續(xù)時(shí)間應(yīng)當(dāng)在適當(dāng)?shù)膮^(qū)間中取到最短，而不能太突然或太緩慢。
反面案例 1：過快或過慢的動畫
在現(xiàn)實(shí)的上線 APP 中，也會有故意把動畫做得很慢的例子，這比較影響操作的流暢性。
反面案例 2：Eggzy
左右滑動的時(shí)候動畫效果在實(shí)際體驗(yàn)中非常慢，對于想要進(jìn)行連續(xù)滑動操作的用戶（即便這樣的使用場景不多），已經(jīng)慢得無法忍受，有一種「不跟手」的感覺，這么慢的動畫已經(jīng)很輕易就能讓用戶感受到自己在等它了。
仔細(xì)瀏覽 Material Design 中給出的案例便可以發(fā)現(xiàn)，動畫的持續(xù)時(shí)間大致可以參照以下幾條規(guī)律去嘗試：
藍(lán)藍(lán)設(shè)計(jì)的小編 http://www.88yangsc.com