從用(yòng)戶進入到與APP交互的(de)過程中，空狀态設計都是提升産品用(yòng)戶體驗的(de)不錯的(de)方法。

空狀态是指沒有數據的(de)頁面，也(yě)就是說，在用(yòng)戶進行某些動作後，頁面将會展示其産生的(de)内容。盡管如此，空狀态也(yě)可(kě)以提供有趣的(de)用(yòng)戶體驗。事實上，空狀态完全可(kě)以用(yòng)于指導用(yòng)戶的(de)操作，向他(tā)們介紹你的(de)産品或展示産品品牌的(de)個(gè)性。

你可(kě)以将空狀态變成一個(gè)與用(yòng)戶進行有意義交流的(de)地方，爲用(yòng)戶提供一種參與式的(de)用(yòng)戶體驗。

在這(zhè)篇文章(zhāng)中，将會說明(míng)什(shén)麽是空狀态以及如何設計出好的(de)空狀态，以此來(lái)提升用(yòng)戶體驗。什(shén)麽是空狀态？空狀态是APP中的(de)内容無法顯示的(de)頁面狀态，用(yòng)“空”來(lái)描述其實是不恰當的(de)，因爲空狀态頁面中還(hái)有一些内容的(de)。事實上，空狀态可(kě)以顯示多(duō)種不同的(de)内容來(lái)提升用(yòng)戶體驗，接下(xià)來(lái)我們就會著(zhe)重介紹這(zhè)一點。

例如：如果你曾經使用(yòng)過一款允許你把你喜愛(ài)的(de)内容添加到收藏夾裏的(de)APP，你就會對(duì)空狀态有所了(le)解。或者你使用(yòng)搜索，有過沒有搜索結果的(de)經曆…

以Instagram爲例：當你進入沒有添加任何照(zhào)片的(de)收藏夾時(shí)，你可(kě)能會看到一個(gè)空狀态，并告訴你還(hái)沒有添加任何照(zhào)片。

由于沒有數據内容，因此隻能展示空狀态或無數據。

Instagram的(de)空白狀态

但是，Instagram的(de)收藏頁面并沒有空狀态說明(míng)，相反，它是空白的(de)頁面。因此，他(tā)們錯過了(le)一次引導用(yòng)戶去與APP互動的(de)機會。

設計空狀态的(de)原因多(duō)種多(duō)樣，最常見的(de)原因有以下(xià)幾種：用(yòng)戶清空了(le)所有的(de)數據（如：清空收件箱）；用(yòng)戶是新用(yòng)戶，并且剛剛才登錄APP成功；用(yòng)戶遇到了(le)某種錯誤（如：沒有WIFI連接）。被忽略的(de)空狀态設計Shruthi Padala曾經在Medium上寫道：許多(duō)人(rén)認爲空狀态隻是輔助頁面，不需要去關注它們。但是空狀态會将空白頁呈現給用(yòng)戶，如果能夠利用(yòng)好空狀态頁面，會極大(dà)的(de)提升用(yòng)戶體驗。

曾在Shopify擔任插畫(huà)師的(de)Meg Robichaud寫過一篇關于空狀态研究的(de)文章(zhāng)。因爲與其他(tā)部分(fēn)的(de)用(yòng)戶體驗不同，空狀态設計的(de)難點就在于它需要不斷的(de)更新。但是隻有2%的(de)用(yòng)戶會看到空狀态，這(zhè)也(yě)就意味著(zhe)它不會是占用(yòng)過長(cháng)的(de)用(yòng)戶使用(yòng)時(shí)間。

這(zhè)也(yě)就解釋了(le)空狀态被忽略的(de)原因，因爲不是所有的(de)用(yòng)戶都能看到它們，所以花費過多(duō)精力在上面反而是得(de)不償失。也(yě)正是這(zhè)種心态，導緻了(le)空狀态設計被設計師給忽略掉了(le)，進而影(yǐng)響最終的(de)用(yòng)戶體驗。

最後，Meg和(hé)Shopify決定重新設計空狀态，即使隻有少數的(de)用(yòng)戶會碰到這(zhè)種頁面，爲什(shén)麽呢(ne)？

因爲，即使隻有2%的(de)用(yòng)戶，他(tā)們也(yě)需要一個(gè)好的(de)用(yòng)戶體驗，它給體驗帶來(lái)了(le)更多(duō)的(de)細節和(hé)影(yǐng)響力。

想一想，如果用(yòng)戶是一個(gè)新手，正在漫無目的(de)的(de)浏覽著(zhe)APP，并且還(hái)沒有下(xià)定決心是否要使用(yòng)這(zhè)款APP，這(zhè)些重要的(de)設計将是留住用(yòng)戶的(de)關鍵細節。

空狀态是很容易讓用(yòng)戶體驗出彩的(de)，它不是讓APP成爲最成功産品的(de)原因，但是它是取悅用(yòng)戶的(de)關鍵環節。對(duì)細節的(de)關注還(hái)有很長(cháng)的(de)路要走，正如有句名言所說，細節決定成敗。使用(yòng)空狀态的(de)好處Spotify的(de)用(yòng)戶體驗專家Tamara Hilmes提醒設計師們時(shí)說，空狀态是一個(gè)展示産品個(gè)性化(huà)的(de)機會，因此，在進行空狀态設計時(shí)，需要認真考慮品牌和(hé)用(yòng)戶的(de)目标和(hé)背景。

Deliveroo的(de)産品設計師Ryan Cordell同意Tamara Hilmes的(de)觀點，并進一步說：“設計好文字和(hé)視覺界面，是産品與用(yòng)戶互動并最終實現他(tā)們目标的(de)關鍵一步。設計團隊應該投入足夠多(duō)的(de)時(shí)間、耐心和(hé)精力來(lái)設計任何場(chǎng)景下(xià)的(de)文案。”同樣，即使不是特别重要的(de)頁面，告知用(yòng)戶下(xià)一步如何操作也(yě)有著(zhe)不錯的(de)效果。如果不這(zhè)樣做(zuò)，空狀态就不能提供任何價值，其也(yě)就成爲了(le)化(huà)妝品添加劑，毫無用(yòng)處。空狀态設計的(de)最佳案例如果你打算(suàn)設計一個(gè)空狀态，那麽請記住這(zhè)些好的(de)做(zuò)法，以便能夠幫助到用(yòng)戶去達到他(tā)們的(de)目标。

告訴用(yòng)戶該怎麽做(zuò)

如上所述，空狀态是鼓勵用(yòng)戶與産品互動的(de)絕佳機會，你也(yě)不希望把用(yòng)戶進入頁面後，一臉茫然而不知所措。

例如，你可(kě)以在空狀态頁面上放一個(gè)具有引導性的(de)按鈕，以一款剛下(xià)載的(de)社交APP爲例來(lái)說明(míng)。

這(zhè)款APP有通(tōng)訊錄标簽，但目前是空的(de)。一個(gè)好的(de)引導性按鈕可(kě)以告訴用(yòng)戶去查找并添加自己的(de)朋友，這(zhè)樣能夠讓他(tā)們也(yě)參與到你的(de)APP中。你的(de)引導能夠完整的(de)告訴用(yòng)戶，如何把空空的(de)通(tōng)訊錄轉變成好友衆多(duō)的(de)頁面，可(kě)以看看Facebook是如何做(zuò)的(de)（上圖）？空狀态要保持個(gè)性化(huà)空狀态設計中，個(gè)性與絕望、無畏和(hé)欲望之間有著(zhe)非常細微的(de)界限，若無法很好的(de)平衡這(zhè)兩者之間的(de)關系，就會把展示品牌個(gè)性變成了(le)展示絕望、無畏和(hé)欲望啦。

但是，空狀态設計僅僅隻是産品展示個(gè)性化(huà)的(de)一個(gè)小例子，個(gè)性并不總代表著(zhe)有趣，爲頁面添加幽默的(de)元素時(shí)，需要格外謹慎。某個(gè)笑(xiào)話(huà)在今天可(kě)能很受歡迎，但是明(míng)天就會有用(yòng)戶不再喜歡了(le)，給人(rén)以過時(shí)的(de)感受。

在空狀态設計中，使用(yòng)友好且合适的(de)文案能夠帶來(lái)意外的(de)效果。兼具特制和(hé)适合特性的(de)插圖，可(kě)以幫助你設計出一個(gè)成功的(de)空狀态。

如果你決定要使用(yòng)插圖和(hé)文案，請确保它們要有層次感，不會相互影(yǐng)響。一個(gè)好的(de)插圖能夠爲頁面帶來(lái)足夠的(de)樂(yuè)趣和(hé)參與度，此時(shí)，你可(kě)以使用(yòng)簡單且常用(yòng)的(de)文案。來(lái)看看Google是如何平衡兩者之間的(de)關系的(de)？

Google的(de)Material Design 指南(nán)中規定，如果打算(suàn)使用(yòng)圖片，請遵循以下(xià)規則：使用(yòng)中性或幽默的(de)語氣；與産品的(de)品牌風格保持一緻文案需要遵循的(de)規則：文案傳達出有用(yòng)的(de)信息；在不需要操作的(de)情況下(xià)，告訴用(yòng)戶頁面的(de)作用(yòng)。使用(yòng)空狀态來(lái)培養用(yòng)戶你可(kě)以使用(yòng)空狀态來(lái)告知用(yòng)戶如何使用(yòng)産品，空狀态在用(yòng)戶首次體驗産品時(shí)扮演著(zhe)重要角色。

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

據Appcues的(de)消息稱：如果經過 3 個(gè)月(yuè)的(de)時(shí)間，當初 100 個(gè)用(yòng)戶中隻有 4 個(gè)用(yòng)戶還(hái)在使用(yòng)你的(de)APP時(shí)，那麽用(yòng)戶體驗設計師就需要優化(huà)首次登錄APP的(de)體驗了(le)。以Dropbox爲例，在屏幕截圖的(de)下(xià)面，你可(kě)以看到他(tā)們是如何使用(yòng)小提示向用(yòng)戶解釋空狀态是什(shén)麽，以及他(tā)們需要怎樣做(zuò)來(lái)避免空狀态，把他(tā)們自己的(de)文件拖進來(lái)。展示基礎性内容Material Design對(duì)此解釋說，在空狀态頁面展示一些基礎性的(de)内容，可(kě)以幫助新用(yòng)戶快(kuài)速了(le)解到如何使用(yòng)相關功能。這(zhè)樣用(yòng)戶能夠快(kuài)速學會使用(yòng)産品，也(yě)使得(de)産品學習(xí)成本降低。

存儲諸如音(yīn)樂(yuè)和(hé)電子書(shū)等内容，或使用(yòng)筆記和(hé)文檔等模塊化(huà)内容的(de)APP，可(kě)以讓用(yòng)戶在閱讀基礎性内容中獲益。讓用(yòng)戶擁有調整基礎性内容的(de)權限，是維持用(yòng)戶參與的(de)一種方式，這(zhè)是因爲用(yòng)戶可(kě)以感受到正在創建自己的(de)APP。

從上面的(de)閱讀類APP的(de)例子可(kě)以看出，它會在空狀态頁面展示一些免費的(de)書(shū)籍，這(zhè)樣的(de)話(huà)，用(yòng)戶可(kě)以以此爲起點，繼續浏覽APP的(de)其他(tā)功能模塊。