想要設(shè)計(jì)出優(yōu)秀的空狀態(tài)，首先要學(xué)會(huì)理解需求。

考慮到未來職業(yè)規(guī)劃，同時(shí)想在年輕時(shí)多接觸一些新的設(shè)計(jì)方向，因此毅然決然的投入到了B端UX的行列，這對(duì)我來說是一個(gè)挑戰(zhàn)，但我喜歡挑戰(zhàn)，目前逐漸適應(yīng)，正好手上有空狀態(tài)相關(guān)的設(shè)計(jì)任務(wù)，因此在構(gòu)思階段整理了本文，希望大家有所收獲。

那么開始我們文章正文。

什么場(chǎng)景我們需要空狀態(tài)插畫？

什么是空狀態(tài)，空狀態(tài)是指用戶在使用產(chǎn)品時(shí)遇到的因無數(shù)據(jù)展示而中斷體驗(yàn)的場(chǎng)景?？諣顟B(tài)并不全指異常狀態(tài)，并不局限于產(chǎn)生錯(cuò)誤的異常場(chǎng)景。

錯(cuò)誤異常類： 出現(xiàn)錯(cuò)誤如404，斷網(wǎng)，加載失敗等場(chǎng)景

中性類：搜索結(jié)果為空、數(shù)據(jù)為空、地址未添加、新用戶未使用導(dǎo)致的內(nèi)容為空等狀況

積極正向類：任務(wù)或事項(xiàng)被清空，用戶主動(dòng)促成的空狀態(tài)界面

針對(duì)三種情況有不同的設(shè)計(jì)傾向。

1. 針對(duì)錯(cuò)誤類

試想此時(shí)的場(chǎng)景如何，洞察用戶的想法，感受，此時(shí)用戶一般正在進(jìn)行一項(xiàng)任務(wù)，異常場(chǎng)景導(dǎo)致任務(wù)被打斷。這導(dǎo)致的結(jié)果是，一方面用戶任務(wù)受阻中斷，亟需接續(xù)任務(wù)流程，另一方面用戶對(duì)異常和錯(cuò)誤產(chǎn)生厭煩的不適情緒，通過安撫用戶來挽回產(chǎn)品形象，避免用戶流失。針對(duì)這兩點(diǎn)我們需要提供對(duì)應(yīng)的解決方案。

闡述問題：告知用戶問題出在哪里，緩解用戶不適情緒

恢復(fù)任務(wù)：需要提供明確的解決方案輔助用戶回到任務(wù)正軌，如一個(gè)跳轉(zhuǎn)按鈕，或者一句解決方案說明

2. 針對(duì)中性類

中性類常見的為數(shù)據(jù)為空的情況，它并不能歸咎于產(chǎn)品異?；蝈e(cuò)誤，而是正常狀態(tài)，如購物車未添加商品，新用戶未發(fā)布內(nèi)容。在此類空狀態(tài)場(chǎng)景下，產(chǎn)品需要說明當(dāng)前狀態(tài)，即陳述事實(shí)，同時(shí)針對(duì)某些場(chǎng)景可以提供對(duì)應(yīng)的推薦方案,以解決數(shù)據(jù)為空的問題。

陳述事實(shí)：描述清楚數(shù)據(jù)為空的事實(shí)，原因

推薦方案：展示我們建議的方案，幫助用戶解決數(shù)據(jù)為空的情況，但并不強(qiáng)制而只是推薦，如推薦一些商品、引導(dǎo)去發(fā)布內(nèi)容等等。

3. 針對(duì)積極類

積極場(chǎng)景下，表明用戶通過正向操作獲得正向結(jié)果，此時(shí)需要一些正向反饋，因此建議采用一些鼓勵(lì)性質(zhì)的文案來呼應(yīng)用戶此時(shí)的狀態(tài)，心理。某些操作成功的結(jié)果頁也可以歸屬于積極類空狀態(tài)頁面。

針對(duì)以上三類空狀態(tài)，我們?cè)谠O(shè)計(jì)時(shí)僅需要分為兩種場(chǎng)景考慮。

其一，針對(duì)異常錯(cuò)誤類空狀態(tài)，最高優(yōu)先級(jí)的設(shè)計(jì)目標(biāo)是保證任務(wù)接續(xù)，使用戶清晰明確地了解任務(wù)中斷原因，并能夠快速獲得解決方案，此類場(chǎng)景下，空狀態(tài)下的設(shè)計(jì)要素主要用于解決用戶面臨的迫切難題，其核心主旨是“恢復(fù)和救援”。

其二，除異常類的其他兩類空狀態(tài)。中性及偏積極的空狀態(tài)場(chǎng)景下，產(chǎn)品自身處于無過錯(cuò)的一方，此時(shí)的空狀態(tài)也并沒有影響到用戶的原體驗(yàn)流程。因此針對(duì)此類空狀態(tài)的設(shè)計(jì)可以更自由的組合各種頁面內(nèi)容，例如反饋、建議、引導(dǎo)等。根據(jù)對(duì)用戶的理解和對(duì)場(chǎng)景的分析來預(yù)測(cè)用戶行為，想用戶所想，展示用戶亟需或感興趣的內(nèi)容與功能，消滅空白，保證體驗(yàn)貫通。其核心主旨是“預(yù)測(cè)和補(bǔ)充”。

且此種場(chǎng)景下，設(shè)計(jì)師可以在保證體驗(yàn)的基礎(chǔ)上融入更多業(yè)務(wù)向的考量，轉(zhuǎn)化為設(shè)計(jì)表現(xiàn)則是一些對(duì)業(yè)務(wù)有幫助的信息推介，商品推介，如淘寶空購物車下可以根據(jù)用戶偏好推薦一些優(yōu)質(zhì)商品，課程類產(chǎn)品在用戶清空學(xué)習(xí)事項(xiàng)后推薦一些新的課程等等。

當(dāng)然業(yè)務(wù)不僅僅局限于顯性的利潤，可以將目光放的更長遠(yuǎn)，例如如何利用空狀態(tài)下的內(nèi)容設(shè)計(jì)來促進(jìn)留存及用戶粘性，提高用戶忠誠度及品牌認(rèn)同，這些作為隱性的業(yè)務(wù)價(jià)值同樣能為產(chǎn)品帶來出乎意料的神助攻。

以上，我們定義了什么是空狀態(tài)，概括了空狀態(tài)的三種類別（異常類、中性類及積極類）。同時(shí)我們也分析了兩種場(chǎng)景下，設(shè)計(jì)空狀態(tài)頁面的考量與傾向。針對(duì)異常類場(chǎng)景，解決造成用戶體驗(yàn)中斷的問題是其核心要點(diǎn)，而針對(duì)非異常場(chǎng)景，設(shè)計(jì)可以結(jié)合體驗(yàn)和業(yè)務(wù)對(duì)空狀態(tài)頁面的內(nèi)容進(jìn)行更自由的組合，預(yù)測(cè)用戶行為，使用用戶感興趣的內(nèi)容填補(bǔ)空白，以及基于商業(yè)化目的去進(jìn)行對(duì)應(yīng)的商品及信息的曝光。

行業(yè)通常如何設(shè)計(jì)這些內(nèi)容？（常見類型、方式)

1. 有哪些常見的形式

常用的信息元素或組件有以下四種

Content(信息模塊)：陳述結(jié)果，解釋狀態(tài)，闡述方案（純展示）包含插畫&文案

Operate（操作模塊）：CTA按鈕，明確的，用于解決當(dāng)前問題的操作

Guide（引導(dǎo)操作模塊）：當(dāng)前頁面存在操作控件，引導(dǎo)模塊需要給予位置提示或操作提示

Box&Card（定制化內(nèi)容容器）：內(nèi)容元素與操作組件的自由組合，根據(jù)產(chǎn)品特定體驗(yàn)?zāi)繕?biāo)或業(yè)務(wù)目標(biāo)自定義的信息集合。

實(shí)際場(chǎng)景下的排列組合：

純配圖

此形式在商業(yè)產(chǎn)品中使用較少，多見于飛機(jī)稿及一些小眾產(chǎn)品。一圖勝千言是理想的情況，真實(shí)場(chǎng)景下，孤零零的一張配圖無法闡述當(dāng)前發(fā)生了什么以及應(yīng)該如何擺脫困境。不建議使用。

純文案

純文案能夠簡(jiǎn)潔清晰描述問題或狀態(tài)，幫助用戶快速定位問題點(diǎn)。適用于極簡(jiǎn)產(chǎn)品、對(duì)視覺沒有極致要求的B端產(chǎn)品，有個(gè)性設(shè)計(jì)語言的小眾產(chǎn)品等。缺點(diǎn)是略顯單調(diào)，無法進(jìn)一步觸發(fā)場(chǎng)景，產(chǎn)生共鳴。創(chuàng)造更多價(jià)值。

插畫配圖+文案

比較主流的空狀態(tài)內(nèi)容形式，通過精心設(shè)計(jì)的插畫陳述產(chǎn)品狀態(tài)，引導(dǎo)體驗(yàn)路徑甚至傳達(dá)品牌價(jià)值，輔之對(duì)應(yīng)的精確文案。從傳達(dá)信息的角度幫助用戶理解當(dāng)前所處的狀態(tài)，遇到的問題，以及解決方案。

插畫配圖+文案+CTA按鈕

同上，在插畫加文案的信息模塊的基礎(chǔ)上增加了一個(gè)操作按鈕，該操作基于用戶所處的場(chǎng)景來配置功能，可以用來解決用戶面臨的緊迫問題，也可以用來引導(dǎo)新用戶開始產(chǎn)品體驗(yàn)旅程。

插畫配圖+文案+引導(dǎo)線索

當(dāng)前頁面已經(jīng)存在解決空狀態(tài)的操作控件，如新建功能，而空狀態(tài)提示需要完成的任務(wù)時(shí)吸引用戶注意力到對(duì)應(yīng)的功能，幫助新用戶熟悉產(chǎn)品，快速掌握核心功能。

定制化的內(nèi)容容器

需要展示更復(fù)雜的內(nèi)容，提供更多樣功能，此時(shí)設(shè)計(jì)師可以根據(jù)產(chǎn)品訴求，對(duì)確定的內(nèi)容規(guī)格進(jìn)行“封裝”，封裝后的形式就像是一個(gè)BOX或者說我們熟悉的卡片設(shè)計(jì)，一個(gè)box模塊包含富文本信息、操作功能等多樣的內(nèi)容。作為定制化的特殊組件，它更契合你的產(chǎn)品形態(tài)，契合業(yè)務(wù)訴求，擁有更強(qiáng)的陳述能力和解決方案等能力。

2. 有哪些常見的樣式：

按照三維屬性劃分：線性、面性、2.5D&偽3D、3D

按照配色風(fēng)格劃分：灰色、灰色+彩色點(diǎn)綴、彩色

是否有人像插畫參與：是、否

除此之外，空狀態(tài)插畫還可以有動(dòng)效、游戲化等形式，但并不作為主流形式來參考。根據(jù)以上三個(gè)分類的排列組合，我們能夠創(chuàng)造出足夠飽滿的插畫配圖。同樣，在選取不同風(fēng)格的組成元素時(shí)，這里也有一些參考建議。

關(guān)于三維屬性的選?。?/strong>

線性插畫更加輕盈，沒有過于復(fù)雜的細(xì)節(jié)，具有高度概括性，適用范圍較廣，且容易制作，擁有獨(dú)特的簡(jiǎn)潔美感。接受度較高，是比較主流的配圖樣式。特別適合不張揚(yáng)，無需強(qiáng)調(diào)和分散注意力的場(chǎng)景，只作為輔助元素為產(chǎn)品界面增添細(xì)節(jié)及搭配體驗(yàn)文案來陳述內(nèi)容。但不精心打磨的情況下，線性插畫容易產(chǎn)生簡(jiǎn)陋感，粗糙感，因此需要注意形體構(gòu)造和顏色的搭配。

面性插畫同樣是主流的插畫表現(xiàn)形式，與線性構(gòu)成對(duì)比。面性插畫種類繁多，根據(jù)添加的細(xì)節(jié)多寡，從完全扁平的2D形式，到擁有復(fù)雜光影光影表現(xiàn)的質(zhì)感形式，可供選擇的方向較多。更加考驗(yàn)設(shè)計(jì)師的視覺設(shè)計(jì)能力、配色能力等。需要注意的是面性插畫能夠與豐富的顏色搭配創(chuàng)造視覺沖擊力，其聚焦用戶注意力的能力較強(qiáng)，需要根據(jù)體驗(yàn)?zāi)繕?biāo)和業(yè)務(wù)目標(biāo)在合適的場(chǎng)景使用。

2.5D和3D屬于較新潮的風(fēng)格，尤其是近幾年新興的3D設(shè)計(jì)，他們的共同點(diǎn)是擁有更強(qiáng)的表現(xiàn)力視覺感染力，符合新的視覺趨勢(shì)，容易引發(fā)用戶視覺到情感上的共鳴，但新潮的趨勢(shì)往往并不敢用于大體量的成熟產(chǎn)品，需要兼顧多種類型的用戶群，總之謹(jǐn)慎選擇，同時(shí)3D和2.5D都對(duì)設(shè)計(jì)師提出新的技能要求，有一定的操作門檻。

關(guān)于顏色的選?。?/strong>

首先，灰色系是最不容易出錯(cuò)，且最契合空狀態(tài)場(chǎng)景的配色方案，其朦朦朧朧的視覺呈現(xiàn)效果即能夠豐富界面細(xì)節(jié)，又不會(huì)作為視覺重心削弱其他核心信息的獲取效率。其次灰色系配色的設(shè)計(jì)下限較高，簡(jiǎn)單的講就是容易出效果，即便沒有太好的配色功底也能僅僅通過明暗的搭配來產(chǎn)出具有高級(jí)質(zhì)感的配圖。

彩色擁有更豐富的視覺表現(xiàn)力，但也有著與之對(duì)應(yīng)的復(fù)雜性。彩色配圖容易“搶焦”，需要考慮是否會(huì)干擾到主信息的傳達(dá)效率，如果插畫的視覺重心甚至超過了CTA按鈕，那必然是不可取的。

所以，遇事不決，量子力學(xué)，中庸之道。 選擇灰色系與彩色點(diǎn)綴的方式未嘗不是一個(gè)終極解決方案。

我們?cè)O(shè)計(jì)它的目的是什么？希望實(shí)現(xiàn)什么目標(biāo)，如何評(píng)估？

空狀態(tài)的設(shè)計(jì)有一個(gè)廣度的目的，即保證用戶的體驗(yàn)流暢一致，以及更進(jìn)一步的滿意度乃至信任感。這實(shí)際上是用戶體驗(yàn)設(shè)計(jì)的一個(gè)核心命題，即盡可能提升用戶使用產(chǎn)品的體驗(yàn)。

空狀態(tài)在其中擔(dān)任著橋梁、救援隊(duì)的角色，專門處理一些特殊場(chǎng)景的體驗(yàn)問題，如新用戶初次登錄，如何快速的被教育為基礎(chǔ)用戶，被引導(dǎo)熟悉核心流程？因網(wǎng)絡(luò)、設(shè)備、誤操作等原因?qū)е碌漠a(chǎn)品體驗(yàn)流程的中斷如何才能快速恢復(fù)？空狀態(tài)界面曝光的場(chǎng)景下，如何把空白頁轉(zhuǎn)化為機(jī)會(huì)，融合業(yè)務(wù)價(jià)值及品牌價(jià)值？

因此可以見得，空狀態(tài)在不同場(chǎng)景下，可以有很多目標(biāo)，這要根據(jù)實(shí)際產(chǎn)品情況來判斷，但一個(gè)總的指導(dǎo)原則可以確定，即優(yōu)先解決用戶面臨的問題（通過闡述當(dāng)前狀態(tài)、原因、及提供解決方案），其次考慮如何接力打力增加用戶價(jià)值（用戶愉悅性、接受度、用戶粘性、信任感等），然后融合業(yè)務(wù)價(jià)值（增加利于商業(yè)化的內(nèi)容模塊），最后注意整體使用情感化的表達(dá)方式，從體驗(yàn)文案到配圖。

案例

下面提供一些實(shí)際案例，來講解一下比較典型的空狀態(tài)設(shè)計(jì)目標(biāo)

1. 解決異常問題

針對(duì)異常類空狀態(tài)，設(shè)計(jì)目的在于解決問題，恢復(fù)任務(wù)。因此主流做法是陳述問題、說明原因，闡述解決方案，最好能夠提供直接的解決方案，如跳轉(zhuǎn)、刷新按鈕。

以下圖中的兩個(gè)無網(wǎng)絡(luò)狀態(tài)舉例，文案與配圖主要用于陳述當(dāng)前遇到的網(wǎng)絡(luò)問題，同時(shí)左側(cè)的網(wǎng)易云闡述了解決方案——檢查網(wǎng)絡(luò)設(shè)置，右側(cè)的美團(tuán)則提供了解決當(dāng)前問題的加載按鈕。由于PC端和移動(dòng)端的差異，因此兩者在設(shè)計(jì)空狀態(tài)方案時(shí)也略有不同。PC端不需要加載按鈕，因?yàn)榫W(wǎng)絡(luò)連接后會(huì)自動(dòng)加載，移動(dòng)端網(wǎng)絡(luò)問題主流場(chǎng)景是弱網(wǎng)狀態(tài)，其次是網(wǎng)絡(luò)連接中斷，用戶恢復(fù)網(wǎng)絡(luò)后需要手動(dòng)去刷新。

2. 數(shù)據(jù)為空?qǐng)鼍?/h3>

數(shù)據(jù)為空的場(chǎng)景實(shí)際有很多種，但大多數(shù)都不應(yīng)該被定義為異常，例如搜索結(jié)果為空，描述的是當(dāng)前庫內(nèi)存在的數(shù)據(jù)不包含搜索項(xiàng)這樣一個(gè)既定事實(shí)。以告知結(jié)果為主。

新用戶初次使用，未執(zhí)行任何操作，此時(shí)空狀態(tài)頁面一方面闡述當(dāng)前狀態(tài)，另一方面提供對(duì)應(yīng)的引導(dǎo)，指導(dǎo)用戶快速學(xué)習(xí)產(chǎn)品，上手并填充內(nèi)容，教育用戶的同時(shí)解決了空狀態(tài)的情況。

另一種情況則是涉及到用戶權(quán)限，例如登錄使用的權(quán)限。產(chǎn)品內(nèi)的某些模塊、信息與賬號(hào)體系屬于強(qiáng)綁定的關(guān)系，需要登錄后才可瀏覽，另外登錄使用高級(jí)功能也可能是基于業(yè)務(wù)的考量。由于這類權(quán)限空狀態(tài)會(huì)打斷用戶原有體驗(yàn)流程，因此需要謹(jǐn)慎選擇。例如淘寶不會(huì)在用戶未登錄時(shí)不予展示商品。

3. 積極結(jié)果頁

今日事項(xiàng)已清空、任務(wù)list已清空，未讀郵件已清空，此類用戶主動(dòng)促成“空狀態(tài)”的場(chǎng)景可以被定義為積極類空狀態(tài)，此種場(chǎng)景下，清空任務(wù)，達(dá)成空狀態(tài)是用戶的目的，而不是異常場(chǎng)景。屬于用戶完成任務(wù)后的成功反饋，因此其設(shè)計(jì)應(yīng)當(dāng)偏向正向，積極的主題，適合的鼓勵(lì)用戶，促進(jìn)用戶與產(chǎn)品的互相認(rèn)可。此類場(chǎng)景是情感化設(shè)計(jì)最容易發(fā)揮作用的地方，從文案的字句斟酌，到插畫的情感化融入都有無窮的可操作性。

4. 品牌價(jià)值的傳達(dá)

品牌價(jià)值作為用戶潛意識(shí)層的影響因素，是一個(gè)需要持續(xù)發(fā)力的設(shè)計(jì)層面。成熟的產(chǎn)品團(tuán)隊(duì)都會(huì)結(jié)合自家產(chǎn)品特色，歷史品牌建設(shè)來打造專屬品牌形象，如釘釘?shù)尼斎?、飛豬的小飛豬等，一個(gè)形象打造好可以發(fā)揮極大地品牌價(jià)值，占領(lǐng)用戶心智，從而間接提高市場(chǎng)占有率。打造專屬品牌形象，與幽默風(fēng)趣的主題插畫配合，講故事、談理想、獲取共鳴，強(qiáng)化品牌觀一氣呵成。而空狀態(tài)界面正是其優(yōu)質(zhì)的載體，制作精良的品牌主題插畫更可以緩解用戶焦慮、張揚(yáng)產(chǎn)品個(gè)性，與競(jìng)品構(gòu)成差異化。

最后，希望設(shè)計(jì)師在設(shè)計(jì)前能夠花費(fèi)一定的時(shí)間來思考設(shè)計(jì)，而不是快速進(jìn)入設(shè)計(jì)制作階段，閱讀了上面這些內(nèi)容，你應(yīng)該能意識(shí)到，空狀態(tài)設(shè)計(jì)中，插畫的美觀性反而是最次要的，當(dāng)前頁面的設(shè)計(jì)目標(biāo)，體驗(yàn)上的考量、業(yè)務(wù)上的思考等內(nèi)在才是其核心要素，想要設(shè)計(jì)出優(yōu)秀的空狀態(tài)，首先要學(xué)會(huì)理解需求，理解當(dāng)前場(chǎng)景下，用戶需要什么，公司與團(tuán)隊(duì)期望從中獲的什么，沒想清楚這些，再精美的插畫也沒有意義。

空狀態(tài)插畫素材：

立體生動(dòng)的頁面空狀態(tài)的矢量插畫素材

一套立體生動(dòng)的頁面空狀態(tài)的矢量插畫素材，總共有30個(gè)經(jīng)過精心設(shè)計(jì)的高品質(zhì)插畫，包含了仙人掌、相機(jī)、麥克風(fēng)、影片播放、郵件、404錯(cuò)誤、路由器、定位、銀行卡、搜索...

網(wǎng)頁和app專用的空狀態(tài)矢量插畫素材

一套網(wǎng)頁和app專用的空狀態(tài)矢量插畫素材，總共有45個(gè)插畫，包含了9個(gè)類別：消息、活動(dòng)、好友、提醒、照片、購買、任務(wù)、視頻、錢包。所有插畫均為ai、svg矢量格...

6個(gè)形象的人物活動(dòng)場(chǎng)景網(wǎng)頁空狀態(tài)矢量插畫素材

一組形象的人物活動(dòng)場(chǎng)景網(wǎng)頁空狀態(tài)矢量插畫素材，尺寸為990（w）×708（h）px，素材內(nèi)有內(nèi)容查找、確認(rèn)、錯(cuò)誤、網(wǎng)頁未連接、頁面丟失、信息發(fā)送6個(gè)圖標(biāo)，有人物...

5個(gè)網(wǎng)頁app的空狀態(tài)頁面插畫素材

5個(gè)用于網(wǎng)站網(wǎng)頁或app的空狀態(tài)頁面插畫素材，素材有5個(gè)獨(dú)特且優(yōu)雅的空狀態(tài)場(chǎng)景，用于網(wǎng)站頁面或者移動(dòng)app頁面。所有插圖都是100％可定制的，并使用矢量形狀創(chuàng)建...

原文作者：南山可