編者按：本杰明·布蘭德爾（Benjamin Brandall）是?Process Street?的內(nèi)容設(shè)計師。

我算不上是一個優(yōu)秀的設(shè)計師，事實上我的設(shè)計水平還比較糟糕。不過我對設(shè)計的理念很感興趣。我讀過和寫過很多關(guān)于?客戶成功?的內(nèi)容，在這個過程當(dāng)中，我無意發(fā)現(xiàn)了塞繆爾·赫利克（Samuel Hulick）的網(wǎng)站?UserOnboard。

他在這個網(wǎng)站上詳細(xì)解釋了多款熱門應(yīng)用的用戶引導(dǎo)（user onboarding）流程，設(shè)計師們可以從中了解到世界上最成功的一部分應(yīng)用是如何留存用戶，提升用戶好感和為用戶帶來價值的。而這個網(wǎng)站本身就能做到以上幾點。

在看完塞繆爾的內(nèi)容以后，我發(fā)現(xiàn)他在一條推文中給出了?emptystat.es?的網(wǎng)站鏈接，這是一個成立于 2013 年的網(wǎng)站，它專門展示一些由用戶投稿的空白狀態(tài)（empty state）截屏。

由于我的腦海還充斥著大量關(guān)于用戶上手的內(nèi)容，所以我決定使用?Evernote?收集一些相關(guān)素材，寫出一篇曾以“最容易被忽視的設(shè)計細(xì)節(jié)?”為題的文章。

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

空白狀態(tài)指的是屏幕在沒有可顯示數(shù)據(jù)時所呈現(xiàn)的狀態(tài)。這種情況出現(xiàn)的原因可能是：

• 用戶剛剛完成應(yīng)用注冊。
• 用戶自己清空了數(shù)據(jù)。
• 應(yīng)用出現(xiàn)了錯誤。

我們會快速了解幾個關(guān)于這三種空白狀態(tài)的例子，然后深入探討空白狀態(tài)將如何幫助提升用戶留存率，以及確保用戶能夠最大化利用你的應(yīng)用。

Gmail 的新注冊空白狀態(tài)

Gmail 采用了非常好的?新用戶引導(dǎo)方式?，但是當(dāng)用戶真正進(jìn)入了這個應(yīng)用之后會看到什么呢？Gmail 會以用戶未來會用到的格式（電子郵件）來呈現(xiàn)更多的引導(dǎo)信息。它還會指導(dǎo)用戶如何從應(yīng)用中獲取更多的價值，這些設(shè)計都是為了提升用戶成功（從而提升留存率）而設(shè)的。

Process Street 的無數(shù)據(jù)狀態(tài)

跟許多依賴用戶創(chuàng)建內(nèi)容的應(yīng)用一樣，Process Street?的無數(shù)據(jù)狀態(tài)也會告訴用戶應(yīng)該如何充實應(yīng)用的內(nèi)容。模板是 Process Street 的核心功能，如果沒有模板的話，用戶就無法建立清單，也不需要添加文件夾或者標(biāo)簽等內(nèi)容。這就是這個頁面的意義所在。

Eventbrite 的錯誤頁面

雖然這個顯示錯誤信息的空白狀態(tài)頁面采用了荒涼的沙漠主題，但是它顯得充滿趣味和生活氣息，而且能夠為用戶帶來幫助。跟?某些錯誤頁面?不一樣的是，它會明確告訴用戶下一步應(yīng)該怎么做。你的應(yīng)用中不應(yīng)該出現(xiàn)任何的?死胡同?。

空白狀態(tài)應(yīng)該回答的三個問題

一個有用的空白狀態(tài)應(yīng)該可以告訴你它?是什么?，你?為什么?會看到它，以及你?怎么做?才能填充這個空白狀態(tài)。我們接下來將會探討更多的要點，但是一個好的空白狀態(tài)首先應(yīng)該是有用的，其次才需要考慮是否精彩的問題。

在設(shè)計的時候，你應(yīng)該將上面的三個問題（是什么，為什么，怎么做）看成是重復(fù)吸引用戶的原則，不過你也需要記住它們是空白狀態(tài)的最基本要求。

通過空白狀態(tài)吸引用戶的注意力

這是一個非常重要的問題。這是延續(xù)用戶引導(dǎo)流程和留存用戶的最有效方式。正如我在文章開頭所說的，空白狀態(tài)可以且應(yīng)該用于（重復(fù)）吸引用戶，并幫助他們獲得成功。

空白狀態(tài)可以如何用于吸引注意力和提升留存呢？我們需要考慮用戶在看到空白狀態(tài)時首先會想到什么。

大家可以看到這是一個空空如也的頁面，沒有任何旅程。它可以告訴我這個屏幕的用途是什么，但是除此之外就沒有任何東西。

好吧，這里的確有告訴我頁面出現(xiàn)空白的原因，但是我之所以看到這個頁面，可能是因為我不知道?怎么添加旅程?。

這就對了。這個顯眼的按鈕和恰當(dāng)?shù)拈_始行動文字能夠告訴我應(yīng)該如何解決問題。如果我只是看到自己沒有旅程的話，這會讓人覺得這個應(yīng)用是故意做得難以使用的。

我們再用同樣的方式來分析另外一款應(yīng)用。

在完全沒有數(shù)據(jù)的同時也沒有提供任何的幫助。它有告訴我這個頁面是用來做什么的——顯示選中的檔案，但是我沒有看到其他東西了。

現(xiàn)在我知道自己為什么會看到這些，但是不知道如何解決我的問題。

我不知道是我自己的問題，還是這個應(yīng)用本身的語氣無禮。無論如何，我們都喜歡看到幫助信息。現(xiàn)在我們知道如何解決自己的問題，并用寶貴的數(shù)據(jù)來填充這個空白狀態(tài)。上面的例子都遵循了?是什么?，?為什么?，?怎么做?這三個原則。

個性和指示是空白狀態(tài)的點睛之筆

空白狀態(tài)還有兩個可以提升的方面——個性和指示。個性可以讓你的應(yīng)用留下更深刻的印象和更愉悅的使用體驗。指示可以向用戶傳達(dá)應(yīng)用的價值，這點可以提升留存率和解決用戶在引導(dǎo)過程的問題。

Khaylo Workout

這個頁面回答了是什么（一個空白的挑戰(zhàn)頁面），為什么（因為你還沒有向任何好友發(fā)起挑戰(zhàn)），以及如何解決這個問題（點擊“+”圖標(biāo)）。但是它沒有止步于此。這個空白狀態(tài)通過美觀的圖像和親切的語言表現(xiàn)了應(yīng)用的個性，同時讓用戶認(rèn)識到向其他人發(fā)起挑戰(zhàn)的益處。

下面是另外一個符合各方面要求的優(yōu)秀空白狀態(tài)例子。

Beamly

我從來沒有用過 Beamly，不過這個空白狀態(tài)的信息可以讓我清楚了解到應(yīng)用的用途。除了三個基本內(nèi)容之外（是什么，為什么，怎么做），它還加入了一段有趣的話，并向新用戶或回歸用戶解釋了應(yīng)用的核心價值。

在空白狀態(tài)中體現(xiàn)品牌個性

空白狀態(tài)是向用戶建立聯(lián)系和傳達(dá)應(yīng)用個性的重要橋梁。正如網(wǎng)頁設(shè)計師?在 404 頁面盡顯創(chuàng)意一樣，空白狀態(tài)也能發(fā)揮出無限創(chuàng)意。情感設(shè)計大師亞倫·沃爾特（Aaron Walter）采用了人類需求層次來?解釋?優(yōu)秀用戶體驗的要素——你的應(yīng)用不僅要體現(xiàn)功能性、可靠性和實用性，它還應(yīng)該是令人愉悅的。

Smashing Magazine?的西蒙·施密德（SimonSchmid）提出了多種實現(xiàn)愉悅用戶體驗的方法。我對他給出的列表進(jìn)行了總結(jié)，找出了你可以通過空白狀態(tài)提供的愉悅感：

• 積極性。請參考文章“10 大積極情感”（What Are The Top 10 Positive Emotions）
• 意外性。做一些出乎意料的事情。
• 獨特性。以?有趣的方式?差異化自己的產(chǎn)品。
• 關(guān)注性。雖然你沒有這個義務(wù)，但你仍然可以向用戶提供激勵或者幫助。

在空白狀態(tài)中運用情感

現(xiàn)在回到收件箱的話題，我從不同空白狀態(tài)的語氣發(fā)現(xiàn)了一些有趣的要點。也就是說，有些應(yīng)用會鼓勵用戶清空收件箱，其他應(yīng)用則會鼓勵用戶填充空白狀態(tài)。

空白狀態(tài)所傳達(dá)的情感取決于應(yīng)用的用途。Hangouts 希望用戶添加內(nèi)容，而 Outlook（它的“重點”收件箱是為了幫助用戶閱讀所有重要郵件）則希望用戶清空內(nèi)容。

Hangouts

無論畫面中的是什么，它所表達(dá)的都是一種傷心的情感。對用戶來說，這可以算是一種獲得 Hangouts 邀請的激勵嗎？設(shè)計真的可以起到一種神奇的效果……

Outlook

你已經(jīng)通過這項功能獲得了成功。這就是所謂的積極性。

從空白狀態(tài)中帶來驚喜

其實大部分錯誤頁面的出現(xiàn)都會讓用戶感到意外。與其告訴用戶他們沒有正確使用這個應(yīng)用，為什么不將這種意外轉(zhuǎn)化為驚喜呢？畢竟，你不會想用戶經(jīng)?？吹藉e誤頁面，所以在錯誤頁面中傳達(dá)一種輕松的心態(tài)可以幫助緩和用戶的情緒。

Cognito Brain Training

無論在什么情境下，看到鯊魚總會讓我感到意外。

Timehop

如果你想用一種驚喜的方式告知我互聯(lián)網(wǎng)連接已經(jīng)斷開，至少要像這個例子中的時間旅行比喻一樣。

在空白狀態(tài)中傳達(dá)益處

最后，我們先跳出設(shè)計的領(lǐng)域，然后進(jìn)入一個我更熟悉的專業(yè)：文案寫作。

你的初始空白狀態(tài)的核心目標(biāo)應(yīng)該是向用戶（重復(fù)）推銷應(yīng)用的益處。你的用戶引導(dǎo)流程不是總能達(dá)到預(yù)期的效果，所以在用戶完成注冊以后，你的應(yīng)用可能就會被遺忘在手機的主屏幕上，經(jīng)過數(shù)天、數(shù)周甚至是數(shù)月才會被再次打開。如果一個用戶在引導(dǎo)過程期間或之后離開了你的應(yīng)用，那么他很有可能會永遠(yuǎn)放棄這款應(yīng)用，所以你應(yīng)該盡力做到以下兩點：

• 提醒用戶你的應(yīng)用有什么功能。
• 告訴他們?yōu)槭裁匆谝膺@些功能。

換句話說，你的空白狀態(tài)需要體現(xiàn)文案寫作的準(zhǔn)則：以益處為賣點，以功能作支撐。

注意：如果你想快速了解如何寫出簡潔有力的文案，歡迎閱讀我的另外一篇關(guān)于?商務(wù)寫作訣竅的文章。

下面我們來分析一些優(yōu)秀的例子。

Basecamp 的項目無數(shù)據(jù)狀態(tài)

我喜歡應(yīng)用明確告訴我要做什么，怎么做還有為什么我要在意這些。

Dropbox 團(tuán)隊版的無數(shù)據(jù)狀態(tài)

Dropbox 的文案人員做得非常好。我自己其實用不上這項功能，但是我打開這個頁面的原因是為自己的文案模板獲取更多的素材。

空白狀態(tài)設(shè)計的要點總結(jié)

為了感謝你能一直堅持看到結(jié)尾，接下來我要給你一個特別的獎勵——我將收起自己的長篇大論，并為大家清晰地總結(jié)空白狀態(tài)設(shè)計的要點?？偟膩碚f，一個空白狀態(tài)頁面需要回答的基本問題是：

• 這個屏幕是什么？
• 為什么我會看到它？
• 我要怎么解決這個問題？

除此之外，你還需要做到：

• 傳達(dá)個性。讓用戶愉悅地使用你的應(yīng)用，并將用戶的情感與應(yīng)用的功能聯(lián)系起來。
• 說明益處。對于你的初始空白狀態(tài)來說，這是至關(guān)重要的一點，否則用戶不會知道自己為什么應(yīng)該在意你的應(yīng)用。

本文出現(xiàn)的空白狀態(tài)來自：emptystat.es、UX:?Empty?States、UI Empty States。

我目前還在研究空白狀態(tài)設(shè)計的話題，所以我很樂意看到大家收藏的優(yōu)秀空白狀態(tài)。如果你有這樣的收藏，請在下方的評論欄向我分享。最后感謝大家能夠忍受我的廢話連篇。

題圖來自：FreshPaint/Shutterstock

來源： techcrunch???譯文出處：關(guān)嘉偉（@consideRay）