在目前的大資料趨勢中,資料的大屏可視化成為大家所推崇的一種互動展示模式。如果我們能夠早一些了解和掌握這方面的技術,相信對我們的未來将會非常有幫助!
我們知道,通過報表工具實作大屏展示可以通過單張報表、多張報表 Dashboard 布局或者多張報表頁面布局等方式實作,那麼,如何能設計出優秀的 dashboard 呢?
下面是國外的著名的可視化專家 Stephen Few 在 2012 年舉辦的 Dashboard 圖表設計競賽中列出的關于優秀的 dashboard 應該具有的特征:
小編對這些特征進行了翻譯以供參考,如有不準确的請指正。根據上面的評分标準,你所做的大屏資料可視化圖表及格了嗎?
對于 dashboard 來說,如果需要完美的展現效果,是需要技術人員,UI 設計人員,以及業務人員協調工作完成的。而作為程式開發人員,如何在沒有美工的情況下,做出能上得了台面的 dashboard 效果呢?
上面的标準說得比較概括,下面介紹一下我使用報表工具實際做 dashboard 時所考慮的具體因素:
-
确定使用人群
了解使用人群,有助于把握好要顯示的 kpi 以及資料的邏輯分解
-
布局
人的閱讀習慣是從做到用從上到下的,而中間位置又是最能吸引關注的,是以重要内容應該放在最上面或者中間。如下圖,我們可以在這個頁面頂端直接展現重要的名額資訊,這種布局是目前衆多以營運人員為對象的報表系統最喜歡使用的結構,整體數字名額一目了然,可以讓閱讀者在幾秒内把握全局資料,是一種閱讀報表時間投入産出比很高的方式。
-
背景
在不同場景下,背景色為深色(藍,藍綠,黑)時投放到大屏的展現效果較好。同時,為了顯示的内容更加清晰,字的顔色應該反差較大,是以文字多為淺色。
另外,除了使用背景顔色外,還可以使用背景圖檔,加上這樣的深色調圖檔,不止酷炫,而且科技感十足。
-
配色
下面是從網上搜羅到的比較常用的配色方式:
具體的 RGB 值可以通過取色軟體擷取,網上這樣的資源有很多, QQ 軟體在截屏的時候也會顯示 RGB 的值,哈哈,這樣 QQ 軟體也能為我們取色所用了。
-
圖形化
通過使用 Echarts.js, G3,hicharts 這樣的圖形化技術,可以讓原來靜态的柱圖,線圖等圖表,更加生動地将資料顯示在使用者面前。
-
動态效果
完美的 Dashboard 具有的特性是使用者互動性,使用者互動性一般又展現在哪些效果上呢?
滾屏
關聯
定時重新整理顯示的時間
鑽取
-
細節美化
(1) 适當使用圖示
在标題、明細清單、圖表中加上圖示,不僅能形象直覺地展現某一區塊的主題,還有很好的裝飾作用。
下面是一個可供參考的圖示資源網站:
http://iconfont.cn/repositories/10(2)邊框線
使區塊明顯分隔,資料顯示更清晰。
(3) 标題
标題可以使主題顯得清晰,一個頁面中即使區塊分隔清晰、動态圖表再多,但如果沒有一個标題的話,那也不會是一個成功的 dbd,因為标題的缺失會降低可讀性。下面就是一個沒有标題的效果圖。
試想一下,如果各個區塊都加上标題,我們在看到這個頁面時,就不會茫然的尋找是否有應該關注的資料了。
希望以上的總結,可以在布局、配色、互動等方面幫助到你,相對高效地做出能讓上司滿意的高大上的 dashboard,為你的職場加分,加薪!除了上面列舉的方式,還可以在網上多看些大屏的圖檔,從模仿開始。我覺得設計這種東西,多看多積累,慢慢就會沉澱下屬于自己的方式方法了。
作者:shiguang
連結:
http://c.raqsoft.com.cn/article/1535420833071?r=IBelieve來源:乾學院
著作權歸作者所有。商業轉載請聯系作者獲得授權,非商業轉載請注明出處。