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

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

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

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

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

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

這兩個(gè)畫面一對(duì)比，明顯能感受到右邊這個(gè)表達(dá)，會(huì)更加的生動(dòng)有趣，但是左邊對(duì)比起來就會(huì)顯得有點(diǎn)僵硬，那我們?cè)趺慈ベx予空狀態(tài)這種情感化的設(shè)計(jì)，或者說更加有趣的？

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

詞意嫁接/比喻

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

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

行業(yè)屬性融入

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

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

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

吉祥物結(jié)合

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

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

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

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