數(shù)據(jù)大屏:聊聊常見可視化大屏的產(chǎn)品實(shí)現(xiàn)

12 評(píng)論 23257 瀏覽 170 收藏 13 分鐘

編輯導(dǎo)語(yǔ):如今,數(shù)據(jù)大屏的使用范圍日益擴(kuò)大,使我們能夠更直觀地看到各種不同的信息,本文作者通過介紹數(shù)據(jù)大屏的應(yīng)用場(chǎng)景、通用特征、產(chǎn)品化實(shí)現(xiàn)和一些設(shè)計(jì)技巧,讓我們更加了解數(shù)據(jù)大屏的相關(guān)知識(shí),一起來(lái)看看吧。

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

數(shù)據(jù)大屏,無(wú)論是搞數(shù)據(jù)還是不搞數(shù)據(jù)的,應(yīng)該都不陌生。對(duì)搞數(shù)據(jù)的人而言,往往是不屑一顧,覺得大屏就是雞肋,食之無(wú)味,沒技術(shù)含量;對(duì)于不搞數(shù)據(jù)的朋友,可能大屏承載了大家對(duì)「大數(shù)據(jù)」、「人工智能」的全部認(rèn)知。

凡事存在即合理,一味的否定也不是客觀的態(tài)度。正好快618大促了,各個(gè)公司肯定又開始搞大屏了。咱們今天詳細(xì)聊聊數(shù)據(jù)大屏。

一、大屏的應(yīng)用場(chǎng)景

說到大屏,咱們先上幾個(gè)圖吧,看看一般大屏的呈現(xiàn)。

比如,阿里雙十一的公關(guān)大屏:

數(shù)據(jù)大屏:聊聊常見可視化大屏的產(chǎn)品實(shí)現(xiàn)

全國(guó)人口統(tǒng)計(jì)大屏:

數(shù)據(jù)大屏:聊聊常見可視化大屏的產(chǎn)品實(shí)現(xiàn)

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

數(shù)據(jù)大屏:聊聊常見可視化大屏的產(chǎn)品實(shí)現(xiàn)

總結(jié)一下,大屏主要的應(yīng)用場(chǎng)景有以下這些:

1. 管理監(jiān)控與決策

監(jiān)控與決策,應(yīng)該是數(shù)據(jù)大屏最原始的出發(fā)點(diǎn)??梢暬笃量梢悦嫦驑I(yè)務(wù)監(jiān)控、運(yùn)營(yíng)指揮、運(yùn)維監(jiān)控等場(chǎng)景,實(shí)時(shí)、直觀地展示與跟蹤數(shù)據(jù)。當(dāng)異常出現(xiàn)時(shí),可以及時(shí)響應(yīng),并為科學(xué)指揮提供依據(jù),起到實(shí)時(shí)監(jiān)控的作用。

在這一點(diǎn)上,其實(shí)和PC端或者APP端的BI系統(tǒng)沒有本質(zhì)區(qū)別,只是形式上呈現(xiàn)更大、集體一同觀看而已。

但是實(shí)踐過程中,真正制作大屏進(jìn)行監(jiān)控與決策的比例,我很難給出。反正我經(jīng)歷和接觸過的企業(yè),沒有通過大屏進(jìn)行監(jiān)控與決策的。可能在一些傳統(tǒng)行業(yè)中(比如交管系統(tǒng)、大型工廠),有這種場(chǎng)景訴求,需要一堆人在大廳中看大屏決策。歡迎對(duì)這方面有接觸過的朋友可以留言提供素材哈~

2. 領(lǐng)導(dǎo)參觀與視察

這個(gè)應(yīng)該是比較常見的場(chǎng)景。大公司通常都有個(gè)展廳,安裝幾個(gè)組合的大屏幕,24小時(shí)播放數(shù)據(jù)看板,體現(xiàn)公司的整體運(yùn)行情況。另外經(jīng)常有些政府,落地的數(shù)字化項(xiàng)目,會(huì)有這種大屏,供上級(jí)領(lǐng)導(dǎo)視察的時(shí)候查看。

數(shù)據(jù)大屏:聊聊常見可視化大屏的產(chǎn)品實(shí)現(xiàn)

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

3. 公司宣傳與展示

這種場(chǎng)景其實(shí)和領(lǐng)導(dǎo)參觀視察比較類似,也是為了向外界show肌肉的。

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

二、大屏的通用特征

上面聊了大屏的一些常見場(chǎng)景,其實(shí)從側(cè)面說明,大屏還是有價(jià)值的。只不過更多的是一種品牌形象、業(yè)績(jī)表現(xiàn)等比較難量化的價(jià)值。

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

數(shù)據(jù)大屏:聊聊常見可視化大屏的產(chǎn)品實(shí)現(xiàn)

1. 樣式酷炫性

數(shù)據(jù)大屏的最典型的特征,就是酷炫??梢哉f,“無(wú)酷炫,不大屏”。

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

本質(zhì)上,和大屏主要是展示公司形象、供領(lǐng)導(dǎo)視察這些場(chǎng)景決定的。這倒是給了UI設(shè)計(jì)師和前端研發(fā)展示能力的空間。

2. 數(shù)據(jù)實(shí)時(shí)性

大屏的數(shù)據(jù)要?jiǎng)悠饋?lái),不動(dòng)的大屏是個(gè)死屏,也就喪失了意義。

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

時(shí)效性通常都會(huì)要求到秒級(jí)更新,畢竟分鐘級(jí)更新甚至小時(shí)級(jí)更新,都比較慢了。

3. 需求臨時(shí)性

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

當(dāng)然,對(duì)于一些給領(lǐng)導(dǎo)視察使用的大屏,相對(duì)就能穩(wěn)定與長(zhǎng)期很多。

4. 指標(biāo)核心性

由于大屏增加了很多的可視化效果,所以其實(shí)真正能放的數(shù)據(jù)內(nèi)容也是比較有限的。而且大屏由于是看整體的內(nèi)容,所以給出的指標(biāo)肯定是業(yè)務(wù)側(cè)、公司層最關(guān)注的指標(biāo)。

這部分可以參考《北極星指標(biāo)》。

5. 交互固定性

最后,交互層面。由于大屏一般是固定播放的,所以觀看者和大屏是沒有交互的。不像我們?cè)谒饺薖C上,可以進(jìn)行各種下鉆、點(diǎn)擊、分析、切換等操作。

但是為了整體效果,也為了呈現(xiàn)更多的信息,大屏的交互往往會(huì)采取輪播的形式,切換不同維度的數(shù)據(jù)。

三、產(chǎn)品化實(shí)現(xiàn)

最后,我們聊聊大屏的產(chǎn)品化實(shí)現(xiàn)。

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

1. 產(chǎn)品架構(gòu)

產(chǎn)品架構(gòu)圖如下,供參考

數(shù)據(jù)大屏:聊聊常見可視化大屏的產(chǎn)品實(shí)現(xiàn)

其實(shí)整體的過程,仍然是數(shù)據(jù)接入、面板配置、應(yīng)用部署發(fā)布的那一套,可以參考《阿里QuickBI產(chǎn)品流程》

2. 編輯頁(yè)面概覽

以下是某公司提供的大屏配置的付費(fèi)產(chǎn)品核心界面。

數(shù)據(jù)大屏:聊聊常見可視化大屏的產(chǎn)品實(shí)現(xiàn)

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

  • 畫布區(qū):即中間的核心編輯頁(yè)面
  • 組件選擇區(qū):即折線圖、柱形圖等一系列的可視化圖表選擇
  • 圖層區(qū):當(dāng)組件被拖拽到畫布上時(shí),左側(cè)圖層呈現(xiàn)右側(cè)組件的list信息
  • 設(shè)置區(qū):右側(cè)進(jìn)行頁(yè)面、組件、數(shù)據(jù)等內(nèi)容的配置

其他細(xì)節(jié)功能不一一展開了。

3. 組件簡(jiǎn)介

組件,是可視化配置大屏中的核心內(nèi)容了。一個(gè)完整的大屏就是由許許多多個(gè)單獨(dú)的組件進(jìn)行拼裝而成的。每個(gè)組件相當(dāng)于一塊樂高積木。搞定了組件,就搞定了一大半的大屏配置。

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

數(shù)據(jù)大屏:聊聊常見可視化大屏的產(chǎn)品實(shí)現(xiàn)

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

插一句,這些組件的實(shí)現(xiàn),真的是檢驗(yàn)前端工程師能力的試金石。

4. 配置欄簡(jiǎn)介

選中某一個(gè)組件,右側(cè)會(huì)出現(xiàn)該組件的配置欄。

數(shù)據(jù)大屏:聊聊常見可視化大屏的產(chǎn)品實(shí)現(xiàn)

配置欄主要分為樣式、數(shù)據(jù)、交互三項(xiàng)??梢詫?duì)組件的各項(xiàng)參數(shù)進(jìn)行設(shè)定。

  • 樣式:配置組件的位置、尺寸、各類樣式(顏色字體動(dòng)畫等);
  • 數(shù)據(jù):對(duì)接該組件所需的數(shù)據(jù)源;
  • 交互:通過回調(diào)、交互等方式配置組件的交互動(dòng)作。

不同組件千差萬(wàn)別,因此各項(xiàng)配置參數(shù)也是完全不同的。

四、一些設(shè)計(jì)技巧

上面講的是產(chǎn)品化的內(nèi)容。最后和朋友們分享一下大屏設(shè)計(jì)落地過程中的一些技巧。

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

數(shù)據(jù)大屏:聊聊常見可視化大屏的產(chǎn)品實(shí)現(xiàn)

其次,但凡設(shè)計(jì)地圖的內(nèi)容,就上地圖。地圖打底就是萬(wàn)金油,怎么弄都高級(jí)感滿滿。

如果沒有地圖的數(shù)據(jù)內(nèi)容,就多呈現(xiàn)流程結(jié)構(gòu)圖:

數(shù)據(jù)大屏:聊聊常見可視化大屏的產(chǎn)品實(shí)現(xiàn)

另外,一定要有個(gè)主視覺區(qū),讓觀眾的視野一下子就能集中的區(qū)域。不然過于分散,不利于整體層次結(jié)構(gòu)。

關(guān)于數(shù)據(jù)大屏,我們今天就聊這些吧,感謝朋友們關(guān)注。

#專欄作家#

NK冬至,公眾號(hào):首席數(shù)據(jù)科學(xué)家,人人都是產(chǎn)品經(jīng)理專欄作家。在金融領(lǐng)域、電商領(lǐng)域有豐富數(shù)據(jù)及產(chǎn)品經(jīng)驗(yàn)。擅長(zhǎng)數(shù)據(jù)分析、數(shù)據(jù)產(chǎn)品等相關(guān)內(nèi)容。

本文原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理。未經(jīng)許可,禁止轉(zhuǎn)載。

題圖來(lái)自Unsplash,基于CC0協(xié)議。

更多精彩內(nèi)容,請(qǐng)關(guān)注人人都是產(chǎn)品經(jīng)理微信公眾號(hào)或下載App
評(píng)論
評(píng)論請(qǐng)登錄
  1. 請(qǐng)問大屏有可能有實(shí)用性,讓用戶真正用起來(lái)嗎?

    來(lái)自北京 回復(fù)
  2. 數(shù)據(jù)大屏在電視上顯示是怎么搞的?直接在電視上登錄網(wǎng)頁(yè)還是在電視上裝個(gè)APP安裝包?還是電腦鏈接顯示器投屏上去的?24小時(shí)的大屏不可能一直開著電腦吧

    來(lái)自廣東 回復(fù)
    1. 確實(shí)是要開著電腦投屏的

      來(lái)自廣東 回復(fù)
  3. 亮瞎眼的科技色

    來(lái)自廣東 回復(fù)
  4. 請(qǐng)問該大屏prd文檔怎么寫,比如,流程圖用得著畫嗎,是不是只用寫一個(gè)頁(yè)面說明就可以

    回復(fù)
    1. 我也想問

      來(lái)自重慶 回復(fù)
    2. 我一般寫數(shù)據(jù)指標(biāo)更新周期、頁(yè)面整體說明、特殊組件切換說明,整體實(shí)現(xiàn)效果示意之類的

      來(lái)自山東 回復(fù)
  5. 你好,請(qǐng)問圖中的產(chǎn)品叫什么?

    來(lái)自遼寧 回復(fù)
    1. 我也想問

      來(lái)自上海 回復(fù)
    2. 看著像 FineBI

      來(lái)自山東 回復(fù)
    3. 應(yīng)該是阿里的datav

      來(lái)自北京 回復(fù)
  6. 數(shù)據(jù)大屏無(wú)論對(duì)傳播信息,還是氣氛烘托都是很容易擊中人心的哈哈。

    來(lái)自江蘇 回復(fù)