數據大屏:聊聊常見可視化大屏的產品實現
編輯導語:如今,數據大屏的使用范圍日益擴大,使我們能夠更直觀地看到各種不同的信息,本文作者通過介紹數據大屏的應用場景、通用特征、產品化實現和一些設計技巧,讓我們更加了解數據大屏的相關知識,一起來看看吧。
今天和大家聊聊一種比較常見的數據可視化形式:大屏
數據大屏,無論是搞數據還是不搞數據的,應該都不陌生。對搞數據的人而言,往往是不屑一顧,覺得大屏就是雞肋,食之無味,沒技術含量;對于不搞數據的朋友,可能大屏承載了大家對「大數據」、「人工智能」的全部認知。
凡事存在即合理,一味的否定也不是客觀的態度。正好快618大促了,各個公司肯定又開始搞大屏了。咱們今天詳細聊聊數據大屏。
一、大屏的應用場景
說到大屏,咱們先上幾個圖吧,看看一般大屏的呈現。
比如,阿里雙十一的公關大屏:
全國人口統計大屏:
還有很多類似的吧,就不舉例了。感興趣的朋友隨便百度一搜索,就有一把的案例呈現:
總結一下,大屏主要的應用場景有以下這些:
1. 管理監控與決策
監控與決策,應該是數據大屏最原始的出發點??梢暬笃量梢悦嫦驑I務監控、運營指揮、運維監控等場景,實時、直觀地展示與跟蹤數據。當異常出現時,可以及時響應,并為科學指揮提供依據,起到實時監控的作用。
在這一點上,其實和PC端或者APP端的BI系統沒有本質區別,只是形式上呈現更大、集體一同觀看而已。
但是實踐過程中,真正制作大屏進行監控與決策的比例,我很難給出。反正我經歷和接觸過的企業,沒有通過大屏進行監控與決策的??赡茉谝恍﹤鹘y行業中(比如交管系統、大型工廠),有這種場景訴求,需要一堆人在大廳中看大屏決策。歡迎對這方面有接觸過的朋友可以留言提供素材哈~
2. 領導參觀與視察
這個應該是比較常見的場景。大公司通常都有個展廳,安裝幾個組合的大屏幕,24小時播放數據看板,體現公司的整體運行情況。另外經常有些政府,落地的數字化項目,會有這種大屏,供上級領導視察的時候查看。
到底是不是面子工程,這個就見仁見智吧,很難說。雖然是形象工程,但是確實如果臉面都不好,也很難體現自己的實力、落地效果能有多好。
3. 公司宣傳與展示
這種場景其實和領導參觀視察比較類似,也是為了向外界show肌肉的。
比如開頭呈現的阿里雙十一大屏。我記得前幾年,雙十一前夜以及當天,阿里邀請各路媒體記者、合作伙伴在大會議室里,實時看成交數據。在這種情況下,大屏是不二的選擇。最后各路媒體都會用大屏的照片作為媒體稿進行發布。當然,這兩年,阿里低調了,21年好像就沒再搞公開的。
二、大屏的通用特征
上面聊了大屏的一些常見場景,其實從側面說明,大屏還是有價值的。只不過更多的是一種品牌形象、業績表現等比較難量化的價值。
我總結了一下,大屏的一些通用特征,讓大家能更深入地理解大屏。主要包括以下幾個方面。
1. 樣式酷炫性
數據大屏的最典型的特征,就是酷炫??梢哉f,“無酷炫,不大屏”。
基本都是深顏色打底,增加各種酷炫的元素,一些3D效果呀、可視化圖形、地圖呀,反正能實現的酷炫效果,盡可能往上裝。在通常意義的數據dashboard中,一般不會搞得太花里胡哨。但大屏是走向了另一個方向。
本質上,和大屏主要是展示公司形象、供領導視察這些場景決定的。這倒是給了UI設計師和前端研發展示能力的空間。
2. 數據實時性
大屏的數據要動起來,不動的大屏是個死屏,也就喪失了意義。
通常我們很多分析工具的數據都是離線計算的,因此時效性都是T+1的。但對于大屏而言,離線數據顯然不滿足應用場景。你想,這么多人就盯著大屏看數據呢,如果一直是個死數,那還看啥……看一眼就可以撤了。
時效性通常都會要求到秒級更新,畢竟分鐘級更新甚至小時級更新,都比較慢了。
3. 需求臨時性
大屏的需求一般都是比較臨時的,比如大促的大屏看板?;疽簿陀么蟠俑叻宓哪且惶欤渌麜r間就廢棄了。
當然,對于一些給領導視察使用的大屏,相對就能穩定與長期很多。
4. 指標核心性
由于大屏增加了很多的可視化效果,所以其實真正能放的數據內容也是比較有限的。而且大屏由于是看整體的內容,所以給出的指標肯定是業務側、公司層最關注的指標。
這部分可以參考《北極星指標》。
5. 交互固定性
最后,交互層面。由于大屏一般是固定播放的,所以觀看者和大屏是沒有交互的。不像我們在私人PC上,可以進行各種下鉆、點擊、分析、切換等操作。
但是為了整體效果,也為了呈現更多的信息,大屏的交互往往會采取輪播的形式,切換不同維度的數據。
三、產品化實現
最后,我們聊聊大屏的產品化實現。
上文也提到了,大屏本質上就是一個dashboard,所以產研自行開發一個酷炫的看板,沒啥太大問題。但是由于大屏往往是比較低頻的訴求,而且通常看板的酷炫程度很難顯著提升。因此,行業中催化了不少專門做大屏的公司。他們提供一些可配置的界面服務。咱們詳細看看。
1. 產品架構
產品架構圖如下,供參考
其實整體的過程,仍然是數據接入、面板配置、應用部署發布的那一套,可以參考《阿里QuickBI產品流程》
2. 編輯頁面概覽
以下是某公司提供的大屏配置的付費產品核心界面。
通過上圖可以看出,編輯界面主要包括了以下區域:
- 畫布區:即中間的核心編輯頁面
- 組件選擇區:即折線圖、柱形圖等一系列的可視化圖表選擇
- 圖層區:當組件被拖拽到畫布上時,左側圖層呈現右側組件的list信息
- 設置區:右側進行頁面、組件、數據等內容的配置
其他細節功能不一一展開了。
3. 組件簡介
組件,是可視化配置大屏中的核心內容了。一個完整的大屏就是由許許多多個單獨的組件進行拼裝而成的。每個組件相當于一塊樂高積木。搞定了組件,就搞定了一大半的大屏配置。
下面,我們把一些配置大屏常見的組件進行一個概括介紹。下面的list還是比較全面了。
上面是該平臺提供的所有組件庫。具體每個組件的內容我就不展開說明了,感興趣的朋友可以自行研究。確實還是覆蓋比較全面的。
插一句,這些組件的實現,真的是檢驗前端工程師能力的試金石。
4. 配置欄簡介
選中某一個組件,右側會出現該組件的配置欄。
配置欄主要分為樣式、數據、交互三項??梢詫M件的各項參數進行設定。
- 樣式:配置組件的位置、尺寸、各類樣式(顏色字體動畫等);
- 數據:對接該組件所需的數據源;
- 交互:通過回調、交互等方式配置組件的交互動作。
不同組件千差萬別,因此各項配置參數也是完全不同的。
四、一些設計技巧
上面講的是產品化的內容。最后和朋友們分享一下大屏設計落地過程中的一些技巧。
首先,打底的圖片就有講究:要有駕駛艙的那種視野感,這樣顯得高大上、開闊。
其次,但凡設計地圖的內容,就上地圖。地圖打底就是萬金油,怎么弄都高級感滿滿。
如果沒有地圖的數據內容,就多呈現流程結構圖:
另外,一定要有個主視覺區,讓觀眾的視野一下子就能集中的區域。不然過于分散,不利于整體層次結構。
關于數據大屏,我們今天就聊這些吧,感謝朋友們關注。
#專欄作家#
NK冬至,公眾號:首席數據科學家,人人都是產品經理專欄作家。在金融領域、電商領域有豐富數據及產品經驗。擅長數據分析、數據產品等相關內容。
本文原創發布于人人都是產品經理。未經許可,禁止轉載。
題圖來自Unsplash,基于CC0協議。
請問大屏有可能有實用性,讓用戶真正用起來嗎?
數據大屏在電視上顯示是怎么搞的?直接在電視上登錄網頁還是在電視上裝個APP安裝包?還是電腦鏈接顯示器投屏上去的?24小時的大屏不可能一直開著電腦吧
確實是要開著電腦投屏的
亮瞎眼的科技色
請問該大屏prd文檔怎么寫,比如,流程圖用得著畫嗎,是不是只用寫一個頁面說明就可以
我也想問
我一般寫數據指標更新周期、頁面整體說明、特殊組件切換說明,整體實現效果示意之類的
你好,請問圖中的產品叫什么?
我也想問
看著像 FineBI
應該是阿里的datav
數據大屏無論對傳播信息,還是氣氛烘托都是很容易擊中人心的哈哈。