空狀態(tài)是指沒有數(shù)據(jù)的頁面，盡管如此，空狀態(tài)也可以提供有趣的用戶體驗。在這篇文章中，將會說明什么是空狀態(tài)以及如何設(shè)計出好的空狀態(tài)，以此來提升用戶體驗。

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

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

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

在這篇文章中，將會說明什么是空狀態(tài)以及如何設(shè)計出好的空狀態(tài)，以此來提升用戶體驗。

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

空狀態(tài)是APP中的內(nèi)容無法顯示的頁面狀態(tài)，用“空”來描述其實是不恰當?shù)?，因為空狀態(tài)頁面中還有一些內(nèi)容的。事實上，空狀態(tài)可以顯示多種不同的內(nèi)容來提升用戶體驗，接下來我們就會著重介紹這一點。

例如：如果你曾經(jīng)使用過一款允許你把你喜愛的內(nèi)容添加到收藏夾里的APP，你就會對空狀態(tài)有所了解?；蛘吣闶褂盟阉?，有過沒有搜索結(jié)果的經(jīng)歷…

以Instagram為例：當你進入沒有添加任何照片的收藏夾時，你可能會看到一個空狀態(tài)，并告訴你還沒有添加任何照片。

由于沒有數(shù)據(jù)內(nèi)容，因此只能展示空狀態(tài)或無數(shù)據(jù)。

Instagram的空白狀態(tài)

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

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

1. 用戶清空了所有的數(shù)據(jù)（如：清空收件箱）；
2. 用戶是新用戶，并且剛剛才登錄APP成功；
3. 用戶遇到了某種錯誤（如：沒有WIFI連接）。

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

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

許多人認為空狀態(tài)只是輔助頁面，不需要去關(guān)注它們。

但是空狀態(tài)會將空白頁呈現(xiàn)給用戶，如果能夠利用好空狀態(tài)頁面，會極大的提升用戶體驗。

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

這也就解釋了空狀態(tài)被忽略的原因，因為不是所有的用戶都能看到它們，所以花費過多精力在上面反而是得不償失。也正是這種心態(tài)，導(dǎo)致了空狀態(tài)設(shè)計被設(shè)計師給忽略掉了，進而影響最終的用戶體驗。

最后，Meg和Shopify決定重新設(shè)計空狀態(tài)，即使只有少數(shù)的用戶會碰到這種頁面，為什么呢？

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

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

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

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

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

Deliveroo的產(chǎn)品設(shè)計師Ryan Cordell同意Tamara Hilmes的觀點，并進一步說：

“設(shè)計好文字和視覺界面，是產(chǎn)品與用戶互動并最終實現(xiàn)他們目標的關(guān)鍵一步。設(shè)計團隊應(yīng)該投入足夠多的時間、耐心和精力來設(shè)計任何場景下的文案?！?/p>

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

空狀態(tài)設(shè)計的最佳案例

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

告訴用戶該怎么做

如上所述，空狀態(tài)是鼓勵用戶與產(chǎn)品互動的絕佳機會，你也不希望把用戶進入頁面后，一臉茫然而不知所措。

例如，你可以在空狀態(tài)頁面上放一個具有引導(dǎo)性的按鈕，以一款剛下載的社交APP為例來說明。

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

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

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

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

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

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

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

• 使用中性或幽默的語氣；
• 與產(chǎn)品的品牌風(fēng)格保持一致

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

• 文案傳達出有用的信息；
• 在不需要操作的情況下，告訴用戶頁面的作用。

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

你可以使用空狀態(tài)來告知用戶如何使用產(chǎn)品，空狀態(tài)在用戶首次體驗產(chǎn)品時扮演著重要角色。

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

據(jù)Appcues的消息稱：

如果經(jīng)過3個月的時間，當初100個用戶中只有4個用戶還在使用你的APP時，那么用戶體驗設(shè)計師就需要優(yōu)化首次登錄APP的體驗了。

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

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

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

存儲諸如音樂和電子書等內(nèi)容，或使用筆記和文檔等模塊化內(nèi)容的APP，可以讓用戶在閱讀基礎(chǔ)性內(nèi)容中獲益。讓用戶擁有調(diào)整基礎(chǔ)性內(nèi)容的權(quán)限，是維持用戶參與的一種方式，這是因為用戶可以感受到正在創(chuàng)建自己的APP。

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

總結(jié)

空狀態(tài)不必為空，利用空狀態(tài)與用戶進行對話，這有利于構(gòu)建產(chǎn)品與用戶之間持久的關(guān)系。

通過上面的闡述的策略，就可以創(chuàng)建一個幫助用戶實現(xiàn)自身目標的空狀態(tài)。

原文作者：Justinmind

原文鏈接：https://uxplanet.org/everything-you-need-to-know-about-empty-state-design-af05bee42429

譯文作者：元設(shè)計

本文由 @元設(shè)計 翻譯發(fā)布于人人都是產(chǎn)品經(jīng)理。未經(jīng)許可，禁止轉(zhuǎn)載

題圖來自 Pexels，基于 CC0 協(xié)議