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

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

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

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

一、大屏的應用場景

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

比如，阿裡雙十一的公關大屏：

全國人口統計大屏：

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

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

1. 管理監控與決策

監控與決策，應該是數據大屏最原始的出發點。可視化大屏可以面向業務監控、運營指揮、運維監控等場景，實時、直觀地展示與跟蹤數據。當異常出現時，可以及時響應，并為科學指揮提供依據，起到實時監控的作用。

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

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

2. 領導參觀與視察

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

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

3. 公司宣傳與展示

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

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

二、大屏的通用特征

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

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

1. 樣式酷炫性

數據大屏的最典型的特征，就是酷炫。可以說，“無酷炫，不大屏”。

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

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

2. 數據實時性

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

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

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

3. 需求臨時性

大屏的需求一般都是比較臨時的，比如大促的大屏看闆。基本也就用大促高峰的那一天，其他時間就廢棄了。

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

4. 指标核心性

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

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

5. 交互固定性

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

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

三、産品化實現

最後，我們聊聊大屏的産品化實現。

上文也提到了，大屏本質上就是一個dashboard，所以産研自行開發一個酷炫的看闆，沒啥太大問題。但是由于大屏往往是比較低頻的訴求，而且通常看闆的酷炫程度很難顯著提升。因此，行業中催化了不少專門做大屏的公司。他們提供一些可配置的界面服務。咱們詳細看看。

1. 産品架構

産品架構圖如下，供參考

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

2. 編輯頁面概覽

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

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

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

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

3. 組件簡介

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

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

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

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

4. 配置欄簡介

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

配置欄主要分為樣式、數據、交互三項。可以對組件的各項參數進行設定。

• 樣式：配置組件的位置、尺寸、各類樣式（顔色字體動畫等）；
• 數據：對接該組件所需的數據源；
• 交互：通過回調、交互等方式配置組件的交互動作。

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

四、一些設計技巧

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

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

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

如果沒有地圖的數據内容，就多呈現流程結構圖：

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

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

#專欄作家#

NK冬至，公衆号：首席數據科學家，人人都是産品經理專欄作家。在金融領域、電商領域有豐富數據及産品經驗。擅長數據分析、數據産品等相關内容。

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

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

,

更多精彩资讯请关注tft每日頭條，我们将持续为您更新最新资讯!

查看全部