管對(duì)用戶體驗(yàn)很重要，但空狀態(tài)經(jīng)常被忽略。知道它們是什么以及如何使用它們，應(yīng)用于UX最佳實(shí)踐，可以產(chǎn)生很多好處。

 

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

UX設(shè)計(jì)師有很多機(jī)會(huì)來創(chuàng)造愉悅而有意義的體驗(yàn)。一種經(jīng)常被忽略的機(jī)會(huì)是“空狀態(tài)”或空白屏幕?？諣顟B(tài)是用戶體驗(yàn)產(chǎn)品時(shí)無法顯示的時(shí)刻。

以下是一些常見的空狀態(tài)情況的示例：

A. 一個(gè)新的Dropbox屏幕，其中未創(chuàng)建任何文件或文件夾。

B. 在待辦事項(xiàng)列表管理器中完成所有任務(wù)后的結(jié)果屏幕。

C. 不支持命令時(shí)，在Slack中顯示錯(cuò)誤屏幕。

D. 啟動(dòng)一個(gè)新的社交帳戶，并且沒有任何連接。

E. 在Gmail中搜索內(nèi)容，但沒有結(jié)果。

這些介于中間的時(shí)刻提供了改善用戶體驗(yàn)并因此擴(kuò)大商機(jī)的機(jī)會(huì)。對(duì)于UX設(shè)計(jì)人員而言，抓住一切機(jī)會(huì)來改善用戶體驗(yàn)并為業(yè)務(wù)增加更多價(jià)值是一件好事。

一個(gè)有用的空狀態(tài)將使用戶知道發(fā)生了什么，為什么發(fā)生以及如何處理。這是良好的空狀態(tài)UX設(shè)計(jì)的兩個(gè)示例：

在首次啟動(dòng)產(chǎn)品時(shí)，Dropbox Paper為用戶提供了良好的空狀態(tài)界面。號(hào)召性用語按鈕可幫助您繼續(xù)使用，而不必?fù)?dān)心下一步該怎么做。

搜索查詢不返回任何結(jié)果時(shí)，空狀態(tài)界面設(shè)計(jì)的一個(gè)很好的例子。該界面提供有用的參考，并讓用戶知道發(fā)生了什么。

 

以下是一些機(jī)會(huì)錯(cuò)誤的空狀態(tài)設(shè)計(jì)示例：

這是一個(gè)空狀態(tài)的界面，可以提供一些反饋，但是卻錯(cuò)過了向用戶提供任何其他指導(dǎo)或要采取措施的機(jī)會(huì)。

 

在這種空狀態(tài)的界面中，我們只是看到一個(gè)幾乎空白的網(wǎng)頁。圖像本身很棒，但是它不會(huì)引導(dǎo)用戶沿任何特定路徑點(diǎn)擊，也不會(huì)通知或指示用戶。

 

空狀態(tài)的類型

這是四種常見的空狀態(tài)：

A. 首次使用–在沒有其他內(nèi)容可以顯示時(shí)，例如新的Evernote或Dropbox帳戶，發(fā)生在新產(chǎn)品或服務(wù)上。

B. 用戶已清除–在用戶完成諸如清除其收件箱或任務(wù)列表之類的操作且結(jié)果為空白屏幕時(shí)發(fā)生。

C. 錯(cuò)誤–發(fā)生錯(cuò)誤時(shí)或由于網(wǎng)絡(luò)問題而導(dǎo)致手機(jī)脫機(jī)等問題時(shí)，會(huì)發(fā)生這些錯(cuò)誤。

D. 無結(jié)果/無數(shù)據(jù)–在無內(nèi)容顯示時(shí)發(fā)生。如果有人執(zhí)行搜索并且查詢?yōu)榭栈驔]有可用數(shù)據(jù)顯示（例如，在篩選沒有數(shù)據(jù)的日期范圍時(shí)），就會(huì)發(fā)生這種情況。

隨著空狀態(tài)設(shè)計(jì)受到越來越多的關(guān)注，UX設(shè)計(jì)人員發(fā)現(xiàn)，從業(yè)務(wù)和用戶體驗(yàn)的角度來看，利用它們都有有益的結(jié)果。

 

使用設(shè)計(jì)良好的空狀態(tài)的好處

設(shè)計(jì)周到且有用的空白狀態(tài)屏幕可以幫助提高產(chǎn)品參與度，使用戶滿意并減少用戶流失。

Scott McKain在他的《客戶真正想要什么》一書中提出了出色的客戶體驗(yàn)的六個(gè)指導(dǎo)原則。

a. 引人入勝的體驗(yàn)

b. 個(gè)人重點(diǎn)

c. 相互忠誠

d. 差異化

e. 協(xié)調(diào)

f. 革新

當(dāng)將這些原則應(yīng)用于空狀態(tài)設(shè)計(jì)時(shí)，它們可能對(duì)企業(yè)非常有益-例如，提高產(chǎn)品滿意度和降低放棄率。

以下三個(gè)方面也可以從良好的空狀態(tài)設(shè)計(jì)中受益：

A. 用戶入門–除了增強(qiáng)的用戶體驗(yàn)之外，還提供了建立信任和繼續(xù)使用產(chǎn)品的機(jī)會(huì)。

B. 品牌建設(shè)–產(chǎn)生知名度并提升公司形象，以建立更多的品牌資產(chǎn)。

C. 個(gè)性化–在各種使用狀態(tài)下都有趣或充滿活力；營造一種個(gè)人風(fēng)格的感覺。

設(shè)計(jì)良好的空狀態(tài)的好處不可低估。它們不僅為引人注目的客戶體驗(yàn)做出了貢獻(xiàn)，而且隨著客戶滿意和參與的機(jī)會(huì)窗口越來越短，它們可以說是非常好的體驗(yàn)。

 

如何用目的填充空白屏幕

以下是一些UX最佳實(shí)踐，可確保將空白屏幕設(shè)計(jì)為有用的信息。

共情。UX設(shè)計(jì)師即使在產(chǎn)品的最黑暗角落也能創(chuàng)造出更好的體驗(yàn)，這一切都增加了驚喜。對(duì)于空屏幕，同理心的消息傳遞增加了多樣性，并創(chuàng)建了一種更具吸引力的個(gè)性化體驗(yàn)。

Gusto是用個(gè)性化和一些有趣的個(gè)性填充空白狀態(tài)屏幕的一個(gè)很好的例子。

 

意象。有一種設(shè)計(jì)原則稱為親生物效應(yīng)。從自然角度看，這是一種減少壓力和提高注意力的狀態(tài)。添加一些風(fēng)景圖像（例如，空狀態(tài)錯(cuò)誤屏幕的背景）可以帶來更愉悅的用戶體驗(yàn)。

圍繞親生物效應(yīng)設(shè)計(jì)的空狀態(tài)屏幕可通過減輕壓力和幫助參與而對(duì)用戶體驗(yàn)產(chǎn)生積極影響。

 

正確的指導(dǎo)。根據(jù)產(chǎn)品類型的不同，可以使用空狀態(tài)來指導(dǎo)用戶。一個(gè)很好的例子是項(xiàng)目管理應(yīng)用程序。使用新帳戶后，尚無任何項(xiàng)目在進(jìn)行中，這為幫助用戶快速入門提供了潛在的絕佳機(jī)會(huì)，從而減少了放棄的機(jī)會(huì)。這是一個(gè)例子：

Evernote在引導(dǎo)用戶使用其空狀態(tài)頁面設(shè)計(jì)方面做得很好。

 

入門內(nèi)容。有很多屏幕空白的時(shí)間足夠使用戶感到沮喪和離開。對(duì)于某些產(chǎn)品，提供良好的入門內(nèi)容有助于他們直觀地了解正在發(fā)生的事情以及下一步可以做什么。

這是帶有啟動(dòng)程序內(nèi)容的空白狀態(tài)屏幕的示例：

它為用戶提供了基礎(chǔ)，并減少了產(chǎn)品混淆和遺棄的機(jī)會(huì)。

 

提供一個(gè)行動(dòng)步驟。對(duì)于某些產(chǎn)品，我們不需要提供指導(dǎo)或在屏幕上填滿任何內(nèi)容，因?yàn)檫@沒有任何意義。在這種情況下，設(shè)計(jì)人員可以簡(jiǎn)單地提供一個(gè)動(dòng)作步驟。

但是，最好將動(dòng)作減到最少。?？硕芍赋觯骸白龀鰶Q定所需的時(shí)間隨著選擇的數(shù)量和復(fù)雜性而增加?！?因此，當(dāng)號(hào)召性用語最多保持一兩個(gè)時(shí)，用戶可能會(huì)更快地采取行動(dòng)。這是一個(gè)很好的例子：

它告訴用戶采取措施，但仍將其保持在最低水平。

 

另一個(gè)很好的例子是Instagram。當(dāng)人們不熟悉該平臺(tái)時(shí)，他們還沒有關(guān)注任何人（也沒有人關(guān)注他們）。專注于Instagram的所有出色功能很容易，但是，一個(gè)良好的空白狀態(tài)屏幕可以為他們提供“添加要關(guān)注的人”的選項(xiàng)。

當(dāng)首次使用該平臺(tái)時(shí)，Instagram用戶會(huì)以一種快速便捷的方式來尋找人。

 

結(jié)論

在UX設(shè)計(jì)中很容易忽略空白狀態(tài)（或空白屏幕），因?yàn)樗鼈兒苌侔l(fā)生并且并不總是很容易理解。但是，將它們包含進(jìn)來的好處被低估了，因?yàn)樗鼈兛梢栽鰪?qiáng)用戶體驗(yàn)并幫助創(chuàng)建更具凝聚力的產(chǎn)品。

文章來源：站酷 作者：對(duì)啊設(shè)計(jì)君

藍(lán)藍(lán)設(shè)計(jì)( m.yvirxh.cn )是一家專注而深入的界面設(shè)計(jì)公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì) 、 圖標(biāo)定制 、 用戶體驗(yàn) 、交互設(shè)計(jì)、 網(wǎng)站建設(shè) 、平面設(shè)計(jì)服務(wù)