0
空狀態是當頁面內容為空時所呈現的界面，它可以通過友好的指引和視覺元素來幫助產品提升用戶體驗。
空狀態的表現形式有很多種，想要與眾不同別出心裁，就要有足夠的創意。今天給大家分享空狀態設計的一些小創意和技巧。
為了讓大家更好的理解，我們先舉個小例子：
使用軟件的過程中，出現無網絡的提示。這個時候要畫一個無網絡的空狀態，我們可以畫一個 Wifi 的 icon，然后在上面用斜杠或者說有個小叉去代表這個網絡出錯的狀態。
這樣來畫是可以的，但這種太過普遍缺少新意，用戶也會出現審美疲勞。
我們來看一下別人是怎么做的：
這張圖中，作者利用小鳥撞壞衛星的畫面來表達了網絡出錯。這樣一來，不僅有了故事性還增了合理性。整個畫面也變得生動形象。
這兩個畫面一對比，明顯能感受到右邊這個表達，會更加的生動有趣，但是左邊對比起來就會顯得有點僵硬，那我們怎么去賦予空狀態這種情感化的設計，或者說更加有趣的？
我覺得可以從四點方向去入手。
簡單來說，就是用比喻手法將一件事轉化為一個畫面。
搜索：
如圖所示，當搜索不到相應的內容時，出現的畫面是一扇關閉的門。這里就是將搜索失敗比喻成了緊閉的門，寓意為此門不通，搜索不到無法進入下一步。
圖一中將執行出錯比喻成沉沒的輪船，寓意輪船發生事故將要沉沒無法再執行命令。
圖二中沒有找到與之相匹配的結果，比喻成了只找到了一只襪子。襪子本來是一雙的，只找到一只沒有找到與之相匹配的這樣的一個事情。
系統出錯/404：
這是最為常見的網絡出錯的空狀態設計，通常為外太空，飛碟之類的元素。
基于這一點，我對前面的無網絡空狀態進行了優化：
將畫面中的主元素變成了正在受飛碟干擾的信號塔，故事性和合理性就都有了。
看一下優化前的一個對比：
除了比喻之外，我們還可以看看 app 是什么行業的，可以在空狀態中融入行業相關的元素。
比如你是一個跨境旅行的 app，你就可以融入一些飛機、山、海這種風景到空狀態的畫面當中。
馬蜂窩：
比如說像馬蜂窩 APP 的這個無網絡的空狀態，它就融入了一些像小山、小鳥還有實景的風景圖到畫面當中。
整體就非常符合 app 的定位，也具有特色。
除了融入行業屬性之外，我們也可以將空狀態和吉祥物進行結合。
比如飛豬旅行 app：
在這個空狀態畫面中就加入了吉祥物小豬，而且大家可以發現吉祥物是一種取巧，能夠賦予你頁面情感化的設計方式。
因為吉祥物本身就會有自己的情緒和背景故事，將它融入到頁面當中的時候，就會將自身的情緒代入到頁面中。
如果說你的頁面沒有吉祥物，那么我們可以通過元素結合的方式去賦予空狀態小創意，元素結合就是把兩個看起來毫不相關的元素結合在一起表達。
上述的空狀態所代表的是沒有代金券的意思，這里將代金券畫成了一個游泳池的形狀，然后小袋鼠在上面垂釣，但是它什么都沒有釣到，從側面表達了沒有的意思。
上面 Uber 的案例中，將優惠券畫成了飛毯的模樣。除此之外，還融入了神燈的元素，讓人明顯感受到這個插畫具有很強的地域屬性，大概是面向中東一類人群的設計。
本次的分享就到此結束了，再來回顧一下這四個點吧：
- 詞意嫁接/比喻
- 行業屬性融入
- 吉祥物結合
- 元素結合
希望對大家有幫助，下期再見！
歡迎關注作者的微信公眾號：「菜心設計鋪」
復制本文鏈接 文章為作者獨立觀點不代表優設網立場，未經允許不得轉載。
發評論！每天贏獎品
點擊 登錄 后，在評論區留言，系統會隨機派送獎品
2012年成立至今，是國內備受歡迎的設計師平臺，提供獎品贊助 聯系我們
AI輔助海報設計101例
已累計誕生 737 位幸運星
發表評論 為下方 7 條評論點贊，解鎖好運彩蛋
↓ 下方為您推薦了一些精彩有趣的文章熱評 ↓