在做設(shè)計(jì)的時(shí)候，常常會(huì)忽略的一個(gè)頁面狀態(tài)就是空狀態(tài)，如何消滅這個(gè)影響用戶體驗(yàn)的頁面？今天這篇好文，總結(jié)了存在空狀態(tài)界面的3個(gè)地方，以及消滅空狀態(tài)的5個(gè)方法，都是實(shí)用干貨，強(qiáng)烈建議閱讀。

成都創(chuàng)新互聯(lián)公司專注骨干網(wǎng)絡(luò)服務(wù)器租用十載，服務(wù)更有保障！服務(wù)器租用，成都電信服務(wù)器托管 成都服務(wù)器租用，成都服務(wù)器托管，骨干網(wǎng)絡(luò)帶寬，享受低延遲，高速訪問。靈活、實(shí)現(xiàn)低成本的共享或公網(wǎng)數(shù)據(jù)中心高速帶寬的專屬高性能服務(wù)器。

空狀態(tài)，顧名思義就是空白的狀態(tài)，比如說：一個(gè)新聞的列表中沒有新聞，這個(gè)時(shí)候列表就是空的，用戶打開之后看到的就是白慘慘的一片。空狀態(tài)的用戶體驗(yàn)非常差，就好比千辛萬苦經(jīng)歷九九八十一難的唐僧師徒較后取到了一堆空白的佛經(jīng)一樣，用戶在經(jīng)歷了查找，在萬千的APP中選中了你，然后經(jīng)過漫長(zhǎng)的下載等待和安裝，較后你竟然給我一個(gè)空頁面。用戶只會(huì)想：Areyoukiddingme（你在逗我玩嗎）？所以隨之而來的，用戶當(dāng)然頭也不回就走了。

當(dāng)然，以上只是舉了一個(gè)例子，空狀態(tài)有可能出現(xiàn)在APP*次啟動(dòng)時(shí)，但是卻不僅僅局限于此，有很多地方都有可能出現(xiàn)空狀態(tài)，一不小心就會(huì)放過這些空狀態(tài)，影響APP的用戶體驗(yàn)。APP的空白狀態(tài)可能出現(xiàn)在如下的場(chǎng)景：用戶未進(jìn)行操作、用戶操作結(jié)果和網(wǎng)絡(luò)出錯(cuò)。

1.用戶未進(jìn)行操作

在我一開始舉的例子中，用戶先進(jìn)次打開APP時(shí)有可能會(huì)空狀態(tài)，特別是一些UGC應(yīng)用。當(dāng)然這種設(shè)計(jì)也很好理解，用戶先進(jìn)次啟動(dòng)，又是UGC應(yīng)用，用戶什么操作也沒有，所以當(dāng)然是空白的啦。只是，這種空白狀態(tài)看似合理，但是在合情上面卻值得商榷。而且，據(jù)我觀察，空狀態(tài)的出現(xiàn)不僅于此。有些APP在每次啟動(dòng)的時(shí)候都會(huì)采用一個(gè)空白刷新的邏輯，這時(shí)候也會(huì)出現(xiàn)一個(gè)空白的頁面。所以，在設(shè)計(jì)應(yīng)用啟動(dòng)時(shí)，需要關(guān)注一下有可能出現(xiàn)的空狀態(tài)。

2.用戶操作結(jié)果

第二種空狀態(tài)是一種用戶操作的結(jié)果。這種狀態(tài)常常出現(xiàn)在一個(gè)任務(wù)列表中的所有任務(wù)都處理完成的時(shí)候。比如垃圾郵件、廣告郵件列表，有些用戶會(huì)有清空這些郵件的習(xí)慣，清空了之后自然而然就會(huì)出現(xiàn)一個(gè)空狀態(tài)。其次就是，當(dāng)用戶進(jìn)行檢索或者篩選的時(shí)候，沒有符合的結(jié)果，這樣子沉陷出來就是空狀態(tài)。

與先進(jìn)種情況不同的時(shí)，由于用戶操作形成的空狀態(tài)是無可避免的。不可避免的意思就是說，我們只能告訴用戶這是一個(gè)空狀態(tài)，除此之外，我們沒有其他的方式。而在啟動(dòng)是出現(xiàn)的空狀態(tài)時(shí)，我們可以通過其他方式去掩蓋“這里有一個(gè)空狀態(tài)”的事實(shí)，具體我們下面再表。

3.出現(xiàn)錯(cuò)誤

較后一種空狀態(tài)出現(xiàn)在異常流的時(shí)候。比如說，當(dāng)網(wǎng)絡(luò)錯(cuò)誤的時(shí)候，可能就會(huì)出現(xiàn)空白狀態(tài)。當(dāng)然，原理也很簡(jiǎn)單。本來是要從互聯(lián)網(wǎng)中加載一些東西，現(xiàn)在加載不了了，所以當(dāng)然就是空狀態(tài)咯。當(dāng)然，一般來說，出現(xiàn)錯(cuò)誤的時(shí)候會(huì)有錯(cuò)誤描述。只是，如果只有兩行空洞的文體告訴你除了問題，貌似用戶感受起來也不會(huì)太舒服吧。所以，如果只是兩三行的文字，我個(gè)人覺得這跟空白其實(shí)區(qū)別也不大。

對(duì)于空狀態(tài)出現(xiàn)的情況，暫且討論到這里，下面談?wù)勅绾蜗麥邕@些空狀態(tài)，提升用戶體驗(yàn)。總結(jié)一下，主要有如下的幾個(gè)措施：①使用系統(tǒng)推薦項(xiàng)；②使用操作指引；③使用緩存；④情感化表達(dá)；⑤提供新的任務(wù)。

1.使用系統(tǒng)推薦項(xiàng)

既然空狀態(tài)如此影響用戶體驗(yàn)，那么較直觀的想法當(dāng)然是往空白界面填充一些東西，這樣就不是空狀態(tài)了。對(duì)于一些信息瀏覽頁面來說，這的確是一個(gè)非常簡(jiǎn)便易行的方法。既然沒有東西，那么我們系統(tǒng)就推薦一些東西給用戶，這樣界面就不會(huì)空蕩蕩啦。所以說，這種方法非常適合在應(yīng)用啟動(dòng)時(shí)（并且是初次啟動(dòng)時(shí)）使用，而且，這種方法其實(shí)現(xiàn)在已經(jīng)非常流行了。

比如說：在除此打開Anyview時(shí)，系統(tǒng)在展示“書架”這個(gè)頁面，按理說，我沒有進(jìn)行任何操作，這個(gè)界面當(dāng)然是空的啦。不過既然空狀態(tài)如此不堪，那么Anyview就自動(dòng)塞進(jìn)去了一堆書。這樣就好地解決了問題。不過塞什么東西進(jìn)去是有講究的，通常是一些熱門的東西。至于Anyview，他會(huì)先讓我回答一些問題，在獲取了一些基本數(shù)據(jù)之后，它才給我推薦了這些書籍，這樣推薦的有效度也會(huì)高些?，F(xiàn)在的閱讀軟件基本都沿用了這種方法。

當(dāng)然，在其他的瀏覽頁面，比如說lofter、花瓣等圖片社區(qū)，也會(huì)采用這種方式。所以，現(xiàn)在對(duì)于此類應(yīng)用，空白界面越來越少見了。

2.使用操作指引

在有些場(chǎng)景下，的確是可以通過系統(tǒng)推薦項(xiàng)來達(dá)到無中生有的目的。比如說：在我的關(guān)注人的狀態(tài)中，可以插入系統(tǒng)推薦的狀態(tài)來以假亂真。但是，這種方法確實(shí)不是全能的。舉個(gè)例子，假設(shè)有一款圖片分享類的應(yīng)用，然后有個(gè)頁面是“我的圖片”，如果在我從來沒有發(fā)布過圖片的時(shí)候，這個(gè)頁面理所應(yīng)當(dāng)就是空的。并且在這個(gè)時(shí)候，先進(jìn)種方法顯然是不可行的。當(dāng)然，空蕩蕩的界面有不好，所以此時(shí)可以通過操作指引來引導(dǎo)用戶產(chǎn)生內(nèi)容。

這時(shí)候的邏輯是這樣子的：界面展示用戶產(chǎn)生的內(nèi)容→用戶沒有產(chǎn)生內(nèi)容→我們來指引用戶產(chǎn)生內(nèi)容。這樣子即消滅了空頁面，又可以讓用戶產(chǎn)生內(nèi)容，一舉兩得。而且，這種方法還可以解決一種問題：用戶不知道生產(chǎn)內(nèi)容的入口在哪。所以，這么一看，這種方法簡(jiǎn)直是一石三鳥。

3.使用緩存

把之前的的內(nèi)容存儲(chǔ)下來，在展示頁面的時(shí)候先展示緩存的內(nèi)容，再加載新內(nèi)容，這樣就非常簡(jiǎn)單地把空狀態(tài)消滅了?，F(xiàn)在大多數(shù)的資訊瀏覽類的頁面都會(huì)采用這種方式，比如說朋友圈，網(wǎng)易新聞等等，以至于大家都習(xí)以為常了，反而忘了其實(shí)這也是消滅空狀態(tài)的一種方式。

4.情感化表達(dá)

當(dāng)空白界面是用戶操作的結(jié)果時(shí)，我曾說過這里其實(shí)沒有太多的方法，我們只能老老實(shí)實(shí)地跟用戶說這里就是空白狀態(tài)。只是，在這樣一個(gè)追求用戶體驗(yàn)的年代，大家也開始把這個(gè)提醒表達(dá)得更加生動(dòng)形象一些。在這里會(huì)加入一些情感化的表達(dá)，而不僅僅只是冷冰冰的文字，比如加上俏皮的圖像，或者把文案寫得更加戲劇化一些。這些配圖在讓用戶明白當(dāng)前的狀態(tài)的同時(shí)，往往也能引發(fā)用戶會(huì)心一笑，從而彌補(bǔ)空白頁面帶來的失落感甚至可以帶給用戶一些正面的情感。

這是一個(gè)出錯(cuò)的頁面，圖案是一個(gè)流落荒島的場(chǎng)景，文案是“糟糕，連接掉線了。冷靜一下，生個(gè)火然后下拉刷新一下吧”。通過一種俏皮的圖案和文案，確實(shí)可以舒緩用戶掉線時(shí)的挫敗感。

5.提供新的任務(wù)

前面的四種方法其實(shí)說到底，都是在彌補(bǔ)當(dāng)前任務(wù)失敗造成的失落感。也就是說，我們的落腳點(diǎn)仍舊在當(dāng)前的任務(wù)中。不過，當(dāng)當(dāng)前的任務(wù)有效不可行的時(shí)候，這時(shí)候就需要考慮新的方法了。比如，提供給用戶新的任務(wù)，讓他暫時(shí)忘記當(dāng)前的任務(wù)，自然而然就不會(huì)有挫敗感了。

舉個(gè)例子吧，當(dāng)在斷網(wǎng)的情況下用戶使用chrome瀏覽器瀏覽網(wǎng)頁的時(shí)候，界面會(huì)顯示一個(gè)小游戲。這是一個(gè)通過空格鍵操縱小恐龍躲避障礙的游戲，游戲雖小，但是趣味性十足。在瀏覽網(wǎng)頁失敗的時(shí)候，提供這么一個(gè)小游戲去分散用戶的注意力。不得不說，這確實(shí)是一個(gè)非常好的維度。

再舉個(gè)例子，當(dāng)訪問騰訊系的網(wǎng)頁訪問失敗的時(shí)候，網(wǎng)頁除了顯示404狀態(tài)之外，還會(huì)顯示一個(gè)尋人啟事。把錯(cuò)誤界面和公益結(jié)合在一起，不得不說，創(chuàng)意十足。既解決了空狀態(tài)的問題，又做了好事，一舉兩得。而且用戶可能可能被這個(gè)公益的舉動(dòng)吸引了，然后就成功地轉(zhuǎn)移了這是一個(gè)404頁面的事實(shí)。

文章題目：交互干貨！消滅網(wǎng)站「空狀態(tài)界面」的常用方法
當(dāng)前網(wǎng)址：http://weahome.cn/article/scpjsg.html