數據大屏:聊聊常見可視化大屏的產品實現

11 評論 21686 瀏覽 164 收藏 13 分鐘

編輯導語:如今,數據大屏的使用范圍日益擴大,使我們能夠更直觀地看到各種不同的信息,本文作者通過介紹數據大屏的應用場景、通用特征、產品化實現和一些設計技巧,讓我們更加了解數據大屏的相關知識,一起來看看吧。

今天和大家聊聊一種比較常見的數據可視化形式:大屏

數據大屏,無論是搞數據還是不搞數據的,應該都不陌生。對搞數據的人而言,往往是不屑一顧,覺得大屏就是雞肋,食之無味,沒技術含量;對于不搞數據的朋友,可能大屏承載了大家對「大數據」、「人工智能」的全部認知。

凡事存在即合理,一味的否定也不是客觀的態度。正好快618大促了,各個公司肯定又開始搞大屏了。咱們今天詳細聊聊數據大屏。

一、大屏的應用場景

說到大屏,咱們先上幾個圖吧,看看一般大屏的呈現。

比如,阿里雙十一的公關大屏:

數據大屏:聊聊常見可視化大屏的產品實現

全國人口統計大屏:

數據大屏:聊聊常見可視化大屏的產品實現

還有很多類似的吧,就不舉例了。感興趣的朋友隨便百度一搜索,就有一把的案例呈現:

數據大屏:聊聊常見可視化大屏的產品實現

總結一下,大屏主要的應用場景有以下這些:

1. 管理監控與決策

監控與決策,應該是數據大屏最原始的出發點??梢暬笃量梢悦嫦驑I務監控、運營指揮、運維監控等場景,實時、直觀地展示與跟蹤數據。當異常出現時,可以及時響應,并為科學指揮提供依據,起到實時監控的作用。

在這一點上,其實和PC端或者APP端的BI系統沒有本質區別,只是形式上呈現更大、集體一同觀看而已。

但是實踐過程中,真正制作大屏進行監控與決策的比例,我很難給出。反正我經歷和接觸過的企業,沒有通過大屏進行監控與決策的??赡茉谝恍﹤鹘y行業中(比如交管系統、大型工廠),有這種場景訴求,需要一堆人在大廳中看大屏決策。歡迎對這方面有接觸過的朋友可以留言提供素材哈~

2. 領導參觀與視察

這個應該是比較常見的場景。大公司通常都有個展廳,安裝幾個組合的大屏幕,24小時播放數據看板,體現公司的整體運行情況。另外經常有些政府,落地的數字化項目,會有這種大屏,供上級領導視察的時候查看。

數據大屏:聊聊常見可視化大屏的產品實現

到底是不是面子工程,這個就見仁見智吧,很難說。雖然是形象工程,但是確實如果臉面都不好,也很難體現自己的實力、落地效果能有多好。

3. 公司宣傳與展示

這種場景其實和領導參觀視察比較類似,也是為了向外界show肌肉的。

比如開頭呈現的阿里雙十一大屏。我記得前幾年,雙十一前夜以及當天,阿里邀請各路媒體記者、合作伙伴在大會議室里,實時看成交數據。在這種情況下,大屏是不二的選擇。最后各路媒體都會用大屏的照片作為媒體稿進行發布。當然,這兩年,阿里低調了,21年好像就沒再搞公開的。

二、大屏的通用特征

上面聊了大屏的一些常見場景,其實從側面說明,大屏還是有價值的。只不過更多的是一種品牌形象、業績表現等比較難量化的價值。

我總結了一下,大屏的一些通用特征,讓大家能更深入地理解大屏。主要包括以下幾個方面。

數據大屏:聊聊常見可視化大屏的產品實現

1. 樣式酷炫性

數據大屏的最典型的特征,就是酷炫??梢哉f,“無酷炫,不大屏”。

基本都是深顏色打底,增加各種酷炫的元素,一些3D效果呀、可視化圖形、地圖呀,反正能實現的酷炫效果,盡可能往上裝。在通常意義的數據dashboard中,一般不會搞得太花里胡哨。但大屏是走向了另一個方向。

本質上,和大屏主要是展示公司形象、供領導視察這些場景決定的。這倒是給了UI設計師和前端研發展示能力的空間。

2. 數據實時性

大屏的數據要動起來,不動的大屏是個死屏,也就喪失了意義。

通常我們很多分析工具的數據都是離線計算的,因此時效性都是T+1的。但對于大屏而言,離線數據顯然不滿足應用場景。你想,這么多人就盯著大屏看數據呢,如果一直是個死數,那還看啥……看一眼就可以撤了。

時效性通常都會要求到秒級更新,畢竟分鐘級更新甚至小時級更新,都比較慢了。

3. 需求臨時性

大屏的需求一般都是比較臨時的,比如大促的大屏看板?;疽簿陀么蟠俑叻宓哪且惶?,其他時間就廢棄了。

當然,對于一些給領導視察使用的大屏,相對就能穩定與長期很多。

4. 指標核心性

由于大屏增加了很多的可視化效果,所以其實真正能放的數據內容也是比較有限的。而且大屏由于是看整體的內容,所以給出的指標肯定是業務側、公司層最關注的指標。

這部分可以參考《北極星指標》。

5. 交互固定性

最后,交互層面。由于大屏一般是固定播放的,所以觀看者和大屏是沒有交互的。不像我們在私人PC上,可以進行各種下鉆、點擊、分析、切換等操作。

但是為了整體效果,也為了呈現更多的信息,大屏的交互往往會采取輪播的形式,切換不同維度的數據。

三、產品化實現

最后,我們聊聊大屏的產品化實現。

上文也提到了,大屏本質上就是一個dashboard,所以產研自行開發一個酷炫的看板,沒啥太大問題。但是由于大屏往往是比較低頻的訴求,而且通??窗宓目犰懦潭群茈y顯著提升。因此,行業中催化了不少專門做大屏的公司。他們提供一些可配置的界面服務。咱們詳細看看。

1. 產品架構

產品架構圖如下,供參考

數據大屏:聊聊常見可視化大屏的產品實現

其實整體的過程,仍然是數據接入、面板配置、應用部署發布的那一套,可以參考《阿里QuickBI產品流程》

2. 編輯頁面概覽

以下是某公司提供的大屏配置的付費產品核心界面。

數據大屏:聊聊常見可視化大屏的產品實現

通過上圖可以看出,編輯界面主要包括了以下區域:

  • 畫布區:即中間的核心編輯頁面
  • 組件選擇區:即折線圖、柱形圖等一系列的可視化圖表選擇
  • 圖層區:當組件被拖拽到畫布上時,左側圖層呈現右側組件的list信息
  • 設置區:右側進行頁面、組件、數據等內容的配置

其他細節功能不一一展開了。

3. 組件簡介

組件,是可視化配置大屏中的核心內容了。一個完整的大屏就是由許許多多個單獨的組件進行拼裝而成的。每個組件相當于一塊樂高積木。搞定了組件,就搞定了一大半的大屏配置。

下面,我們把一些配置大屏常見的組件進行一個概括介紹。下面的list還是比較全面了。

數據大屏:聊聊常見可視化大屏的產品實現

上面是該平臺提供的所有組件庫。具體每個組件的內容我就不展開說明了,感興趣的朋友可以自行研究。確實還是覆蓋比較全面的。

插一句,這些組件的實現,真的是檢驗前端工程師能力的試金石。

4. 配置欄簡介

選中某一個組件,右側會出現該組件的配置欄。

數據大屏:聊聊常見可視化大屏的產品實現

配置欄主要分為樣式、數據、交互三項??梢詫M件的各項參數進行設定。

  • 樣式:配置組件的位置、尺寸、各類樣式(顏色字體動畫等);
  • 數據:對接該組件所需的數據源;
  • 交互:通過回調、交互等方式配置組件的交互動作。

不同組件千差萬別,因此各項配置參數也是完全不同的。

四、一些設計技巧

上面講的是產品化的內容。最后和朋友們分享一下大屏設計落地過程中的一些技巧。

首先,打底的圖片就有講究:要有駕駛艙的那種視野感,這樣顯得高大上、開闊。

數據大屏:聊聊常見可視化大屏的產品實現

其次,但凡設計地圖的內容,就上地圖。地圖打底就是萬金油,怎么弄都高級感滿滿。

如果沒有地圖的數據內容,就多呈現流程結構圖:

數據大屏:聊聊常見可視化大屏的產品實現

另外,一定要有個主視覺區,讓觀眾的視野一下子就能集中的區域。不然過于分散,不利于整體層次結構。

關于數據大屏,我們今天就聊這些吧,感謝朋友們關注。

#專欄作家#

NK冬至,公眾號:首席數據科學家,人人都是產品經理專欄作家。在金融領域、電商領域有豐富數據及產品經驗。擅長數據分析、數據產品等相關內容。

本文原創發布于人人都是產品經理。未經許可,禁止轉載。

題圖來自Unsplash,基于CC0協議。

更多精彩內容,請關注人人都是產品經理微信公眾號或下載App
評論
評論請登錄
  1. 請問大屏有可能有實用性,讓用戶真正用起來嗎?

    來自北京 回復
  2. 數據大屏在電視上顯示是怎么搞的?直接在電視上登錄網頁還是在電視上裝個APP安裝包?還是電腦鏈接顯示器投屏上去的?24小時的大屏不可能一直開著電腦吧

    來自廣東 回復
    1. 確實是要開著電腦投屏的

      來自廣東 回復
  3. 亮瞎眼的科技色

    來自廣東 回復
  4. 請問該大屏prd文檔怎么寫,比如,流程圖用得著畫嗎,是不是只用寫一個頁面說明就可以

    回復
    1. 我也想問

      來自重慶 回復
    2. 我一般寫數據指標更新周期、頁面整體說明、特殊組件切換說明,整體實現效果示意之類的

      來自山東 回復
  5. 你好,請問圖中的產品叫什么?

    來自遼寧 回復
    1. 我也想問

      來自上海 回復
    2. 看著像 FineBI

      來自山東 回復
  6. 數據大屏無論對傳播信息,還是氣氛烘托都是很容易擊中人心的哈哈。

    來自江蘇 回復