移動應用的＂空＂狀態(tài)界面設計

“空狀態(tài)”是指移動應用界面在沒有內容或數據時呈現出的狀態(tài)。長久以來，空狀態(tài)界面一直是被忽視的，因為設計師們通常會將全部精力集中在怎樣更好的呈現內容和數據上，只有開發(fā)人員才會比較頻繁的與這類相對“意外”的狀態(tài)打交道。也正是因為這樣的原因，空狀態(tài)界面留給用戶的印象大體上就是晦澀難懂的文案以及缺乏視覺設計風格。

　　要想打造好的整體體驗，作為設計師，我們不能放過任何一個用戶有可能接觸到的界面狀態(tài)。空狀態(tài)界面大致包括三種類型：初次使用、用戶清空數據、出錯。下面，我們就來一同了解一下這三種情境所對應的相關創(chuàng)意要素與注意事項。

1.初次使用

　　應用在初次加載時留給用戶的第一印象是非常重要的。你的一部分用戶也許已經通過其他同類產品建立起了心智模型及預期，他們會非常敏感的從一開始就將你的應用與他們已經熟悉的那些進行對比;而另外一些用戶可能完全沒有同類產品的使用經驗，他們就像一張空白的花布，等待著驚喜或失望。無論哪種情況，差勁的第一印象所造成的損害都是很難彌補的。

　　如果用戶下載了你的應用并完成了注冊，那么這幾乎可以代表他們已經知道你的產品是做什么用的，但未必清楚具體怎樣使用。對于某些類型的應用來說，初次登錄之后是沒有任何數據內容的，這也正是充分利用界面空間為用戶提供新手指引的好機會。你可以告訴用戶為什么當前沒有內容、怎樣創(chuàng)建或獲取內容;在這個環(huán)節(jié)中，不妨試著融入一些能夠體現產品個性的情感化元素，這可以使用戶進入一種較為輕松的上手狀態(tài)，引發(fā)他們積極正面的情感，同時也能給他們留下不錯的第一印象。

　　看看Buffer、Timehop和Dropbox是怎么做的叭。值得一提的是，Buffer與Dropbox的空狀態(tài)界面與他們各自的Web端頁面(bufferapp.com以及dropbox的登錄頁)在引導與插圖等方面都使用了相同風格的視覺元素，這也體現出了他們的產品與品牌形象在不同平臺上的良好一致性。

　　buffer

　　Timehop

　　Dropbox(真的很暖心的趕腳，我喜歡 - 譯者C7210)

     2.用戶清空數據

　　想想郵件或信息的收件箱，多數時候是滿的叭，里面有幾百封未讀郵件也不奇怪。不過不同類型的用戶有著不同的需求和用法，有些人確實會閱讀其中的大部分內容。

　　不管你是哪類用戶，其實我們在心里或多或少都會有將“待處理對象”歸零的欲望(回想一下你看到App Store圖標右上角的待更新應用數量圖標時的趕腳)。從這個角度講，將待處理信息進行歸零其實是一種沒有太多實際意義但卻很容易花費時間精力進行操作的任務，有時人們做這件事只是出于那一點點強迫癥。這種時候，不妨給他們一點正面的情緒回饋，在空狀態(tài)界面中給這些用戶一點小小的“回報”。

　　下面我們來看看Sparrow、Gmail以及iOS原生的郵件客戶端在這方面的做法。

　　當郵件被清空之后，Sparrow會在界面中展示一個傳統(tǒng)“收件箱”的圖標，下面的標題是“零郵件”，形象、干凈、簡單，多少可以讓人產生一點沒有多大實際意義的成就感。

　　Gmail則在這種最基本的做法之上又進了一步，他們的設計師在空收件箱頁面中放了一個微笑著的太陽，通過對人類情緒的模仿，為產品賦予了人格，使用戶從情感上感受到愉悅。而且他們在文案的處理上也很貼心：“你當前沒有郵件要處理了，開心的享受這一天叭!”

　　在這里強烈推薦閱讀“為產品賦予人格 - 情感化設計的組成要素及實踐案例”一文。

        而相比之下，iOS自帶的郵件應用就缺乏這方面的積極回饋了，用戶在這個空狀態(tài)界面中很容易產生疑慮：我是否已經真的清空了收件箱，還是我的網絡連接有問題?或是別的什么狀況導致我看不到收件箱里的其他郵件?任何一點疑慮都會導致認知上的負擔，進而影響產品的整體體驗。

3.出錯

　　“出錯”多數是由網絡連接的中斷引起的。可以試著在這種情況下提供一些更有用的或是更具親和力的內容，而不是一堆丑陋的出錯信息。讓用戶在非常規(guī)用例中看到你的設計，他們就會感知到當前的狀況是在可預計范圍之內的，從而放松下來。

　　接下來我們對比一下Chrome、Opera Mini和Safari這三款瀏覽器在這方面的表現叭。

　　Chrome提供了大量的、似乎只有技術人員才看得懂的出錯信息;普通用戶甚至不會有興趣花時間在移動設備上閱讀這樣的內容。

　　Opera Mini只提供了一個模態(tài)對話框一樣的控件，整個風格看上去非常生硬，不過文案相對簡單易懂了些。

　　而Safari的處理方式則漂亮了很多，它通過簡單直白的語言向用戶解釋了當前的狀況，整個界面的視覺風格似乎是有意在柔化“出錯”所帶來的負面效應。當發(fā)生網絡連接問題時，人們很容易產生非常消極的感受，這種情況下，最不該做的就是通過大段晦澀的文字以及生硬的視覺風格來加劇用戶的焦慮感。

　　當然，出錯的情況不止會發(fā)生在瀏覽器當中。再次以Gmail的iPhone客戶端為例，他們同樣使用了情感化的元素來呈現出錯信息——一個看上去不那么開心的小云朵——似乎應用自身也很理解用戶當前的感受。

　　相比之下，Instagram和Youtube的反饋方式在態(tài)度上略顯消極。

總結

　　其實，無論你的產品是否需要網絡連接，或者它根本就不是iOS應用，這當中的一些基本道理都是相通的：留意那些用戶無法獲取任何內容的狀態(tài)，給用戶某種形式的反饋。我們進一步將本文內容抽象為三條簡單的設計原則：

沒有數據時，引導用戶創(chuàng)建內容。

思考目標用戶在使用產品時的心理與目標。他們是否會頻繁的清空數據?如果是的話，進行相應的設計;你甚至可以準備一些不同的空狀態(tài)內容來隨機展示。

發(fā)生錯誤時，不要讓用戶進一步焦慮。通過你的設計弱化用戶心中的負面感受，降低他們對壞狀況的感知。

新聞名稱：移動應用的＂空＂狀態(tài)界面設計
轉載來源：http://www.bm7419.com/news30/171830.html

成都網站建設公司_創(chuàng)新互聯，為您提供靜態(tài)網站、App開發(fā)、網站制作、用戶體驗、營銷型網站建設、微信公眾號

廣告

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