從(cong)用(yong)戶進入到與APP交互的(de)過程中，空狀態設計都是提升產(chan)品用(yong)戶體(ti)驗的(de)不錯的(de)方法。

空狀(zhuang)態是指沒有數據(ju)的(de)(de)(de)頁(ye)面，也(ye)就是說，在用(yong)(yong)(yong)戶(hu)進行某些動作后，頁(ye)面將(jiang)會展示其產(chan)生的(de)(de)(de)內容(rong)。盡(jin)管如此，空狀(zhuang)態也(ye)可(ke)以提供有趣(qu)的(de)(de)(de)用(yong)(yong)(yong)戶(hu)體驗。事實上(shang)，空狀(zhuang)態完全可(ke)以用(yong)(yong)(yong)于指導用(yong)(yong)(yong)戶(hu)的(de)(de)(de)操作，向他們介紹你的(de)(de)(de)產(chan)品(pin)或(huo)展示產(chan)品(pin)品(pin)牌(pai)的(de)(de)(de)個性。

你可以將空(kong)狀態變(bian)成一個與(yu)用戶(hu)進行有意(yi)義交流(liu)的地方，為(wei)用戶(hu)提供一種(zhong)參與(yu)式的用戶(hu)體驗(yan)。

在這篇文章中，將會(hui)(hui)說明什(shen)么(me)是空(kong)(kong)狀(zhuang)(zhuang)(zhuang)態(tai)(tai)以(yi)及如何設計出好(hao)的(de)空(kong)(kong)狀(zhuang)(zhuang)(zhuang)態(tai)(tai)，以(yi)此來提(ti)升用戶體驗(yan)。什(shen)么(me)是空(kong)(kong)狀(zhuang)(zhuang)(zhuang)態(tai)(tai)？空(kong)(kong)狀(zhuang)(zhuang)(zhuang)態(tai)(tai)是APP中的(de)內(nei)容無法(fa)顯示的(de)頁面狀(zhuang)(zhuang)(zhuang)態(tai)(tai)，用“空(kong)(kong)”來描述其實是不恰(qia)當的(de)，因為空(kong)(kong)狀(zhuang)(zhuang)(zhuang)態(tai)(tai)頁面中還有一些內(nei)容的(de)。事實上，空(kong)(kong)狀(zhuang)(zhuang)(zhuang)態(tai)(tai)可以(yi)顯示多種不同的(de)內(nei)容來提(ti)升用戶體驗(yan)，接下來我們就會(hui)(hui)著重介(jie)紹(shao)這一點。

例如：如果你曾經使(shi)用過一款(kuan)允(yun)許你把你喜愛的內容添加到收(shou)藏夾里的APP，你就會(hui)對空狀(zhuang)態有(you)所了解。或(huo)者你使(shi)用搜(sou)索(suo)，有(you)過沒有(you)搜(sou)索(suo)結(jie)果的經歷…

以Instagram為例(li)：當你(ni)(ni)進入沒有添加任何(he)照片的收藏夾時，你(ni)(ni)可能會看(kan)到一個(ge)空(kong)狀(zhuang)態，并告(gao)訴你(ni)(ni)還沒有添加任何(he)照片。

由于沒有(you)數(shu)據內容，因此只能展示空狀態或無數(shu)據。

Instagram的空(kong)白(bai)狀(zhuang)態

但是(shi)(shi)，Instagram的收藏頁(ye)面并沒有空(kong)狀態說明，相反，它是(shi)(shi)空(kong)白的頁(ye)面。因此，他們錯過(guo)了一次引導(dao)用戶(hu)去與APP互動的機會(hui)。

設計空(kong)狀(zhuang)態(tai)的原因(yin)多種多樣(yang)，最常(chang)見的原因(yin)有以下幾種：用(yong)(yong)戶清(qing)空(kong)了(le)所有的數據（如：清(qing)空(kong)收件箱）；用(yong)(yong)戶是新(xin)用(yong)(yong)戶，并且剛剛才登錄APP成功；用(yong)(yong)戶遇到了(le)某種錯(cuo)誤（如：沒有WIFI連接）。被忽(hu)略(lve)的空(kong)狀(zhuang)態(tai)設計Shruthi Padala曾經在Medium上(shang)寫(xie)道：許多人認為(wei)空(kong)狀(zhuang)態(tai)只是輔助頁面(mian)，不(bu)需要去關注它們。但是空(kong)狀(zhuang)態(tai)會(hui)將(jiang)空(kong)白頁呈現給(gei)用(yong)(yong)戶，如果能(neng)夠利(li)用(yong)(yong)好空(kong)狀(zhuang)態(tai)頁面(mian)，會(hui)極(ji)大的提升用(yong)(yong)戶體驗。

曾在(zai)Shopify擔任插畫師(shi)的(de)(de)Meg Robichaud寫過一篇關(guan)于(yu)空狀態(tai)研究的(de)(de)文章。因為與(yu)其他部分的(de)(de)用(yong)戶體驗不(bu)同，空狀態(tai)設計的(de)(de)難點就(jiu)(jiu)在(zai)于(yu)它需要不(bu)斷(duan)的(de)(de)更新。但是只有2%的(de)(de)用(yong)戶會(hui)看到空狀態(tai)，這(zhe)也(ye)就(jiu)(jiu)意(yi)味著它不(bu)會(hui)是占用(yong)過長的(de)(de)用(yong)戶使用(yong)時(shi)間。

這也(ye)就解釋了(le)(le)空狀態(tai)被忽(hu)略的原因(yin)，因(yin)為不是(shi)所(suo)有的用(yong)(yong)戶(hu)都能看(kan)到它們，所(suo)以花費過多精力在上面反而(er)是(shi)得不償失(shi)。也(ye)正是(shi)這種心態(tai)，導致了(le)(le)空狀態(tai)設(she)計被設(she)計師給忽(hu)略掉了(le)(le)，進(jin)而(er)影響最(zui)終的用(yong)(yong)戶(hu)體驗。

最后，Meg和Shopify決定(ding)重(zhong)新設計空(kong)狀態，即(ji)使只有少數的用戶會(hui)碰到(dao)這(zhe)種頁面，為什么呢？

因為，即使只有2%的用戶，他(ta)們(men)也需要一個好的用戶體驗，它給體驗帶來了(le)更多的細節和影(ying)響力。

想(xiang)一想(xiang)，如(ru)果用(yong)戶是(shi)一個新手，正在漫(man)無目的(de)(de)的(de)(de)瀏(liu)覽著APP，并且還沒有(you)下定決心是(shi)否(fou)要使用(yong)這(zhe)款(kuan)APP，這(zhe)些重(zhong)要的(de)(de)設計將(jiang)是(shi)留住用(yong)戶的(de)(de)關鍵細節。

空(kong)狀(zhuang)(zhuang)態(tai)是(shi)很容(rong)易讓用戶(hu)體驗出彩的(de)(de)(de)，它(ta)不是(shi)讓APP成(cheng)為最(zui)成(cheng)功產(chan)品的(de)(de)(de)原因(yin)，但是(shi)它(ta)是(shi)取悅(yue)用戶(hu)的(de)(de)(de)關鍵環節(jie)。對(dui)細節(jie)的(de)(de)(de)關注還有很長的(de)(de)(de)路要走，正(zheng)如有句名言所說，細節(jie)決定(ding)成(cheng)敗。使用空(kong)狀(zhuang)(zhuang)態(tai)的(de)(de)(de)好處Spotify的(de)(de)(de)用戶(hu)體驗專家(jia)Tamara Hilmes提(ti)醒設計師們時說，空(kong)狀(zhuang)(zhuang)態(tai)是(shi)一個(ge)展(zhan)示產(chan)品個(ge)性化的(de)(de)(de)機會，因(yin)此，在進行空(kong)狀(zhuang)(zhuang)態(tai)設計時，需要認真考慮(lv)品牌和用戶(hu)的(de)(de)(de)目標和背景(jing)。

Deliveroo的(de)(de)產(chan)品設(she)計(ji)師Ryan Cordell同意Tamara Hilmes的(de)(de)觀(guan)點，并進一(yi)(yi)(yi)步(bu)說(shuo)：“設(she)計(ji)好文(wen)字和(he)視(shi)覺界(jie)面，是(shi)產(chan)品與用戶互動并最終(zhong)實現他們(men)目(mu)標(biao)的(de)(de)關鍵一(yi)(yi)(yi)步(bu)。設(she)計(ji)團隊應該投(tou)入足夠多的(de)(de)時間、耐心和(he)精力來設(she)計(ji)任何(he)(he)場景下(xia)的(de)(de)文(wen)案(an)。”同樣，即使不是(shi)特(te)別重(zhong)要的(de)(de)頁(ye)面，告(gao)知用戶下(xia)一(yi)(yi)(yi)步(bu)如(ru)何(he)(he)操作也有著(zhu)不錯(cuo)的(de)(de)效果(guo)。如(ru)果(guo)不這樣做，空狀態就(jiu)不能提供任何(he)(he)價(jia)值，其也就(jiu)成為了化妝(zhuang)品添加劑，毫無用處。空狀態設(she)計(ji)的(de)(de)最佳案(an)例(li)如(ru)果(guo)你打算設(she)計(ji)一(yi)(yi)(yi)個(ge)空狀態，那么(me)請(qing)記住這些(xie)好的(de)(de)做法，以便能夠幫(bang)助到(dao)用戶去(qu)達(da)到(dao)他們(men)的(de)(de)目(mu)標(biao)。

告訴用戶該怎么做

如上(shang)所述，空狀態是鼓(gu)勵用戶(hu)與產(chan)品互動的絕佳機(ji)會，你也不希望把用戶(hu)進入頁面后，一臉茫然而不知(zhi)所措。

例(li)如，你可(ke)以在空狀態頁面上(shang)放一個具有引導性的按(an)鈕，以一款剛(gang)下載的社(she)交(jiao)APP為例(li)來(lai)說明(ming)。

這款APP有通訊錄標(biao)簽，但(dan)目前是空(kong)的(de)(de)(de)(de)。一(yi)個(ge)好(hao)(hao)的(de)(de)(de)(de)引導性按鈕(niu)可以告訴用戶去查找并添加自己的(de)(de)(de)(de)朋友，這樣能夠讓他(ta)們也參與(yu)到你的(de)(de)(de)(de)APP中。你的(de)(de)(de)(de)引導能夠完整的(de)(de)(de)(de)告訴用戶，如(ru)(ru)何把空(kong)空(kong)的(de)(de)(de)(de)通訊錄轉變(bian)成好(hao)(hao)友眾多的(de)(de)(de)(de)頁面，可以看看Facebook是如(ru)(ru)何做的(de)(de)(de)(de)（上圖）？空(kong)狀(zhuang)態(tai)要保持個(ge)性化(hua)空(kong)狀(zhuang)態(tai)設計中，個(ge)性與(yu)絕望(wang)(wang)、無畏和欲望(wang)(wang)之間有著(zhu)非常(chang)細(xi)微的(de)(de)(de)(de)界限(xian)，若(ruo)無法很好(hao)(hao)的(de)(de)(de)(de)平(ping)衡(heng)這兩者(zhe)之間的(de)(de)(de)(de)關系，就會把展(zhan)示品牌個(ge)性變(bian)成了(le)展(zhan)示絕望(wang)(wang)、無畏和欲望(wang)(wang)啦(la)。

但(dan)(dan)是(shi)，空狀態(tai)設計僅僅只是(shi)產(chan)品展示個性化的一個小例子，個性并(bing)不總代表著有趣，為頁(ye)面添加幽默的元素時，需要格外謹(jin)慎。某個笑話(hua)在(zai)今天(tian)可(ke)能很受(shou)(shou)歡(huan)迎，但(dan)(dan)是(shi)明天(tian)就會(hui)有用戶不再(zai)喜(xi)歡(huan)了，給(gei)人以過時的感受(shou)(shou)。

在空狀(zhuang)態設(she)計中，使用(yong)友好且合(he)適(shi)的(de)文案能夠帶(dai)來意外的(de)效(xiao)果(guo)。兼具(ju)特制和適(shi)合(he)特性的(de)插(cha)圖，可(ke)以幫助你設(she)計出一(yi)個成功的(de)空狀(zhuang)態。

如果你決(jue)定要使用插圖(tu)和文案，請確保它們要有層次感，不(bu)會相互影響。一個好(hao)的(de)插圖(tu)能(neng)夠為頁面帶(dai)來(lai)足夠的(de)樂(le)趣(qu)和參(can)與(yu)度，此時，你可(ke)以使用簡(jian)單且常用的(de)文案。來(lai)看看Google是如何平衡兩者之間的(de)關系的(de)？

Google的(de)(de)Material Design 指(zhi)南中(zhong)規(gui)(gui)定(ding)，如(ru)果打算使(shi)用(yong)(yong)(yong)圖片(pian)，請遵(zun)循以下規(gui)(gui)則(ze)：使(shi)用(yong)(yong)(yong)中(zhong)性或(huo)幽默的(de)(de)語氣；與(yu)產(chan)品的(de)(de)品牌風格(ge)保(bao)持一(yi)致(zhi)文(wen)案(an)需(xu)要遵(zun)循的(de)(de)規(gui)(gui)則(ze)：文(wen)案(an)傳達出(chu)有(you)用(yong)(yong)(yong)的(de)(de)信息；在(zai)不需(xu)要操作(zuo)的(de)(de)情況下，告(gao)訴用(yong)(yong)(yong)戶(hu)頁面的(de)(de)作(zuo)用(yong)(yong)(yong)。使(shi)用(yong)(yong)(yong)空(kong)狀態來(lai)培養用(yong)(yong)(yong)戶(hu)你可以使(shi)用(yong)(yong)(yong)空(kong)狀態來(lai)告(gao)知用(yong)(yong)(yong)戶(hu)如(ru)何使(shi)用(yong)(yong)(yong)產(chan)品，空(kong)狀態在(zai)用(yong)(yong)(yong)戶(hu)首次體(ti)驗(yan)產(chan)品時扮演著重要角(jiao)色。

 如果你想留(liu)住(zhu)用(yong)戶(hu)，那么良好的首(shou)次體驗是至關重要的。

據Appcues的(de)消息稱：如(ru)果經過 3 個月(yue)的(de)時間(jian)，當初(chu) 100 個用(yong)戶(hu)(hu)中只有 4 個用(yong)戶(hu)(hu)還在(zai)使(shi)(shi)用(yong)你的(de)APP時，那么用(yong)戶(hu)(hu)體驗(yan)設(she)計師(shi)就需要(yao)優化首次登(deng)錄APP的(de)體驗(yan)了(le)。以Dropbox為例，在(zai)屏(ping)幕截圖的(de)下(xia)面，你可以看(kan)到他(ta)們(men)是(shi)如(ru)何使(shi)(shi)用(yong)小提示向用(yong)戶(hu)(hu)解(jie)釋空狀態是(shi)什么，以及他(ta)們(men)需要(yao)怎樣做來避免空狀態，把他(ta)們(men)自己(ji)的(de)文(wen)件(jian)拖(tuo)進來。展示基(ji)礎性內容Material Design對(dui)此解(jie)釋說，在(zai)空狀態頁面展示一些基(ji)礎性的(de)內容，可以幫(bang)助新用(yong)戶(hu)(hu)快(kuai)速(su)了(le)解(jie)到如(ru)何使(shi)(shi)用(yong)相關(guan)功能(neng)。這樣用(yong)戶(hu)(hu)能(neng)夠快(kuai)速(su)學會使(shi)(shi)用(yong)產品，也使(shi)(shi)得產品學習成本降低(di)。

存儲(chu)諸如音樂(le)和(he)電(dian)子書等內容，或使(shi)用(yong)筆記和(he)文檔等模塊化內容的(de)(de)APP，可以(yi)讓用(yong)戶在閱讀基礎(chu)性內容中獲益。讓用(yong)戶擁有(you)調整基礎(chu)性內容的(de)(de)權限，是(shi)維持用(yong)戶參與(yu)的(de)(de)一種方(fang)式，這是(shi)因為用(yong)戶可以(yi)感受到正在創(chuang)建(jian)自己的(de)(de)APP。

從上(shang)面的閱讀類APP的例子可以(yi)看出(chu)，它會在空狀態(tai)頁(ye)面展示(shi)一些免費的書籍，這樣的話，用戶可以(yi)以(yi)此為起點(dian)，繼續瀏覽(lan)APP的其他功能模(mo)塊(kuai)。