空狀態(tài)是當(dāng)頁(yè)面內(nèi)容為空時(shí)（比如網(wǎng)絡(luò)不佳導(dǎo)致頁(yè)面內(nèi)容無(wú)法正常加載，消息列表為空等）所呈現(xiàn)的界面，它可以通過(guò)友好的指引和視覺(jué)元素來(lái)減少用戶反感，幫助產(chǎn)品提升用戶體驗(yàn)。
為了讓大家更好的理解什么是空狀態(tài)，我們先舉個(gè)例子：
使用軟件的過(guò)程中，如果斷網(wǎng)了，那么就會(huì)出現(xiàn)無(wú)網(wǎng)絡(luò)的提示。這個(gè)時(shí)候就需要畫一個(gè)無(wú)網(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á)；但是這樣來(lái)看又太單調(diào)了，沒(méi)有創(chuàng)新，用戶看的多也會(huì)審美疲勞產(chǎn)生不良情緒。
我們來(lái)看一下其他人是怎么做的：
這張圖中，作者將星球與WiFi標(biāo)志結(jié)合來(lái)表達(dá)了網(wǎng)絡(luò)出錯(cuò)，增加了合理性，同時(shí)讓整個(gè)畫面變得生動(dòng)形象。
這兩個(gè)畫面一對(duì)比，明顯能感受到右邊這個(gè)表達(dá)，會(huì)更加的生動(dòng)有趣，但是左邊對(duì)比起來(lái)就會(huì)顯得有點(diǎn)僵硬，那我們?cè)趺慈ベx予空狀態(tài)這種情感化的設(shè)計(jì)，或者說(shuō)更加有趣的？
可以通過(guò)以下幾點(diǎn)入手：
詞意嫁接/比喻
簡(jiǎn)單來(lái)說(shuō)，就是用比喻手法將一件事轉(zhuǎn)化為一個(gè)畫面。比如《躺平》APP的關(guān)注頁(yè)面：
如圖所示，沒(méi)有關(guān)注任何用戶的時(shí)候，出現(xiàn)的畫面是一個(gè)小人，獨(dú)自坐在角落，并配文“空有空的好”，這里就是將沒(méi)有關(guān)注比喻成了獨(dú)自一人，同時(shí)加上配文，讓整體顯得高級(jí)了起來(lái)。
行業(yè)屬性融入
除了比喻之外，我們還可以看看 app 是什么行業(yè)的，可以在空狀態(tài)中融入行業(yè)相關(guān)的元素。
比如你是一個(gè)旅行的 app，你就可以融入一些交通工具這種元素到空狀態(tài)的畫面當(dāng)中。
比如說(shuō)像攜程旅行 APP 的這個(gè)搶票界面的空狀態(tài)，它就融入了一些城市剪影、高鐵的元素與頁(yè)面主題相結(jié)合組成。整體就非常符合 app 的定位，也具有特色。
吉祥物結(jié)合
除了融入行業(yè)屬性之外，我們也可以將空狀態(tài)和吉祥物進(jìn)行結(jié)合。
比如這個(gè)保險(xiǎn)的APP，就是將吉祥物作為空狀態(tài)的主體元素，賦予你頁(yè)面情感化的設(shè)計(jì)方式。
而且吉祥物本身就會(huì)有自己的情緒和背景故事，將它融入到頁(yè)面當(dāng)中的時(shí)候，就會(huì)將自身的情緒代入到頁(yè)面中。
以上就是本次的分享，希望對(duì)大家有幫助
