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

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

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

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

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

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

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

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

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

一、詞意嫁接/比喻

簡單來說，就是用比喻手法將一件事轉(zhuǎn)化為一個畫面。

搜索：

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

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

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

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

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

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

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

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

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

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

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

馬蜂窩：

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

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

三、吉祥物結(jié)合

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

比如飛豬旅行 app：

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

因?yàn)榧槲锉旧砭蜁凶约旱那榫w和背景故事，將它融入到頁面當(dāng)中的時候，就會將自身的情緒代入到頁面中。

四、元素結(jié)合

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

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

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

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

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

菜心設(shè)計鋪