優雅的初始狀態頁

2 評論 14472 瀏覽 28 收藏 7 分鐘

在本文的開頭,一如既往的舉幾個例子,不過這次是反例,第一個例子是國內某個網絡監控軟件的儀表盤界面設計:

1

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

2

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

?3

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

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

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

4

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

不禁想到一個不太禮貌的故事,我們小時候學習《半夜雞叫》中的周扒皮鉆進了雞窩顧頭不顧DING……,有那么大致相同的意思。在大部分的情況下,產品經理和交互設計師都關心理想狀態設計,即正常情況下產品界面是什么樣子,所以在設計軟件的交互原型時,我們喜歡用比較合理的數據條數把界面設計的精美與看似可用,但是往往會忽略沒有數據或者數據非常多的情況,界面是否能夠承載原有的設計方式,而恰恰實際的軟件必須要考慮這些狀態。今天主要討論初始狀態頁面的設計,極多狀態會在后面的文章中單獨說明。

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

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

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

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

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

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

5

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

6

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

7

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

8

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

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

本文為作者朝陽陸(微信:yak1982)獨家投稿發布,轉載請注明來自人人都是產品經理并附帶本文鏈接

更多精彩內容,請關注人人都是產品經理微信公眾號或下載App
評論
評論請登錄
  1. teambition

    來自北京 回復
  2. 初始狀態頁非常重要,相當于兩個陌生人見面互相留給對方的第一印象,重要至極!會給用戶留下,哇,做的好用心啊,這種感覺??!

    來自北京 回復