如何設(shè)計(jì)出好的空狀態(tài)提升用戶體驗(yàn)

■ 段 晨

從用戶進(jìn)入到與APP交互的過(guò)程中，空狀態(tài)設(shè)計(jì)是提升產(chǎn)品用戶體驗(yàn)的不錯(cuò)的方法。

空狀態(tài)是指沒(méi)有數(shù)據(jù)的頁(yè)面，也就是說(shuō)，在用戶進(jìn)行某些動(dòng)作后，頁(yè)面將會(huì)展示其產(chǎn)生的內(nèi)容。盡管如此，空狀態(tài)也可以提供有趣的用戶體驗(yàn)。事實(shí)上，空狀態(tài)完全可以用于指導(dǎo)用戶的操作，向他們介紹你的產(chǎn)品或展示產(chǎn)品品牌的個(gè)性。

可以將空狀態(tài)變成一個(gè)與用戶進(jìn)行有意義交流的地方，為用戶提供一種參與式的用戶體驗(yàn)。下面將會(huì)說(shuō)明什么是空狀態(tài)以及如何設(shè)計(jì)出好的空狀態(tài)，以此來(lái)提升用戶體驗(yàn)。

什么是空狀態(tài)？

空狀態(tài)是APP中的內(nèi)容無(wú)法顯示的頁(yè)面狀態(tài)，用“空”來(lái)描述其實(shí)是不恰當(dāng)?shù)模驗(yàn)榭諣顟B(tài)頁(yè)面中還有一些內(nèi)容的。事實(shí)上，空狀態(tài)可以顯示多種不同的內(nèi)容來(lái)提升用戶體驗(yàn)，接下來(lái)我們就會(huì)著重介紹這一點(diǎn)。

例如：如果你曾經(jīng)使用過(guò)一款允許你把你喜愛的內(nèi)容添加到收藏夾里的APP，你就會(huì)對(duì)空狀態(tài)有所了解。或者你使用搜索，有過(guò)沒(méi)有搜索結(jié)果的經(jīng)驗(yàn)……

以Instagram為例：當(dāng)你進(jìn)入沒(méi)有添加任何照片的收藏夾時(shí)，可能會(huì)看到一個(gè)空狀態(tài)，并告訴你還沒(méi)有添加任何照片。

由于沒(méi)有數(shù)據(jù)內(nèi)容，因此只能展示空狀態(tài)或無(wú)數(shù)據(jù)，即Instagram的空白狀態(tài)。但是，Instagram的收藏頁(yè)面并沒(méi)有空狀態(tài)說(shuō)明，相反，它是空白的頁(yè)面。因此，他們錯(cuò)過(guò)了一次引導(dǎo)用戶去與APP互動(dòng)的機(jī)會(huì)。

設(shè)計(jì)空狀態(tài)的原因多種多樣，最常見的原因有以下幾種：

1.用戶清空了所有的數(shù)據(jù)（如：清空收件箱）；

2.用戶是新用戶，并且剛剛才登錄APP成功；

3.用戶遇到了某種錯(cuò)誤（如：沒(méi)有WIFI連接）。

被忽略的空狀態(tài)設(shè)計(jì)

Shruthi Padala曾經(jīng)在Medium上寫道：

許多人認(rèn)為空狀態(tài)只是輔助頁(yè)面，不需要去關(guān)注它們。但是空狀態(tài)會(huì)將空白頁(yè)呈現(xiàn)給用戶，如果能夠利用好空狀態(tài)頁(yè)面，會(huì)極大的提升用戶體驗(yàn)。

曾在Shopify擔(dān)任插畫師的Meg Robichaud寫過(guò)一篇關(guān)于空狀態(tài)研究的文章。因?yàn)榕c其他部分的用戶體驗(yàn)不同，空狀態(tài)設(shè)計(jì)的難點(diǎn)就在于它需要不斷的更新。但是只有2%的用戶會(huì)看到空狀態(tài)，這也就意味著它不會(huì)是占用過(guò)長(zhǎng)的用戶使用時(shí)間。

這也就解釋了空狀態(tài)被忽略的原因，因?yàn)椴皇撬械挠脩舳寄芸吹剿鼈?，所以花費(fèi)過(guò)多精力在上面反而是得不償失。也正是這種心態(tài)，導(dǎo)致了空狀態(tài)設(shè)計(jì)被設(shè)計(jì)師給忽略掉了，進(jìn)而最終影響用戶的體驗(yàn)。

最后，Meg和Shopify決定重新設(shè)計(jì)空狀態(tài)，即使只有少數(shù)的用戶會(huì)碰到這種頁(yè)面，為什么呢？因?yàn)?，即使只?%的用戶，他們也需要一個(gè)好的用戶體驗(yàn)，它給體驗(yàn)帶來(lái)了更多的細(xì)節(jié)和影響力。

想一想，如果用戶是一個(gè)新手，正在漫無(wú)目的的瀏覽著APP，并且還沒(méi)有下定決心是否要使用這款A(yù)PP，這些重要的設(shè)計(jì)將是留住用戶的關(guān)鍵細(xì)節(jié)。

空狀態(tài)是很容易讓用戶體驗(yàn)出彩的，它不是讓APP成為最成功產(chǎn)品的原因，但它是取悅用戶的關(guān)鍵環(huán)節(jié)。對(duì)細(xì)節(jié)的關(guān)注還有很長(zhǎng)的路要走，正如有句名言所說(shuō)，細(xì)節(jié)決定成敗。

使用空狀態(tài)的好處

Spotify的用戶體驗(yàn)專家Tamara Hilmes提醒設(shè)計(jì)師們時(shí)說(shuō)，空狀態(tài)是一個(gè)展示產(chǎn)品個(gè)性化的機(jī)會(huì)，因此，在進(jìn)行空狀態(tài)設(shè)計(jì)時(shí)，需要認(rèn)真考慮品牌、用戶的目標(biāo)和背景。

Deliveroo的產(chǎn)品設(shè)計(jì)師Ryan Cordell也同意Tamara Hilmes的觀點(diǎn)，并進(jìn)一步說(shuō)：“設(shè)計(jì)好文字和視覺(jué)界面，是產(chǎn)品與用戶互動(dòng)并最終實(shí)現(xiàn)他們目標(biāo)的關(guān)鍵一步。設(shè)計(jì)團(tuán)隊(duì)?wèi)?yīng)該投入足夠多的時(shí)間、耐心和精力來(lái)設(shè)計(jì)任何場(chǎng)景下的文案?！?/p>

同樣，即使不是特別重要的頁(yè)面，告知用戶下一步如何操作也有著不錯(cuò)的效果。如果不這樣做，空狀態(tài)就不能提供任何價(jià)值，其也就成為了化妝品添加劑，毫無(wú)用處。

如果你打算設(shè)計(jì)一個(gè)空狀態(tài)，那么請(qǐng)記住這些好的做法，以便能夠幫助到用戶去達(dá)到他們的目標(biāo)。

如上所述，空狀態(tài)是鼓勵(lì)用戶與產(chǎn)品互動(dòng)的絕佳機(jī)會(huì)，誰(shuí)也不希望用戶進(jìn)入頁(yè)面后，一臉茫然而不知所措。例如，可以在空狀態(tài)頁(yè)面上放一個(gè)具有引導(dǎo)性的按鈕，以一款剛下載的社交APP為例來(lái)說(shuō)明。

這款A(yù)PP有通訊錄標(biāo)簽，但目前是空的。一個(gè)好的引導(dǎo)性按鈕可以告訴用戶去查找并添加自己的朋友，這樣能夠讓他們也參與到APP中。引導(dǎo)能夠完整地告訴用戶，如何把空的通訊錄轉(zhuǎn)變成好友眾多的頁(yè)面，可以看看Facebook是如何做的？

空狀態(tài)要保持個(gè)性化

空狀態(tài)設(shè)計(jì)中，個(gè)性和絕望、無(wú)畏與欲望之間有著非常細(xì)微的界限，若無(wú)法很好的平衡這兩者之間的關(guān)系，就會(huì)把展示品牌個(gè)性變成了展示絕望、無(wú)畏和欲望啦。

空狀態(tài)設(shè)計(jì)僅僅只是產(chǎn)品展示個(gè)性化的一個(gè)小例子，個(gè)性并不總代表著有趣，為頁(yè)面添加幽默的元素時(shí)，需要格外謹(jǐn)慎。某個(gè)笑話在今天可能很受歡迎，但是明天就會(huì)有用戶不再喜歡了，給人以過(guò)時(shí)的感受。

在空狀態(tài)設(shè)計(jì)中，使用友好且合適的文案能夠帶來(lái)意外的效果。兼具特制和適合特性的插圖，可以幫助你設(shè)計(jì)出一個(gè)成功的空狀態(tài)。

如果你決定要使用插圖和文案，請(qǐng)確保它們要有層次感，不會(huì)相互影響。一個(gè)好的插圖能夠?yàn)轫?yè)面帶來(lái)足夠的樂(lè)趣和參與度，此時(shí)，你可以使用簡(jiǎn)單且常用的文案。來(lái)看看Google是如何平衡兩者之間的關(guān)系的？

Google的Material Design指南中規(guī)定，如果打算使用圖片，請(qǐng)遵循以下規(guī)則：

使用中性或幽默的語(yǔ)氣；

與產(chǎn)品的品牌風(fēng)格保持一致；

文案需要遵循的規(guī)則；

文案?jìng)鬟_(dá)出有用的信息；

在不需要操作的情況下，告訴用戶頁(yè)面的作用。

使用空狀態(tài)來(lái)培養(yǎng)用戶

可以使用空狀態(tài)來(lái)告知用戶如何使用產(chǎn)品，空狀態(tài)在用戶首次體驗(yàn)產(chǎn)品時(shí)扮演著重要角色。如果你想留住用戶，那么良好的首次體驗(yàn)是至關(guān)重要的。

據(jù)Appcues的消息稱：如果經(jīng)過(guò)3個(gè)月的時(shí)間，當(dāng)初100個(gè)用戶中只有4個(gè)用戶還在使用你的APP時(shí)，那么用戶體驗(yàn)設(shè)計(jì)師就需要優(yōu)化首次登錄APP的體驗(yàn)了。

以Dropbox為例，在屏幕截圖的下面，可以看到他們是如何使用小提示向用戶解釋空狀態(tài)是什么，以及他們需要怎樣做來(lái)避免空狀態(tài)，把他們自己的文件拖進(jìn)來(lái)。

展示基礎(chǔ)性內(nèi)容

Material Design對(duì)此解釋說(shuō)，在空狀態(tài)頁(yè)面展示一些基礎(chǔ)性的內(nèi)容，可以幫助新用戶快速了解到如何使用相關(guān)功能。這樣用戶能夠快速學(xué)會(huì)使用產(chǎn)品，也使得產(chǎn)品學(xué)習(xí)成本降低。

存儲(chǔ)諸如音樂(lè)和電子書等內(nèi)容，或使用筆記和文檔等模塊化內(nèi)容的APP，可以讓用戶在閱讀基礎(chǔ)性內(nèi)容中獲益。讓用戶擁有調(diào)整基礎(chǔ)性內(nèi)容的權(quán)限，是維持用戶參與的一種方式，這是因?yàn)橛脩艨梢愿惺艿秸趧?chuàng)建自己的APP。

從上面的閱讀類APP的例子可以看出，它會(huì)在空狀態(tài)頁(yè)面展示一些免費(fèi)的書籍，這樣的話，用戶可以以此為起點(diǎn)，繼續(xù)瀏覽APP的其他功能模塊。

空狀態(tài)不必為空，利用空狀態(tài)與用戶進(jìn)行對(duì)話，這有利于構(gòu)建產(chǎn)品與用戶之間持久的關(guān)系。通過(guò)上面的闡述的策略，就可以創(chuàng)建一個(gè)幫助用戶實(shí)現(xiàn)自身目標(biāo)的空狀態(tài)。