其實我到現(xiàn)在還不清楚哪天正經(jīng)過年呢，就知道快了，因為公司里的人走掉蠻多了的樣子。不，這真的不那么像過年的時節(jié)，天氣暖和的好像春末夏初，在天臺抽煙時甚至?xí)l(fā)現(xiàn)成群結(jié)隊的小飛蟲在翩翩起舞。

這都哪跟哪呢。實際上，無論工作還是生活，似乎任何正處于正常進(jìn)行當(dāng)中的事情都會讓自己產(chǎn)生“過年之后再認(rèn)真繼續(xù)”的趕腳，一些需要上手開始做的事也準(zhǔn)備“過年假期里再開始搞叭”這樣;自己的一些項目、理想中的作品集、一些要讀的書、一些想玩的游戲...大體都是這樣，其實我眼下把這篇發(fā)布出來之后就拿出幾個小時把想做的事情猛做一通也不是不可以，但似乎總是想尋找一個大部頭的時間;不知是否是拖延癥的借口;實際上我不認(rèn)為自己有這毛病，真的。打住，我們進(jìn)入今天的正文，關(guān)于移動應(yīng)用的空狀態(tài)界面設(shè)計;雖然文中的示例都是iPhone應(yīng)用，不過道理應(yīng)該與平臺甚至設(shè)備類型無關(guān)。(btw，用微信的朋友們可以添加一下Beforweb了唄，點擊側(cè)邊欄頭上第二個圖標(biāo)就會出現(xiàn)二維碼)

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

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

1.初次使用

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

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

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

buffer

Timehop

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

2.用戶清空數(shù)據(jù)

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

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

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

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

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

在這里強(qiáng)烈推薦閱讀“為產(chǎn)品賦予人格 - 情感化設(shè)計的組成要素及實踐案例”一文。

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

3.出錯

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

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

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

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

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

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

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

總結(jié)

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

沒有數(shù)據(jù)時，引導(dǎo)用戶創(chuàng)建內(nèi)容。

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

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