首页
/
每日頭條
/
圖文
/
dashboard産品設計
dashboard産品設計
更新时间:2024-10-03 16:39:44

在目前的大數據趨勢中,數據的大屏可視化成為大家所推崇的一種互動展示模式。如果我們能夠早一些了解和掌握這方面的技術,相信對我們的未來将會非常有幫助!

我們知道,通過報表工具實現大屏展示可以通過單張報表、多張報表 dashboard 布局或者多張報表頁面布局等方式實現,那麼,如何能設計出優秀的 dashboard 呢?

下面是國外的著名的可視化專家 Stephen Few 在 2012 年舉辦的 Dashboard 圖表設計競賽中列出的關于優秀的 dashboard 應該具有的特征:

dashboard産品設計(怎樣制作酷炫爽心的可視化dashboard)1

這裡我對這些特征進行了翻譯以供參考,如有不準确的請指正。

dashboard産品設計(怎樣制作酷炫爽心的可視化dashboard)2

根據上面的評分标準,你所做的大屏數據可視化圖表及格了嗎?

對于 dashboard 來說,如果需要完美的展現效果,是需要技術人員,UI 設計人員,以及業務人員協調工作完成的。而作為程序開發人員,如何在沒有美工的情況下,做出能上得了台面的 dashboard 效果呢?

上面的标準說得比較概括,下面介紹一下我使用報表工具FineReport實際做 dashboard 時所考慮的具體因素。掌握FineReport制作dashboard的技巧,基本上就掌握了制作大屏的軟技能,剩下的就是性能、硬件等問題了。

1. 确定使用人群

了解使用人群,有助于把握好要顯示的 kpi 以及數據的邏輯分解。大多數情況下,dashboard是給領導管理層看的,所以更多展示經營層面的運營指标。

2. 布局

人的閱讀習慣是從做到用從上到下的,而中間位置又是最能吸引關注的,所以重要内容應該放在最上面或者中間。如下圖,我們可以在這個頁面頂端直接展現重要的指标信息,這種布局是目前衆多以運營人員為對象的報表系統最喜歡使用的結構,整體數字指标一目了然,可以讓閱讀者在幾秒内把握全局數據,是一種閱讀報表時間投入産出比很高的方式。

dashboard産品設計(怎樣制作酷炫爽心的可視化dashboard)3

3. 背景

在不同場景下,背景色為深色(藍,藍綠,黑)時投放到大屏的展現效果較好。同時,為了顯示的内容更加清晰,字的顔色應該反差較大,因此文字多為淺色。

dashboard産品設計(怎樣制作酷炫爽心的可視化dashboard)4

另外,除了使用背景顔色外,還可以使用背景圖片,加上這樣的深色調圖片,不止酷炫,而且科技感十足。

dashboard産品設計(怎樣制作酷炫爽心的可視化dashboard)5

dashboard産品設計(怎樣制作酷炫爽心的可視化dashboard)6

4. 配色

下面是從網上搜羅到的比較常用的配色方式:

dashboard産品設計(怎樣制作酷炫爽心的可視化dashboard)7

FineReport也内置了很好的顔色搭配:

dashboard産品設計(怎樣制作酷炫爽心的可視化dashboard)8

具體的 RGB 值可以通過取色軟件獲取,網上這樣的資源有很多, 聊天軟件在截屏的時候也會顯示 RGB 的值,哈哈。

dashboard産品設計(怎樣制作酷炫爽心的可視化dashboard)9

5. 圖形化

通過使用 Echarts.js, G3,hicharts 這樣的圖形化技術,可以讓原來靜态的柱圖,線圖等圖表,更加生動地将數據顯示在用戶面前。

6. 動态效果

完美的 Dashboard 具有的特性是用戶交互性,用戶交互性一般又體現在哪些效果上呢?

滾屏

dashboard産品設計(怎樣制作酷炫爽心的可視化dashboard)10

dashboard産品設計(怎樣制作酷炫爽心的可視化dashboard)11

定時刷新

dashboard産品設計(怎樣制作酷炫爽心的可視化dashboard)12

7. 細節美化

(1) 适當使用圖标

在标題、明細列表、圖表中加上圖标,不僅能形象直觀地體現某一區塊的主題,還有很好的裝飾作用。

(2)邊框線

使區塊明顯分隔,數據顯示更清晰。

dashboard産品設計(怎樣制作酷炫爽心的可視化dashboard)13

(3)标題

标題可以使主題顯得清晰,一個頁面中即使區塊分隔清晰、動态圖表再多,但如果沒有一個标題的話,那也不會是一個成功的 dbd,因為标題的缺失會降低可讀性。下面就是一個沒有标題的效果圖。

試想一下,如果各個區塊都加上标題,我們在看到這個頁面時,就不會茫然的尋找是否有應該關注的數據了。

希望以上的總結,可以在布局、配色、交互等方面幫助到你,相對高效地做出能讓領導滿意的高大上的 dashboard,為你的職場加分,加薪!除了上面列舉的方式,還可以在網上多看些大屏的圖片,從模仿開始。我覺得設計這種東西,多看多積累,慢慢就會沉澱下屬于自己的方式方法了。

,
Comments
Welcome to tft每日頭條 comments! Please keep conversations courteous and on-topic. To fosterproductive and respectful conversations, you may see comments from our Community Managers.
Sign up to post
Sort by
Show More Comments
推荐阅读
家庭收入效用
家庭收入效用
按照我國家庭收入劃分标準,您在哪個位置呢?年收入三到六萬在貧困位置,六萬到十五萬屬于窮人,十五萬到三十萬為小康,年收入三十萬到五十萬算中産,五十萬到一百萬年收入進入高産水平,一百萬到八百萬僅僅達到小富,中富就需八百萬至一千五百萬,豪富和巨富...
2024-10-03
服裝尾貨怎麼進貨
服裝尾貨怎麼進貨
服裝尾貨怎麼進貨?一個初學者,第一次到市場批發進貨,非常容易被欺騙進到天價僞劣的一手貨源,得不償失因而在拿貨的那時候,有關一手貨源的每一處關鍵點,必須耐着脾氣,順藤摸瓜向銷售商老總資詢掌握清晰提出問題一:什麼叫尾貨服裝?,我來為大家講解一下...
2024-10-03
雨林裡的最美夕陽紅
雨林裡的最美夕陽紅
浪漫夕陽作賦吟詩喜欲狂,漫遊韻海笑天郎。大開腦洞精神爽,小試鋒刀品味長。達意抒情香筆底,釋懷暢想遠帆揚。朝晖映日舊城事,晚照斜陽新域章。除夕随感秃增歲月畫年輪,已逝時光趣味尋。短暫團圓新春日,長河浩蕩俗古今。五千文化魂如故,百載人生夢斷魂。...
2024-10-03
到底要不要堅持做獵頭
到底要不要堅持做獵頭
到底要不要堅持做獵頭?根據2021年某網站發布的全國獵頭公司業績數據,可以将獵頭的收入和年度回款分成五個等級節點:,今天小編就來說說關于到底要不要堅持做獵頭?下面更多詳細答案一起來看看吧!到底要不要堅持做獵頭根據2021年某網站發布的全國獵...
2024-10-03
保質期的真正含義
保質期的真正含義
上次小區改造自來水管,完工時,我送給工人一大瓶未開封的果粒橙,聊表謝意。過了一會,那個工人拿着那瓶果粒橙回來了,說:“阿姨,這瓶飲料過期了。”尴尬之餘,我忙細看瓶身上印的保質期,果然,半個月前就過期了。從小,我就被大人稱贊“不饞”,成年後也...
2024-10-03
Copyright 2023-2024 - www.tftnews.com All Rights Reserved