報錯狀態(tài)

顧名思義，這個界面是為出錯時的狀況所準備的。錯誤不單行，總是以意想不到的方式組合出現，因此，光一個界面是不夠的。出錯狀況千變萬化——數據無效或缺失；應用無法連接到服務器；在上傳尚未成功時進行下一步操作；在信息尚未提交時離開界面，等等。

創(chuàng)新互聯建站服務項目包括城關網站建設、城關網站制作、城關網頁制作以及城關網絡營銷策劃等。多年來，我們專注于互聯網行業(yè)，利用自身積累的技術優(yōu)勢、行業(yè)經驗、深度合作伙伴關系等，向廣大中小型企業(yè)、政府機構等提供互聯網行業(yè)的解決方案，城關網站推廣取得了明顯的社會效益與經濟效益。目前，我們服務的客戶以成都為中心已經輻射到城關省份的部分城市，未來相信會繼續(xù)擴大服務區(qū)域并繼續(xù)獲得客戶的支持與信任！

報錯狀態(tài)應起到安撫人心的作用，讓用戶知道你的產品會保證他們的信息安全，不會撤銷、損壞或刪除用戶在出錯時所輸入或上傳的信息。

在此處引用 Jef Raskin 的話再合適不過了，Jef Raskin 是原始蘋果機的創(chuàng)造者，“人性化界面”一書的作者，他這樣寫道：“系統(tǒng)應以神圣的態(tài)度來面對用戶輸入的信息，以阿西莫夫的機器人第一定律來理解，便是’機器人不應傷害人類，或因其未采取任何行動而致使人類受到傷害。’界面設計的第一定律應該是：計算機不應傷害你的操作內容，或因其未采取任何行動而致使你的工作內容受到傷害。”

未能遵守這一規(guī)則的一大人選要屬航空公司網站了。例如，僅僅因為漏填了信用卡的安全碼，在系統(tǒng)刷新頁面后，不但用刺眼的紅色標出漏填的信息，并且把你小心翼翼填寫的所有內容都清空了。

再也不會用你了，拜拜～

錯！對！也許？

好了，終于有這么一款善解人意的報錯信息了。優(yōu)點：還不乏那么點兒幽默感，讓人感到更人性化了。

理想的報錯狀態(tài)是不會損壞用戶所輸入的任何信息的。如果出錯后必須要刷新頁面，請務必，一定一定保存所有數據，即使填寫有誤，也請保留。通常，用頁面刷新的方式來檢測錯誤其實是一種懶惰的做法。盡可能站在用戶的角度去考慮問題，和開發(fā)人員一起，多花一點功夫，用優(yōu)雅友善的方式來呈現吧。

另外，報錯狀態(tài)不應過于戲劇化，也不應表達得太模糊。還記得“藍屏死機”么？或者蘋果唬人的內核報錯？如果你是計算機老手，那一定不會對“中止，重試以及失敗”命令感到陌生。所有這些報錯狀態(tài)都是因為系統(tǒng)出現重大錯誤而要求重啟或重試，而我們至今對這些界面仍記憶猶新，正是因為它們驚嚇到所有用戶，令其不知所措。

微軟的死機藍屏如此聲名狼籍，正是因為它嚇到了所有人。雖然藍屏比紅屏要好些，但是它的出現總是毫無征兆，如此唐突，還伴有恐怖的特定聲效。即使這些都有效地達到了調試的目的，但還是很難讓人接受。

報錯狀態(tài)必須傳達簡明友善的指導信息，讓用戶知道下一步該做什么。難懂的錯誤代碼，十六進制數字，再加上難以理解的進一步操作信息，都只能嚇到用戶，令其不知所措。

當然，你的目標用戶群可能是火箭科學家或計算機工程師，在這樣的情況下，這些高科技報錯信息也許適用。然而，大部分應用是供人們在日常生活中使用的，這類報錯信息就顯得越來越不合適。

其實原則很簡單，盡可能把報錯信息呈現得人性化，而非技術性，這樣更適合受眾。試想一下，如果遇到出錯的情況，你想要得到些什么信息？

報錯狀態(tài)是十分普遍多見的，也是設計師們最不愿意設計的界面。不過，我向你保證，如果在設計這個狀態(tài)的時候，你也用與前兩個狀態(tài)相同的重視度來對待，你的產品將擁有愉悅使用體驗。更重要的是，你會預見用戶可能會遇到的問題，并提前準備解決方案。

局部狀態(tài)

報錯狀態(tài)和理想狀態(tài)之間的差別是黑白分明的，那么如果界面中只有一行數據，幾張照片，完成了一半的個人資料，它又該是怎樣的視覺效果呢？局部狀態(tài)是指界面不再全空，已有著少量內容的情況。這一步的工作就是要防止用戶失去興趣，從而放棄使用產品。

這是個利用微互動形式來引導用戶預見理想狀態(tài)的好機會，幫助他們了解產品的真正價值所在。這個方式也具有一定的暗示作用，用戶花了時間來了解產品可以達到的效果，就會有繼續(xù)使用的完成欲。

我們可以參考一些游戲設計的原理。當然，并不是說要像 la Clash of Clans 那樣沒完沒了地收集水晶來晉級，而是在該狀態(tài)中建立一種加速法。

在游戲設計的領域中，玩家可以預見到未來的能力，這引導他們通過完成預設的系列任務來獲得這些能力。這個小技巧能夠讓玩家忽視枯燥的過程，從而達到產品的價值。

“在進入加速期時，玩家為了要晉級，是不會考慮到重復的操作有多乏味的，他們只是不停地操作，享受加速晉級的成果……還有一種可能，就是玩家在抵達了一個非常高的級別后，無法理解他們在游戲中的人物所擁有的技能。從技術層面解釋，就是推算成倍增長的能力結構在超出玩家的預測范圍后消失。這和傳統(tǒng)流程有所不同，但是玩家所獲得的愉悅感是十分相似的。”

下面我們一起來看看幾個有意思的局部狀態(tài)案例：

領英著名的“個人信息完成度”進度條，鼓勵用戶填寫所有信息，獲得100%完成度。完美主義強迫癥同學可以滿足了。

Dropbox 會提示用戶，只差哪幾項任務就能獲得額外儲存空間了，相信這是吸引大部分 Dropbox 用戶的主要原因所在了。這些信息看似提醒用戶需要完成那些步驟，而恰恰是這些步驟起到了培訓用戶，推廣功能的作用。

載入狀態(tài)

這個狀態(tài)很容易被忽視，許多產品設計師會把這個狀態(tài)在最后臨時抱佛腳地加進去。的確，要預見到所有的狀況是一個很大的負擔。當你的應用正在載入數據，等待網絡連接，或進入下個頁面的途中，諸如此類的情況都需要好好費心思考，應當如何在接入數據的過程中，合適地展現這些界面?？梢允钦麄€頁面的加載提示，僅僅加載內容板塊，或是行內載入信息。檢測表單中用戶名是否可用時常用到行內載入。

其實載入界面也是同等重要的。設計師們經常只草草用空白界面和轉動條解決，這就將所有的責任重擔放在了尚未出現的內容上。這樣做就好比讓用戶看著時針在鐘表上緩緩移動，你是會選擇讓用戶大眼瞪著不停重復的加載動畫呢？還是告訴他們實際載入的百分比？

Luke Wroblewski 是一名產品設計專家，他帶領團隊為eBay、Yahoo！以及谷歌制作項目，他在出售了自己的移動投票應用Polar后，加入了谷歌。

Wroblewski 和他的團隊發(fā)現，在每個民意投票項目都使用載入轉動條后，就有用戶投訴說應用變慢了，他們會說“頁面的刷新和載入要等太久了，沒有之前的版本快。”

Wroblewski意識到：

“使用進度提示器只能讓用戶感到在看著鐘等待。”

“結果就不言而喻了，時間好像走得特別慢，連同我們的應用也慢了下來，那是因為我們的注意力都停留在了提示器本身。如果聚焦換作真正的進度，讓用戶知道離目標的距離，就沒有干等著那么焦躁了。”

界面架構

在意識到那些問題后，就有了這么個被稱之為“界面架構”的解決方案。這一技術已為Pinterest和臉書所用，大家可以在他們的網站以及移動應用中見到。

界面架構是對載入狀態(tài)的革新，因為它已經載入，可以令焦點聚集在內容上，而不是告訴用戶內容正在加載。它的表現方式是先載入頁面基礎架構，再逐漸下載其中缺失的部分。這一技術的一大優(yōu)勢就是完全擺脫了轉動條，并能讓用戶更好地理解你的產品。

Luke Wroblewski的應用 Polar利用界面架構來載入內容。

Pinterest在使用界面架構的同時，加入了自己的獨特小心思：在圖片載入之前，先用它的“平均色”來作為背景色塊，可謂是一種特別的預覽方式。

臉書在他們的應用Paper上發(fā)明了一種類似的技術，并在網絡版上也同步了。他們將這一技術結合獨有的“閃光效果”——界面在展示架構的同時，會載入與內容空間相似的圖形，并以閃動的方式來告訴用戶內容正在加載。

以樂觀的動作來擬定操作成功

“沒有人樂意等待，只是不得不等待而已，”Instagram 的聯合創(chuàng)始人 Mike Krieger 在2011年曾這樣說道，當時，他也介紹了是如何在工程技術上達到應用的理想速度的。

其實，Krieger 引領了產品操作應當被“樂觀”表現的觀念。預估一個動作被操作成功，使用速率就會得到大大提高。

我們拿“喜歡”一張圖片或對其留言來打比方，這兩種操作都會即刻被默認為操作成功。這時，產品的后臺系統(tǒng)會真正完成這一操作。

樂觀操作也可大大減少媒體文件的上傳速度。Instagram 會在用戶選定濾鏡后就自動上傳，而不是等他們點擊“完成”按鈕后才開始。雖然這并不是的工程方案，因為在用戶撤銷操作時，數據會被扔出，但無論如何，這個方式在體驗感上提升了上傳的速度。多念念“反正也沒有人看見這些變動”就好了，因為它至少提升了產品組建的速率。

現在你已經看過了一系列交互界面堆棧的案例，我們也對5個狀態(tài)分別作了分析。接下來的問題是，他們要如何組合使用呢？如何讓界面在不同狀態(tài)間轉換呢？這就是交互界面堆棧的力量所在了。這些狀態(tài)并非真空存在，他們以垂直軸的方式相連，產品可以在任何時候調用其中之一。你應該做到不但對每個狀態(tài)本身都認真思考，更要指定屏幕狀態(tài)是如何轉換的。

我假設了一個信息應用案例來解釋這些概念。

為什么用信息應用來作例子呢？雖然，這些狀態(tài)所發(fā)揮的作用在這個案例中并不那么顯而易見，但是，我想向大家展示一下，在信息應用這樣操作時間如此短暫的界面中也可以運用交互界面堆棧的原理。更重要的是，從這個案例可以看出我們的任重而道遠，要不時思考每個屏幕狀態(tài)之間需要怎樣才能做到順暢連接。

要做一個信息應用，我們應當考慮些什么呢？

我們需要想到當沒有人任何信息時應當怎樣展示。這便是我們的空白狀態(tài)。

我們的局部狀態(tài)是當一方發(fā)了一條信息后。

然后便是收到一條信息——輸入指示器。這也就可以被稱之為載入狀態(tài)。但是，等等，載入狀態(tài)還有另一個系列——當我們發(fā)出一條信息后，接下來還有成功發(fā)送確認。

發(fā)送途中也可能出錯，也就是信息發(fā)送失敗。

千萬別忘了，我們要如何解決出錯問題——嘗試再次發(fā)送。如此，便再有一版載入狀態(tài)。

最后，我們就來到了理想狀態(tài)——當多個信息組成一個對話。

虛擬案例

假定Marty和Doc剛交換了電話號碼，Marty想給Doc發(fā)一個信息，告訴他自己在Twin Pines Mall看見了什么。

因為現在界面中沒有任何信息，我們有機會利用空白狀態(tài)來鼓勵用戶以建議方式進行操作——在這個案例中，便是發(fā)一條信息。

但是，當信息發(fā)出后是什么狀態(tài)呢？我們需要優(yōu)雅地從空白狀態(tài)轉入局部狀態(tài)：在這里，就是當Marty發(fā)出第一條信息的時候。

讓我們來快進到Doc已經回復了的狀態(tài)。他回復了一條信息，但是仍然在繼續(xù)回復！因此，出現了正在輸入的指示器，也就是載入狀態(tài)的另一種形式。

當輸入完畢，信息發(fā)出后，輸入指示器便消失，取而代之的是新信息以彈入，推動其它信息的方式呈現。

那么，Marty想要回復的時候要怎么辦呢？首先，我們需要創(chuàng)建狀態(tài)意識——當輸入框中有文字時，“發(fā)送”按鈕就會從灰色（禁用狀態(tài)）轉為藍色（激活狀態(tài)）。然后，當我們發(fā)送信息時，發(fā)送進程的載入狀態(tài)就出現了。此時，信息顯示為暗沉的顏色，因為發(fā)送尚未成功。只有當“發(fā)送成功”的確認標記出現后，才為正式完成。

如果信息未發(fā)送成功呢？于是我們便進入了報錯狀態(tài)。紅色的標記就取代了載入轉動條，我們還會收到一條報錯信息，并且信息本身也是“未發(fā)送”的灰暗狀態(tài)。點擊未成功發(fā)送的信息會自動重新發(fā)送。當我們幸運地發(fā)送成功后，紅色的感嘆號會消失，信息顏色也隨之顯示正常，再有一條發(fā)送成功的信息提示。

在現實世界里……

親愛的朋友們，這就是交互界面堆棧的操作方式了。5個屏幕狀態(tài)之間的無縫轉換才是真正的重點。如果沒有這些轉換元素，用戶就可能會對新狀態(tài)的出現和消失感到困惑或吃驚。我們的使命可不是讓用戶感到不適或困惑，對嗎？

最后，這些狀態(tài)的執(zhí)行需要設計和開發(fā)的密切合作。在這兩者上都需要花足時間，只有在他們緊密結合后，才能為用戶創(chuàng)造出的全面體驗。

干貨大總結：

不要只關注理想狀態(tài)，臨時補上其它狀態(tài)。你的產品是一款解決方案，好好思考每一屏是如何一步步引導用戶抵達最終目標的？

推薦 Samuel Hulick 的 The Elements of User Onboarding

把載入界面加入到原型制作的一部分，它們是產品體驗的一部分，不應成為最后補加的界面。和工程師們緊密交流，找到實現效果的理想方式，甚至是優(yōu)化的方式。

花時間好好想想可以造成出錯的極端狀況。你會如何解決？怎樣才能以友好的方式提示用戶？這是一個成本和得益之間的權衡，但我們至少應當解決最惱人的錯誤，盡努力來保存用戶的數據。

網站欄目：認真就贏了！做好這兩個狀態(tài)可以迅速提高用戶體驗
瀏覽路徑：http://jinyejixie.com/article38/cjdppp.html

成都網站建設公司_創(chuàng)新互聯，為您提供手機網站建設、虛擬主機、網站制作、企業(yè)建站、網站建設、品牌網站建設

廣告

聲明：本網站發(fā)布的內容（圖片、視頻和文字）以用戶投稿、用戶轉載內容為主，如果涉及侵權請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網站立場，如需處理請聯系客服。電話：028-86922220；郵箱：631063699@qq.com。內容未經允許不得轉載，或轉載時需注明來源： 創(chuàng)新互聯