2015-9-21 周周
藍(lán)藍(lán)設(shè)計(jì)( tweetduck.com )是一家專注而深入的界面設(shè)計(jì)公司，為期望卓越的國(guó)內(nèi)外企業(yè)提供有效的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì) 、 圖標(biāo)定制 、 用戶體驗(yàn) 、交互設(shè)計(jì)、 網(wǎng)站建設(shè) 、平面設(shè)計(jì)服務(wù)
如果您想訂閱本博客內(nèi)容，每天自動(dòng)發(fā)到您的郵箱中， 請(qǐng)點(diǎn)這里
編者按：今天這篇干貨聊的是人們最討厭的兩個(gè)狀態(tài) —— 軟件報(bào)錯(cuò)和加載緩慢。如何提高這兩個(gè)糟心狀態(tài)的用戶體驗(yàn)呢？作者從不少交互上的細(xì)節(jié)做了考量推敲，附上大神的意見和實(shí)戰(zhàn)案例，特別有現(xiàn)實(shí)參考價(jià)值。
顧名思義，這個(gè)界面是為出錯(cuò)時(shí)的狀況所準(zhǔn)備的。錯(cuò)誤不單行，總是以意想不到的方式組合出現(xiàn)，因此，光一個(gè)界面是不夠的。出錯(cuò)狀況千變?nèi)f化——數(shù)據(jù)無(wú)效或缺失；應(yīng)用無(wú)法連接到服務(wù)器；在上傳尚未成功時(shí)進(jìn)行下一步操作；在信息尚未提交時(shí)離開界面，等等。
報(bào)錯(cuò)狀態(tài)應(yīng)起到安撫人心的作用，讓用戶知道你的產(chǎn)品會(huì)保證他們的信息安全，不會(huì)撤銷、損壞或刪除用戶在出錯(cuò)時(shí)所輸入或上傳的信息。
在此處引用 Jef Raskin 的話再合適不過(guò)了，Jef Raskin 是原始蘋果機(jī)的創(chuàng)造者，“人性化界面”一書的作者，他這樣寫道：“系統(tǒng)應(yīng)以神圣的態(tài)度來(lái)面對(duì)用戶輸入的信息，以阿西莫夫的機(jī)器人第一定律來(lái)理解，便是’機(jī)器人不應(yīng)傷害人類，或因其未采取任何行動(dòng)而致使人類受到傷害?！缑嬖O(shè)計(jì)的第一定律應(yīng)該是：計(jì)算機(jī)不應(yīng)傷害你的操作內(nèi)容，或因其未采取任何行動(dòng)而致使你的工作內(nèi)容受到傷害?！?
未能遵守這一規(guī)則的一大人選要屬航空公司網(wǎng)站了。例如，僅僅因?yàn)槁┨盍诵庞每ǖ陌踩a，在系統(tǒng)刷新頁(yè)面后，不但用刺眼的紅色標(biāo)出漏填的信息，并且把你小心翼翼填寫的所有內(nèi)容都清空了。
再也不會(huì)用你了，拜拜～
好了，終于有這么一款善解人意的報(bào)錯(cuò)信息了。優(yōu)點(diǎn)：還不乏那么點(diǎn)兒幽默感，讓人感到更人性化了。
理想的報(bào)錯(cuò)狀態(tài)是不會(huì)損壞用戶所輸入的任何信息的。如果出錯(cuò)后必須要刷新頁(yè)面，請(qǐng)務(wù)必，一定一定保存所有數(shù)據(jù)，即使填寫有誤，也請(qǐng)保留。通常，用頁(yè)面刷新的方式來(lái)檢測(cè)錯(cuò)誤其實(shí)是一種懶惰的做法。盡可能站在用戶的角度去考慮問題，和開發(fā)人員一起，多花一點(diǎn)功夫，用優(yōu)雅友善的方式來(lái)呈現(xiàn)吧。
另外，報(bào)錯(cuò)狀態(tài)不應(yīng)過(guò)于戲劇化，也不應(yīng)表達(dá)得太模糊。還記得“藍(lán)屏死機(jī)”么？或者蘋果唬人的內(nèi)核報(bào)錯(cuò)？如果你是計(jì)算機(jī)老手，那一定不會(huì)對(duì)“中止，重試以及失敗”命令感到陌生。所有這些報(bào)錯(cuò)狀態(tài)都是因?yàn)橄到y(tǒng)出現(xiàn)重大錯(cuò)誤而要求重啟或重試，而我們至今對(duì)這些界面仍記憶猶新，正是因?yàn)樗鼈凅@嚇到所有用戶，令其不知所措。
微軟的死機(jī)藍(lán)屏如此聲名狼籍，正是因?yàn)樗鼑樀搅怂腥?。雖然藍(lán)屏比紅屏要好些，但是它的出現(xiàn)總是毫無(wú)征兆，如此唐突，還伴有恐怖的特定聲效。即使這些都有效地達(dá)到了調(diào)試的目的，但還是很難讓人接受。
報(bào)錯(cuò)狀態(tài)必須傳達(dá)簡(jiǎn)明友善的指導(dǎo)信息，讓用戶知道下一步該做什么。難懂的錯(cuò)誤代碼，十六進(jìn)制數(shù)字，再加上難以理解的進(jìn)一步操作信息，都只能嚇到用戶，令其不知所措。
當(dāng)然，你的目標(biāo)用戶群可能是火箭科學(xué)家或計(jì)算機(jī)工程師，在這樣的情況下，這些高科技報(bào)錯(cuò)信息也許適用。然而，大部分應(yīng)用是供人們?cè)谌粘Ｉ钪惺褂玫?，這類報(bào)錯(cuò)信息就顯得越來(lái)越不合適。
其實(shí)原則很簡(jiǎn)單，盡可能把報(bào)錯(cuò)信息呈現(xiàn)得人性化，而非技術(shù)性，這樣更適合受眾。試想一下，如果遇到出錯(cuò)的情況，你想要得到些什么信息？
報(bào)錯(cuò)狀態(tài)是十分普遍多見的，也是設(shè)計(jì)師們最不愿意設(shè)計(jì)的界面。不過(guò)，我向你保證，如果在設(shè)計(jì)這個(gè)狀態(tài)的時(shí)候，你也用與前兩個(gè)狀態(tài)相同的重視度來(lái)對(duì)待，你的產(chǎn)品將擁有愉悅使用體驗(yàn)。更重要的是，你會(huì)預(yù)見用戶可能會(huì)遇到的問題，并提前準(zhǔn)備解決方案。
報(bào)錯(cuò)狀態(tài)和理想狀態(tài)之間的差別是黑白分明的，那么如果界面中只有一行數(shù)據(jù)，幾張照片，完成了一半的個(gè)人資料，它又該是怎樣的視覺效果呢？局部狀態(tài)是指界面不再全空，已有著少量?jī)?nèi)容的情況。這一步的工作就是要防止用戶失去興趣，從而放棄使用產(chǎn)品。
這是個(gè)利用微互動(dòng)形式來(lái)引導(dǎo)用戶預(yù)見理想狀態(tài)的好機(jī)會(huì)，幫助他們了解產(chǎn)品的真正價(jià)值所在。這個(gè)方式也具有一定的暗示作用，用戶花了時(shí)間來(lái)了解產(chǎn)品可以達(dá)到的效果，就會(huì)有繼續(xù)使用的完成欲。
我們可以參考一些游戲設(shè)計(jì)的原理。當(dāng)然，并不是說(shuō)要像 la Clash of Clans 那樣沒完沒了地收集水晶來(lái)晉級(jí)，而是在該狀態(tài)中建立一種加速法。
在游戲設(shè)計(jì)的領(lǐng)域中，玩家可以預(yù)見到未來(lái)的能力，這引導(dǎo)他們通過(guò)完成預(yù)設(shè)的系列任務(wù)來(lái)獲得這些能力。這個(gè)小技巧能夠讓玩家忽視枯燥的過(guò)程，從而達(dá)到產(chǎn)品的最大價(jià)值。
“在進(jìn)入加速期時(shí)，玩家為了要晉級(jí)，是不會(huì)考慮到重復(fù)的操作有多乏味的，他們只是不停地操作，享受加速晉級(jí)的成果……還有一種可能，就是玩家在抵達(dá)了一個(gè)非常高的級(jí)別后，無(wú)法理解他們?cè)谟螒蛑械娜宋锼鶕碛械募寄堋募夹g(shù)層面解釋，就是推算成倍增長(zhǎng)的能力結(jié)構(gòu)在超出玩家的預(yù)測(cè)范圍后消失。這和傳統(tǒng)流程有所不同，但是玩家所獲得的愉悅感是十分相似的?！?
下面我們一起來(lái)看看幾個(gè)有意思的局部狀態(tài)案例：
領(lǐng)英著名的“個(gè)人信息完成度”進(jìn)度條，鼓勵(lì)用戶填寫所有信息，獲得100%完成度。完美主義強(qiáng)迫癥同學(xué)可以滿足了。
Dropbox 會(huì)提示用戶，只差哪幾項(xiàng)任務(wù)就能獲得額外儲(chǔ)存空間了，相信這是吸引大部分 Dropbox 用戶的主要原因所在了。這些信息看似提醒用戶需要完成那些步驟，而恰恰是這些步驟起到了培訓(xùn)用戶，推廣功能的作用。
這個(gè)狀態(tài)很容易被忽視，許多產(chǎn)品設(shè)計(jì)師會(huì)把這個(gè)狀態(tài)在最后臨時(shí)抱佛腳地加進(jìn)去。的確，要預(yù)見到所有的狀況是一個(gè)很大的負(fù)擔(dān)。當(dāng)你的應(yīng)用正在載入數(shù)據(jù)，等待網(wǎng)絡(luò)連接，或進(jìn)入下個(gè)頁(yè)面的途中，諸如此類的情況都需要好好費(fèi)心思考，應(yīng)當(dāng)如何在接入數(shù)據(jù)的過(guò)程中，合適地展現(xiàn)這些界面?？梢允钦麄€(gè)頁(yè)面的加載提示，僅僅加載內(nèi)容板塊，或是行內(nèi)載入信息。檢測(cè)表單中用戶名是否可用時(shí)常用到行內(nèi)載入。
其實(shí)載入界面也是同等重要的。設(shè)計(jì)師們經(jīng)常只草草用空白界面和轉(zhuǎn)動(dòng)條解決，這就將所有的責(zé)任重?fù)?dān)放在了尚未出現(xiàn)的內(nèi)容上。這樣做就好比讓用戶看著時(shí)針在鐘表上緩緩移動(dòng)，你是會(huì)選擇讓用戶大眼瞪著不停重復(fù)的加載動(dòng)畫呢？還是告訴他們實(shí)際載入的百分比？
Luke Wroblewski 是一名產(chǎn)品設(shè)計(jì)專家，他帶領(lǐng)團(tuán)隊(duì)為eBay、Yahoo！以及谷歌制作項(xiàng)目，他在出售了自己的移動(dòng)投票應(yīng)用Polar后，加入了谷歌。
Wroblewski 和他的團(tuán)隊(duì)發(fā)現(xiàn)，在每個(gè)民意投票項(xiàng)目都使用載入轉(zhuǎn)動(dòng)條后，就有用戶投訴說(shuō)應(yīng)用變慢了，他們會(huì)說(shuō)“頁(yè)面的刷新和載入要等太久了，沒有之前的版本快?！?
Wroblewski意識(shí)到：
“使用進(jìn)度提示器只能讓用戶感到在看著鐘等待?！?br /> “結(jié)果就不言而喻了，時(shí)間好像走得特別慢，連同我們的應(yīng)用也慢了下來(lái)，那是因?yàn)槲覀兊淖⒁饬Χ纪Ａ粼诹颂崾酒鞅旧?。如果聚焦換作真正的進(jìn)度，讓用戶知道離目標(biāo)的距離，就沒有干等著那么焦躁了?！?
在意識(shí)到那些問題后，就有了這么個(gè)被稱之為“界面架構(gòu)”的解決方案。這一技術(shù)已為Pinterest和臉書所用，大家可以在他們的網(wǎng)站以及移動(dòng)應(yīng)用中見到。
界面架構(gòu)是對(duì)載入狀態(tài)的革新，因?yàn)樗呀?jīng)載入，可以令焦點(diǎn)聚集在內(nèi)容上，而不是告訴用戶內(nèi)容正在加載。它的表現(xiàn)方式是先載入頁(yè)面基礎(chǔ)架構(gòu)，再逐漸下載其中缺失的部分。這一技術(shù)的一大優(yōu)勢(shì)就是完全擺脫了轉(zhuǎn)動(dòng)條，并能讓用戶更好地理解你的產(chǎn)品。
Luke Wroblewski的應(yīng)用 Polar利用界面架構(gòu)來(lái)載入內(nèi)容。
Pinterest在使用界面架構(gòu)的同時(shí)，加入了自己的獨(dú)特小心思：在圖片載入之前，先用它的“平均色”來(lái)作為背景色塊，可謂是一種特別的預(yù)覽方式。
臉書在他們的應(yīng)用Paper上發(fā)明了一種類似的技術(shù)，并在網(wǎng)絡(luò)版上也同步了。他們將這一技術(shù)結(jié)合獨(dú)有的“閃光效果”——界面在展示架構(gòu)的同時(shí)，會(huì)載入與內(nèi)容空間相似的圖形，并以閃動(dòng)的方式來(lái)告訴用戶內(nèi)容正在加載。
“沒有人樂意等待，只是不得不等待而已，”Instagram 的聯(lián)合創(chuàng)始人 Mike Krieger 在2011年曾這樣說(shuō)道，當(dāng)時(shí)，他也介紹了是如何在工程技術(shù)上達(dá)到應(yīng)用的理想速度的。
其實(shí)，Krieger 引領(lǐng)了產(chǎn)品操作應(yīng)當(dāng)被“樂觀”表現(xiàn)的觀念。預(yù)估一個(gè)動(dòng)作被操作成功，使用速率就會(huì)得到大大提高。
我們拿“喜歡”一張圖片或?qū)ζ淞粞詠?lái)打比方，這兩種操作都會(huì)即刻被默認(rèn)為操作成功。這時(shí)，產(chǎn)品的后臺(tái)系統(tǒng)會(huì)真正完成這一操作。
樂觀操作也可大大減少媒體文件的上傳速度。Instagram 會(huì)在用戶選定濾鏡后就自動(dòng)上傳，而不是等他們點(diǎn)擊“完成”按鈕后才開始。雖然這并不是最佳的工程方案，因?yàn)樵谟脩舫蜂N操作時(shí)，數(shù)據(jù)會(huì)被扔出，但無(wú)論如何，這個(gè)方式在體驗(yàn)感上提升了上傳的速度。多念念“反正也沒有人看見這些變動(dòng)”就好了，因?yàn)樗辽偬嵘水a(chǎn)品組建的速率。
現(xiàn)在你已經(jīng)看過(guò)了一系列交互界面堆棧的案例，我們也對(duì)5個(gè)狀態(tài)分別作了分析。接下來(lái)的問題是，他們要如何組合使用呢？如何讓界面在不同狀態(tài)間轉(zhuǎn)換呢？這就是交互界面堆棧的力量所在了。這些狀態(tài)并非真空存在，他們以垂直軸的方式相連，產(chǎn)品可以在任何時(shí)候調(diào)用其中之一。你應(yīng)該做到不但對(duì)每個(gè)狀態(tài)本身都認(rèn)真思考，更要指定屏幕狀態(tài)是如何轉(zhuǎn)換的。
我假設(shè)了一個(gè)信息應(yīng)用案例來(lái)解釋這些概念。
為什么用信息應(yīng)用來(lái)作例子呢？雖然，這些狀態(tài)所發(fā)揮的作用在這個(gè)案例中并不那么顯而易見，但是，我想向大家展示一下，在信息應(yīng)用這樣操作時(shí)間如此短暫的界面中也可以運(yùn)用交互界面堆棧的原理。更重要的是，從這個(gè)案例可以看出我們的任重而道遠(yuǎn)，要不時(shí)思考每個(gè)屏幕狀態(tài)之間需要怎樣才能做到順暢連接。
要做一個(gè)信息應(yīng)用，我們應(yīng)當(dāng)考慮些什么呢？
我們需要想到當(dāng)沒有人任何信息時(shí)應(yīng)當(dāng)怎樣展示。這便是我們的空白狀態(tài)。
我們的局部狀態(tài)是當(dāng)一方發(fā)了一條信息后。
然后便是收到一條信息——輸入指示器。這也就可以被稱之為載入狀態(tài)。但是，等等，載入狀態(tài)還有另一個(gè)系列——當(dāng)我們發(fā)出一條信息后，接下來(lái)還有成功發(fā)送確認(rèn)。
發(fā)送途中也可能出錯(cuò)，也就是信息發(fā)送失敗。
千萬(wàn)別忘了，我們要如何解決出錯(cuò)問題——嘗試再次發(fā)送。如此，便再有一版載入狀態(tài)。
最后，我們就來(lái)到了理想狀態(tài)——當(dāng)多個(gè)信息組成一個(gè)對(duì)話。
假定Marty和Doc剛交換了電話號(hào)碼，Marty想給Doc發(fā)一個(gè)信息，告訴他自己在Twin Pines Mall看見了什么。
因?yàn)楝F(xiàn)在界面中沒有任何信息，我們有機(jī)會(huì)利用空白狀態(tài)來(lái)鼓勵(lì)用戶以建議方式進(jìn)行操作——在這個(gè)案例中，便是發(fā)一條信息。
但是，當(dāng)信息發(fā)出后是什么狀態(tài)呢？我們需要優(yōu)雅地從空白狀態(tài)轉(zhuǎn)入局部狀態(tài)：在這里，就是當(dāng)Marty發(fā)出第一條信息的時(shí)候。
讓我們來(lái)快進(jìn)到Doc已經(jīng)回復(fù)了的狀態(tài)。他回復(fù)了一條信息，但是仍然在繼續(xù)回復(fù)！因此，出現(xiàn)了正在輸入的指示器，也就是載入狀態(tài)的另一種形式。
當(dāng)輸入完畢，信息發(fā)出后，輸入指示器便消失，取而代之的是新信息以彈入，推動(dòng)其它信息的方式呈現(xiàn)。
那么，Marty想要回復(fù)的時(shí)候要怎么辦呢？首先，我們需要?jiǎng)?chuàng)建狀態(tài)意識(shí)——當(dāng)輸入框中有文字時(shí)，“發(fā)送”按鈕就會(huì)從灰色（禁用狀態(tài)）轉(zhuǎn)為藍(lán)色（激活狀態(tài)）。然后，當(dāng)我們發(fā)送信息時(shí)，發(fā)送進(jìn)程的載入狀態(tài)就出現(xiàn)了。此時(shí)，信息顯示為暗沉的顏色，因?yàn)榘l(fā)送尚未成功。只有當(dāng)“發(fā)送成功”的確認(rèn)標(biāo)記出現(xiàn)后，才為正式完成。
如果信息未發(fā)送成功呢？于是我們便進(jìn)入了報(bào)錯(cuò)狀態(tài)。紅色的標(biāo)記就取代了載入轉(zhuǎn)動(dòng)條，我們還會(huì)收到一條報(bào)錯(cuò)信息，并且信息本身也是“未發(fā)送”的灰暗狀態(tài)。點(diǎn)擊未成功發(fā)送的信息會(huì)自動(dòng)重新發(fā)送。當(dāng)我們幸運(yùn)地發(fā)送成功后，紅色的感嘆號(hào)會(huì)消失，信息顏色也隨之顯示正常，再有一條發(fā)送成功的信息提示。
親愛的朋友們，這就是交互界面堆棧的操作方式了。5個(gè)屏幕狀態(tài)之間的無(wú)縫轉(zhuǎn)換才是真正的重點(diǎn)。如果沒有這些轉(zhuǎn)換元素，用戶就可能會(huì)對(duì)新狀態(tài)的出現(xiàn)和消失感到困惑或吃驚。我們的使命可不是讓用戶感到不適或困惑，對(duì)嗎？
最后，這些狀態(tài)的執(zhí)行需要設(shè)計(jì)和開發(fā)的密切合作。在這兩者上都需要花足時(shí)間，只有在他們緊密結(jié)合后，才能為用戶創(chuàng)造出最佳的全面體驗(yàn)。
藍(lán)藍(lán)設(shè)計(jì)的小編 http://tweetduck.com