2022-9-26 純純
在交互設(shè)計(jì)、用戶體驗(yàn)設(shè)計(jì)中,每一個細(xì)小環(huán)節(jié)都至關(guān)重要。比如說,空狀態(tài) ( The Empty State ) 是許多應(yīng)用程序設(shè)計(jì)開發(fā)過程中忽略的一點(diǎn),卻也有著優(yōu)化用戶體驗(yàn)、改善應(yīng)用程序的潛力。
一.什么是空狀態(tài)?
空狀態(tài):顧名思義就是空白的狀態(tài),空狀態(tài)是對沒有數(shù)據(jù)頁面的補(bǔ)充,一種對零數(shù)據(jù)的設(shè)計(jì)形式(如下圖所示:無網(wǎng)絡(luò)、訂單為空、沒有關(guān)注的人以及無法連接網(wǎng)絡(luò)等等這些頁面就是所謂的“空狀態(tài)”。)
空狀態(tài)是APP設(shè)計(jì)中不可或缺的一部分,特別是新用戶初次接觸到產(chǎn)品APP時,必然會面對很多空狀態(tài)。
二:空狀態(tài)的分類
第一:根據(jù)空狀態(tài)產(chǎn)生的路徑,可以將空狀態(tài)分為3類
系統(tǒng)層:本地請求異常;如:無網(wǎng)絡(luò)、服務(wù)器異常等
信息層:請求成功,數(shù)據(jù)異常;如內(nèi)容已刪除、已下架等;
空白層:請求成功,無數(shù)據(jù);最常見的空頁面或空狀態(tài);
第二:根據(jù)空狀態(tài)的出現(xiàn)場景又可以將其分為4大類:
初體驗(yàn):初次注冊登錄的用戶很多功能都沒有熟悉
無信息/無結(jié)果:某些功能還未使用過
完成任務(wù):完成某項(xiàng)功能后反饋的結(jié)果
出錯:因?yàn)楦鞣N原因?qū)е碌腻e誤頁面
初體驗(yàn)時,根據(jù)不同的產(chǎn)品,我們可以為用戶提供不同的引導(dǎo)
· 創(chuàng)作平臺→引導(dǎo)用戶創(chuàng)造內(nèi)容、推薦相關(guān)內(nèi)容、開啟權(quán)限……
· 工具類app→介紹相關(guān)功能、添加相關(guān)人、相關(guān)功能……
·學(xué)習(xí)類app→收集用戶目標(biāo)、推薦相關(guān)課……
無信息/無結(jié)果時,告知用戶該如何解決問題,或者給用戶其他選擇
·購物車為空時→讓用戶購買或者給用戶推薦商品
·無收藏時→應(yīng)到用戶去收藏
·搜索為空時→告知用戶換一個詞試一試
·無評論時→讓用戶搶個沙發(fā)
任務(wù)完成后,鼓勵或獎勵用戶
·郵件全部回復(fù)完→祝用戶擁有美好的一天
·書看完時→讓眼睛放松一下
·打卡成功→獎勵用戶勛章等等
程序出錯后,緩解用戶情緒,告知用戶解決辦法
·網(wǎng)絡(luò)出錯→檢查網(wǎng)絡(luò)/刷新頁面
·404頁面→讓用戶反饋情況到后臺、報錯等
三:設(shè)計(jì)空狀態(tài)頁面的好處
據(jù)調(diào)查顯示:“平均下來,APP在被下載之后的前3天時間里,日活躍用戶(DAU)數(shù)量下降了77個百分點(diǎn)。30天內(nèi),下降比例達(dá)到80%”。用戶會嘗試多個同類APP,然后在接下來的3到7天內(nèi)決定其中的哪些不合適。這時候就需要通過更多好的設(shè)計(jì)和體驗(yàn)來留住用戶
當(dāng)然一個產(chǎn)品的好與壞不能全靠空狀態(tài),但是空狀態(tài)對于新用戶的留存是很重要的。
Spotify的用戶體驗(yàn)專家Tamara Hilmes提醒設(shè)計(jì)師們時說,空狀態(tài)是一個展示產(chǎn)品個性化的機(jī)會,因此,在進(jìn)行空狀態(tài)設(shè)計(jì)時,需要認(rèn)真考慮品牌和用戶的目標(biāo)和背景。
四:空狀態(tài)設(shè)計(jì)原則
4.1基本原則
準(zhǔn)確:空狀態(tài)需要清晰明確地將當(dāng)前系統(tǒng)狀態(tài)傳達(dá)給用戶
直觀:簡言之就是畫面要“小而美”→簡單
高效:提供用戶快速有效地?cái)[脫空狀態(tài)的方法
準(zhǔn)確
準(zhǔn)確原則要求在文字描述上做到清晰地闡述系統(tǒng)當(dāng)前的狀態(tài)。
下圖為例,如果僅以“獲取不到數(shù)據(jù)”作為收件箱空狀態(tài)提示文字,用戶不清楚是系統(tǒng)異常、網(wǎng)絡(luò)異常還是僅僅因?yàn)槭占錄]有郵件而出現(xiàn)當(dāng)前狀態(tài)。準(zhǔn)確地將系統(tǒng)狀態(tài)及操作結(jié)果告知用戶是空狀態(tài)設(shè)計(jì)中十分重要的目標(biāo)。
特殊原因?qū)е碌目諣顟B(tài),也可以在附加文字中告知用戶其原因,例如郵箱賬號未登錄而導(dǎo)致收件箱為空的情況。
直觀:
空狀態(tài)不僅要講究視覺的美感,還要講究體驗(yàn)的“美感”,要讓用戶在不用思考的情況下, 獲得最大的價值,
高效
若空狀態(tài)在系統(tǒng)中可以通過觸發(fā)操作離開,建議在空狀態(tài)的文字或操作上進(jìn)行展現(xiàn)。
以站內(nèi)信空狀態(tài)為例,系統(tǒng)存在用戶可執(zhí)行的解決方案,在設(shè)計(jì)上也要體現(xiàn)。上面提到的賬號未登錄導(dǎo)致站內(nèi)信為空時,考慮附加文字提示‘登錄賬號即可開始’。若系統(tǒng)存在直接觸發(fā)操作的方案,可通過鏈接或按鈕的形式提供入口給用戶,便于用戶快速有效地回到功能主流程中。
4.2進(jìn)階原則
有趣:有趣又易用,符合用戶的心理預(yù)期
品牌:介紹并強(qiáng)化品牌元素,通過恰當(dāng)?shù)姆绞?、形式呈現(xiàn)
記憶:有創(chuàng)意或幽默色彩,呈現(xiàn)形式新穎,體現(xiàn)專業(yè)同時創(chuàng)造正面情緒
有趣
空狀態(tài)的設(shè)計(jì)在滿足了基本的設(shè)計(jì)原則后,還可根據(jù)產(chǎn)品的品牌特征進(jìn)行優(yōu)化。一般對空狀態(tài)的圖片、文案來著手進(jìn)行品牌化設(shè)計(jì)。
采用含著關(guān)懷情感的文案“哎呀,網(wǎng)絡(luò)好像出了點(diǎn)問題”代替“網(wǎng)絡(luò)未連接”這樣冰冷無感情的提示文字,同樣達(dá)到告知用戶系統(tǒng)狀態(tài)的目的,但修改后的文案明顯更能貼合服務(wù)工具型軟件的品牌形象。
同時結(jié)合文案主題,用有趣的插畫吸引用戶,達(dá)到緩解用戶焦慮、負(fù)面情緒的目的
例如下圖的刷新一下試試,企業(yè)IP作為粉刷匠在刷新Wi-Fi,比起一個失聯(lián)的行星就更有意思
品牌
當(dāng)空狀態(tài)滿足了用戶的基本需求后,就可以考慮如何樹立品牌形象了!
目前最簡單且有效的辦法是——企業(yè)IP+插畫+文案,雖然被很多人吐槽套路、片面,但是作為剛起步的創(chuàng)業(yè)類的app,這不失為一種好辦法
設(shè)計(jì)專屬吉祥物形象,對產(chǎn)品進(jìn)行擬人化表達(dá),避免極其復(fù)雜的插畫,保障界面簡潔明快;
由于插畫不可交互,盡量與背景融合為一部分,避免使用明亮的色彩,誤導(dǎo)用戶點(diǎn)擊。
記憶
文章的開頭講過,空狀態(tài)對留住新用戶有著很關(guān)鍵的作用,那么空狀態(tài)在用戶使用的幾秒鐘內(nèi)一定要給用戶留下足夠深刻的印象才有可能留住這些新用戶,所以空狀態(tài)一定要有新意,甚至是要給用戶出其不意的視覺感受,這個階段考慮的問題要更多一些,受眾人群的特點(diǎn)、品牌的調(diào)性、想要達(dá)到的效果、解決問題的手法、還要注意對用戶而言是否直接有效并且準(zhǔn)確。
阿里旗下“躺平”app的空狀態(tài)打破常規(guī),非常優(yōu)秀的抓住了用戶人群的特性,解決了用戶的需求的同時,還給用戶樹立了非常深刻的品牌印象。
產(chǎn)品所有能傳遞情緒的場景都應(yīng)該與品牌情緒一致。采用負(fù)面情緒的空狀態(tài)有一定風(fēng)險,可能會起到消極作用。
用戶更容易代入場景化的故事,產(chǎn)生情感共鳴。構(gòu)思場景,需研究產(chǎn)品目標(biāo)用戶群的特質(zhì),設(shè)計(jì)他們的共同回憶,將有關(guān)的場景、片段、元素進(jìn)行拼貼、組合、關(guān)聯(lián),再找到最能勾起情緒沖動的突破口,豐滿場景。
避免正面刻板的形象(一眼就能看到底的設(shè)計(jì)),盡可能簡單有趣、不落俗套,讓用戶看到這個畫面后可以有更多想象的空間,從而吸引用戶,驅(qū)動用戶的好奇心。
五、總結(jié)
簡單總結(jié)了一些設(shè)計(jì)空狀態(tài)時整體的設(shè)計(jì)流程,如下:
功能入口:提供相關(guān)功能的入口和動作按鈕,解釋服務(wù)的功能和優(yōu)點(diǎn),引導(dǎo)用戶到其他頁面查看內(nèi)容
標(biāo)題文案:說明當(dāng)前狀態(tài),解釋當(dāng)前問題出現(xiàn)原因,介紹功能概要
解說文案:如何走出當(dāng)前狀態(tài),如何解決當(dāng)前問題,補(bǔ)充說明功能的屬性
推薦數(shù)據(jù):提供熱門數(shù)據(jù)、個性化推薦數(shù)據(jù)讓用戶選擇;如電商搜索無結(jié)果、購物車等頁面,推 薦用戶感興趣的商品,能有效地提升購買轉(zhuǎn)化率
操作引導(dǎo):提供相關(guān)操作的示意和引導(dǎo),讓用戶能刪除或替換內(nèi)容
完成指導(dǎo):送上任務(wù)達(dá)成的祝賀語,鞏固用戶的成就
細(xì)節(jié)備注:
文字和圖形一樣,也是一種情緒的載體,注意文字的魅力,加注重文字的情緒表達(dá),更易調(diào)動觀者的心。
避免命令的、指使的語氣,盡量使用輕快的、戲謔的、娛樂式的語氣,婉轉(zhuǎn)傳達(dá)用戶可以去做什么;
避免傻瓜式的敘述、空洞的鋪陳,描述詞風(fēng)格應(yīng)該匹配產(chǎn)品調(diào)性;
如果出錯了,提供一個解決辦法
反問開場,可以調(diào)動用戶情緒,嘗試錯愕驚訝、夸張的口吻,會使情感更生動
作者:木子淺談
藍(lán)藍(lán)設(shè)計(jì)( sillybuy.com )是一家專注而深入的界面設(shè)計(jì)公司,為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì) 、 圖標(biāo)定制 、 用戶體驗(yàn) 、交互設(shè)計(jì)、 網(wǎng)站建設(shè) 、平面設(shè)計(jì)服務(wù)、UI設(shè)計(jì)公司、界面設(shè)計(jì)公司、UI設(shè)計(jì)服務(wù)公司、數(shù)據(jù)可視化設(shè)計(jì)公司、UI交互設(shè)計(jì)公司、高端網(wǎng)站設(shè)計(jì)公司、UI咨詢、用戶體驗(yàn)公司、軟件界面設(shè)計(jì)公司
藍(lán)藍(lán)設(shè)計(jì)的小編 http://sillybuy.com