空狀態是當頁面內容為空時（比如網絡不佳導致頁面內容無法正常加載，消息列表為空等）所呈現的界面，它可以通過友好的指引和視覺元素來減少用戶反感，幫助產品提升用戶體驗。

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

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

這就是最基本的一種空狀態的表達；但是這樣來看又太單調了，沒有創新，用戶看的多也會審美疲勞產生不良情緒。

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

這張圖中，作者將星球與WiFi標志結合來表達了網絡出錯，增加了合理性，同時讓整個畫面變得生動形象。

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

可以通過以下幾點入手：

詞意嫁接/比喻

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

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

行業屬性融入

除了比喻之外，我們還可以看看 app 是什么行業的，可以在空狀態中融入行業相關的元素。

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

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

吉祥物結合

除了融入行業屬性之外，我們也可以將空狀態和吉祥物進行結合。

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

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

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