你是否體驗過死氣沉沉的互動介面？或是你又是否曾感到自己設計的UI介面老是缺了點什麼？假設你閱歷過上述的情況，那麼你應該就體驗過「尷尬」的UI介面。收下這篇全是乾貨的文章，拯救你的尷尬症！
「尷尬」的UI介面就好比少了載入批示，忘懷奉告使用者出了什麼錯，或是更甚者，乾脆用可怕的過錯訊息嚇死使用者。也可能介面中的圖表很奇怪，只含有很少的資料，新資料又會在毫無徵兆的情況下驟然泛起。
假設你仍然不明白「尷尬」的UI是什麼，我就來舉一個簡單的真實案例：我使用Apple TV的頻率真的很高（我會奉告你我有最新星球大戰反抗軍的最新劇集，而且我寫這篇文章的時候，它就是我的背景音樂麼？）我每一次開啟舊檔已購電影的時候，這是我看到的介面：
看到它的一刻，我是恐懼的。其實，每一次看到它，我都會被嚇到。我為何會被嚇到？因為它徹底沒有任何載入或者流動提醒。在螢幕空白的幾秒裡，我腦海裡會泛起幾個可怕的念頭：我的電影去哪裡了？是否消失了？被移除了？被黑了？
在我的小心臟都快停跳了的時候，我的電影驟然泛起了。
這一點都不人道化好嗎？
相比之下，播放影片的介面就好多了。在遠端遙控上點擊「播放」後，螢幕中顯示出整潔的提醒，奉告我影片行將開始播放。
看出體驗差別了吧？
要製作出易懂易用的介面設計，咱們產品設計師就需要認清這個悲慟的事實，並堅決站到它的對立面去——電腦是很懶散的，它們並不會說明人們理解有什麼新內容，或者下一步做什麼，或者犯錯後要怎麼應答？
在電腦的世界裡，它們只管在犯錯的時候丟出依稀不清的過錯代碼，發出危言聳聽的警報聲，甚至乾脆只泛起二進位代碼。
可是二進位代碼不是人類溝通的語系，咱們用邏輯思考，咱們日子在一個物理世界。當一扇門開啟舊檔時，它會呈弧形搖曳；當一個物體經由時，咱們看見它在搬移；當一個東西掉落時，咱們看見它彈起。
「尷尬」的UI介面之所以糟糕糕，是因為設計師並不斟酌這些因素，也就是說，有些元￥素的表現形式不科學，打破了既定規則。
那麼具體是哪些規則呢？
互動介面堆堆疊規則。現在咱們就來聊聊。
互動介面堆堆疊
電子產品中的每一個螢幕介面都含有多重特性。
準確來講，是5種。
這些不同的特性會依據實際情況來分別展示給使用者。設計師把這些特性叫作狀況。你在做每個介面的的時候都需要斟酌到這些狀況。依據互動介面堆堆疊規則，這5種狀況可以幫你樹立聯貫、寬容、易用且人道化的介面設計。
說老實話，你上次只做一種介面狀況是何時？即便你做天氣運用，一種狀況也是不夠用的。
事實是咱們所日子的世界並不完美，事物都有犯錯的時候。主電腦需要時間來響應，你的使用者也不會按你所但願的模式使用產品。因而，作為一個產品設計師，你必需把這些因素都斟酌進去。
這也就是每一個介面都需要設計5種狀況的緣故了：
空白狀況
載入狀況
局部狀況
過錯狀況
理想狀況
你的使用者在體驗產品流程的時候，可以感受到每種狀況間的無縫銜接。
一款真實訊息運用的互動介面堆堆疊。每一個螢幕之間都實現無縫改變。
現在，先讓咱們來簡單瞭解一下網際網路的歷史故事吧。在2004年，Basecamp，前身為37signals，提出一個突破性觀點——「三種狀況的解決專案」。他們描寫了每一個螢幕都理當有3種狀況的可能性：「一般、空白以及報錯。」這個思考方向瞬時令我醍醐灌頂，全然扭轉了我對網路設計的思考方向。
然而，網際網路也在不斷扭轉著。首先，咱們迎來了AJAX的革新，其次，又有搬移運用的泛起，再者，更冒出了大規模消費化科技。互動介面的請求以及預期也隨之扭轉了，這是我十多年來所不斷調整的觀念。
接下來，咱們就先來看看理想狀況。
理想狀況
這是我最先會建立的狀況，因為這是我但願使用者最常看見的介面。它應該表現出產品的巔峰狀況，也就是在此狀況下，你的產品價值應被最大化，所含內容應均為有用及可動作的訊息。該狀況應作為該屏在所有其它狀況的基準。咱們可以把它想像成核心行銷頁面或者搬移運用商店的螢幕快照。
該狀況應為其它所有狀況設定基調，因為跟著核心介面的不斷重複，整個互動介面均可能跟著時間的推移而徹底扭轉。這就是迭代的兩面性了——美觀以及風險兼具。
這個狀況對其它狀況的結果起著至關主要的作用。
最終，所有互動介面的狀況都會指向理想狀況。所以，咱們應該以此為起始點，儘可能完美解決問題的專案，那麼其它狀況的介面都會迎刃而解。
仍然不明白什麼是理想狀況嗎？那麼咱們就一塊兒來看看下面的幾個例子。
看，多麼生動活潑。資料以及圖像兼備。
Tinder的這個介面堪稱是市場上最佳的理想狀況之一了。
空白狀況
空白狀況不僅僅只是一個螢幕而已，它事關給你使用者所帶來的第一印象，是產品作介紹的好機會——激勵使用者去嘗試，維持他們對產品的興致，並且時刻提醒他們產品行將帶來的價值。
空白狀況又可被分為三大版本。第一，使用者初次看到產品的時候。第二，在使用者主動肅清所有資料的時候，就好比收件箱裡「零信件」的狀況。第三，沒有任何顯示內容的時候，例如，搜尋結果。
從廣義上來講，空白狀況很容易成為最後臨時抱佛腳的部份。而通常在這種情況下作出的介面，要不是被過度設計，就是冷冰冰的非人道化設計。
武井穗鄉（出演《星際旅行》）必定會說：「噢，天哪……」
教學標註，或是被稱為指示性疊加層，這些元￥素在我眼裡，可以算作最欠斟酌的初次體驗專案了。這種模式將使用者需要通過多個介面來記憶學習的內容一古腦兒強塞進來，製造了很大的心理障礙，太煞景色了。下面，咱們就來一探初次使用狀況的究竟。
初次使用／載入頁面
假設這是使用者第一次使用你的產品，那麼這個狀況就是呈現現有資料的一大機會。這是個誘發動作的好機會，說明使用者理解螢幕互動可能發生的價值。第一印象只有一次，大家要抓好機會。
我對這個狀況的青睞，部份緣故來自文學世界的「英雄之旅」，約瑟夫·坎貝爾在他的精彩著作裡講述了千面英雄的故事，它也成為了奧德賽以及星球大戰的神話故事鋪墊。下面是該故事的前言：
「這是關於一位英雄從平凡世界進入神功能變數的冒險閱歷，他體驗了神奇的力量，並獲得了抉擇性的勝利。英雄從神秘的探險中回歸，將力量賜賚他的同伴。」將空白狀況想像成英雄之旅，推進使用者去探索，說明他們跨過可能面對的挑戰以及誘惑，讓使用者取得更強大的個人力量。
那麼，要怎麼做到呢？有這樣幾點：
牽馬飲水。編寫激勵型案牘，鼓舞人心，同時維持語系平實。例如，「這裡什麼都沒有」對使用者來講沒有任何意義，徹底沒有提醒可以進行的互動，說真的，假設這是你開啟舊檔介面第一個取得的訊息，是否也太懊喪了點？與其這樣，不如提醒使用者可以按哪一個按鈕，以及為何應該按它，要儘可能說明引誘使用者。
用產品本身的內容來引誘使用者進行下一步動作。例如，假設你進行的是一款發訊息的產品，應該斟酌使用者初次開啟舊檔介面就已在收件箱裡有一個新訊息。主題可以是「點擊開啟舊檔」，訊息內容則應該提及如何進一步動作，以及如何回複訊息。
提供一張理想狀況的截圖，讓使用者曉得他們理當看到的介面應該長得什麼模樣，同時這也是展示產品價值的好機會。
監測使用者的使用狀況，並按情況進行回應。假設他們在某一螢幕停留得較久，或許你可以給他們發一條即時訊息，問問他們是否需要說明。
我很喜歡這幾個空白狀況的例子。
Hipchat會跳出批示訊息，並同時提及一些使用者尚沒有找到的有趣功能。
臉書 Paper 在教使用者使用一些主要手勢的同時，逐步帶入一些功能介紹。
Basecamp 並無展示什麼內容，然而它放置了提醒窗，展示產品可以呈現的功能。這會引起我的完成欲，想要去建立一個新項目，看看可以如何提高效力。
首次進入Airbnb的心願單將泛起簡約作風的空白狀況。我喜歡這款設計的緣故是它並無刻意設計（相符Airbnb的設計語系），但同時訊息也很明確，可推進使用者開始採集資料。
有關載入狀況以及首狀況的主題足以單獨分出，自成一書。也的確真有這麼一本書，假設大家有興致，舉薦Samuel Hulick的The Elements of User Onboarding，超贊。
關於空白狀況，以前專門聊過這個：《超實用！3個小技巧幫你設計優良的空白頁面》
使用者肅清資料
空白狀況的第二種情況就是使用者主動肅清所有資料。舉個例子，假設使用者完成為了任務清單中的所有項目，讀了所有知會，閱讀了所有信件，或者所有的音樂下載都已完成。
這些空白狀況的情況是用來獎勵使用者，或者激發他們進行進一步動作的大好機會。達到「零信件收件箱了嗎？」太棒了！快看看這張超美的照片。所有音樂都下載完畢了嗎？快去聽歌吧。讀完所有知會了嗎？你可能也想讀一下這個。
假設使用者肅清資料，那麼說明他們在使用你的產品。先使用者所想，替他們做些事情，可以維持他們對產品的興致。不要將進行下一步的重任壓在使用者的肩上。
對，這是iOS 6的截屏。儘管已是良久以前的設計了，然而依然優良地表現了當收件箱為零時對促成使用者多巴胺分泌的效果。你的獎勵就是一張手選的Instagram圖片，咖啡店或者日落照——你可以將它分享到社交網路，祝賀收件箱清零，同時又鼓吹了這款信箱。一舉多得啊！
無結果
萬一使用者正在閱讀或者搜尋產品中的資料，那就有可能泛起沒有搜尋結果的情況。這些情況都是為使用者推送訊息或者提供智慧搜尋結果的大好機會。
亞馬遜的做法就是我所見過的最佳案例之一。它智慧糾正拼字過錯，並搜尋相近結果，很少給出空白的搜尋結果。亞馬遜會給出最接近的搜尋結果，並提醒不相符搜尋前提的訊息。
這個案例貌似暴露了我對金屬的喜愛。暴露就暴露吧。
Pinterest呈現結果的模式與亞馬遜不同，然而這就是Pinterest的特色了。它自行對我的輸入進行理解並搜尋，使用者應該也可以依據結果作相應調整後，搜尋所需訊息。
要點：切勿在這一狀況讓使用者覺得無路可走，給他們一些提醒或者建議，繼續進行動作。
欲知後續狀況，且聽下回分解。更有案例分析哦～
------
原文位址：The blog of SCOTT HURFF
譯文位址：doo-plus
轉摘請註明優設網譯文出處，謝謝各位小編。兩岸商貿,在家工作,網路創業,創業賺錢思維,微商平台,賺新台幣
關注優良網頁設計官方微信號：youshege；以及百萬設計師一塊兒來應用碎片時間學習設計以及PS技術吧
留言列表
