前言

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

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

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

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

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

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

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

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

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

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

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

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

使用圖片：

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

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

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

1、文案傳達(dá)出有用的信息

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

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

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

2、提示性圖文

3、純說明文字

空狀態(tài)的作用

1、教育用戶

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

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

2、用戶引導(dǎo)

大多數(shù)空狀態(tài)界面都會(huì)告訴用戶為什么出現(xiàn)當(dāng)前狀況，但并沒有引導(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ì)形式，促進(jìn)用戶點(diǎn)擊欲望，增加產(chǎn)品用戶量，對(duì)產(chǎn)品來說是一種友好的設(shè)計(jì)手法。

3、取悅用戶

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

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

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

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

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

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

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

總結(jié)：

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

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

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

藍(lán)藍(lán)設(shè)計(jì)( www.alimai.net )是一家專注而深入的界面設(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ù)。