???空狀態(tài)是APP內必然存在的一個(gè)狀態(tài)，適宜的空狀態(tài)設計可以提升用戶(hù)體驗，實(shí)現用戶(hù)留存。鑒于空狀態(tài)在異常狀態(tài)下的重要性及容易被忽視的現狀，本文以實(shí)際設計需求為例，從拿到需求到提出疑問(wèn)，再到解決疑問(wèn)，提出解決方案，設計方案呈現，逐一展示空狀態(tài)設計的正確打開(kāi)方式。
文章大綱：?
- 需求&提出疑問(wèn)：了解空狀態(tài)設計需求，了解空狀態(tài)是什么？舊版本的問(wèn)題在哪里？如何以及為何要帶給用戶(hù)關(guān)愛(ài)，背后的產(chǎn)品目標是什么？
- 解決疑問(wèn)：空狀態(tài)出現在A(yíng)PP初次使用、完成或清空內容、軟件出錯等情境下。舊版本的問(wèn)題在于設計不全面，與5.0品牌認知不符。傳遞關(guān)愛(ài)意味著(zhù)產(chǎn)品是有感情的，而有情感人性化的產(chǎn)品更受歡迎。產(chǎn)品目標是間接提升用戶(hù)在產(chǎn)品內的留存，進(jìn)而帶來(lái)點(diǎn)擊轉化。
- 解決方案：如何讓這個(gè)目標具體化？尋找被普遍認知&廣泛使用的情感化空狀態(tài)設計，通過(guò)對競品的解決方案的分析，發(fā)現最常用的反思設計表現方式，從側面尋找什么樣的反思設計是受用戶(hù)喜愛(ài)的，得到可以借鑒的信息。
- 設計方案呈現：結合美啦現有資源，完成設計方案。
一. 需求&提出疑問(wèn)
美啦5.0空狀態(tài)的設計需求，即是對美啦5.0空狀態(tài)進(jìn)行優(yōu)化設計，使之能夠緩解用戶(hù)遭遇空狀態(tài)的挫敗感，給用戶(hù)關(guān)愛(ài)。
空狀態(tài)是什么？舊版本的問(wèn)題在哪里？如何以及為何要帶給用戶(hù)關(guān)愛(ài)，背后的產(chǎn)品目標是什么？
二. 解決疑問(wèn)
1. 從4個(gè)方面了解空狀態(tài)?
△ 空狀態(tài)的4個(gè)方面
（1）定義
空狀態(tài)通常在初次使用、完成或清空內容、軟件出錯等情境下出現的頁(yè)面狀態(tài)。
（2）作用
空狀態(tài)應該達成三個(gè)目標：教育用戶(hù)、取悅用戶(hù)、引導用戶(hù)。每個(gè)空狀態(tài)都有其核心需要達成的目標。
（3）出現場(chǎng)景
用戶(hù)未進(jìn)行操作、用戶(hù)操作結果、出錯。
（4）常用解決方案
使用系統推薦項、使用操作指引、使用緩存、情感化表達、提供新的任務(wù)。
2. 梳理舊版本空狀態(tài)設計問(wèn)題
（1）設計不全面
4.0的空狀態(tài)設計不夠全面，場(chǎng)景繁多，空狀態(tài)里舊的品牌形象亟待更新，甚至部分空狀態(tài)頁(yè)面沒(méi)有任何內容。這都會(huì )使用戶(hù)在遭遇異常情況時(shí)，疑慮的情緒得不到有效疏解，這些問(wèn)題都需要在這次的空狀態(tài)設計中解決。
?（2）品牌認知不同
美啦5.0設計定位精致、時(shí)尚、品質(zhì)感。而4.0的空狀態(tài)設計已不能很好的承載全新的品牌認知。因此空狀態(tài)的設計對于整個(gè)App的品牌統一有著(zhù)重要的補充意義。
?（3）空狀態(tài)冗余
經(jīng)整理需要優(yōu)化新增的頁(yè)面總計20個(gè)空狀態(tài)，由于空狀態(tài)頁(yè)面較多，將某些提示功能相近的空狀態(tài)使用通用的視覺(jué)表現形式。
3. 有情感人性化的產(chǎn)品更受歡迎
傳遞關(guān)愛(ài)屬于情感化設計的第三層——反思設計的核心。關(guān)愛(ài)意味著(zhù)產(chǎn)品是有感情的，而有情感、人性化的產(chǎn)品更受歡迎。相比冰冷的流水線(xiàn)機器人手臂，擁有擬人化外型的「艾娃」更受歡迎。?
△ 冰冷的機器人手臂VS人形「艾娃」
4. 產(chǎn)品目標
?通過(guò)人性化的空狀態(tài)設計來(lái)緩解用戶(hù)遭遇空狀態(tài)的挫敗感，給用戶(hù)關(guān)愛(ài)。間接提升用戶(hù)在產(chǎn)品內的留存，進(jìn)而帶來(lái)點(diǎn)擊轉化。
△ 空狀態(tài)設計優(yōu)化目標
三. 解決方案
1. 競品選擇
通過(guò)對競品的解決方案的分析，發(fā)現最常用的反思設計表現方式，從側面尋找什么樣的反思設計是受用戶(hù)喜愛(ài)的。鑒于美啦的美妝及社區電商屬性，分別選擇了女性時(shí)尚類(lèi)App：小紅書(shū)、See、HIGO及電商類(lèi)App：閑魚(yú)、網(wǎng)易嚴選、淘寶。?
△ 競品選擇
2. 競品空狀態(tài)分析
?（1）競品空狀態(tài)內容
小紅書(shū)、閑魚(yú)、淘寶使用品牌形象作為空狀態(tài)的主體形象，主體形象使用品牌形象既能實(shí)現空狀態(tài)功能，也能不斷的增強品牌在用戶(hù)心中的形象。網(wǎng)易嚴選、HIGO、See使用了文字、圖形作為空狀態(tài)的主體形象。
各App的空狀態(tài)從不同角度體現了各自的品牌認知?。
（2）情感關(guān)懷
小紅書(shū)、閑魚(yú)使用了萌萌的小紅薯和閑魚(yú)，淘寶使用了小人，網(wǎng)易嚴選使用了場(chǎng)景相關(guān)的物品，See和HIGO使用了文字及圖標。擬人的形象更能拉近產(chǎn)品與用戶(hù)的距離。
3. 結論
?通過(guò)對競品空狀態(tài)的分析，主體形象使用品牌形象帶給用戶(hù)的情感關(guān)懷最好，同時(shí)品牌認知也比較明顯。
四. 設計方案呈現?
1. 空狀態(tài)主體形象?
從上述分析得出，主體形象使用品牌形象帶給用戶(hù)的情感關(guān)懷最好，同時(shí)品牌認知也比較明顯。
美啦5.0空狀態(tài)使用了品牌新形象：美啦兔——活潑又愛(ài)美兔子和她的小伙伴——負責送妝品的博克斯，一起作為美啦的代表與用戶(hù)互動(dòng)。我們希望用戶(hù)在美啦的體驗是順暢的，但當她遇到空狀態(tài)時(shí)，有美啦兔陪伴她。
△ 美啦兔和她的小伙伴博克斯
2. 腦暴關(guān)鍵詞繪制草圖
?確定主體形象和基本的結構之后，就需要在腦海中構思不同的場(chǎng)景，賦予美啦兔故事情緒。把所想到的場(chǎng)景都用文字記錄下來(lái)。比如購物車(chē)：趁年輕要剁手，快來(lái)填滿(mǎn)我，是時(shí)候拔草了；比如刷新，正在變美，馬上就好了。盒子里灑出妝品，你的包裹小盒到了。發(fā)散到一定程度的時(shí)候，可以進(jìn)行收斂，把部分比較確定的場(chǎng)景用草圖表現出來(lái)。
草圖可以使大家更早看到實(shí)現效果，以及更快的做出設計調整。比如404，迷失在星空里，在山谷搜索信號，都可以表現出信號丟失的感覺(jué)，但是這樣的場(chǎng)景跟美啦美妝、女性社區品牌相距較遠。于是考慮用戶(hù)更熟悉的城市場(chǎng)景，同時(shí)用妝品替代城市的建筑，美啦兔在妝品的城市里，找不到回家的路。?
3. 統一色彩規范?
?美啦5.0的品牌色仍然是美啦粉色，應用于主形象，并貫穿于整個(gè)空狀態(tài)；輔助色黃色，應用于輔助形象等；輔助色綠色、藍色作為場(chǎng)景元素等。
4. 統一設計元素
- 右側來(lái)光，視角主要為正視。
- 形象全部替換為最新的美啦兔，以美啦兔為主體，產(chǎn)生互動(dòng)。
- 微質(zhì)感、淺淺的投影。主體元素有陰影，使之形象更豐富。局部描邊塑造結構。
- 收斂出幾個(gè)容易引起用戶(hù)共鳴的場(chǎng)景，用詳細些的文案故事來(lái)描述，同時(shí)把成品圖和場(chǎng)景故事放出來(lái)，404的頁(yè)面、通用為空、購物車(chē)為空、刷新。
5. 場(chǎng)景展示?
場(chǎng)景一
通用的「網(wǎng)絡(luò )異?！箞?chǎng)景，美啦兔在妝品的城市里，找不到回家的路了。妝品的城市呼應美啦的品牌特色，形式的表達上選擇最具有代表性的口紅。美啦兔拿著(zhù)信號接收器在口紅的高處尋找方向。
場(chǎng)景二?
?美啦兔也跟所有的小仙女一樣，想要一直都美美的。但是有時(shí)候美麗需要等待，就像刷新一樣，遇到網(wǎng)絡(luò )不那么好的時(shí)候，就需要小仙女美美的稍等一會(huì )哦。
更多場(chǎng)景(部分)?
6. 空狀態(tài)界面?
?空狀態(tài)占頁(yè)面的面積情況分為2種：
- 第一種全屏空狀態(tài)：導航+空白內容顯示區域。
- 第二種非全屏空狀態(tài)：導航+部分內容+空白內容顯示區域。
全屏空狀態(tài)的空白區域較大，空狀態(tài)的視覺(jué)表現屬于主要內容，可以突出表現。
非全屏空狀態(tài)有部分正常的內容顯示，空白區域較小，空狀態(tài)的視覺(jué)表現屬于次要展示的內容，視覺(jué)表現需要服從主要的內容。??
7. 小結與反思
?空狀態(tài)的設計已經(jīng)完結，但是美啦APP內情感化運營(yíng)并沒(méi)有結束，在閃屏、運營(yíng)活動(dòng)、話(huà)題帖子、彈窗等的設計還在繼續。全面，并且連續不斷的情感化設計像一股暖流，給予用戶(hù)持續的關(guān)愛(ài)。
作者：Jenny黃靜雯 （微信公眾號：「Jenny黃靜雯」）
