如何在新用戶引導流程中用好空狀態界面？

當新用戶打開你的APP的時候，最初的幾個界面將會直接影響用戶對你的網站的預期。為了確保用戶不會在第一次打開之后就卸載APP，你應該用好最初的空狀態頁面，通過引導，幫助用戶完成關鍵性任務，獲得成就感，達成目標，并不斷回來，成為你的APP的回頭客。換句話說，要在第一次交互之后，成功吸引用戶，讓他們流連忘返。

新用戶引導流程是這當中的關鍵。創造第一印象，你只有一次機會。今天的文章，我們將會提供一些使用空狀態來優化新用戶引導的策略和技巧。

什么是空狀態

對于許多APP而言，內容是它的核心價值。無論是新聞類APP，還是效率類應用，均是如此，因為對于用戶而言，絕大多數時候是為了內容而使用引用。這樣一來，一開始使用的時候所面對的空狀態界面，就顯得至關重要了：當用戶還沒有看到內容也沒有內容填充APP的時候，它將如何引導用戶完成從無到有的過程？

對于默認為空的狀態，或者僅僅只有基本默認設定的設置界面，也非常適合引導新用戶熟悉產品。除了給用戶對內容的期待之外，空狀態界面還適合教用戶使用APP。即使新用戶引導流程在這里被壓縮到一個步驟，它也能夠稱職地引導用戶做正確的事情。

在 Expensify 這個APP當中，空狀態教會用戶如何起步，讓他們安全地使用產品。

引導流程中空狀態的價值

作為用戶首次使用所打開的界面，空狀態界面對于用戶熟悉產品有這毋庸置疑的價值。你應該利用這個機會盡可能地吸引用戶，教育用戶。

教育用戶

首先，空狀態界面應該幫助用戶了解上下文情況，讓用戶熟悉當前的狀況，為什么會發生這樣的情況，安撫用戶的情緒。此時應該這樣展現信息：向用戶展示界面有內容時候的樣子，或者向他們告知此時應該如何操作來獲取內容。

提供行動指示

絕大多數空狀態界面會告訴你，為什么會遭遇這樣的情況。但是真正有效的空狀態，會告訴你下一步要做什么。教育你的用戶很重要，但是在用戶最初遭遇空狀態的時候，你要驅動他們前進，前進了才是初步的成功。空狀態界面就是最佳的起點，你可以通過設計來鼓勵用戶前進。

創造愉悅的體驗

雖然絕大多數的APP都是功能性的（解決具體問題），也是可用的（易于學習，易于使用），同時它也應該是令人愉悅的。空狀態是你的APP同用戶構建起情感聯系、塑造個性的絕佳機會。

如何設計絕佳的空狀態

空狀態能夠吸引用戶，但是在產品和UI設計的過程中，常常會忽略它的這一屬性，甚至會忽略對空狀態的設計。因為在絕大多數時候，我們所設計的都是填充好內容的界面，布局都被精心挑選的內容塞滿了。但是，當內容還未來得及加入界面的時候，我們要如何展現界面呢？空狀態界面，其實是展現創造力和可用性的優秀舞臺。

避免走入死胡同

當用戶進入空界面之后，發現整個交互和操作都走入了死胡同，不管怎么操作都無法改變現狀，這才是最糟糕的局面。且不說陷入這樣的僵局給用戶帶來的混亂感和無效的多余操作，它本身的不可用讓用戶對APP所產生的失望情緒，才是最致命的。

看看 Modspot 兩個界面設計案例吧。第一個界面是用戶首次使用的空狀態頁面，巧妙的借助這個界面來引導用戶發布作品：

而第二個界面則是忽略空狀態界面設計時候的樣子，沒有演示，沒有引導，也沒有說明，對于不會主動嘗試的用戶而言，這就是個死胡同。

讓空狀態界面視覺上簡單清晰

空狀態本身內容并不多，即使加上說明和指引，也應該足夠簡單。將最重要的引導和說明突出展示，減少無關內容，降低干擾。簡而言之，需要將清晰直觀的文案，和強引導性的視覺設計結合起來。下面iOS版 Dropbox 的離線文件空狀態界面，就非常值得學習，簡單清晰的文本加上有趣的插畫，讓用戶瞬間明白了這個功能如何使用。

讓空狀態具備直覺性

當然，空狀態頁面要漂亮，但是它不僅僅要具備視覺美，它還需要恰到好處地讓用戶明白上下文場景。即使它只是新用戶引導的一個環節，你也要讓它的信息傳達價值最大化，比如告訴用戶如何讓界面狀態從空變為非空。

下面以Google Photos 這個應用為例簡單說明一下。作為Google的產品，它在視覺上做的相當棒，精美的布局和漂亮的圖形都非常不錯。然而，它的空狀態并不足以幫助用戶了解上下文背景，也沒有回答下面的問題：

·合集（Collection）是什么？
·我如何能獲得一個合集？

空狀態界面不應該為用戶創造更多的問題，而是要盡量解決問題。告訴用戶當前界面是什么，以及要如何獲得更多。

強化個性

個性化的設計讓你的APP更加令人難忘。雖然在空狀態界面中能呈現出的“個性”看起來并不多，但是即使是微小的個性化設計，都能讓你的界面看起來和同類產品截然不同，它會讓用戶從這里開始體會到你的產品的不同之處。你可以看看Khaylo Workout 是如何在空狀態界面中借助文案和插畫來體現個性的。

拳擊手套插畫和Challenge 這個主題相互映襯，文案著重引導用戶創建新的Challenge ，強化交互。

鼓勵用戶操作

你的首要目的是說服用戶做點什么。在空狀態界面中引導用戶交互，不僅僅是告訴他們如何操作，還需要告訴他們這么做有什么好處。

來看看 Facebook Massenger 的空狀態頁面吧，當用戶抵達這一頁面的時候，頁面中萌翻的吉祥物會鼓勵用戶使用 Messenger 拍攝視頻和照片，并告訴他們有多少好友正在做同樣的事情，可以在此分享內容。直接點擊安裝就可以解除這一空狀態。用戶在此可以選擇了解這一服務，也可以選擇直接安裝，無論是哪個導向，都是有利于開發者的。

如果可能，提供個性化的內容

個性化的內容服務本就是為了讓你的產品和用戶需求更好的匹配，而個性化的服務本身就是你的產品值得炫耀的價值所在。

所以，當用戶初次探索你的產品的時候，應該可以根據他們登錄帳號或者其他的信息，為他們提供個性化的內容推薦、定制服務。就像下面這個閱讀APP一樣，在空狀態頁面中為用戶提供推薦的圖書：

在界面中注入情感

空狀態還能為你展示你的產品富有人性的一面。積極的情緒刺激能夠讓你和用戶之間構成情感聯系。想要在空狀態下呈現什么樣的感覺，傳達什么樣的感情，都取決于你的目的，你想要達成的目標。作為一款社交軟件，Google Hangouts 的目的很明顯，是要引導用戶盡量分享、交流和溝通，所以它所傳遞的情感也更加社交化。

當然，這種采用負面情緒的空狀態是有風險的，有些人會在這種情形下進行更多社交行為以規避它，有的用戶則會討厭這種方式。但是沒關系，有情感反應總比沒有來的好。

鞏固交互

當用戶在空狀態界面的引導下，完成任務的時候，同用戶一起慶祝，告訴他們做的很好，是構建情感聯系的可行方案。當用戶達成任務的時候，你可以趁熱打鐵，讓用戶做更多，來維持狀態。

比如在 Writeupp 這個應用中，用戶需要達成列表中一系列任務。當用戶完成全部任務之后，APP會給出“Well Done！”這樣的祝賀語。為了鞏固用戶的成就，APP會提供后續的步驟和任務，讓他們繼續前進。

結語

當你在設計UI的時候，空狀態頁面從來都不應該是空的，它應該作為用戶引導流程的一個起點，整個產品體驗的重要一環而存在，推動用戶前進，是你的產品服務的重要入口。

【這些文章都在探討新用戶引導】

1. 《覺得自己學了假設計?真正的新用戶引導應該這么設計》
2. 《實例教學!10步打造更好的新手入門體驗》

原文地址：smashingmagazine
原文作者：NICK BABICH
優設譯文：@陳子木

本文由優設網原創翻譯，請尊重版權和譯者成果，轉摘請附上優設鏈接，違者必究。謝謝各位編輯同仁配合。

【優設網 原創文章 投稿郵箱：yuan@uisdc.com】

================關于優設網================
"優設網uisdc.com"是國內人氣最高的網頁設計師學習平臺，專注分享網頁設計、無線端設計以及PS教程。
【特色推薦】
設計師需要讀的100本書：史上最全的設計師圖書導航：http://hao.uisdc.com/book/。
設計微博：擁有粉絲量180萬的人氣微博@優秀網頁設計 ，歡迎關注獲取網頁設計資源、下載頂尖設計素材。
設計導航：全球頂尖設計網站推薦，設計師必備導航：http://hao.uisdc.com