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

因為工作變(tiao)更(cao)許久沒(méi)有更新了,各位讀者老爺見(jiàn)諒??紤]到未來(lái)職業(yè)規劃,同時(shí)想在年輕時(shí)多接觸一些新的設計方向,因此毅然決然的投入到了B端UX的行列,這對我來(lái)說(shuō)是一個(gè)挑戰,但我喜歡挑戰,目前逐漸適應,正好手上有空狀態(tài)相關(guān)的設計任務(wù),因此在構思階段整理了本文,希望大家有所收獲。

那么開(kāi)始我們文章正文。

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

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

  • 錯誤異常類(lèi): 出現錯誤如404,斷網(wǎng),加載失敗等場(chǎng)景

  • 中性類(lèi):搜索結果為空、數據為空、地址未添加、新用戶(hù)未使用導致的內容為空等狀況

  • 積極正向類(lèi):任務(wù)或事項被清空,用戶(hù)主動(dòng)促成的空狀態(tài)界面

針對三種情況有不同的設計傾向。

1. 針對錯誤類(lèi)

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

  • 闡述問(wèn)題:告知用戶(hù)問(wèn)題出在哪里,緩解用戶(hù)不適情緒

  • 恢復任務(wù):需要提供明確的解決方案輔助用戶(hù)回到任務(wù)正軌,如一個(gè)跳轉按鈕,或者一句解決方案說(shuō)明

2. 針對中性類(lèi)

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

  • 陳述事實(shí):描述清楚數據為空的事實(shí),原因

  • 推薦方案:展示我們建議的方案,幫助用戶(hù)解決數據為空的情況,但并不強制而只是推薦,如推薦一些商品、引導去發(fā)布內容等等。

3. 針對積極類(lèi)

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

針對以上三類(lèi)空狀態(tài),我們在設計時(shí)僅需要分為兩種場(chǎng)景考慮。

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

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

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

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

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

行業(yè)通常如何設計這些內容?(常見(jiàn)類(lèi)型、方式)1. 有哪些常見(jiàn)的形式

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

  • Content(信息模塊):陳述結果,解釋狀態(tài),闡述方案(純展示)包含插畫(huà)&文案

  • Operate(操作模塊):CTA按鈕,明確的,用于解決當前問(wèn)題的操作

  • Guide(引導操作模塊):當前頁(yè)面存在操作控件,引導模塊需要給予位置提示或操作提示

  • Box&Card(定制化內容容器):內容元素與操作組件的自由組合,根據產(chǎn)品特定體驗目標或業(yè)務(wù)目標自定義的信息集合。

如何設計空狀態(tài)界面?來(lái)看這篇超全面的總結!

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

純配圖

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

純文案

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

插畫(huà)配圖+文案

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

插畫(huà)配圖+文案+CTA按鈕

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

插畫(huà)配圖+文案+引導線(xiàn)索

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

定制化的內容容器

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

2. 有哪些常見(jiàn)的樣式:

按照三維屬性劃分:線(xiàn)性、面性、2.5D&偽3D、3D

如何設計空狀態(tài)界面?來(lái)看這篇超全面的總結!

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

如何設計空狀態(tài)界面?來(lái)看這篇超全面的總結!

是否有人像插畫(huà)參與:是、否

如何設計空狀態(tài)界面?來(lái)看這篇超全面的總結!

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

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

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

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

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

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

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

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

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

我們設計它的目的是什么?希望實(shí)現什么目標,如何評估?

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

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

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

如何設計空狀態(tài)界面?來(lái)看這篇超全面的總結!

案例

下面提供一些實(shí)際案例,來(lái)講解一下比較典型的空狀態(tài)設計目標

1. 解決異常問(wèn)題

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

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

如何設計空狀態(tài)界面?來(lái)看這篇超全面的總結!

2. 數據為空場(chǎng)景

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

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

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

如何設計空狀態(tài)界面?來(lái)看這篇超全面的總結!

3. 積極結果頁(yè)

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

如何設計空狀態(tài)界面?來(lái)看這篇超全面的總結!

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

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

如何設計空狀態(tài)界面?來(lái)看這篇超全面的總結!

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