起點課堂會員權益
職業體系課特權
線下行業大會特權
個人IP打造特權
30+門專項技能課
1300+專題課程
12場職場軟技能直播
12場求職輔導直播
12場專業技能直播
會員專屬社群
榮耀標識3種空狀態出現場景，5種消滅空狀態的技能教你玩轉空狀態
設計師在做設計的時候，常常會忽略的一個頁面狀態就是空狀態?？諣顟B，顧名思義就是空白的狀態，比如說：一個新聞的列表中沒有新聞，這個時候列表就是空的，用戶打開之后看到的就是白慘慘的一片。空狀態的用戶體驗非常差，就好比千辛萬苦經歷九九八十一難的唐僧師徒最后取到了一堆空白的佛經一樣；用戶在經歷了查找，在萬千的APP中選中了你，然后經過漫長的下載等待和安裝，最后你竟然給我一個空頁面？用戶只會想：Are you kidding me（你在逗我玩嗎）？所以隨之而來的，用戶當然頭也不回就走了。
當然，以上只是舉了一個例子，空狀態有可能出現在APP首次啟動時，但是卻不僅僅局限于此，有很多地方都有可能出現空狀態，一不小心就會放過這些空狀態，影響APP的用戶體驗。APP的空白狀態可能出現在如下的場景：用戶未進行操作、用戶操作結果和網絡出錯。
空狀態出現的場景
1.用戶未進行操作
在我一開始舉的例子中，用戶第一次打開APP時有可能會空狀態，特別是一些UGC應用。當然這種設計也很好理解，用戶第一次啟動，又是UGC應用，用戶什么操作也沒有，所以當然是空白的啦。只是，這種空白狀態看似合理，但是在合情上面卻值得商榷。而且，據我觀察，空狀態的出現不僅于此。有些APP在每次啟動的時候都會采用一個空白刷新的邏輯（詳細請看文章：無意發現的刷新類型區分），這時候也會出現一個空白的頁面。所以，在設計應用啟動時，需要關注一下有可能出現的空狀態。
2.用戶操作結果
第二種空狀態是一種用戶操作的結果。這種狀態常常出現在一個任務列表中的所有任務都處理完成的時候。比如垃圾郵件、廣告郵件列表，有些用戶會有清空這些郵件的習慣，清空了之后自然而然就會出現一個空狀態。其次就是，當用戶進行檢索或者篩選的時候，沒有符合的結果，這樣子沉陷出來就是空狀態。
與第一種情況不同的時，由于用戶操作形成的空狀態是無可避免的。不可避免的意思就是說，我們只能告訴用戶這是一個空狀態，除此之外，我們沒有其他的方式。而在啟動是出現的空狀態時，我們可以通過其他方式去掩蓋“這里有一個空狀態”的事實，具體我們下面再表。
3.出現錯誤
最后一種空狀態出現在異常流的時候。比如說，當網絡錯誤的時候，可能就會出現空白狀態。當然，原理也很簡單。本來是要從互聯網中加載一些東西，現在加載不了了，所以當然就是空狀態咯。當然，一般來說，出現錯誤的時候會有錯誤描述。只是，如果只有兩行空洞的文體告訴你除了問題，貌似用戶感受起來也不會太舒服吧。所以，如果只是兩三行的文字，我個人覺得這跟空白其實區別也不大。
對于空狀態出現的情況，暫且討論到這里，下面談談如何消滅這些空狀態，提升用戶體驗。
如何消滅空狀態
總結一下，主要有如下的幾個措施：
- 使用系統推薦項；
- 使用操作指引；
- 使用緩存；
- 情感化表達；
- 提供新的任務。
1.使用系統推薦項
既然空狀態如此影響用戶體驗，那么最直觀的想法當然是往空白界面填充一些東西，這樣就不是空狀態了。對于一些信息瀏覽頁面來說，這的確是一個非常簡便易行的方法。既然沒有東西，那么我們系統就推薦一些東西給用戶，這樣界面就不會空蕩蕩啦。所以說，這種方法非常適合在應用啟動時（并且是初次啟動時）使用，而且，這種方法其實現在已經非常流行了。
比如說：在除此打開Anyview時，系統在展示“書架”這個頁面，按理說，我沒有進行任何操作，這個界面當然是空的啦。不過既然空狀態如此不堪，那么Anyview就自動塞進去了一堆書。這樣就完美地解決了問題。不過塞什么東西進去是有講究的，通常是一些熱門的東西。至于Anyview，他會先讓我回答一些問題，在獲取了一些基本數據之后，它才給我推薦了這些書籍，這樣推薦的精準度也會高些?，F在的閱讀軟件基本都沿用了這種方法。
當然，在其他的瀏覽頁面，比如說lofter、花瓣等圖片社區，也會采用這種方式。所以，現在對于此類應用，空白界面越來越少見了。
2.使用操作指引
在有些場景下，的確是可以通過系統推薦項來達到無中生有的目的。比如說：在我的關注人的狀態中，可以插入系統推薦的狀態來以假亂真。但是，這種方法確實不是萬能的。
舉個例子：假設有一款圖片分享類的應用，然后有個頁面是“我的圖片”，如果在我從來沒有發布過圖片的時候，這個頁面理所應當就是空的。并且在這個時候，第一種方法顯然是不可行的。當然，空蕩蕩的界面有不好，所以此時可以通過操作指引來引導用戶產生內容。
這時候的邏輯是這樣子的：界面展示用戶產生的內容→用戶沒有產生內容→我們來指引用戶產生內容。這樣子即消滅了空頁面，又可以讓用戶產生內容，一舉兩得。而且，這種方法還可以解決一種問題：用戶不知道生產內容的入口在哪。所以，這么一看，這種方法簡直是一石三鳥。
操作指引有兩種方式，一種是通過浮層來引導操作入口，另一種是創建快捷入口。說文字比較蒼白，直接看下面的配圖吧。
對于這兩種方法，各有利弊吧：創建快捷入口的引導性非常強，用戶容易注意到，操作也簡便；浮層指引的話引導性沒有快捷入口那么強，不過勝在用戶教育好，下次用戶就知道從這里產生內容了。相比較而言，我會更加偏向浮層指引這種方式。
3.使用緩存
雖然我在無意發現的刷新類型區分中針對空白頁面刷新這種情況的出現做了一番解釋，但是我至始至終還是覺得這種方式體驗不太好。針對這種情況，使用緩存是一種非常直觀的方式。把之前的的內容存儲下來，在展示頁面的時候先展示緩存的內容，再加載新內容，這樣就非常簡單地把空狀態消滅了?，F在大多數的資訊瀏覽類的頁面都會采用這種方式，比如說朋友圈，網易新聞等等，以至于大家都習以為常了，反而忘了其實這也是消滅空狀態的一種方式。
4.情感化表達
當空白界面是用戶操作的結果時，我曾說過這里其實沒有太多的方法，我們只能老老實實地跟用戶說這里就是空白狀態。只是，在這樣一個追求用戶體驗的年代，大家也開始把這個提醒表達得更加生動形象一些。在這里會加入一些情感化的表達，而不僅僅只是冷冰冰的文字，比如加上俏皮的圖像，或者把文案寫得更加戲劇化一些。這些配圖在讓用戶明白當前的狀態的同時，往往也能引發用戶會心一笑，從而彌補空白頁面帶來的失落感甚至可以帶給用戶一些正面的情感。如下圖：
這是一個吃藥計劃的app，設置好之后，每天按照時間表來按時吃藥。當天計劃完成的時候，列表顯示為空，但是上面有個大大的笑臉，還加了一句話“今天的用藥計劃完成咯，明天再見吧”。不得不說，這種情感化的表達確實比空白狀態或者單純的幾句話要來的更加貼心。
這是一個出錯的頁面，圖案是一個流落荒島的場景，文案是“糟糕，連接掉線了。冷靜一下，生個火然后下拉刷新一下吧”。通過一種俏皮的圖案和文案，確實可以舒緩用戶掉線時的挫敗感。
更多的情感化表達的例子可以參考：Empty States 。
5.提供新的任務
前面的四種方法其實說到底，都是在彌補當前任務失敗造成的失落感。也就是說，我們的落腳點仍舊在當前的任務中。不過，當當前的任務完全不可行的時候，這時候就需要考慮新的方法了。比如，提供給用戶新的任務，讓他暫時忘記當前的任務，自然而然就不會有挫敗感了。
舉個例子吧，當在斷網的情況下用戶使用chrome瀏覽器瀏覽網頁的時候，界面會顯示一個小游戲。這是一個通過空格鍵操縱小恐龍躲避障礙的游戲，游戲雖小，但是趣味性十足。在瀏覽網頁失敗的時候，提供這么一個小游戲去分散用戶的注意力。不得不說，這確實是一個非常好的維度。
再舉個例子，當訪問騰訊系的網頁訪問失敗的時候，網頁除了顯示404狀態之外，還會顯示一個尋人啟事。把錯誤界面和公益結合在一起，不得不說，創意十足。既解決了空狀態的問題，又做了好事，一舉兩得。而且用戶可能可能被這個公益的舉動吸引了，然后就成功地轉移了這是一個404頁面的事實。
洋洋灑灑講了這么多，最后總結一下就是以上這張圖。記住空狀態可能出現的場景，當設計走到這個場景的時候留多一個心眼，然后按圖索驥即可。
#專欄作家#
妖葉秋，一年級交互設計師，人人都是產品經理專欄作家。做過ToC產品的交互設計，現在在嘗試ToB的業務。主攻交互，也懂點用研、視覺和產品的知識。愛生活、愛設計、愛讀書、愛總結，頭像下方是我的聯系方式，歡迎志同道合者與我交流。
本文原創發布于人人都是產品經理，未經許可，不得轉載。
- 目前還沒評論，等你發揮！
