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

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

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

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

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

以Instagram為例：當你(ni)進(jin)入沒(mei)有添加(jia)任何(he)照(zhao)片的收(shou)藏夾時，你(ni)可能會看(kan)到一個空狀態，并(bing)告訴(su)你(ni)還沒(mei)有添加(jia)任何(he)照(zhao)片。

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

Instagram的空白狀態

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

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

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

這(zhe)也就(jiu)解釋(shi)了空狀態被忽(hu)(hu)略的原因，因為(wei)不是所(suo)有的用戶(hu)都(dou)能看到(dao)它們，所(suo)以花(hua)費過多精力(li)在(zai)上面反而是得不償失。也正(zheng)是這(zhe)種心態，導(dao)致(zhi)了空狀態設計被設計師給忽(hu)(hu)略掉了，進(jin)而影響最終的用戶(hu)體驗。

最后，Meg和(he)Shopify決定重新(xin)設計(ji)空狀態(tai)，即(ji)使只(zhi)有(you)少數的(de)用戶會碰到這(zhe)種頁面，為(wei)什(shen)么呢？

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

想一(yi)想，如果用戶(hu)是一(yi)個新手，正在漫無目的(de)(de)的(de)(de)瀏(liu)覽著APP，并且(qie)還沒有下定決心是否要使用這款APP，這些重要的(de)(de)設(she)計(ji)將是留住(zhu)用戶(hu)的(de)(de)關鍵(jian)細節(jie)。

空(kong)狀態(tai)是很(hen)容易讓(rang)用(yong)(yong)(yong)戶(hu)體驗出(chu)彩(cai)的(de)，它不(bu)是讓(rang)APP成(cheng)為最(zui)成(cheng)功產(chan)品(pin)的(de)原因，但是它是取(qu)悅用(yong)(yong)(yong)戶(hu)的(de)關鍵環節。對細節的(de)關注(zhu)還有(you)(you)很(hen)長的(de)路要走，正如有(you)(you)句名言(yan)所說，細節決定成(cheng)敗。使用(yong)(yong)(yong)空(kong)狀態(tai)的(de)好(hao)處Spotify的(de)用(yong)(yong)(yong)戶(hu)體驗專家Tamara Hilmes提(ti)醒設計師們時說，空(kong)狀態(tai)是一(yi)個展示產(chan)品(pin)個性化的(de)機會，因此，在進(jin)行空(kong)狀態(tai)設計時，需(xu)要認真考慮品(pin)牌和(he)用(yong)(yong)(yong)戶(hu)的(de)目標和(he)背(bei)景(jing)。

Deliveroo的(de)(de)(de)產(chan)品設(she)計師Ryan Cordell同(tong)意Tamara Hilmes的(de)(de)(de)觀(guan)點，并進一(yi)步(bu)說：“設(she)計好(hao)文(wen)字和視覺界面，是產(chan)品與用(yong)(yong)戶互(hu)動并最(zui)終實現他(ta)們目標的(de)(de)(de)關鍵一(yi)步(bu)。設(she)計團隊應該投入足(zu)夠(gou)多的(de)(de)(de)時間(jian)、耐心(xin)和精(jing)力來(lai)設(she)計任(ren)(ren)何場(chang)景下(xia)的(de)(de)(de)文(wen)案(an)。”同(tong)樣，即(ji)使不(bu)是特(te)別重要(yao)的(de)(de)(de)頁(ye)面，告知用(yong)(yong)戶下(xia)一(yi)步(bu)如何操作也有著不(bu)錯的(de)(de)(de)效(xiao)果。如果不(bu)這(zhe)樣做，空(kong)狀態(tai)就不(bu)能(neng)提供任(ren)(ren)何價值，其也就成為(wei)了化妝(zhuang)品添(tian)加劑，毫無用(yong)(yong)處(chu)。空(kong)狀態(tai)設(she)計的(de)(de)(de)最(zui)佳案(an)例(li)如果你打算(suan)設(she)計一(yi)個(ge)空(kong)狀態(tai)，那么請記住這(zhe)些好(hao)的(de)(de)(de)做法(fa)，以(yi)便能(neng)夠(gou)幫助到用(yong)(yong)戶去(qu)達到他(ta)們的(de)(de)(de)目標。

告訴用戶該(gai)怎么做

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

例如(ru)，你可(ke)以在空狀態頁(ye)面(mian)上放一個具有引(yin)導性(xing)的(de)按鈕，以一款(kuan)剛(gang)下載的(de)社交APP為例來說明。

這款APP有(you)通(tong)(tong)訊(xun)錄標簽，但目(mu)前(qian)是(shi)空(kong)的(de)(de)。一(yi)個(ge)好(hao)(hao)的(de)(de)引導性(xing)(xing)按鈕可(ke)以(yi)告訴(su)用戶(hu)去查找并(bing)添加自(zi)己的(de)(de)朋友(you)，這樣(yang)能夠(gou)讓他們也參與到你(ni)的(de)(de)APP中。你(ni)的(de)(de)引導能夠(gou)完整(zheng)的(de)(de)告訴(su)用戶(hu)，如何把空(kong)空(kong)的(de)(de)通(tong)(tong)訊(xun)錄轉變成好(hao)(hao)友(you)眾多的(de)(de)頁面，可(ke)以(yi)看(kan)看(kan)Facebook是(shi)如何做的(de)(de)（上圖）？空(kong)狀態(tai)要保持個(ge)性(xing)(xing)化空(kong)狀態(tai)設計中，個(ge)性(xing)(xing)與絕望、無畏和欲望之間(jian)有(you)著(zhu)非常細(xi)微的(de)(de)界(jie)限，若無法很好(hao)(hao)的(de)(de)平衡這兩者(zhe)之間(jian)的(de)(de)關系，就(jiu)會(hui)把展(zhan)示(shi)品(pin)牌個(ge)性(xing)(xing)變成了(le)展(zhan)示(shi)絕望、無畏和欲望啦。

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

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

如(ru)果你(ni)決定要(yao)(yao)使(shi)用(yong)(yong)插圖(tu)和文案，請(qing)確(que)保它們要(yao)(yao)有層次感，不會相互影響。一(yi)個好(hao)的插圖(tu)能夠為頁面帶來足夠的樂趣和參(can)與度(du)，此(ci)時，你(ni)可以使(shi)用(yong)(yong)簡單且(qie)常用(yong)(yong)的文案。來看看Google是如(ru)何平衡兩者之(zhi)間的關系(xi)的？

Google的(de)(de)Material Design 指南中規定，如(ru)果打(da)算使用(yong)(yong)(yong)圖片，請遵循以下規則：使用(yong)(yong)(yong)中性或幽默的(de)(de)語(yu)氣；與產品(pin)的(de)(de)品(pin)牌風(feng)格保持一致文(wen)案需要遵循的(de)(de)規則：文(wen)案傳達出有用(yong)(yong)(yong)的(de)(de)信息(xi)；在不需要操作的(de)(de)情況下，告(gao)訴用(yong)(yong)(yong)戶(hu)(hu)頁面的(de)(de)作用(yong)(yong)(yong)。使用(yong)(yong)(yong)空狀態(tai)(tai)來培養(yang)用(yong)(yong)(yong)戶(hu)(hu)你(ni)可(ke)以使用(yong)(yong)(yong)空狀態(tai)(tai)來告(gao)知用(yong)(yong)(yong)戶(hu)(hu)如(ru)何使用(yong)(yong)(yong)產品(pin)，空狀態(tai)(tai)在用(yong)(yong)(yong)戶(hu)(hu)首次體驗產品(pin)時(shi)扮演著重要角(jiao)色。

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

據Appcues的(de)消息稱：如(ru)(ru)果(guo)經(jing)過(guo) 3 個(ge)月(yue)的(de)時(shi)間，當初 100 個(ge)用(yong)(yong)(yong)戶(hu)(hu)中只有 4 個(ge)用(yong)(yong)(yong)戶(hu)(hu)還(huan)在使用(yong)(yong)(yong)你的(de)APP時(shi)，那(nei)么用(yong)(yong)(yong)戶(hu)(hu)體(ti)(ti)驗設計師就(jiu)需(xu)要優化首次登錄(lu)APP的(de)體(ti)(ti)驗了。以(yi)Dropbox為例，在屏(ping)幕(mu)截圖(tu)的(de)下(xia)面(mian)，你可(ke)以(yi)看到他們是(shi)如(ru)(ru)何使用(yong)(yong)(yong)小(xiao)提示向(xiang)用(yong)(yong)(yong)戶(hu)(hu)解釋空(kong)(kong)狀態(tai)是(shi)什么，以(yi)及他們需(xu)要怎(zen)樣(yang)(yang)做來(lai)避免空(kong)(kong)狀態(tai)，把他們自己的(de)文件拖進(jin)來(lai)。展(zhan)示基(ji)礎(chu)性內容Material Design對此解釋說(shuo)，在空(kong)(kong)狀態(tai)頁面(mian)展(zhan)示一些(xie)基(ji)礎(chu)性的(de)內容，可(ke)以(yi)幫助新(xin)用(yong)(yong)(yong)戶(hu)(hu)快速了解到如(ru)(ru)何使用(yong)(yong)(yong)相關功(gong)能(neng)。這樣(yang)(yang)用(yong)(yong)(yong)戶(hu)(hu)能(neng)夠快速學會使用(yong)(yong)(yong)產品，也使得產品學習(xi)成本降低(di)。

存儲諸(zhu)如(ru)音樂和電子書等內容(rong)，或(huo)使用(yong)筆(bi)記和文檔等模(mo)塊化(hua)內容(rong)的(de)APP，可(ke)以(yi)讓用(yong)戶(hu)(hu)在(zai)閱讀基(ji)礎(chu)性內容(rong)中(zhong)獲益。讓用(yong)戶(hu)(hu)擁有調整基(ji)礎(chu)性內容(rong)的(de)權限，是維持用(yong)戶(hu)(hu)參與的(de)一種(zhong)方式，這(zhe)是因為用(yong)戶(hu)(hu)可(ke)以(yi)感受到(dao)正在(zai)創(chuang)建(jian)自己的(de)APP。

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