萬盛學電腦網

 萬盛學電腦網 >> 網頁制作 >> 交互設計 >> 教你如何打造優雅的初始狀態頁

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

copyright © 萬盛學電腦網 all rights reserved