樂(lè)觀派UI設(shè)計(jì)并非樂(lè)觀地看待頁(yè)面——至少不僅限于此病瞳。（查看大圖）

最近許多關(guān)于前端開(kāi)發(fā)和用戶體驗(yàn)的會(huì)議揽咕，討論了心理表現(xiàn)最佳化，樂(lè)觀派UI設(shè)計(jì)是業(yè)界一個(gè)如此微不足道的話題套菜。坦白說(shuō)亲善，這個(gè)術(shù)語(yǔ)本身都沒(méi)有清晰的定義。本文中逗柴，我們來(lái)探討它的基本概念蛹头，尋找一些案例，并回顧它的心理學(xué)背景戏溺。然后渣蜗，我們討論掌握這項(xiàng)用戶體驗(yàn)技巧的關(guān)鍵。

開(kāi)始之前旷祸，我得說(shuō)耕拷，沒(méi)有任何一個(gè)單獨(dú)的界面能被稱作“樂(lè)觀派UI”。其實(shí)它是界面實(shí)現(xiàn)背后的心智模型托享。樂(lè)觀派UI設(shè)計(jì)有它自己的歷史和邏輯骚烧。

很久以前

很久以前——那時(shí)候“tweet”一詞還只有鳥鳴的意思、蘋果公司瀕臨破產(chǎn)闰围、人們還會(huì)把傳真號(hào)碼印在名片上——網(wǎng)頁(yè)界面相當(dāng)單調(diào)止潘。其中絕大多數(shù)沒(méi)有一絲一毫的樂(lè)觀意味。比如一個(gè)按鈕的交互辫诅，可以遵循下面類似劇本來(lái)進(jìn)行：

1. 用戶點(diǎn)擊一個(gè)按鈕。

2. 按觸發(fā)進(jìn)入禁用狀態(tài)涧狮。

3. 一條請(qǐng)求發(fā)送到服務(wù)器炕矮。

4. 服務(wù)器返回信息到頁(yè)面。

5.頁(yè)面刷新者冤，反映出返回的狀態(tài)肤视。

那個(gè)年代，界面與樂(lè)觀派扯不上什么關(guān)系涉枫。

站在2016年回顧這些邢滑，我們會(huì)覺(jué)得效率低下；但是相當(dāng)驚人的是愿汰，同樣的劇本仍然在許多網(wǎng)頁(yè)和應(yīng)用中上演困后，它仍然是許多產(chǎn)品的交互流程乐纸。原因在于它可以預(yù)測(cè)，而且或多或少總會(huì)出點(diǎn)錯(cuò)誤：用戶知道這項(xiàng)操作已經(jīng)請(qǐng)求了服務(wù)器（禁用狀態(tài)的按鈕表明了這一點(diǎn)）摇予，當(dāng)服務(wù)器有響應(yīng)汽绢，更新后的頁(yè)面清晰表明這種客戶端——服務(wù)器——客戶端的交互結(jié)果。這種交互方式的問(wèn)題很明顯：

用戶必須等待侧戴。如今我們都知道宁昭，即使是最短的服務(wù)器響應(yīng)延遲，也會(huì)對(duì)整個(gè)品牌酗宋，而非這個(gè)單獨(dú)頁(yè)面產(chǎn)生負(fù)面的用戶感知积仗。

每一次用戶的操作得到響應(yīng)，都會(huì)以一種相當(dāng)破壞性方式呈現(xiàn)（整頁(yè)刷新蜕猫，而不是更新現(xiàn)有部分）寂曹，會(huì)打斷用戶的任務(wù)流程，可能影響他們的思維軌跡丹锹。

我們甚至還沒(méi)說(shuō)到多任務(wù)稀颁，心理環(huán)境的任何變化都令人不愉快。那么楣黍，如果某個(gè)操作本意不是改變環(huán)境（在線支付就是個(gè)需要改變環(huán)境的好例子）匾灶，那么這種改變會(huì)在用戶與系統(tǒng)的交流中創(chuàng)造不友善的氛圍。

不久以前

然后租漂，所謂Web 2.0出現(xiàn)了阶女，提供了新的頁(yè)面交互模式。它的核心是XMLHttpRequest和AJAX哩治。一種最簡(jiǎn)單的進(jìn)度條形式：“菊花”秃踩，補(bǔ)足了這些新交互模式，它的基本目的就是告訴用戶业筏，系統(tǒng)正忙著處理事情°狙睿現(xiàn)在，服務(wù)器返回信息后蒜胖，我們不必刷新頁(yè)面了消别；我們只需要對(duì)已經(jīng)渲染的頁(yè)面進(jìn)行局部更新。這使得網(wǎng)站更加動(dòng)態(tài)化台谢，為用戶創(chuàng)造了更加順暢和親切的體驗(yàn)寻狂。一個(gè)按鈕的典型交互如今是這樣的：

1. 用戶點(diǎn)擊按鈕。

2. 按鈕觸發(fā)變?yōu)榻脿顟B(tài)朋沮，按鈕上顯示出某種菊花圖形蛇券，表明系統(tǒng)正在運(yùn)轉(zhuǎn)。

3. 請(qǐng)求發(fā)送到服務(wù)器。

4. ?服務(wù)器返回信息到頁(yè)面纠亚。

5. 根據(jù)返回的狀態(tài)更新按鈕和頁(yè)面的視覺(jué)狀態(tài)塘慕。

這種新的交互模型解決了舊交互方式存在的一個(gè)問(wèn)題：頁(yè)面的刷新不會(huì)導(dǎo)致破壞性操作，保持用戶所處環(huán)境不變菜枷。相比之前苍糠，這種交互親切多了。

XMLHttpRequest和菊花解決了舊交互方式的一個(gè)問(wèn)題：服務(wù)器響應(yīng)會(huì)導(dǎo)致破壞性的刷新啤誊，改變整個(gè)環(huán)境岳瞭。

這種交互模式已經(jīng)廣泛應(yīng)用于數(shù)字媒介。但還有一個(gè)問(wèn)題：用戶仍然需要等待服務(wù)器反饋蚊锹。當(dāng)然瞳筏，我們有辦法加快服務(wù)器響應(yīng)速度，但無(wú)論我們?nèi)绾闻?yōu)化基礎(chǔ)設(shè)備牡昆，用戶仍然要等待姚炕。比如，研究表明78%的用戶對(duì)于緩慢或不穩(wěn)定的網(wǎng)站產(chǎn)生負(fù)面情緒丢烘。更有甚者柱宦，Harris

Interactive為Tealeaf做的一份調(diào)查顯示，23%的用戶承認(rèn)咒罵過(guò)自己的手機(jī)播瞳，11%沖自己手機(jī)大喊過(guò)掸刊，而且4%的用戶在網(wǎng)絡(luò)出問(wèn)題時(shí)扔過(guò)手機(jī)。延遲就屬于這類問(wèn)題之一赢乓。

大約78%的用戶面對(duì)緩慢或不穩(wěn)定的網(wǎng)站時(shí)忧侧，會(huì)產(chǎn)生負(fù)面情緒。

即使在用戶等待時(shí)展示某種進(jìn)度條牌芋，如今也于事無(wú)補(bǔ)蚓炬，除非進(jìn)度條非常有創(chuàng)意。多數(shù)情況下躺屁，人們已經(jīng)習(xí)慣性把菊花進(jìn)度條當(dāng)作系統(tǒng)緩慢的表現(xiàn)肯夏。菊花如今已經(jīng)是一種純粹的被動(dòng)等待，用戶毫無(wú)選擇犀暑，要么等待服務(wù)器響應(yīng)熄捍，要么關(guān)閉標(biāo)簽頁(yè)或整個(gè)應(yīng)用。那么母怜，我們?cè)龠M(jìn)一步，改善這種交互缚柏；我們來(lái)看看樂(lè)觀派UI的概念苹熏。

樂(lè)觀派UI

正如前文所說(shuō)，樂(lè)觀派UI僅僅是處理人機(jī)交互的一種方式。要理解它背后的核心觀念轨域，我們還是要回到“用戶點(diǎn)擊按鈕”這個(gè)場(chǎng)景袱耽。不過(guò)它的原則用在任何樂(lè)觀派交互上都一樣。牛津英文詞典的解釋如下：

樂(lè)觀主義干发，形容詞朱巨，對(duì)于未來(lái)充滿希望和信心。

我們從“對(duì)未來(lái)充滿信心”這部分說(shuō)起枉长。

想一想：用戶操作引發(fā)服務(wù)器錯(cuò)誤的頻率高么冀续？比如說(shuō)，用戶點(diǎn)擊按鈕時(shí)必峰，你的API經(jīng)常出錯(cuò)嗎洪唐？或者用戶點(diǎn)擊某個(gè)鏈接時(shí)經(jīng)常會(huì)出錯(cuò)？說(shuō)實(shí)話我覺(jué)得不會(huì)吼蚁。當(dāng)然凭需，API、服務(wù)器載荷肝匆、錯(cuò)誤處理等級(jí)不同粒蜈，表現(xiàn)也不一樣。還有一些其他因素旗国，作為前端開(kāi)發(fā)或者用戶體驗(yàn)專家枯怖，你可能不會(huì)考慮。但只要API穩(wěn)定可靠粗仓，前端以適當(dāng)方式反饋正確的UI操作嫁怀，那么由用戶觸發(fā)導(dǎo)致的問(wèn)題會(huì)特別少。以目前狀況來(lái)看借浊，我敢說(shuō)不會(huì)超過(guò)1%到3%塘淑。這就意味著97%到99%的狀況下，用戶點(diǎn)擊網(wǎng)站的某個(gè)按鈕蚂斤，服務(wù)器的響應(yīng)應(yīng)該是成功的存捺，沒(méi)有錯(cuò)誤。應(yīng)該從一個(gè)更好的角度來(lái)看待這個(gè)問(wèn)題曙蒸。

樂(lè)觀派UI基于一個(gè)假設(shè)捌治，用戶點(diǎn)擊按鈕，服務(wù)器在97%到99%以上的狀況下返回成功纽窟。

仔細(xì)想一想：如果97%到99%以上肯定是成功的響應(yīng)肖油，我們對(duì)于反饋就有充足信心——嗯，至少比薛定諤的貓有信心多了臂港。我們就可以寫出一個(gè)全新的按鈕交互劇本：

1. 用戶點(diǎn)擊按鈕森枪。

2. 按鈕的視覺(jué)狀態(tài)立刻變?yōu)槌晒Α?/p>

就是這樣视搏！至少?gòu)挠脩舻慕嵌葋?lái)看，僅此而已——不用等待县袱，不用盯著禁用狀態(tài)的按鈕浑娜，也沒(méi)有煩人的菊花轉(zhuǎn)。交互流暢無(wú)縫式散，系統(tǒng)不會(huì)粗暴地現(xiàn)身筋遭，提醒用戶注意它的存在。

樂(lè)觀派UI交互里根本沒(méi)有禁用狀態(tài)按鈕和菊花暴拄。

從開(kāi)發(fā)者的角度來(lái)看漓滔，完整的流程是這樣的：

1.用戶點(diǎn)擊按鈕。

2.按鈕的視覺(jué)狀態(tài)立刻變?yōu)槌晒Α?/p>

3. 請(qǐng)求發(fā)送到服務(wù)器揍移。

4.服務(wù)器響應(yīng)發(fā)回頁(yè)面次和。

5.在97%到99%的狀況下，我們知道響應(yīng)會(huì)成功那伐，所以不用再給用戶添麻煩踏施。

6.系統(tǒng)只會(huì)在請(qǐng)求錯(cuò)誤的情況下現(xiàn)身。暫時(shí)不用擔(dān)心這塊——我們會(huì)在后文中講到罕邀。

我們來(lái)看一些樂(lè)觀派交互的案例畅形。你可能很熟悉“點(diǎn)贊”按鈕，F(xiàn)acebook和Twitter上就有诉探。我們來(lái)看看Twitter的日熬。

很明顯，從點(diǎn)擊按鈕開(kāi)始肾胯。但是請(qǐng)注意用戶松開(kāi)并移開(kāi)鼠標(biāo)時(shí)按鈕的狀態(tài)竖席。它立刻變成了成功狀態(tài)！

點(diǎn)了贊之后敬肚，Twitter立刻把它更新為成功狀態(tài)毕荐。

此時(shí)，我們用瀏覽器開(kāi)發(fā)人員工具艳馒，看看里面的“網(wǎng)絡(luò)”標(biāo)簽欄發(fā)生了什么憎亚。

按鈕的視覺(jué)狀態(tài)改變，獨(dú)立于服務(wù)器請(qǐng)求存在弄慰，此時(shí)服務(wù)器請(qǐng)求正在進(jìn)行中第美。

“網(wǎng)絡(luò)”標(biāo)簽表明，服務(wù)器請(qǐng)求已經(jīng)發(fā)送陆爽，但正在處理中什往。“贊”計(jì)數(shù)器還沒(méi)有增加慌闭，但由于顏色變了别威，界面上已經(jīng)清晰表明了點(diǎn)贊成功第献，甚至服務(wù)器都還沒(méi)有給出反饋。

服務(wù)器返回成功的響應(yīng)后兔港，計(jì)數(shù)器增加，但這個(gè)變化比色彩改變微弱得多仔拟。這就給用戶提供了一種流暢連貫的體驗(yàn)衫樊，感覺(jué)不到任何等待。

盡管贊按鈕在視覺(jué)上已經(jīng)變?yōu)槌晒顟B(tài)利花，計(jì)數(shù)器只在服務(wù)器響應(yīng)確認(rèn)成功后才變化科侈。

在Facebook可以看到另一個(gè)樂(lè)觀派交互的例子，也是點(diǎn)贊按鈕炒事。場(chǎng)景非常相似臀栈，不過(guò)Facebook是連著計(jì)數(shù)器一起直接變?yōu)榱顺晒顟B(tài)，完全沒(méi)有等待服務(wù)器響應(yīng)挠乳。

Facebook用了和Twitter一樣樂(lè)觀派交互权薯，但它連著計(jì)數(shù)器一起更新了視覺(jué)狀態(tài)。

但有一點(diǎn)要注意睡扬。如果我們觀察服務(wù)器響應(yīng)時(shí)間盟蚣，會(huì)發(fā)現(xiàn)它大約在1秒多÷袅考慮到RAIL模型建議采用100毫秒作為簡(jiǎn)單交互的最佳響應(yīng)時(shí)間屎开，相比之下1秒顯得太長(zhǎng)了。但是马靠，用戶感知不到任何等待奄抽，因?yàn)檫@種交互天然的樂(lè)觀屬性。非常棒甩鳄！這是心理表現(xiàn)最佳化的又一個(gè)例子逞度。

但我們要面對(duì)現(xiàn)實(shí)：仍然有1%-3%的可能服務(wù)器會(huì)返回錯(cuò)誤∶浯或者有可能用戶斷線了第晰。又或者一種更有可能的情況，服務(wù)器在技術(shù)上返回了成功狀態(tài)響應(yīng)彬祖，但是這個(gè)響應(yīng)仍然需要客戶端進(jìn)一步處理茁瘦。因此，用戶看到的不是失敗提示储笑，但我們也不能認(rèn)為響應(yīng)是成功狀態(tài)甜熔。要了解如何處理這種狀況，我們首先要了解樂(lè)觀派UI在心理學(xué)上為何能起作用突倍。

樂(lè)觀派UI背后的心理學(xué)

目前為止腔稀，我還沒(méi)有聽(tīng)誰(shuí)抱怨過(guò)主流社交媒體上的樂(lè)觀派交互盆昙，就是我們之前提到的那種。那么焊虏，我們可以說(shuō)這些例子已經(jīng)證明淡喜，樂(lè)觀派UI是有用的。但為什么它們有用诵闭？這僅僅是因?yàn)槿藗冇憛挼却锻拧H此而已啊，親疏尿！你可以直接跳到下個(gè)章節(jié)了瘟芝。

不過(guò)如果你繼續(xù)往下讀，說(shuō)明你對(duì)深層原因感興趣褥琐。那么锌俱，我們稍微深入一點(diǎn)，了解這種方式的心理學(xué)基礎(chǔ)敌呈。

大腦研究幫助我們理解樂(lè)觀派UI起作用的心理學(xué)成因贸宏。

樂(lè)觀派UI有兩個(gè)值得心理學(xué)分析的要素：

用戶行為的快速響應(yīng)；

服務(wù)器對(duì)于潛在錯(cuò)誤的處理驱富，無(wú)論是網(wǎng)絡(luò)還是其他方面锚赤。

用戶行為的快速響應(yīng)

我們談?wù)摌?lè)觀派UI設(shè)計(jì)時(shí)，我們談的其實(shí)是人機(jī)交互中的最佳響應(yīng)時(shí)間褐鸥。早在1968年线脚，這類交互就有了相關(guān)建議。當(dāng)時(shí)叫榕，Robert B. Miller發(fā)表了他的開(kāi)創(chuàng)性研究“人機(jī)對(duì)話的響應(yīng)時(shí)間”（PDF）浑侥，他在其中定義了不同類型的響應(yīng)，用戶可能從計(jì)算機(jī)得到的反饋多達(dá)17種晰绎。Miller將其中一種稱為“控件操作響應(yīng)”——按下按鈕到得到視覺(jué)反饋的時(shí)間寓落。甚至早在1968年，就規(guī)定了它不應(yīng)該超過(guò)0.1-0.2秒荞下。是的伶选，這并不是RAIL模式首創(chuàng)——這個(gè)建議大約已經(jīng)存在了50年。但是尖昏，Miller注明了仰税，對(duì)于熟練的用戶而言，這么短的延遲都可能太慢了抽诉。這就意味著陨簇，理想情況下，用戶應(yīng)當(dāng)在100毫秒內(nèi)獲得操作的反饋迹淌。這就接近人體最快的潛意識(shí)動(dòng)作——眨眼河绽。因此己单，100毫秒的間隔給人感覺(jué)通常就是瞬間“沂危“多數(shù)人每分鐘眨眼大約15次纹笼，一次眨眼平均持續(xù)100到150毫秒”，倫敦城市學(xué)院神經(jīng)學(xué)創(chuàng)立者Davina Bristow說(shuō)苟跪，他還補(bǔ)充說(shuō)：“這意味著我們每年有9天花在眨眼睛上允乐。”

正由于瞬間的視覺(jué)響應(yīng)（甚至在實(shí)際請(qǐng)求完成之前）削咆，樂(lè)觀派UI在心理表現(xiàn)最佳化中，是一種已經(jīng)完善的技巧蠢笋。但事實(shí)上拨齐，那些人們喜愛(ài)的能在眨眼間響應(yīng)的界面，對(duì)我們而言應(yīng)該不算驚喜昨寞，真不算瞻惋。而且這也不難做到。即使在很早以前援岩，我們?cè)谟脩酎c(diǎn)擊按鈕后歼狼，會(huì)將它變?yōu)榻脿顟B(tài)，這通常就足以表明用戶的輸入了享怀。只不過(guò)羽峰，界面中的禁用狀態(tài)意味著被動(dòng)等待：用戶什么也做不了，無(wú)法掌控整個(gè)過(guò)程添瓷。這對(duì)用戶而言很令人掃興梅屉。這就是為什么我們?cè)跇?lè)觀派UI中直接跳過(guò)了禁用狀態(tài)——我們不讓用戶等待，直接給他積極的反饋鳞贷。

處理潛在錯(cuò)誤

現(xiàn)在我們進(jìn)入樂(lè)觀派UI設(shè)計(jì)中的第二個(gè)有趣的心理學(xué)問(wèn)題——處理潛在錯(cuò)誤坯汤。一般來(lái)說(shuō)，有大量信息和文章講述如何以最恰當(dāng)?shù)姆绞教幚鞺I錯(cuò)誤搀愧。但是惰聂，本文中討論的錯(cuò)誤處理，在樂(lè)觀派UI中咱筛，最重要的不是如何處理錯(cuò)誤搓幌，而是什么時(shí)候處理。

人們天生會(huì)把行為聚類處理眷蚓，以主觀定義的目標(biāo)或者小目標(biāo)達(dá)成為結(jié)束鼻种。有時(shí)候我們把這些聚類稱作“思維軌跡”、“思維涌動(dòng)” (PDF)沙热，或者就簡(jiǎn)單稱作“心流”叉钥。心流狀態(tài)的特征包括樂(lè)趣達(dá)到巔峰罢缸、精力集中、創(chuàng)造力爆發(fā)投队。在心流狀態(tài)中枫疆，用戶完全被這項(xiàng)活動(dòng)吸引。Tammy Everts的一條推特準(zhǔn)確描繪了這點(diǎn)：

【圖注：我喜歡心流狀態(tài)的一切敷鸦，除了一點(diǎn)息楔，我會(huì)連續(xù)幾個(gè)小時(shí)忘記眨眼。我的眼睛現(xiàn)在是這樣的扒披≈狄溃】

有時(shí)候，辨認(rèn)出一個(gè)人是否處于心流狀態(tài)非常簡(jiǎn)單碟案。

在網(wǎng)絡(luò)中愿险，這些活動(dòng)聚類的持續(xù)時(shí)間短得多。我們回顧一下Robert B. Miller的作品价说。他指出辆亏，響應(yīng)類型包括：

粗略瀏覽列表信息的響應(yīng)；

仔細(xì)瀏覽圖表信息的響應(yīng)鳖目；

“系統(tǒng)扮叨，你明白我要什么嗎？”的響應(yīng)领迈。

他把這幾類都?xì)w為2秒延遲的類型彻磁，用戶會(huì)獲得相應(yīng)類型的響應(yīng)。如果不繼續(xù)深究狸捅，我們應(yīng)該注意兵迅，這些延遲也取決于一個(gè)人的記憶運(yùn)轉(zhuǎn)（這是指一個(gè)人記住一定量信息所需的時(shí)間，更重要的是薪贫，不僅記住恍箭，還要能運(yùn)用）。我們作為開(kāi)發(fā)者和用戶體驗(yàn)專家瞧省，這意味著在操作了某個(gè)元素的2秒內(nèi)扯夭，用戶會(huì)短暫進(jìn)入心流狀態(tài)，專注于他們期待的響應(yīng)鞍匾。如果服務(wù)器在這個(gè)時(shí)間內(nèi)返回錯(cuò)誤狀態(tài)交洗，用戶仍然處于與界面的“對(duì)話”中，這是個(gè)比喻橡淑。類似于兩個(gè)人對(duì)話构拳，比如你說(shuō)了一句話，對(duì)方委婉地反駁你。想像一下置森，如果對(duì)方花了很長(zhǎng)時(shí)間點(diǎn)頭表示同意（等同于我們UI中的成功狀態(tài)）斗埂，但然后最終對(duì)你說(shuō)“不”。這多尷尬百旌！呛凶？所以，樂(lè)觀派UI必須在心流狀態(tài)的2秒內(nèi)傳達(dá)出錯(cuò)誤信息行贪。

樂(lè)觀派UI必須清楚表達(dá)錯(cuò)誤狀態(tài)給用戶漾稀。最重要的是，它要在用戶進(jìn)入心流狀態(tài)的2秒內(nèi)發(fā)生建瘫。

現(xiàn)在我們掌握了這項(xiàng)心理原則崭捍，用來(lái)處理樂(lè)觀派UI中的錯(cuò)誤，下面我們就開(kāi)始面對(duì)那1%-3%的失敗請(qǐng)求吧啰脚。

樂(lè)觀派UI的悲觀一面

目前為止缕贡，我聽(tīng)到最多的言辭，是說(shuō)樂(lè)觀派UI是一種黑魔法——作弊拣播，如果你這么想也對(duì)。也就是說(shuō)收擦，運(yùn)用這種方式贮配，我們就是在對(duì)用戶撒謊，編造他們操作的結(jié)果塞赂。從法律上說(shuō)泪勒，每個(gè)法庭可能都會(huì)認(rèn)同這一點(diǎn)。但我仍然把這種技巧當(dāng)作一種預(yù)期或是希望宴猾。（記得“樂(lè)觀”的定義嗎圆存？我們?cè)谶@里允許某些“希望”存在。）“撒謊”與“預(yù)期”的區(qū)別在于你如何對(duì)待那1%-3%的失敗請(qǐng)求仇哆。我們來(lái)看看Twitter的樂(lè)觀派“點(diǎn)贊”按鈕在離線狀態(tài)下的表現(xiàn)沦辙。

首先碾褂，點(diǎn)擊按鈕后它立刻變?yōu)槌晒顟B(tài)钦铺，這符合樂(lè)觀派UI模式——當(dāng)用戶松開(kāi)并移開(kāi)鼠標(biāo)握侧，它的表現(xiàn)和用戶處于在線狀態(tài)時(shí)一樣榄鉴。

離線狀態(tài)下讼育，Twitter的點(diǎn)贊按鈕仍然在點(diǎn)擊后產(chǎn)生視覺(jué)變化峡竣。

但由于用戶離線租谈，請(qǐng)求失敗了偷厦。

那么由捎，在用戶進(jìn)入心流狀態(tài)后兔综，錯(cuò)誤信息要盡快給出。2秒通常是心流的持續(xù)時(shí)間。Twitter以一種非常微妙的方式表達(dá)這一點(diǎn)软驰，把按鈕的狀態(tài)還原回去了涧窒。

請(qǐng)求失敗后，Twitter以一種低調(diào)的方式還原了按鈕的視覺(jué)狀態(tài)碌宴，沒(méi)有在視覺(jué)上小題大做杀狡。

認(rèn)真的讀者會(huì)說(shuō)，失敗處理還能更進(jìn)一步贰镣，準(zhǔn)確告知用戶請(qǐng)求沒(méi)有發(fā)送出去呜象，由于發(fā)生了某個(gè)錯(cuò)誤。這就讓系統(tǒng)盡可能保持隱形碑隆。但還有一系列問(wèn)題：

屏幕上忽然出現(xiàn)的任何形式的通知恭陡，會(huì)改變用戶的環(huán)境，刺激他們?nèi)シ治鍪”澈蟮脑蛏厦海@個(gè)原因在錯(cuò)誤信息中可能已經(jīng)說(shuō)明了休玩。

就像所有錯(cuò)誤信息或通知一樣，它應(yīng)該也要引導(dǎo)用戶進(jìn)入新的環(huán)境劫狠，提供相應(yīng)的操作信息拴疤。

操作信息又會(huì)進(jìn)入一個(gè)新的環(huán)境。

好吧独泞，可能大家都覺(jué)得這開(kāi)始有點(diǎn)復(fù)雜了呐矾。因?yàn)檫@樣的錯(cuò)誤處理對(duì)于網(wǎng)站的大型表單有意義，但對(duì)于像點(diǎn)擊按鈕這么簡(jiǎn)單的事情懦砂，它就殺雞用牛刀了——對(duì)于所需的技術(shù)開(kāi)發(fā)蜒犯，還有用戶的記憶運(yùn)轉(zhuǎn)，都太過(guò)了荞膘。

所以罚随，沒(méi)錯(cuò)，我們對(duì)樂(lè)觀派UI中的失敗要有開(kāi)放心態(tài)羽资。我們要盡快告知用戶淘菩，保證樂(lè)觀主義不會(huì)發(fā)展成謊言。但它應(yīng)當(dāng)與環(huán)境相稱屠升。對(duì)于點(diǎn)贊失敗瞄勾，還原按鈕狀態(tài)這樣的微小提示足夠了——也就是說(shuō)，除非用戶點(diǎn)擊的是其他極其重要的狀態(tài)弥激，需要保證它時(shí)刻運(yùn)轉(zhuǎn)正常进陡。

極端悲觀

這就產(chǎn)生了另一個(gè)問(wèn)題：如果用戶獲得成功的反饋，但是在服務(wù)器響應(yīng)之前就關(guān)閉了瀏覽器標(biāo)簽頁(yè)微服，怎么辦趾疚？最討厭的情況是，用戶在請(qǐng)求發(fā)送到服務(wù)器之前就關(guān)閉了標(biāo)簽頁(yè)。但除非用戶極其敏捷糙麦，或者有本事減慢時(shí)間辛孵，這種情況很難發(fā)生。

如果樂(lè)觀派UI運(yùn)用得當(dāng)赡磅，所有對(duì)于各元素的操作都在2秒內(nèi)得到服務(wù)器反饋魄缚，那么用戶就得在2秒內(nèi)關(guān)閉瀏覽器標(biāo)簽頁(yè)。這對(duì)于快捷鍵而言并不難焚廊；但是我們知道冶匹，97%-99%情況下，請(qǐng)求是成功的咆瘟，無(wú)論標(biāo)簽頁(yè)是否激活（只是響應(yīng)沒(méi)有發(fā)送回客戶端而已）嚼隘。

所以，只有對(duì)于那1%-3%的服務(wù)器錯(cuò)誤袒餐，這才算一個(gè)問(wèn)題飞蛹。然后，有多少人在2秒內(nèi)匆匆關(guān)閉頁(yè)面灸眼？除非他們?cè)诒荣愱P(guān)閉標(biāo)簽頁(yè)卧檐，我覺(jué)得這個(gè)數(shù)量沒(méi)有什么意義。但如果你認(rèn)為這個(gè)關(guān)系到特定的項(xiàng)目焰宣，可能會(huì)導(dǎo)致糟糕的后果霉囚，那就應(yīng)該用一些工具來(lái)分析用戶行為；如果這種場(chǎng)景存在的可能性足夠高宛徊，就把樂(lè)觀派交互限定在非重要元素上。

我有意沒(méi)有提及那些故意延遲的請(qǐng)求逻澳；這些不在樂(lè)觀派UI設(shè)計(jì)的范疇內(nèi)闸天。而且，我們?cè)诒^方面討論得已經(jīng)夠多了斜做，現(xiàn)在我們來(lái)總結(jié)一下運(yùn)用樂(lè)觀派UI的核心要點(diǎn)苞氮。

經(jīng)驗(yàn)法則

我真誠(chéng)地希望，這篇文章能幫助你理解樂(lè)觀派UI設(shè)計(jì)背后的核心觀念瓤逼×鳎可能你很希望在下一個(gè)項(xiàng)目中運(yùn)用這種方法。那么霸旗，開(kāi)始前請(qǐng)牢記這些：

我們所有這些討論的前提：你所依靠的API足夠穩(wěn)定贷帮，能夠返回可預(yù)期的結(jié)果。這點(diǎn)無(wú)需多言诱告。

界面要在向服務(wù)器發(fā)送請(qǐng)求之前撵枢，找出可能的錯(cuò)誤和問(wèn)題。最好能夠完全去除可能會(huì)導(dǎo)致API返回錯(cuò)誤的因素。UI元素越簡(jiǎn)單锄禽，越容易運(yùn)用樂(lè)觀派UI潜必。

在簡(jiǎn)單的是非選項(xiàng)上運(yùn)用樂(lè)觀派模式，只有成功與失敗兩種響應(yīng)的元素沃但。例如一個(gè)按鈕的服務(wù)器返回狀態(tài)包含“是”磁滚、“否”、“有可能”（每一種都代表了不同程度的成功）宵晚，這種按鈕就不適合用樂(lè)觀派模式垂攘。

了解API的響應(yīng)時(shí)間。這點(diǎn)至關(guān)重要坝疼。如果你知道某個(gè)特定請(qǐng)求的響應(yīng)時(shí)間一定在2秒以上搜贤，首先應(yīng)該優(yōu)化API到最佳性能。之前提到钝凶，服務(wù)器響應(yīng)時(shí)間在2秒以內(nèi)仪芒，樂(lè)觀派UI才有最佳表現(xiàn)。超過(guò)2秒會(huì)導(dǎo)致難以預(yù)期的結(jié)果耕陷，用戶會(huì)更加挫敗掂名。千萬(wàn)注意。

樂(lè)觀派UI不僅僅是點(diǎn)擊按鈕哟沫。這種方式可以運(yùn)用于頁(yè)面中的各種不同交互饺蔑，包括頁(yè)面的加載。例如框架頁(yè)面就運(yùn)用了相同的觀念：你預(yù)期服務(wù)器能成功返回信息嗜诀，所以直接向用戶先展示占位符猾警。

看得出來(lái)，樂(lè)觀派UI設(shè)計(jì)并不是網(wǎng)頁(yè)中的新奇事物隆敢，也不是什么先進(jìn)技巧发皿。這只是另一種方式，另一種心智模型拂蝎，幫助你掌控產(chǎn)品的預(yù)期表現(xiàn)穴墅。樂(lè)觀派UI設(shè)計(jì)基于人機(jī)交互的心理學(xué)基礎(chǔ)，聰明地運(yùn)用它温自，能夠幫你的網(wǎng)站樹(shù)立更好更流暢的體驗(yàn)玄货，同時(shí)，需要做的其實(shí)很少悼泌。但是松捉，為確保這種模式真正有效，避免產(chǎn)品向用戶撒謊馆里，我們必須理解樂(lè)觀派UI設(shè)計(jì)的原理惩坑。

有問(wèn)題怎么辦

還有什么實(shí)用技巧掉盅，可以在下方進(jìn)行評(píng)論！ 我會(huì)一一進(jìn)行整理以舒，然后繼續(xù)更新趾痘。

更多往期內(nèi)容，可以翻看我以前發(fā)的文章蔓钟，希望對(duì)大家有用永票！

我怕找不到了，怎么辦

先收藏滥沫，如果收藏完還怕忘記放哪的侣集，可以轉(zhuǎn)發(fā)去自己手機(jī)上保存，這樣子就能方便查閱了兰绣。

--------

想快速提升設(shè)計(jì)能力的世分，可以加我新開(kāi)的學(xué)習(xí)秋秋君.羊喲！

君.羊：399495719