空狀態(tài)是當(dāng)頁(yè)面內(nèi)容為空時(shí)所呈現(xiàn)的界面，它可以通過(guò)友好的指引和視覺(jué)元素來(lái)幫助產(chǎn)品提升用戶體驗(yàn)。

空狀態(tài)的表現(xiàn)形式有很多種，想要與眾不同別出心裁，就要有足夠的創(chuàng)意。今天給大家分享空狀態(tài)設(shè)計(jì)的一些小創(chuàng)意和技巧。

為了讓大家更好的理解，我們先舉個(gè)小例子：

使用軟件的過(guò)程中，出現(xiàn)無(wú)網(wǎng)絡(luò)的提示。這個(gè)時(shí)候要畫(huà)一個(gè)無(wú)網(wǎng)絡(luò)的空狀態(tài)，我們可以畫(huà)一個(gè) Wifi 的 icon，然后在上面用斜杠或者說(shuō)有個(gè)小叉去代表這個(gè)網(wǎng)絡(luò)出錯(cuò)的狀態(tài)。

這樣來(lái)畫(huà)是可以的，但這種太過(guò)普遍缺少新意，用戶也會(huì)出現(xiàn)審美疲勞。

我們來(lái)看一下別人是怎么做的：

這張圖中，作者利用小鳥(niǎo)撞壞衛(wèi)星的畫(huà)面來(lái)表達(dá)了網(wǎng)絡(luò)出錯(cuò)。這樣一來(lái)，不僅有了故事性還增了合理性。整個(gè)畫(huà)面也變得生動(dòng)形象。

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

我覺(jué)得可以從四點(diǎn)方向去入手。

一、詞意嫁接/比喻

簡(jiǎn)單來(lái)說(shuō)，就是用比喻手法將一件事轉(zhuǎn)化為一個(gè)畫(huà)面。

搜索：

如圖所示，當(dāng)搜索不到相應(yīng)的內(nèi)容時(shí)，出現(xiàn)的畫(huà)面是一扇關(guān)閉的門(mén)。這里就是將搜索失敗比喻成了緊閉的門(mén)，寓意為此門(mén)不通，搜索不到無(wú)法進(jìn)入下一步。

圖一中將執(zhí)行出錯(cuò)比喻成沉沒(méi)的輪船，寓意輪船發(fā)生事故將要沉沒(méi)無(wú)法再執(zhí)行命令。

圖二中沒(méi)有找到與之相匹配的結(jié)果，比喻成了只找到了一只襪子。襪子本來(lái)是一雙的，只找到一只沒(méi)有找到與之相匹配的這樣的一個(gè)事情。

系統(tǒng)出錯(cuò)/404：

這是最為常見(jiàn)的網(wǎng)絡(luò)出錯(cuò)的空狀態(tài)設(shè)計(jì)，通常為外太空，飛碟之類的元素。

基于這一點(diǎn)，我對(duì)前面的無(wú)網(wǎng)絡(luò)空狀態(tài)進(jìn)行了優(yōu)化：

將畫(huà)面中的主元素變成了正在受飛碟干擾的信號(hào)塔，故事性和合理性就都有了。

看一下優(yōu)化前的一個(gè)對(duì)比：

二、行業(yè)屬性融入

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

比如你是一個(gè)跨境旅行的 app，你就可以融入一些飛機(jī)、山、海這種風(fēng)景到空狀態(tài)的畫(huà)面當(dāng)中。

馬蜂窩：

比如說(shuō)像馬蜂窩 APP 的這個(gè)無(wú)網(wǎng)絡(luò)的空狀態(tài)，它就融入了一些像小山、小鳥(niǎo)還有實(shí)景的風(fēng)景圖到畫(huà)面當(dāng)中。

整體就非常符合 app 的定位，也具有特色。

三、吉祥物結(jié)合

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

比如飛豬旅行 app：

在這個(gè)空狀態(tài)畫(huà)面中就加入了吉祥物小豬，而且大家可以發(fā)現(xiàn)吉祥物是一種取巧，能夠賦予你頁(yè)面情感化的設(shè)計(jì)方式。

因?yàn)榧槲锉旧砭蜁?huì)有自己的情緒和背景故事，將它融入到頁(yè)面當(dāng)中的時(shí)候，就會(huì)將自身的情緒代入到頁(yè)面中。

四、元素結(jié)合

如果說(shuō)你的頁(yè)面沒(méi)有吉祥物，那么我們可以通過(guò)元素結(jié)合的方式去賦予空狀態(tài)小創(chuàng)意，元素結(jié)合就是把兩個(gè)看起來(lái)毫不相關(guān)的元素結(jié)合在一起表達(dá)。

上述的空狀態(tài)所代表的是沒(méi)有代金券的意思，這里將代金券畫(huà)成了一個(gè)游泳池的形狀，然后小袋鼠在上面垂釣，但是它什么都沒(méi)有釣到，從側(cè)面表達(dá)了沒(méi)有的意思。

上面 Uber 的案例中，將優(yōu)惠券畫(huà)成了飛毯的模樣。除此之外，還融入了神燈的元素，讓人明顯感受到這個(gè)插畫(huà)具有很強(qiáng)的地域?qū)傩裕蟾攀敲嫦蛑袞|一類人群的設(shè)計(jì)。

本次的分享就到此結(jié)束了，再來(lái)回顧一下這四個(gè)點(diǎn)吧：

1. 詞意嫁接/比喻
2. 行業(yè)屬性融入
3. 吉祥物結(jié)合
4. 元素結(jié)合

菜心設(shè)計(jì)鋪