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