小男孩‘自慰网亚洲一区二区,亚洲一级在线播放毛片,亚洲中文字幕av每天更新,黄aⅴ永久免费无码,91成人午夜在线精品,色网站免费在线观看,亚洲欧洲wwwww在线观看

分享

怎樣制作酷炫爽心的可視化dashboard ?

 Amarryk 2019-01-23

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

我們知道,通過報(bào)表工具實(shí)現(xiàn)大屏展示可以通過單張報(bào)表、多張報(bào)表 Dashboard 布局或者多張報(bào)表頁面布局等方式實(shí)現(xiàn),那么,如何能設(shè)計(jì)出優(yōu)秀的 dashboard 呢?

下面是國外的著名的可視化專家 Stephen Few 在 2012 年舉辦的 Dashboard 圖表設(shè)計(jì)競賽中列出的關(guān)于優(yōu)秀的 dashboard 應(yīng)該具有的特征:

怎樣制作酷炫爽心的可視化dashboard ?

這里我對這些特征進(jìn)行了翻譯以供參考,如有不準(zhǔn)確的請指正。

怎樣制作酷炫爽心的可視化dashboard ?

根據(jù)上面的評分標(biāo)準(zhǔn),你所做的大屏數(shù)據(jù)可視化圖表及格了嗎?

對于 dashboard 來說,如果需要完美的展現(xiàn)效果,是需要技術(shù)人員,UI 設(shè)計(jì)人員,以及業(yè)務(wù)人員協(xié)調(diào)工作完成的。而作為程序開發(fā)人員,如何在沒有美工的情況下,做出能上得了臺面的 dashboard 效果呢?

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

1. 確定使用人群

了解使用人群,有助于把握好要顯示的 kpi 以及數(shù)據(jù)的邏輯分解。大多數(shù)情況下,dashboard是給領(lǐng)導(dǎo)管理層看的,所以更多展示經(jīng)營層面的運(yùn)營指標(biāo)。

2. 布局

人的閱讀習(xí)慣是從做到用從上到下的,而中間位置又是最能吸引關(guān)注的,所以重要內(nèi)容應(yīng)該放在最上面或者中間。如下圖,我們可以在這個(gè)頁面頂端直接展現(xiàn)重要的指標(biāo)信息,這種布局是目前眾多以運(yùn)營人員為對象的報(bào)表系統(tǒng)最喜歡使用的結(jié)構(gòu),整體數(shù)字指標(biāo)一目了然,可以讓閱讀者在幾秒內(nèi)把握全局?jǐn)?shù)據(jù),是一種閱讀報(bào)表時(shí)間投入產(chǎn)出比很高的方式。

怎樣制作酷炫爽心的可視化dashboard ?

3. 背景

在不同場景下,背景色為深色(藍(lán),藍(lán)綠,黑)時(shí)投放到大屏的展現(xiàn)效果較好。同時(shí),為了顯示的內(nèi)容更加清晰,字的顏色應(yīng)該反差較大,因此文字多為淺色。

怎樣制作酷炫爽心的可視化dashboard ?

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

怎樣制作酷炫爽心的可視化dashboard ?

怎樣制作酷炫爽心的可視化dashboard ?

4. 配色

下面是從網(wǎng)上搜羅到的比較常用的配色方式:

怎樣制作酷炫爽心的可視化dashboard ?

FineReport也內(nèi)置了很好的顏色搭配:

怎樣制作酷炫爽心的可視化dashboard ?

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

怎樣制作酷炫爽心的可視化dashboard ?

5. 圖形化

通過使用 Echarts.js, G3,hicharts 這樣的圖形化技術(shù),可以讓原來靜態(tài)的柱圖,線圖等圖表,更加生動地將數(shù)據(jù)顯示在用戶面前。

6. 動態(tài)效果

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

滾屏

怎樣制作酷炫爽心的可視化dashboard ?

怎樣制作酷炫爽心的可視化dashboard ?

定時(shí)刷新

怎樣制作酷炫爽心的可視化dashboard ?

7. 細(xì)節(jié)美化

(1) 適當(dāng)使用圖標(biāo)

在標(biāo)題、明細(xì)列表、圖表中加上圖標(biāo),不僅能形象直觀地體現(xiàn)某一區(qū)塊的主題,還有很好的裝飾作用。

(2)邊框線

使區(qū)塊明顯分隔,數(shù)據(jù)顯示更清晰。

怎樣制作酷炫爽心的可視化dashboard ?

(3)標(biāo)題

標(biāo)題可以使主題顯得清晰,一個(gè)頁面中即使區(qū)塊分隔清晰、動態(tài)圖表再多,但如果沒有一個(gè)標(biāo)題的話,那也不會是一個(gè)成功的 dbd,因?yàn)闃?biāo)題的缺失會降低可讀性。下面就是一個(gè)沒有標(biāo)題的效果圖。

試想一下,如果各個(gè)區(qū)塊都加上標(biāo)題,我們在看到這個(gè)頁面時(shí),就不會茫然的尋找是否有應(yīng)該關(guān)注的數(shù)據(jù)了。

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

    本站是提供個(gè)人知識管理的網(wǎng)絡(luò)存儲空間,所有內(nèi)容均由用戶發(fā)布,不代表本站觀點(diǎn)。請注意甄別內(nèi)容中的聯(lián)系方式、誘導(dǎo)購買等信息,謹(jǐn)防詐騙。如發(fā)現(xiàn)有害或侵權(quán)內(nèi)容,請點(diǎn)擊一鍵舉報(bào)。
    轉(zhuǎn)藏 分享 獻(xiàn)花(0

    0條評論

    發(fā)表

    請遵守用戶 評論公約

    類似文章 更多