從用戶(hu)進入(ru)到與APP交互的過(guo)程中，空(kong)狀態設計(ji)都是提升產品用戶(hu)體驗的不錯的方法。

空狀態是(shi)指(zhi)沒有(you)數(shu)據(ju)的(de)(de)頁面，也就是(shi)說，在(zai)用戶進行(xing)某些動(dong)作(zuo)(zuo)后，頁面將會展示其產生的(de)(de)內容。盡管如此，空狀態也可以提供有(you)趣的(de)(de)用戶體驗。事實上，空狀態完全可以用于指(zhi)導用戶的(de)(de)操作(zuo)(zuo)，向他們(men)介紹你的(de)(de)產品(pin)或(huo)展示產品(pin)品(pin)牌的(de)(de)個性。

你可以將空(kong)狀態變(bian)成一個與用(yong)戶進行有(you)意(yi)義交流的地方，為用(yong)戶提供一種參(can)與式的用(yong)戶體(ti)驗。

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

例如(ru)：如(ru)果你(ni)曾(ceng)經使(shi)用過(guo)一款允(yun)許你(ni)把你(ni)喜愛的內容添(tian)加(jia)到收藏夾里的APP，你(ni)就會(hui)對空狀態有所了解。或者你(ni)使(shi)用搜索，有過(guo)沒(mei)有搜索結(jie)果的經歷…

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

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

Instagram的空白狀(zhuang)態

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

設計(ji)空(kong)狀(zhuang)態的(de)(de)原(yuan)(yuan)因多(duo)(duo)種多(duo)(duo)樣，最常(chang)見的(de)(de)原(yuan)(yuan)因有(you)以下幾種：用(yong)戶(hu)清(qing)空(kong)了所有(you)的(de)(de)數據（如：清(qing)空(kong)收件箱）；用(yong)戶(hu)是(shi)新(xin)用(yong)戶(hu)，并且剛(gang)(gang)剛(gang)(gang)才登(deng)錄APP成功；用(yong)戶(hu)遇到(dao)了某種錯誤（如：沒有(you)WIFI連接）。被忽略的(de)(de)空(kong)狀(zhuang)態設計(ji)Shruthi Padala曾經(jing)在(zai)Medium上寫道：許多(duo)(duo)人認為空(kong)狀(zhuang)態只是(shi)輔助頁面，不需要去關注它(ta)們(men)。但是(shi)空(kong)狀(zhuang)態會將(jiang)空(kong)白頁呈現給用(yong)戶(hu)，如果(guo)能夠(gou)利用(yong)好空(kong)狀(zhuang)態頁面，會極(ji)大(da)的(de)(de)提升用(yong)戶(hu)體驗。

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

這也就(jiu)解釋了空(kong)狀態被忽略的(de)原因，因為不是所(suo)有的(de)用戶(hu)都能(neng)看到它們，所(suo)以花費過多精(jing)力(li)在上(shang)面(mian)反(fan)而(er)是得不償失。也正(zheng)是這種心態，導致了空(kong)狀態設計(ji)被設計(ji)師給(gei)忽略掉(diao)了，進而(er)影響最終(zhong)的(de)用戶(hu)體驗。

最(zui)后，Meg和Shopify決定重新設計空狀(zhuang)態，即(ji)使只有少(shao)數(shu)的用(yong)戶會碰到(dao)這種頁(ye)面，為(wei)什么呢？

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

想(xiang)一想(xiang)，如果用(yong)戶是一個新手，正在漫無(wu)目的的瀏覽著APP，并且還(huan)沒有下定決心是否要(yao)使用(yong)這款APP，這些重(zhong)要(yao)的設計將是留住用(yong)戶的關鍵(jian)細節。

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

Deliveroo的(de)(de)產(chan)品(pin)設計師Ryan Cordell同意Tamara Hilmes的(de)(de)觀點，并(bing)進一(yi)步說：“設計好文(wen)字和視(shi)覺界面，是產(chan)品(pin)與用戶(hu)(hu)互動并(bing)最終實現他們目(mu)標的(de)(de)關(guan)鍵一(yi)步。設計團(tuan)隊應該投入(ru)足(zu)夠(gou)多的(de)(de)時(shi)間、耐(nai)心和精力來設計任何場景下的(de)(de)文(wen)案。”同樣(yang)(yang)，即使不(bu)是特別重要的(de)(de)頁面，告知用戶(hu)(hu)下一(yi)步如何操作也有著不(bu)錯的(de)(de)效果。如果不(bu)這樣(yang)(yang)做，空(kong)狀態就不(bu)能提供任何價(jia)值，其也就成為了化(hua)妝品(pin)添(tian)加劑，毫無用處(chu)。空(kong)狀態設計的(de)(de)最佳(jia)案例如果你打算(suan)設計一(yi)個空(kong)狀態，那么請記住這些(xie)好的(de)(de)做法，以(yi)便能夠(gou)幫助到(dao)用戶(hu)(hu)去達到(dao)他們的(de)(de)目(mu)標。

告訴用戶(hu)該怎(zen)么(me)做

如(ru)上所(suo)述，空狀態(tai)是鼓勵用戶(hu)與(yu)產品互動的(de)絕佳機會(hui)，你(ni)也不(bu)希望(wang)把用戶(hu)進入頁(ye)面后，一臉茫然而(er)不(bu)知所(suo)措(cuo)。

例如，你可以(yi)在空(kong)狀態頁面上(shang)放一個具有引導(dao)性的(de)按(an)鈕(niu)，以(yi)一款(kuan)剛(gang)下載的(de)社交APP為(wei)例來(lai)說(shuo)明。

這款APP有(you)通(tong)訊錄(lu)標(biao)簽，但目前是空(kong)的(de)(de)。一個(ge)好的(de)(de)引(yin)導性按鈕可以告訴用戶去查找并添(tian)加(jia)自己的(de)(de)朋友(you)(you)，這樣(yang)能夠(gou)讓他們也參與(yu)到你(ni)(ni)的(de)(de)APP中。你(ni)(ni)的(de)(de)引(yin)導能夠(gou)完整的(de)(de)告訴用戶，如何把空(kong)空(kong)的(de)(de)通(tong)訊錄(lu)轉變成(cheng)好友(you)(you)眾多的(de)(de)頁面，可以看看Facebook是如何做的(de)(de)（上圖）？空(kong)狀態(tai)要(yao)保持個(ge)性化(hua)空(kong)狀態(tai)設計中，個(ge)性與(yu)絕望(wang)(wang)、無(wu)畏和欲(yu)望(wang)(wang)之間(jian)有(you)著非(fei)常細微的(de)(de)界限，若(ruo)無(wu)法很好的(de)(de)平衡這兩(liang)者之間(jian)的(de)(de)關系，就會把展(zhan)示品(pin)牌個(ge)性變成(cheng)了展(zhan)示絕望(wang)(wang)、無(wu)畏和欲(yu)望(wang)(wang)啦。

但是，空狀(zhuang)態設計僅僅只(zhi)是產品展示(shi)個(ge)性(xing)化的(de)一(yi)個(ge)小例子，個(ge)性(xing)并(bing)不(bu)總代表著有(you)趣，為頁面添加幽(you)默的(de)元素時，需(xu)要格外(wai)謹慎(shen)。某(mou)個(ge)笑話在今天(tian)可能很受歡迎，但是明天(tian)就(jiu)會有(you)用戶不(bu)再喜歡了，給人以過(guo)時的(de)感(gan)受。

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

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

Google的Material Design 指南中規(gui)定，如果打算使用(yong)圖片，請遵(zun)循以下(xia)規(gui)則：使用(yong)中性或幽默的語氣(qi)；與產(chan)品的品牌(pai)風格保持一致文案需(xu)要遵(zun)循的規(gui)則：文案傳達出有(you)用(yong)的信息；在(zai)不需(xu)要操作(zuo)(zuo)的情況下(xia)，告訴用(yong)戶頁面的作(zuo)(zuo)用(yong)。使用(yong)空狀態(tai)(tai)來(lai)培養(yang)用(yong)戶你可以使用(yong)空狀態(tai)(tai)來(lai)告知用(yong)戶如何使用(yong)產(chan)品，空狀態(tai)(tai)在(zai)用(yong)戶首次體驗產(chan)品時扮演(yan)著(zhu)重要角色。

如(ru)果你想留住用戶，那么良好的(de)首次體驗是至關重要的(de)。

據Appcues的(de)(de)消(xiao)息(xi)稱：如(ru)(ru)(ru)果經過 3 個月的(de)(de)時間(jian)，當初 100 個用(yong)(yong)(yong)(yong)戶中只有(you) 4 個用(yong)(yong)(yong)(yong)戶還在使用(yong)(yong)(yong)(yong)你的(de)(de)APP時，那(nei)么用(yong)(yong)(yong)(yong)戶體(ti)驗(yan)設計(ji)師就需要優化首(shou)次(ci)登錄APP的(de)(de)體(ti)驗(yan)了。以(yi)(yi)Dropbox為例，在屏幕截圖(tu)的(de)(de)下面(mian)，你可(ke)以(yi)(yi)看(kan)到他(ta)(ta)們(men)是如(ru)(ru)(ru)何(he)使用(yong)(yong)(yong)(yong)小提示(shi)向用(yong)(yong)(yong)(yong)戶解(jie)釋空狀態是什么，以(yi)(yi)及他(ta)(ta)們(men)需要怎(zen)樣做來避(bi)免空狀態，把他(ta)(ta)們(men)自己的(de)(de)文件(jian)拖(tuo)進來。展(zhan)示(shi)基礎性內容(rong)Material Design對此解(jie)釋說，在空狀態頁面(mian)展(zhan)示(shi)一些基礎性的(de)(de)內容(rong)，可(ke)以(yi)(yi)幫助新(xin)用(yong)(yong)(yong)(yong)戶快速了解(jie)到如(ru)(ru)(ru)何(he)使用(yong)(yong)(yong)(yong)相關功能。這樣用(yong)(yong)(yong)(yong)戶能夠快速學(xue)會使用(yong)(yong)(yong)(yong)產(chan)品(pin)，也使得(de)產(chan)品(pin)學(xue)習成本降(jiang)低。

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

從上面(mian)的(de)閱(yue)讀類APP的(de)例(li)子可以(yi)(yi)看出，它會在空(kong)狀態頁面(mian)展示一些免費的(de)書籍(ji)，這樣的(de)話，用戶可以(yi)(yi)以(yi)(yi)此為(wei)起(qi)點(dian)，繼續瀏覽APP的(de)其他功能模(mo)塊。