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

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

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

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

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

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

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

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

我覺得可以從四點方向去入手。

一、詞意嫁接/比喻

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

搜索：

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

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

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

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

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

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

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

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

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

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

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

馬蜂窩：

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

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

三、吉祥物結合

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

比如飛豬旅行 app：

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

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

四、元素結合

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

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

上面 Uber 的案例中，將優(yōu)惠券畫成了飛毯的模樣。除此之外，還融入了神燈的元素，讓人明顯感受到這個插畫具有很強的地域屬性，大概是面向中東一類人群的設計。

本次的分享就到此結束了，再來回顧一下這四個點吧：

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

菜心設計鋪