欧美成人精品手机在线观看_69视频国产_动漫精品第一页_日韩中文字幕网 - 日本欧美一区二区

LOGO OA教程 ERP教程 模切知識交流 PMS教程 CRM教程 開發文檔 其他文檔  
 
網站管理員

超大屏幕數據圖形報表展現設計思路和方法探討

admin
2023年7月19日 10:20 本文熱度 1023

在2020年之前,每逢618和雙十一,天貓都會在整點時刻進行直播,揭曉銷售成績。在可怕的戰績背后,不知道大家是否留意到背后展示的數據大屏,簡直酷炫吊炸天。

圖片源自網絡

而所謂大屏,顧名思義就是一個很大很大的屏。

舉個例子,Dashboard(儀表板)可能大家有所了解,就是將一些業務的關鍵指標以數據可視化的方式展示。而大屏就是將Dashboard展示到一塊或多塊LED大屏上。經常用在公司的展覽中心、老板的辦公室,還有城市交通管控中心、交易大廳等等。一般怎么清楚怎么來,怎么酷炫怎么搞。

譬如《人民的名義里》就有這樣一幕:

也就在前幾天,一位番薯在我們社區發了個生產大屏的帖子,自己做了個大屏的模板,引發了很大反響。

所以本文就來拋磚引玉,圍繞如何制作的美而實用的大屏,講講我們的經驗。

01

如何制作可視化大屏?

大家一定都好奇,類似的大屏是怎么做出來的?
制作可視化大屏,一般有這么幾種方案:

  1. 傳統制作方法:寫代碼調用數據和圖表庫,比如寫JS+Echarts ;
  2. 省時省力方法:用現成的數據可視化工具

前者簡單直接,直接寫代碼就完事。但對于大部分人來說門檻較高,維護成本也很大。如果涉及大量的動態可視化,大數據量,沒有底層技術,性能就會大打折扣。而且投到不同尺寸的屏幕,調試起來非常麻煩。所以這種方案常常是定制。
后者則簡單不少,直接用數據可視化工具,可以快速設計樣式呈現效果、自適應不同大小的屏幕、而且還可以實時刷新數據。

02

可視化大屏如何設計?

無論技術上采用那種方式,要想大屏做得漂亮,都要一番精心的視覺設

1、布局排版

大屏首先是要服務于業務,讓業務指標和數據合理的展現。

由于往往展現的是一個企業全局的業務,一般分為主要指標和次要指標兩個層次,主要指標反映核心業務,次要指標用于進一步闡述分析。所以在制作時給予不一樣的側重。

這里推薦5種常見的版式。

上面幾個版式不是金科定律,只是通常推薦的主次分布版式,能讓信息一目了然。實際項目中,不一定使用主次分布,也可以使用平均分布,或者可以二者結合進行適當調整。比如下圖所示,指標很多很多,存在多個層級的,就根據上面所說的基本原則進行一些微調,效果會很好。

附上幾個典型的主次分布的大屏效果給大家看下,是不是看上去更加清晰呢,不會讓人有找不到重點的感覺。


2、配色

合理的布局能讓業務內容更富有層次,合理的配色能讓觀看者更舒適。配色的學問很復雜,這里就先講一講背景色。背景色又分為整體背景以及單個元素的背景,無論是哪一個,都遵從兩點基本原則:深色調&一致性

之所以選擇深色調,主要是為了避免視覺刺激。參加過大型會議的童鞋應該有感受,如果演示PPT是淺色系的,投放到大屏上后會比較刺眼,尤其是前排童鞋簡直在遭罪受。

下圖是兩個駕駛艙頁面深淺色對比,實際效果可能看圖片也許看不出來,需要投放到實際的LED屏幕檢驗測試。

整體背景深色系,可選的余地還是很多的,但是配起來能讓多數人都覺得好看的還是以深藍色系為主,如下所示是幾個推薦的配色方案。這幾個深色配色,是我們調研下來最常用的背景設置。大家如果去網上搜羅好看的大屏或者駕駛艙頁面效果,很多都是這幾個色系里頭的。

當然,背景不一定要用顏色的,也可以用圖片。圖片的使用依舊遵從整體深色的原則,同時搭配其他一些現實特性可以讓整體看著更有科技感。推薦使用一些帶有星空、條紋、漸變線、點綴效果之類的圖片。

單個元素的背景,首先是要和整體背景色系保持一致性,避免突兀。另外一個小技巧,就是透明度的使用。根據實際項目經驗,這里極其推薦大家為單個的組件元素搭配一些透明色,透明度設置在10%上下為宜,具體以實際效果微調。如下幾個模板,組件增加透明效果后,整體效果有質的提升。

3、點綴

細節影響感官體驗,在大屏展現上,細節也會極大的影響整體效果。通過適當給元素、標題、數字等添加一些諸如邊框、圖畫等在內的點綴效果,能幫助提升整體美觀度。

如下圖所示銷售駕駛艙大屏,頂部的標題通過左右兩個對稱線條進行點綴,各個組件的細分標題通過不規則漸變色圖片進行點綴,另外每個組件都搭配使用了簡潔的邊框以提升層次感。

比如下面圖所示大屏,給組件及其標題增加一些不規則的漸變色邊框,讓整體看上去更富有科技感。

如下圖所示的航空大屏,給元素增加一些飛機圖標、圖畫之類的擬物效果,讓大屏更真實生動。

4、動態特效

動態特效的范圍很廣,可以從很多角度解讀,最好的參照就是PPT的動畫特效,比如前文所提的背景動畫、刷新的加載動畫、輪播動畫、圖表的閃爍動畫、地圖的流向動畫等等,都屬于動態效果的范疇。前文說過,動效的增加能讓大屏看上去是活的,增加觀感體驗。但過分的動效極其容易喧賓奪主,讓觀看者的視線不知道該往哪里聚焦,反而喪失了展現業務數據的價值。這個度很難把握,既要平衡酷炫效果,又要突出內容,需要不斷調試。
列舉幾個大屏動態示例demo。
如下圖所示酒店大屏,核心指標營銷、房間情況以數字顯示,通過數據監控功能,可實時動態刷新數值。

再如下圖所示的園區監控,右下角有實時的緊急消息滾動。

如下圖所示金融大屏的輪播動畫,借助輪播效果,來實現同一個位置滾動播放不同的指標內容,避免平鋪展開所有指標把大屏界面擠滿。
再比如下面兩個駕駛艙,通過邊框動畫、地圖流向動畫,來增加大屏展示的整體活力。

03

最后

今天主要從大屏的整體布局、背景、點綴邊框、動效這四個方面,簡單介紹了一些大屏展現頁面制作的基本方法。其實不難發現很多環節都是相通或交叉的,比如單個元素的背景色,往往會和一些邊框一起使用。比如一些動態效果,可能是背景或者是邊框本身的GIF動畫。

大屏作為數據可視化的一個典型使用場景,很多人會覺得這樣的大屏是“面子工程“,不難制作,常常對它嗤之以鼻,認為這只是用華麗的視效堆疊起來博人眼球。
但實際上,從制作難度來說,一個完整的大屏項目從開始調研到實施交付可能需要開發工程師、項目經理、視覺工程師、UI工程師、硬件工程師等眾多專業人員的參與才能順利完成;而從業務價值來說,要明白大屏只是最后的終端展示,前面的數據填報收集、數據處理、指標選擇、數據實時同步等都需要一步一步做清楚,才能讓數據大屏發揮真正的價值,否則都是空談。


該文章在 2023/7/19 10:20:48 編輯過
關鍵字查詢
相關文章
正在查詢...
點晴ERP是一款針對中小制造業的專業生產管理軟件系統,系統成熟度和易用性得到了國內大量中小企業的青睞。
點晴PMS碼頭管理系統主要針對港口碼頭集裝箱與散貨日常運作、調度、堆場、車隊、財務費用、相關報表等業務管理,結合碼頭的業務特點,圍繞調度、堆場作業而開發的。集技術的先進性、管理的有效性于一體,是物流碼頭及其他港口類企業的高效ERP管理信息系統。
點晴WMS倉儲管理系統提供了貨物產品管理,銷售管理,采購管理,倉儲管理,倉庫管理,保質期管理,貨位管理,庫位管理,生產管理,WMS管理系統,標簽打印,條形碼,二維碼管理,批號管理軟件。
點晴免費OA是一款軟件和通用服務都免費,不限功能、不限時間、不限用戶的免費OA協同辦公管理系統。
Copyright 2010-2025 ClickSun All Rights Reserved