關(guān)于Dashboard設計的總結(jié)

作為一個TOB產(chǎn)品的設計師,一定設計過儀表盤Dashboard)無論是哪一種數(shù)據(jù)產(chǎn)品,儀表盤(Dashboard)都是最核心的功能。他是用戶接觸數(shù)據(jù)的第一個頁面,相當于數(shù)據(jù)產(chǎn)品的門戶,擔負著提綱挈領,引導分析的重要職能,幫助用戶能夠快速判斷業(yè)務情況,支持他們做出決策并行動。概括的來說Dashboard的作用可以分為三大類,監(jiān)控、分析和概覽。

1.在監(jiān)控場景中,Dashboard主要為用戶集中提供便捷的關(guān)鍵指標實時監(jiān)測,及時告知異常狀態(tài),并引導用戶定位問題。

監(jiān)控場景

2.在分析場景中,Dashboard主要通過數(shù)據(jù)圖表,配合控件進行不同維度的數(shù)據(jù)分析。例如,用戶可以通過時間篩選控件過濾圖表上的數(shù)據(jù)范圍等。

分析場景

3.在復雜業(yè)務中,Dashboard還用于概覽場景,集中呈現(xiàn)業(yè)務分散的重點信息,用戶還可以通過提供的入口快速跳轉(zhuǎn)至相關(guān)模塊。

概覽場景

介紹完場景,接下來說下如何做好一個Dashboard的設計,我會分為兩個部分說下,設計制作之前需要考慮的與開始設計要做的。

首先設計之前

1.劃分用戶角色

對于不同行業(yè),不同業(yè)務,不同職位的人們來講,關(guān)注的內(nèi)容自然不一樣。所以首先需要清楚Dashboard的目標用戶是誰?一般會從業(yè)務線或崗位入手。不同業(yè)務線間,關(guān)注的核心指標自然不同,比如酒店管理系統(tǒng),酒店區(qū)域經(jīng)理關(guān)心的是區(qū)域酒店的經(jīng)營情況,酒店的店長又會關(guān)心自己酒店的營業(yè)額。管理層重在把握全局,而執(zhí)行層重在每個細節(jié)的執(zhí)行效果,關(guān)注的數(shù)據(jù)層級和指標也會有所差異。

劃分用戶角色

2.分析使用場景

思考用戶在什么場景下使用dashboard、使用頻率如何、是否有特殊使用場景。

一般來說主要的數(shù)據(jù)分析場景包括:實時監(jiān)控場景,指定主題分析場景,移動查詢場景,周日會匯報場景和大屏顯示場景等。

比如從實時監(jiān)控場景來講,Dashboard 會被分為實時和歷史兩種,兩種略有差異。實時側(cè)重于監(jiān)控,歷史側(cè)重于了解和分析。這兩種沒有明顯的分界,實時需要歷史的信息作為對比,來判斷當前的數(shù)據(jù)是否正常。而歷史也需要準實時的信息來更快地了解當前的情況。這兩種形態(tài)的Dashboard 對于數(shù)據(jù)產(chǎn)品來講都必不可少。

在比如移動場景考慮到屏幕等硬件條件的限制,則側(cè)重于通知和展示,不深入到分析部分。到具體產(chǎn)品設計上,提供最核心的數(shù)據(jù)查看和智能挖掘,不做過多的查詢功能和復雜的交互。同時,基于現(xiàn)有大部分人通過手機進行溝通,那么頁面或數(shù)據(jù)的分析也變得重要

移動場景

3.選定內(nèi)容

在了解用戶與場景后,接下來就要選擇到底要展示哪些內(nèi)容了。

例如我在做酒店管理系統(tǒng)的時候,首先明確了有哪些角色使用,比如店長、服務大使、工程管理等,其次是分析場景。店長關(guān)注酒店的客房入住率,每天的收益,但在交付日時他們不僅是只看數(shù)據(jù),還想得到的是對數(shù)據(jù)的分析,所以我們不只是做數(shù)據(jù)展示,還要做數(shù)據(jù)分析,還要分清他們關(guān)注的是趨勢,還是關(guān)注異常。需要突出收益趨勢與客房入住率異常的提示等等。

此外我要說對于專業(yè)的領域內(nèi)容主要還是由客戶方提供,因為對于專業(yè)的數(shù)據(jù)與角色他們要比我們更加了解。這里就需要我們有與客戶方溝通的能力了。設計師需要做的是去引導客戶方給出真正的需求內(nèi)容。

獲取內(nèi)容后,我們就要對內(nèi)容進行布局

4.內(nèi)容布局

在《Information Dashboard Design》一書中指出:“Dashboard內(nèi)容必須合理組織,從而反映信息的本質(zhì)和支持有效且有意義的監(jiān)控;信息不能隨便放置,也不能只是根據(jù)剩余空間來設定大小;相互關(guān)聯(lián)的項目應該放置在臨近的位置;重要的項目版面要大一些,這樣才能比相對次要的信息更加突出;有特定順序的項目,要以一種視覺上被關(guān)注的順序排列。”

以上是對需求分析的一些理論知識,

接下來第二部分開始實踐畫圖了(個人總結(jié))

1.梳理需求

我一般會將所有的需求列出來,然后對其進行排序,我會分為三中程度梳理

1.必要的[★]系統(tǒng)可以運行所需的最基本的功能。

2.有會很好的[-]可以增加亮點,但是不屬于核心服務的功能

3.不是必要的[x]沒有這個功能的情況下也能很好使用產(chǎn)品,雖然沒有必要的功能,但是最好也要記錄下來。

我一般會用筆記來記錄,電子文本的話我推薦可以使用Trello

2.對功能進行縮減

記錄的時候可能會發(fā)現(xiàn)有很必要的功能,這是就要對必要清單進行縮減,你可以對功能分階段,在產(chǎn)品初期更需要那些功能。對于TOB的產(chǎn)品功能固然重要,但在操作體驗上來說越簡單越好。現(xiàn)在不做,不代表未來不會有。在不斷迭代測試反饋中去優(yōu)化產(chǎn)品。是在設計的時候一直要堅持的。

所以要縮小列表的范圍,并確定哪些內(nèi)容需要始終可見并且可以隨時訪問,哪些可以隱藏或不那么突出的。

3.可定制的儀表板

有時,你會發(fā)現(xiàn),無論你多努力,一個Dashboard布局都不會適合每個用戶。在這些情況下,你可以讓用戶自己定制,下面有兩個例子可以參考。但是:定制并不是一個好的方案。設計出直觀的解決方案是設計師的工作,而不是用戶。

Wordpress

WordPress是定制Dashboard的一個很好的例子。可以通過拖放卡片來制定適合自己想要的儀表板。非常適合用于模塊需求優(yōu)先級不同又有多項任務的用戶。

WordPress

Panda

如果你可以輕松的將用戶分類,就可以參考與Panda類似的操作,將用戶分為不同的職業(yè)屬性,對內(nèi)容進行布置。Panda還提供了很多預先設置好的模板可以切換。這種設計非常適合自定義的體驗,用戶不需要花費時間手動更改所有內(nèi)容。如果用戶想進一步自定義,可以提供完全自定義體驗的選項。

Panda
Panda

4.開始設計頁面布局

經(jīng)過以上步驟,你已經(jīng)大致明確了自己要做的了,那就開始動手畫吧,我的習慣是現(xiàn)在紙上快速畫出布局。我會出最少3種以上的方案,不需要畫的多好,只要自己能看懂,并不斷的推翻改進。

要記住的一點是,我們并不是為了做出最好看的儀表板設計,而是做最有用。在設計的時候你會發(fā)現(xiàn)還有很多不了解的或是不確定的,就要去和客戶、產(chǎn)品溝通。

TOB的產(chǎn)品都會有Dashboard。花一些時間來玩這些應用程序,思考為什么這樣做,優(yōu)點與缺點,哪寫可以借鑒。

總結(jié)了一些設計Dashboard時要記住的幾點

1.像任何的UI工作一樣,在設計時始終假設自己是用戶去不提問推敲自己的設計。

2.不要用非必要的功能來填充儀表板。思考用戶需要知道的是什么,并確保用戶可以找到。

3.要考慮手機端的體驗。用戶可能需要在外出時檢查儀表板。

4.收集反饋并實際觀察用戶在使用儀表板時的行為。做好可用性測試

5.不要忘記空狀態(tài)。在儀表板上沒有數(shù)據(jù)時,它會是什么樣?將如何向用戶展示?

以上都是我在做Dashboard時的一些經(jīng)驗和心得,一些也是看一些文章學到與了解的,希望對大家有所幫助。

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
平臺聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點,簡書系信息發(fā)布平臺,僅提供信息存儲服務。
  • 序言:七十年代末,一起剝皮案震驚了整個濱河市,隨后出現(xiàn)的幾起案子,更是在濱河造成了極大的恐慌,老刑警劉巖,帶你破解...
    沈念sama閱讀 230,563評論 6 544
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件,死亡現(xiàn)場離奇詭異,居然都是意外死亡,警方通過查閱死者的電腦和手機,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 99,694評論 3 429
  • 文/潘曉璐 我一進店門,熙熙樓的掌柜王于貴愁眉苦臉地迎上來,“玉大人,你說我怎么就攤上這事。” “怎么了?”我有些...
    開封第一講書人閱讀 178,672評論 0 383
  • 文/不壞的土叔 我叫張陵,是天一觀的道長。 經(jīng)常有香客問我,道長,這世上最難降的妖魔是什么? 我笑而不...
    開封第一講書人閱讀 63,965評論 1 318
  • 正文 為了忘掉前任,我火速辦了婚禮,結(jié)果婚禮上,老公的妹妹穿的比我還像新娘。我一直安慰自己,他們只是感情好,可當我...
    茶點故事閱讀 72,690評論 6 413
  • 文/花漫 我一把揭開白布。 她就那樣靜靜地躺著,像睡著了一般。 火紅的嫁衣襯著肌膚如雪。 梳的紋絲不亂的頭發(fā)上,一...
    開封第一講書人閱讀 56,019評論 1 329
  • 那天,我揣著相機與錄音,去河邊找鬼。 笑死,一個胖子當著我的面吹牛,可吹牛的內(nèi)容都是我干的。 我是一名探鬼主播,決...
    沈念sama閱讀 44,013評論 3 449
  • 文/蒼蘭香墨 我猛地睜開眼,長吁一口氣:“原來是場噩夢啊……” “哼!你這毒婦竟也來了?” 一聲冷哼從身側(cè)響起,我...
    開封第一講書人閱讀 43,188評論 0 290
  • 序言:老撾萬榮一對情侶失蹤,失蹤者是張志新(化名)和其女友劉穎,沒想到半個月后,有當?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體,經(jīng)...
    沈念sama閱讀 49,718評論 1 336
  • 正文 獨居荒郊野嶺守林人離奇死亡,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點故事閱讀 41,438評論 3 360
  • 正文 我和宋清朗相戀三年,在試婚紗的時候發(fā)現(xiàn)自己被綠了。 大學時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片。...
    茶點故事閱讀 43,667評論 1 374
  • 序言:一個原本活蹦亂跳的男人離奇死亡,死狀恐怖,靈堂內(nèi)的尸體忽然破棺而出,到底是詐尸還是另有隱情,我是刑警寧澤,帶...
    沈念sama閱讀 39,149評論 5 365
  • 正文 年R本政府宣布,位于F島的核電站,受9級特大地震影響,放射性物質(zhì)發(fā)生泄漏。R本人自食惡果不足惜,卻給世界環(huán)境...
    茶點故事閱讀 44,845評論 3 351
  • 文/蒙蒙 一、第九天 我趴在偏房一處隱蔽的房頂上張望。 院中可真熱鬧,春花似錦、人聲如沸。這莊子的主人今日做“春日...
    開封第一講書人閱讀 35,252評論 0 28
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽。三九已至,卻和暖如春,著一層夾襖步出監(jiān)牢的瞬間,已是汗流浹背。 一陣腳步聲響...
    開封第一講書人閱讀 36,590評論 1 295
  • 我被黑心中介騙來泰國打工, 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留,地道東北人。 一個月前我還...
    沈念sama閱讀 52,384評論 3 400
  • 正文 我出身青樓,卻偏偏與公主長得像,于是被迫代替她去往敵國和親。 傳聞我的和親對象是個殘疾皇子,可洞房花燭夜當晚...
    茶點故事閱讀 48,635評論 2 380