???空狀態(tài)是APP內(nèi)必然存在的一個(gè)狀態(tài)，適宜的空狀態(tài)設(shè)計(jì)可以提升用戶體驗(yàn)，實(shí)現(xiàn)用戶留存。鑒于空狀態(tài)在異常狀態(tài)下的重要性及容易被忽視的現(xiàn)狀，本文以實(shí)際設(shè)計(jì)需求為例，從拿到需求到提出疑問，再到解決疑問，提出解決方案，設(shè)計(jì)方案呈現(xiàn)，逐一展示空狀態(tài)設(shè)計(jì)的正確打開方式。

文章大綱：?

• 需求&提出疑問：了解空狀態(tài)設(shè)計(jì)需求，了解空狀態(tài)是什么？舊版本的問題在哪里？如何以及為何要帶給用戶關(guān)愛，背后的產(chǎn)品目標(biāo)是什么？
• 解決疑問：空狀態(tài)出現(xiàn)在APP初次使用、完成或清空內(nèi)容、軟件出錯(cuò)等情境下。舊版本的問題在于設(shè)計(jì)不全面，與5.0品牌認(rèn)知不符。傳遞關(guān)愛意味著產(chǎn)品是有感情的，而有情感人性化的產(chǎn)品更受歡迎。產(chǎn)品目標(biāo)是間接提升用戶在產(chǎn)品內(nèi)的留存，進(jìn)而帶來(lái)點(diǎn)擊轉(zhuǎn)化。
• 解決方案：如何讓這個(gè)目標(biāo)具體化？尋找被普遍認(rèn)知&廣泛使用的情感化空狀態(tài)設(shè)計(jì)，通過(guò)對(duì)競(jìng)品的解決方案的分析，發(fā)現(xiàn)最常用的反思設(shè)計(jì)表現(xiàn)方式，從側(cè)面尋找什么樣的反思設(shè)計(jì)是受用戶喜愛的，得到可以借鑒的信息。
• 設(shè)計(jì)方案呈現(xiàn)：結(jié)合美啦現(xiàn)有資源，完成設(shè)計(jì)方案。

一. 需求&提出疑問

美啦5.0空狀態(tài)的設(shè)計(jì)需求，即是對(duì)美啦5.0空狀態(tài)進(jìn)行優(yōu)化設(shè)計(jì)，使之能夠緩解用戶遭遇空狀態(tài)的挫敗感，給用戶關(guān)愛。

空狀態(tài)是什么？舊版本的問題在哪里？如何以及為何要帶給用戶關(guān)愛，背后的產(chǎn)品目標(biāo)是什么？

二. 解決疑問

1. 從4個(gè)方面了解空狀態(tài)?

△ 空狀態(tài)的4個(gè)方面

（1）定義

空狀態(tài)通常在初次使用、完成或清空內(nèi)容、軟件出錯(cuò)等情境下出現(xiàn)的頁(yè)面狀態(tài)。

（2）作用

空狀態(tài)應(yīng)該達(dá)成三個(gè)目標(biāo)：教育用戶、取悅用戶、引導(dǎo)用戶。每個(gè)空狀態(tài)都有其核心需要達(dá)成的目標(biāo)。

（3）出現(xiàn)場(chǎng)景

用戶未進(jìn)行操作、用戶操作結(jié)果、出錯(cuò)。

（4）常用解決方案

使用系統(tǒng)推薦項(xiàng)、使用操作指引、使用緩存、情感化表達(dá)、提供新的任務(wù)。

2. 梳理舊版本空狀態(tài)設(shè)計(jì)問題

（1）設(shè)計(jì)不全面

4.0的空狀態(tài)設(shè)計(jì)不夠全面，場(chǎng)景繁多，空狀態(tài)里舊的品牌形象亟待更新，甚至部分空狀態(tài)頁(yè)面沒有任何內(nèi)容。這都會(huì)使用戶在遭遇異常情況時(shí)，疑慮的情緒得不到有效疏解，這些問題都需要在這次的空狀態(tài)設(shè)計(jì)中解決。

?（2）品牌認(rèn)知不同

美啦5.0設(shè)計(jì)定位精致、時(shí)尚、品質(zhì)感。而4.0的空狀態(tài)設(shè)計(jì)已不能很好的承載全新的品牌認(rèn)知。因此空狀態(tài)的設(shè)計(jì)對(duì)于整個(gè)App的品牌統(tǒng)一有著重要的補(bǔ)充意義。

?（3）空狀態(tài)冗余

經(jīng)整理需要優(yōu)化新增的頁(yè)面總計(jì)20個(gè)空狀態(tài)，由于空狀態(tài)頁(yè)面較多，將某些提示功能相近的空狀態(tài)使用通用的視覺表現(xiàn)形式。

3. 有情感人性化的產(chǎn)品更受歡迎

傳遞關(guān)愛屬于情感化設(shè)計(jì)的第三層——反思設(shè)計(jì)的核心。關(guān)愛意味著產(chǎn)品是有感情的，而有情感、人性化的產(chǎn)品更受歡迎。相比冰冷的流水線機(jī)器人手臂，擁有擬人化外型的「艾娃」更受歡迎。?

△ 冰冷的機(jī)器人手臂VS人形「艾娃」

4. 產(chǎn)品目標(biāo)

?通過(guò)人性化的空狀態(tài)設(shè)計(jì)來(lái)緩解用戶遭遇空狀態(tài)的挫敗感，給用戶關(guān)愛。間接提升用戶在產(chǎn)品內(nèi)的留存，進(jìn)而帶來(lái)點(diǎn)擊轉(zhuǎn)化。

△ 空狀態(tài)設(shè)計(jì)優(yōu)化目標(biāo)

三. 解決方案

1. 競(jìng)品選擇

通過(guò)對(duì)競(jìng)品的解決方案的分析，發(fā)現(xiàn)最常用的反思設(shè)計(jì)表現(xiàn)方式，從側(cè)面尋找什么樣的反思設(shè)計(jì)是受用戶喜愛的。鑒于美啦的美妝及社區(qū)電商屬性，分別選擇了女性時(shí)尚類App：小紅書、See、HIGO及電商類App：閑魚、網(wǎng)易嚴(yán)選、淘寶。?

△ 競(jìng)品選擇

2. 競(jìng)品空狀態(tài)分析

?（1）競(jìng)品空狀態(tài)內(nèi)容

小紅書、閑魚、淘寶使用品牌形象作為空狀態(tài)的主體形象，主體形象使用品牌形象既能實(shí)現(xiàn)空狀態(tài)功能，也能不斷的增強(qiáng)品牌在用戶心中的形象。網(wǎng)易嚴(yán)選、HIGO、See使用了文字、圖形作為空狀態(tài)的主體形象。

各App的空狀態(tài)從不同角度體現(xiàn)了各自的品牌認(rèn)知?。

（2）情感關(guān)懷

小紅書、閑魚使用了萌萌的小紅薯和閑魚，淘寶使用了小人，網(wǎng)易嚴(yán)選使用了場(chǎng)景相關(guān)的物品，See和HIGO使用了文字及圖標(biāo)。擬人的形象更能拉近產(chǎn)品與用戶的距離。

3. 結(jié)論

?通過(guò)對(duì)競(jìng)品空狀態(tài)的分析，主體形象使用品牌形象帶給用戶的情感關(guān)懷最好，同時(shí)品牌認(rèn)知也比較明顯。

四. 設(shè)計(jì)方案呈現(xiàn)?

1. 空狀態(tài)主體形象?

從上述分析得出，主體形象使用品牌形象帶給用戶的情感關(guān)懷最好，同時(shí)品牌認(rèn)知也比較明顯。

美啦5.0空狀態(tài)使用了品牌新形象：美啦兔——活潑又愛美兔子和她的小伙伴——負(fù)責(zé)送妝品的博克斯，一起作為美啦的代表與用戶互動(dòng)。我們希望用戶在美啦的體驗(yàn)是順暢的，但當(dāng)她遇到空狀態(tài)時(shí)，有美啦兔陪伴她。

△ 美啦兔和她的小伙伴博克斯

2. 腦暴關(guān)鍵詞繪制草圖

?確定主體形象和基本的結(jié)構(gòu)之后，就需要在腦海中構(gòu)思不同的場(chǎng)景，賦予美啦兔故事情緒。把所想到的場(chǎng)景都用文字記錄下來(lái)。比如購(gòu)物車：趁年輕要剁手，快來(lái)填滿我，是時(shí)候拔草了；比如刷新，正在變美，馬上就好了。盒子里灑出妝品，你的包裹小盒到了。發(fā)散到一定程度的時(shí)候，可以進(jìn)行收斂，把部分比較確定的場(chǎng)景用草圖表現(xiàn)出來(lái)。

草圖可以使大家更早看到實(shí)現(xiàn)效果，以及更快的做出設(shè)計(jì)調(diào)整。比如404，迷失在星空里，在山谷搜索信號(hào)，都可以表現(xiàn)出信號(hào)丟失的感覺，但是這樣的場(chǎng)景跟美啦美妝、女性社區(qū)品牌相距較遠(yuǎn)。于是考慮用戶更熟悉的城市場(chǎng)景，同時(shí)用妝品替代城市的建筑，美啦兔在妝品的城市里，找不到回家的路。?

3. 統(tǒng)一色彩規(guī)范?

?美啦5.0的品牌色仍然是美啦粉色，應(yīng)用于主形象，并貫穿于整個(gè)空狀態(tài)；輔助色黃色，應(yīng)用于輔助形象等；輔助色綠色、藍(lán)色作為場(chǎng)景元素等。

4. 統(tǒng)一設(shè)計(jì)元素

• 右側(cè)來(lái)光，視角主要為正視。
• 形象全部替換為最新的美啦兔，以美啦兔為主體，產(chǎn)生互動(dòng)。
• 微質(zhì)感、淺淺的投影。主體元素有陰影，使之形象更豐富。局部描邊塑造結(jié)構(gòu)。
• 收斂出幾個(gè)容易引起用戶共鳴的場(chǎng)景，用詳細(xì)些的文案故事來(lái)描述，同時(shí)把成品圖和場(chǎng)景故事放出來(lái)，404的頁(yè)面、通用為空、購(gòu)物車為空、刷新。

5. 場(chǎng)景展示?

場(chǎng)景一

通用的「網(wǎng)絡(luò)異?！箞?chǎng)景，美啦兔在妝品的城市里，找不到回家的路了。妝品的城市呼應(yīng)美啦的品牌特色，形式的表達(dá)上選擇最具有代表性的口紅。美啦兔拿著信號(hào)接收器在口紅的高處尋找方向。

場(chǎng)景二?

?美啦兔也跟所有的小仙女一樣，想要一直都美美的。但是有時(shí)候美麗需要等待，就像刷新一樣，遇到網(wǎng)絡(luò)不那么好的時(shí)候，就需要小仙女美美的稍等一會(huì)哦。

更多場(chǎng)景(部分)?

6. 空狀態(tài)界面?

?空狀態(tài)占頁(yè)面的面積情況分為2種：

• 第一種全屏空狀態(tài)：導(dǎo)航+空白內(nèi)容顯示區(qū)域。
• 第二種非全屏空狀態(tài)：導(dǎo)航+部分內(nèi)容+空白內(nèi)容顯示區(qū)域。

全屏空狀態(tài)的空白區(qū)域較大，空狀態(tài)的視覺表現(xiàn)屬于主要內(nèi)容，可以突出表現(xiàn)。

非全屏空狀態(tài)有部分正常的內(nèi)容顯示，空白區(qū)域較小，空狀態(tài)的視覺表現(xiàn)屬于次要展示的內(nèi)容，視覺表現(xiàn)需要服從主要的內(nèi)容。??

7. 小結(jié)與反思

?空狀態(tài)的設(shè)計(jì)已經(jīng)完結(jié)，但是美啦APP內(nèi)情感化運(yùn)營(yíng)并沒有結(jié)束，在閃屏、運(yùn)營(yíng)活動(dòng)、話題帖子、彈窗等的設(shè)計(jì)還在繼續(xù)。全面，并且連續(xù)不斷的情感化設(shè)計(jì)像一股暖流，給予用戶持續(xù)的關(guān)愛。

作者：Jenny黃靜雯?（微信公眾號(hào)：「Jenny黃靜雯」），平安銀行視覺&插畫設(shè)計(jì)師。微博設(shè)計(jì)美學(xué)博主，花瓣認(rèn)證設(shè)計(jì)師，優(yōu)優(yōu)網(wǎng)入駐設(shè)計(jì)講師，深圳市插畫協(xié)會(huì)專業(yè)會(huì)員，視覺中國(guó)簽約設(shè)計(jì)師。

本文由 @Jenny黃靜雯 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理。未經(jīng)許可，禁止轉(zhuǎn)載。

題圖來(lái)自 Unsplash，基于 CC0 協(xié)議