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

來源:互聯網
上載者:User

 

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

  再來一個該產品詳細資料的展示介面:

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

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

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

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

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

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

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

  1、告知:告訴使用者這個頁面還沒有資料,需要使用者來建立或者添加;

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

  3、模板:預設給出資料範本,讓使用者理解已有情況,基於此快速入門;

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

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

  項目的頁面設計也是如此,如下介面中給使用者解釋了什麼是項目、項目能協助使用者做什麼進而引導使用者建立一個項目。

  126郵箱的待辦郵件介面,在沒有設定待辦郵件時,給使用者提示以及相關的協助引導,如下介面設計。

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

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

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

相關文章

Cloud Intelligence Leading the Digital Future

Alibaba Cloud ACtivate Online Conference, Nov. 20th & 21st, 2019 (UTC+08)

Register Now >

Starter Package

SSD Cloud server and data transfer for only $2.50 a month

Get Started >

Alibaba Cloud Free Trial

Learn and experience the power of Alibaba Cloud with a free trial worth $300-1200 USD

Learn more >

聯繫我們

該頁面正文內容均來源於網絡整理,並不代表阿里雲官方的觀點,該頁面所提到的產品和服務也與阿里云無關,如果該頁面內容對您造成了困擾,歡迎寫郵件給我們,收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容,歡迎發送郵件至: info-contact@alibabacloud.com 進行舉報並提供相關證據,工作人員會在 5 個工作天內聯絡您,一經查實,本站將立刻刪除涉嫌侵權內容。