空狀態(tài)是當(dāng)頁面內(nèi)容為空時（比如網(wǎng)絡(luò)不佳導(dǎo)致頁面內(nèi)容無法正常加載，消息列表為空等）所呈現(xiàn)的界面，它可以通過友好的指引和視覺元素來減少用戶反感，幫助產(chǎn)品提升用戶體驗(yàn)。

為了讓大家更好的理解什么是空狀態(tài)，我們先舉個例子：

使用軟件的過程中，如果斷網(wǎng)了，那么就會出現(xiàn)無網(wǎng)絡(luò)的提示。這個時候就需要畫一個無網(wǎng)絡(luò)的空狀態(tài)，我們可以直接畫一個WiFi的圖標(biāo)，然后在上面用斜杠或者做個小標(biāo)記（例如叉號、感嘆號）去代表這個網(wǎng)絡(luò)出錯的狀態(tài)。

這就是最基本的一種空狀態(tài)的表達(dá)；但是這樣來看又太單調(diào)了，沒有創(chuàng)新，用戶看的多也會審美疲勞產(chǎn)生不良情緒。

我們來看一下其他人是怎么做的：

這張圖中，作者將星球與WiFi標(biāo)志結(jié)合來表達(dá)了網(wǎng)絡(luò)出錯，增加了合理性，同時讓整個畫面變得生動形象。

這兩個畫面一對比，明顯能感受到右邊這個表達(dá)，會更加的生動有趣，但是左邊對比起來就會顯得有點(diǎn)僵硬，那我們怎么去賦予空狀態(tài)這種情感化的設(shè)計，或者說更加有趣的？

可以通過以下幾點(diǎn)入手：

詞意嫁接/比喻

簡單來說，就是用比喻手法將一件事轉(zhuǎn)化為一個畫面。比如《躺平》APP的關(guān)注頁面：

如圖所示，沒有關(guān)注任何用戶的時候，出現(xiàn)的畫面是一個小人，獨(dú)自坐在角落，并配文“空有空的好”，這里就是將沒有關(guān)注比喻成了獨(dú)自一人，同時加上配文，讓整體顯得高級了起來。

行業(yè)屬性融入

除了比喻之外，我們還可以看看 app 是什么行業(yè)的，可以在空狀態(tài)中融入行業(yè)相關(guān)的元素。

比如你是一個旅行的 app，你就可以融入一些交通工具這種元素到空狀態(tài)的畫面當(dāng)中。

比如說像攜程旅行 APP 的這個搶票界面的空狀態(tài)，它就融入了一些城市剪影、高鐵的元素與頁面主題相結(jié)合組成。整體就非常符合 app 的定位，也具有特色。

吉祥物結(jié)合

除了融入行業(yè)屬性之外，我們也可以將空狀態(tài)和吉祥物進(jìn)行結(jié)合。

比如這個保險的APP，就是將吉祥物作為空狀態(tài)的主體元素，賦予你頁面情感化的設(shè)計方式。

而且吉祥物本身就會有自己的情緒和背景故事，將它融入到頁面當(dāng)中的時候，就會將自身的情緒代入到頁面中。

以上就是本次的分享，希望對大家有幫助