前言

空狀態(tài)作為APP中不可或缺的一部分，有著舉足輕重的作用。當(dāng)新用戶第一次使用產(chǎn)品的時(shí)候空狀態(tài)的設(shè)計(jì)就顯得尤為重要，據(jù)相關(guān)調(diào)查顯示“平均下來(lái)，app在被下載之后的頭3天時(shí)間里，日活躍用戶(DAU)數(shù)量下降了77個(gè)百分點(diǎn)。30天內(nèi)，下降比例達(dá)到80%”。

“用戶會(huì)嘗試多個(gè)同類app，然后在接下來(lái)的3到7天內(nèi)決定其中的哪些不合適。對(duì)于’像樣的’app，一旦用戶決定保留超過(guò)7天，那么將會(huì)比較長(zhǎng)久的存留下去。成功的關(guān)鍵在于怎樣使產(chǎn)品在這3到7天當(dāng)中保持與用戶的良好互動(dòng)?！? Ankit Jain – Quettra。

當(dāng)然這并不都是空頁(yè)面的過(guò)錯(cuò)，但作為產(chǎn)品的一部分，空頁(yè)面對(duì)新用戶的影響程度可想而知。

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

空狀態(tài)出現(xiàn)的原因有很多種，最常見的原因有以下幾種：

    1、用戶主動(dòng)或被動(dòng)(幾率很小)清空頁(yè)面內(nèi)的所有數(shù)據(jù)

    2、新用戶初次使用產(chǎn)品并沒(méi)有對(duì)產(chǎn)品內(nèi)容進(jìn)行操作

    3、特殊場(chǎng)景下的產(chǎn)品錯(cuò)誤或者斷網(wǎng)等

什么是空狀態(tài)？

空狀態(tài)是對(duì)沒(méi)有數(shù)據(jù)頁(yè)面的補(bǔ)充，一種對(duì)零數(shù)據(jù)的設(shè)計(jì)形式，比如購(gòu)物車為空 、沒(méi)有關(guān)注的人以及話題、沒(méi)有收藏和喜歡等等這些頁(yè)面就是所謂的“空狀態(tài)”

空狀態(tài)的設(shè)計(jì)方法

在Goolge的Material Design指南中給出的一些空狀態(tài)的設(shè)計(jì)要求

使用圖片：

1、淡淡的，顏色素凈的，和背景色不造成沖突的

2、以活潑的方式傳達(dá)應(yīng)用的用途和潛能

文案需要遵循的規(guī)則：

1、文案?jìng)鬟_(dá)出有用的信息

2、在不需要操作的情況下，告訴用戶頁(yè)面的作用

空狀態(tài)常用的組合形式一般有：

1、提示性圖文+操作引導(dǎo)按鈕

2、提示性圖文

3、純說(shuō)明文字

空狀態(tài)的作用

1、教育用戶

對(duì)于初次體驗(yàn)產(chǎn)品的用戶，空狀態(tài)界面最大的作用在于教育和引導(dǎo)用戶，并幫助用戶快速了解功能明確當(dāng)前狀態(tài)以及怎樣解決當(dāng)前所處的問(wèn)題，通過(guò)什么樣的方式能夠獲取內(nèi)容，從而減少用戶的迷失感，提升產(chǎn)品的體驗(yàn)。

示例空狀態(tài)界面中，使用純文字作為空界面核心，意在描述頁(yè)面的功能或者信息，告訴用戶通過(guò)怎樣的方式才能夠獲取更多內(nèi)容以及當(dāng)前所處頁(yè)面的狀態(tài)，這里沒(méi)有應(yīng)用插圖+文字或者插圖的表現(xiàn)形式，可能是出于插圖并不能直觀的表達(dá)內(nèi)容的主旨雖然有趣但是在認(rèn)知上需要有一個(gè)思考的過(guò)程，另外，插圖+文字的形式對(duì)于文字的限制較高，文字過(guò)多可能會(huì)造成頁(yè)面臃腫，而單純的插圖可能缺乏更直接有力的解釋說(shuō)明需要用戶自行思考猜測(cè)，無(wú)形中增加了用戶的學(xué)習(xí)成本，這并不是產(chǎn)品想要的。所以大標(biāo)題加上說(shuō)明文字的設(shè)計(jì)形式更加直觀，同時(shí)也減少了用戶思考，有效的降低用戶的學(xué)習(xí)成本，提升產(chǎn)品的整體體驗(yàn)。

2、用戶引導(dǎo)

大多數(shù)空狀態(tài)界面都會(huì)告訴用戶為什么出現(xiàn)當(dāng)前狀況，但并沒(méi)有引導(dǎo)用戶下一步到底該怎么做，此時(shí)作為設(shè)計(jì)師應(yīng)該去考慮，什么樣的設(shè)計(jì)才能夠驅(qū)動(dòng)用戶去前進(jìn)，并且對(duì)產(chǎn)品留下深刻的記憶。

同樣示例空狀態(tài)界面利用純文字的表現(xiàn)形式，但不同的是在文字下方加了一個(gè)CAT按鈕，那么為什么要加這個(gè)CAT呢？究其原因是為了提高用戶對(duì)產(chǎn)品的參與度，放個(gè)項(xiàng)目的CAT可以有效的引導(dǎo)用戶去點(diǎn)擊并且發(fā)布照片或者視頻，極大程度的提高產(chǎn)品的易用性和可操作性。同時(shí)這種方式對(duì)于用戶來(lái)說(shuō)是一種鼓勵(lì)形式，促進(jìn)用戶點(diǎn)擊欲望，增加產(chǎn)品用戶量，對(duì)產(chǎn)品來(lái)說(shuō)是一種友好的設(shè)計(jì)手法。

3、取悅用戶

通過(guò)情感化設(shè)計(jì)，可以更快的展現(xiàn)產(chǎn)品價(jià)值和差異化。體現(xiàn)產(chǎn)品個(gè)性化的一面，個(gè)性化的主要目標(biāo)是不需要通過(guò)用戶的努力，便可以理解所提供的興趣內(nèi)容。

空狀態(tài)的可利用價(jià)值

Spotify的用戶體驗(yàn)專家Tamara Hilmes提醒設(shè)計(jì)師們時(shí)說(shuō)，空狀態(tài)是一個(gè)展示產(chǎn)品個(gè)性化的機(jī)會(huì)，因此，在進(jìn)行空狀態(tài)設(shè)計(jì)時(shí)，需要認(rèn)真考慮品牌和用戶的目標(biāo)和背景。

1、情感化表達(dá)產(chǎn)品差異化

空界面在某些時(shí)候是無(wú)法避免其存在的一種存在，但在信息爆炸的時(shí)代同質(zhì)化的產(chǎn)品越來(lái)越多，設(shè)計(jì)差異化是幾乎為零的存在，既然同類產(chǎn)品主內(nèi)容頁(yè)面差異化不明顯，那么，我門就可以在空狀態(tài)上面下一些功夫來(lái)做文章，以往的空狀態(tài)有的只是放了一些單純而又冰冷的文字作為空頁(yè)面的內(nèi)容，這樣就喪失了一次讓用戶記住產(chǎn)品的絕佳機(jī)會(huì)。此時(shí)，我們可以在空頁(yè)面里放一些有趣的插圖或者把文案寫的戲劇化一點(diǎn)，在能夠清晰的讓用戶理解當(dāng)前狀態(tài)的同時(shí)，給用戶帶來(lái)一絲快感，以此來(lái)彌補(bǔ)空數(shù)據(jù)的頁(yè)面給用戶帶來(lái)的負(fù)面情緒，與此同時(shí)，也讓用戶體會(huì)到產(chǎn)品的用心和差異化，增加用戶的產(chǎn)品品牌認(rèn)知和用戶體驗(yàn)。但在考慮情感化表達(dá)的同時(shí)也要注意空頁(yè)面對(duì)用戶的引導(dǎo)操作等。

2、個(gè)性化設(shè)計(jì)

例如：谷歌瀏覽器對(duì)于空頁(yè)面的處理手法是一個(gè)恐龍游戲，通過(guò)游戲的形式緩解用戶對(duì)于斷網(wǎng)等類似結(jié)果的負(fù)面情緒。展示品牌個(gè)性化的一面，給用戶留下深刻印象，即使在斷網(wǎng)的情況下也是一種“享受”。

總結(jié)：

1、空狀態(tài)頁(yè)面應(yīng)該簡(jiǎn)潔明了，目標(biāo)明確

2、通常是文案、插圖或者CTA按鈕（CTA全稱Call-To-Action，它是Web和App上的   關(guān)鍵UI元素，例如購(gòu)買、聯(lián)系、訂閱等等，其主要目的是引導(dǎo)用戶采取某些行動(dòng)，是頁(yè)面提升轉(zhuǎn)化。）

3、盡量減少空狀態(tài)頁(yè)面的存在，對(duì)用戶來(lái)說(shuō)它并不友好

藍(lán)藍(lán)設(shè)計(jì)( m.sillybuy.com )是一家專注而深入的界面設(shè)計(jì)公司，為期望卓越的國(guó)內(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ù)。