交互干貨,！幫你消滅「空狀態(tài)界面」的5個常用方法

淺草上 2016-09-05

展開全文

@Yeah秋強：在做設計的時候，常常會忽略的一個頁面狀態(tài)就是空狀態(tài),，如何消滅這個影響用戶體驗的頁面,？今天這篇好文，總結了存在空狀態(tài)界面的3個地方,，以及消滅空狀態(tài)的5個方法,，都是實用干貨，強烈建議閱讀,。

3個容易被人忽視界面設計：

引導頁：《騰訊實戰(zhàn)干貨,！怎么讓引導頁不再是無用小透明？》
彈框設計：《超全面,！騰訊設計師做了100個彈框后總結的設計經驗》
空狀態(tài)設計：《超多干貨,！什么樣的空狀態(tài)設計才能留住用戶？》

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

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

1. 用戶未進行操作

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

2. 用戶操作結果

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

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

3. 出現(xiàn)錯誤

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

對于空狀態(tài)出現(xiàn)的情況,，暫且討論到這里，下面談談如何消滅這些空狀態(tài),，提升用戶體驗,。總結一下,，主要有如下的幾個措施：①使用系統(tǒng)推薦項,；②使用操作指引；③使用緩存,；④情感化表達,；⑤提供新的任務。

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

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

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

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

2. 使用操作指引

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

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

操作指引有兩種方式,，一種是通過浮層來引導操作入口,，另一種是創(chuàng)建快捷入口。說文字比較蒼白,，直接看下面的配圖吧,。

△ 引導操作入口

△ 創(chuàng)建快捷入口

對于這兩種方法，各有利弊吧：創(chuàng)建快捷入口的引導性非常強,，用戶容易注意到,，操作也簡便；浮層指引的話引導性沒有快捷入口那么強,，不過勝在用戶教育好,，下次用戶就知道從這里產生內容了。相比較而言,，我會更加偏向浮層指引這種方式,。

3. 使用緩存

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

4. 情感化表達

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

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

5. 提供新的任務

前面的四種方法其實說到底，都是在彌補當前任務失敗造成的失落感,。也就是說,，我們的落腳點仍舊在當前的任務中。不過,，當當前的任務完全不可行的時候,，這時候就需要考慮新的方法了。比如,，提供給用戶新的任務,，讓他暫時忘記當前的任務，自然而然就不會有挫敗感了,。

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

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