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

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

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

1. 用戶未進行操作

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

2. 使用操作指引

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

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

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

△ 引導操作入口

△ 創建快捷入口

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

3. 使用緩存

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

4. 情感化表達

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

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

5. 提供新的任務

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

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

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

△ 騰訊404頁面

洋洋灑灑講了這麼多，最後總結一下就是下面這張圖。記住空狀态可能出現的場景，當設計走到這個場景的時候留多一個心眼，然後按圖索骥即可。

請私信我回複“666”，為嚴哥打Call~，還有更多驚喜哦~

.............................................................

UI嚴選—越努力，越幸運

更多精彩资讯请关注tft每日頭條，我们将持续为您更新最新资讯!