收藏|“空狀態”頁麵設計的幾種思路

在設計師們進行用戶界麵、交互以及用戶體驗等設計的時候，時常會存在各式各樣類型不同的界麵，而“空狀態”就屬於其中的一種。而在不同的界麵設計中，有著不一樣的設計方法，那麼今天就跟著小編一起來了解一下“空狀態”頁麵要如何進行設計呢？

空狀態，或零數據狀態——比如網站購物車為空時、頁碼沒有下一頁、某頁麵出錯或不存在等等這些都可以稱為“空狀態”——是產品設計中經常碰到的頁麵類型。

空狀態在引導性、愉悅性和保留用戶等方麵的潛質，對於產品體驗在細節當中的成敗有著不可忽視的作用。

空狀態的觸發情況一般有以下幾種情況：新用戶初體驗（缺乏數據）、操作完成（典型如清空垃圾桶）、錯誤狀態。

下麵我們根據不同的情況來分析如何更好的設計空狀態頁麵。

一、新用戶初體驗

據專注於個性化移動體驗的Quettra基於1.25億移動設備的調查數據顯示，App從下載開始截至72小時，日活躍用戶數（DAU）會下降77%。用戶的天性是變化莫測的，尤其是在與產品初次互動的短暫時間內，而初體驗中，用戶接觸最多的，恰恰是空狀態頁麵。

當還沒有提交任何資料時的空白畫麵，通常會顯示如「你還沒有任何照片」「你還沒有追蹤的朋友」等，但這看似是個很直覺的頁麵設計，其實是個能夠與使用者對話的重要機會，是個能夠誘導使用者跨出第一步，並且開始著迷於你有趣服務或程序的關鍵。

原則1：What 

首先我們必須要清楚地告訴使用者，這個頁麵所會出現的內容信息是什麼。

常常可以看到隻顯示個「空白」或是「沒有數據」這種沒有注明內容名稱的方式那到底是沒有什麼信息？什麼東西是空的呢？

可能是朋友、照片、或是旅遊記錄，但用戶無法馬上了解到此頁麵的信息形態我們應該要清楚的提示內容的形態。

引導式的設計形式：

透過清楚的形態名稱及描述，再加上圖示，快速明白我們將要創建的內容是什麼

更好的設計形式：

除了文字與圖標解說以外，還有一種快速讓用戶了解信息內容的方式——就是讓他們直接體驗真實的信息內容，或是一些範例信息，而不需要憑空想象。

原則2：Why 

在了解信息內容的形態以後，最好能提供使用者一個渴望提交內容的衝動或誘因，告訴他們使用了你的服務以後可以得到些什麼？

例如你因此可以認識更多的人、提交了標簽以後你可以更輕鬆的找到你要的信息、或是你可以與客戶之間的往來更方便而節省時間與成本等。

讓使用者產生目的性以及願景

情緒性的言語表達或是圖示，發揮的作用不可小覷。

影響用戶行為和結果的促發行為往往不易察覺卻至關重要。

原則3：How 

在用戶短暫且非理性的評估時間中留下第一印象後，能否真正成功，關鍵是能不能通過空狀態引導用戶進入實際操作流程中去。

可以把空狀態設想為某種landing頁麵，保持最小化設計原則的同時，構造場景氛圍，使用一目了然的視覺元素引導用戶進入操作流程。

例如dribbble的空狀態頁麵，藍色按鈕的引導設計。

Apple music的開啟引導頁的空頁麵引導性設計。

二、操作完成

操作完成的空狀態，一般分為兩種：

一種為用戶主動操作，例如刪除或清空

一種為係統自動操作，例如回收站的自動清理功能

主動操作：用戶主動操作或刪除通常都帶有某種目的性，隻需給予結果性的反饋即可。

Dropbox的操作完成空狀態頁麵設計，不同的顏色和圖標區分不同的操作結果

當然也不排除用戶手抖誤刪的小概率情況。

QQ音樂支持恢複一個月內刪除的歌單和音樂，很用心地解決了這個小概率事件。

越是概率小，對用戶產生的結果也越可能嚴重，試想當你一個手抖不小心把經營多時的歌單給刪了，看到此功能必會有種大難不死必有後福的快感。

係統操作：係統操作通常具有周期性，應在明顯位置提示，且操作完成後應有結果反饋

iOS照片應用的最近刪除文件夾，在頂部明顯位置提示係統操作的周期性，為用戶提供緩衝餘地

操作完成後的結果反饋及周期提醒

 三、錯誤狀態

錯誤的空狀態，同樣分為兩種：

一種為係統錯誤，例如網絡未連接、係統維護

一種為用戶操作失誤，例如上傳格式錯誤，頁麵打開錯誤（404）

係統錯誤：在這種情況下提供一些更有用的或是更具親和力的內容，而不是一堆醜陋的出錯信息。讓用戶在非常規用例中看到你的設計，他們就會感知到當前的狀況是在可預計範圍之內的，從而放鬆下來。

設計過的錯誤信息樣式，以及錯誤原因和友好的用戶糾錯提示

Ie瀏覽器非常不友好的錯誤頁麵。

還有更過分的：

這個頁麵是不少人的痛苦回憶。

當然，在win8之後，這個頁麵也進行了更加有好的設計形式：

現在app普遍采用更加優秀的設計形式，即用本地資源或緩存數據替換錯誤頁麵：

用戶錯誤：在使用產品過程中出現錯誤，用戶會出現明顯的挫敗感和消極情緒。

這種情況下，最不該做的就是通過大段晦澀的文字以及生硬的視覺風格來加劇用戶的焦慮感，而是通過設計來弱化用戶的負麵情緒，盡量挽回用戶體驗。千萬別強調用戶的錯誤，用戶會出錯，是因為體驗沒做好。

通過幽默的插圖或icon，配合詼諧的文案，緩解消極體驗。

當然，能給用戶一個發泄的方式會更好，例如下麵這個404：

由此可見，以用戶體驗為核心來設計不同的空狀態頁麵，不僅能更好的降低用戶使用成本，更能增加用戶粘度，所以設計師們，想要做好產品，這個“空狀態”頁麵不可不重視啊。