教你如何打造優雅的初始狀態頁

 

　　@產品經理朝陽陸 ：在本文的開頭，一如既往的舉幾個例子，不過這次是反例，第一個例子是國內某個網絡監控軟件的儀表盤界面設計：

　　再來一個該產品詳細數據的展示界面：

　　接下來看另外一個OA系統的產品類別頁面：

　　以上的反例已經足夠說明一個問題——初始狀態頁面需要設計。

　　實際上本文的編寫有個來源，前些日子在”產品經理實戰訓練營”的一個微信分享裡有篇文章叫《用戶界面設計原則》(原文作者不詳，應該是一篇翻譯的文章)，其中第16條原則提到關於初始狀態頁面的設計問題，以下是原文描述：” 第一次使用界面的體驗是非常重要的，而這卻常常被設計師忽略。為了讓用戶更快的上手，最好在設計的時候保持初始狀態，也就是還沒開始使用過的狀態。這個狀態不是一張空白的畫布……它應該要提供一個方向和指引，令用戶迅速進入狀況。在初始狀態下的互動過程中可能會存在一些摩擦，一旦用戶了解了規則，那將會有很高的機會獲得成功。”

　　個人認為，所謂初始狀態頁，實際上是極限狀態頁面設計中的一種，極限狀態頁面包括了初始頁面與極多狀態頁面，如下圖所示：

　　初始狀態就是剛剛開始使用的界面，極多頁面我們可以理解為當數據量非常大的時候，整個界面的效果，兩者都非常重要。

　　在大部分的情況下，產品經理和交互設計師都關心理想狀態設計，即正常情況下產品界面是什麼樣子，所以在設計軟件的交互原型時，我們喜歡用比較合理的數據條數把界面設計的精美與看似可用，但是往往會忽略沒有數據或者數據非常多的情況，界面是否能夠承載原有的設計方式，而恰恰實際的軟件必須要考慮這些狀態。今天主要討論初始狀態頁面的設計，極多狀態會在後面的文章中單獨說明。

　　回到問題的出發點，初始狀態頁面要解決什麼問題?個人列出了幾點：

　　1、告知：告訴用戶這個頁面還沒有數據，需要用戶來創建或者添加;

　　2、引導：通過明確的步驟性的操作引導用戶如何應用系統;

　　3、模板：默認給出數據模板，讓用戶理解已有情況，基於此快速入門;

　　較好的初始狀態頁面設計應該能涵蓋這三個點中的兩個以上(不好的設計只做到了告知甚至沒有)，下面我們一起來看看比較優秀的界面設計：

　　如下是國內有名的企業級在線協同工作軟件tita的”計劃”初始頁面，如果傳統的設計，可能只會給出一個提示叫”當前沒有計劃，請創建”。而tita的設計師比較巧妙的進行了告知與引導——把相關的功能用類似講故事的方式進行了說明，讓剛剛進來的用戶能對”如何做計劃”有個大致的理解，另外設計師講故事的方式也比較活潑，讓人能夠很好的入門。

　　項目的頁面設計也是如此，如下界面中給用戶解釋了什麼是項目、項目能幫助用戶做什麼進而引導用戶新建一個項目。

　　126郵箱的待辦郵件界面，在沒有設置待辦郵件時，給用戶提示以及相關的幫助引導，如下界面設計。

　　國內發展勢頭非常迅猛的另一個新生代企業級協同服務teambition，它的項目初始狀態頁非常有趣，可謂是另辟路徑。我們注意下圖中有浮動層的設計，比如”今日動態”這裡，浮動層上用圖標和文字提示項目動態的幫助及使用引導，而半透明的浮動層下顯示了如果已經添加了任務的效果，預先給用戶可期待結果。

　　以上是個人發現的比較好的一些初始狀態頁面設計的例子，不管如何設計，問題的本源是要考慮用戶最開始的學習成本如何降低，只有讓用戶快速接受，產品才不會被容易拋棄——變得更有價值。

　　最後強調一個概念，初始狀態頁絕不等於空白頁面，相信看了這篇文章，這點大家在後面的設計中能有所體會;