作者 | 羅學勇

監(jiān)制 | 向日葵

原文 | 微信搜索 ‘技術記號’

前言

In大數(shù)據(jù)時代，跟隨相關技術的日新月異與成熟，在這樣的背景下，前端和后端又能玩出什么新花樣呢？在18年的雙11活動中，天貓的可視化大屏可謂玩花了技術控們的眼睛。

時過1年的今天，正好在黑馬頭條項目中玩了一把大屏，在這個過程中我發(fā)現(xiàn)周邊同事和我理解的大屏定義不太一樣，于是我查閱了度娘，發(fā)現(xiàn)度娘上全是賣LED大屏的（真是太尷尬了~）。這可怎么辦，這強迫癥一犯，愣是一夜未眠好。

經過一夜的思考，也對看板和大屏有了一些個人見解，在此記錄，以備它人所需。

正題

我們在做后臺系統(tǒng)時經常會聽到一些dashboard、kanban、screen、報表、統(tǒng)計、畫像、儀表盤等名詞，不管是否還有其它名詞，這些名詞按落地的頁面來歸類分為入口和詳情兩類。今天的主角kanban和screen都屬于入口頁這類。另要說明一下，在一些企業(yè)中也經常把kanban稱為儀表盤或者dashboard；所以依據(jù)這些信息我們可以得到下面這個公式：

dashboard（儀表盤）= kanban（看板）≠ screen（大屏）

為證明以上的等或不等式成立，下面我們從面向用戶、功能特點、技術實現(xiàn)等維度進行論證。

面向用戶不同

看板，面向的核心用戶是運營，其次才是其它內部員工和BOSS

在后臺管理系統(tǒng)中，大部分系統(tǒng)登錄成功之后跳轉的第一個頁面就是看板頁面，比如企業(yè)辦公軟件登錄之后看板上出現(xiàn)待辦事項、事項辦理進度、當月績效等數(shù)據(jù)；又比如電商后臺進入后的看板上提示今日上架、成就額趨勢、新SKU數(shù)量、PV走勢、UV走勢等圖表；這些都是常規(guī)套路，那么思考一下管理系統(tǒng)誰用的最多呢？大部分情況下，個人認為是運營，他們依據(jù)邊看板上的數(shù)字并查看詳情分析運營情況，并及時調整運營策略，以完成運營目標。少部分情況，技術和運維會有后臺系統(tǒng)的賬號，他們主要登錄查看系統(tǒng)監(jiān)控看板監(jiān)控系統(tǒng)。

有老鐵可能會反駁說到OA系統(tǒng)不是呀！內部那么多員工都有賬號，人數(shù)肯定比運營多。針對這個問題呢，我們首先要了解兩個實情，第一、企業(yè)中OA系統(tǒng)的運營人員實則是人事或者行政。第二、企業(yè)員工都有OA賬號，但他們不可能天天登錄OA去請假是吧！但是人事和行政會基本天天登，去導或看員工數(shù)據(jù)。所以還是核心用戶還是系統(tǒng)的運營者人事或行政。

那么有沒有系統(tǒng)看板不是面向運營的呢？個人相信是有的，只是還沒碰到，等碰到了在來補充，老鐵們沒遇見了也可以留言告訴我。

大屏，面向的核心用戶是系統(tǒng)客戶、其次是內部員工、BOSS

想一想大屏出現(xiàn)的地方在哪里？在公司前臺、走廊、辦公區(qū)，亦或在公司食堂，還有就是發(fā)布會直播現(xiàn)場對吧！在這些區(qū)域設置大屏的目的就是給客戶一種專業(yè)、高大尚的比格、如果客戶是互聯(lián)網(wǎng)用戶，那么就開直播發(fā)布會，總之得讓客戶感受到公司的專業(yè)與強大。除了這個目的，還有一層意思就是，讓內部員工看見自己努力經營的成功而獲得成就感！

BOSS就不用多說了，看板和大屏他都看！

功能特點不同

看板，功能特點是支持頁面定制、頁面多圖表、可交互查看（點擊查看詳情等）、圖表數(shù)據(jù)手動刷新

比如：以下看板示例，統(tǒng)一個系統(tǒng)不同用戶可以有不同的圖表項，每項圖表可點擊查看詳細數(shù)據(jù)和搜索。

大屏，功能特點是頁面展示的是數(shù)字（TOP 項）、不可交互、自動刷新、視覺特效強、成就展示

比如：以黑馬頭條的大屏Demo舉例，大屏是單頁展示的模式（雙11的大屏是多頁展示模式更具視覺效果），當某個數(shù)字指標達到一個設定閾值時，呈現(xiàn)成就特效頁，以體現(xiàn)成就的儀式感。

技術實現(xiàn)不同

看板，后端大數(shù)據(jù)統(tǒng)計計算，前端通過Echarts進行展示

從近幾年的看板技術來看，如拋開后端的大數(shù)據(jù)統(tǒng)計計算，其它技術還是比較常規(guī)，大部分看板還是由http、vue、echarts核心三件套組成。由于是手動刷新，所以只需要提供http接口獲取數(shù)據(jù)即可；圖表頁使用開源的Vue+Echarts即可滿足大部分需求。這種模式在開發(fā)過程中也較容易實現(xiàn)，處理的細節(jié)不多。當然也有一些企業(yè)產品化融入了高級玩法，提供了自動刷新、圖表定制功能。

大屏，后端大數(shù)據(jù)統(tǒng)計計算、數(shù)據(jù)實時計算；前端內容特效定制開發(fā)

以黑馬頭條的大屏技術為例（拋開大數(shù)據(jù)統(tǒng)計技術），kafkastream、websocket、http、vue、d3、jquery、svg、echarts。

先說后端，大屏要求后端支持多協(xié)議連接，常見的是ws、http協(xié)議，在一個協(xié)議不可用的情況下，自動切換另外一個協(xié)議，保證前端可實時獲取到后端數(shù)據(jù)。后端通過kafkastream實時對系統(tǒng)總線上的消息進行監(jiān)聽和過濾處理，并轉換成前端所需的消息格式，通過WebSocket發(fā)送給前端實時刷新。對于后端ws協(xié)議需提供WebSocket服務，實現(xiàn)連接權限的管理。同時還要求后端提供http數(shù)據(jù)獲取接口，可用獲取實時計算的數(shù)據(jù)。如下數(shù)據(jù)流圖：

再說前端，大屏的前端視覺效果都要求特別高。除此之外，大屏實現(xiàn)的困難點還體現(xiàn)在以下兩點點：

算法難度：如tmall雙11的大屏效果，其中展示的特效是現(xiàn)有前端框架都沒現(xiàn)成的，所以需要自我實現(xiàn)。而在實現(xiàn)特效的過程中會涉及各種算法，如下圖品牌LOGO都圍繞地址旋轉，會涉及3D 球面坐標的算法；

數(shù)據(jù)溢出：大屏實時獲取后端數(shù)據(jù)，大屏一般不會關閉，那么前端必然會接收到超量的數(shù)據(jù)，如處理不好會引起大屏特效卡頓、大屏卡死等問題；

彩蛋

本想總結一下看板和大屏的區(qū)別，但是到了吃小面的時間了，彩蛋一發(fā)就各回各家吧~

看板常見分類

運營看板：（面向運營人員，包含系統(tǒng)各業(yè)務指標內容）

運維看板：（面向運維人員，包含系統(tǒng)硬件、容器、軟件等內容）

監(jiān)控看板：（面向技術人員，包括系統(tǒng)自身運行情況、異常情況、KPI指標項）

敏捷看板：（面向技術團隊，包括工作任務、工作方案、資源/進度等內容）

BOSS看板：（面向BOSS，包含BOSS關注的運營、運維、KPI等指標項）

大屏常見分類

單頁大屏：（小成本小制作）單頁展示所有的數(shù)字項和成就特效

多頁大屏：（大成本大制作）每頁展示獨立的數(shù)字項及其成就特效

————————————————
版權聲明：本文為CSDN博主「miukoo」的原創(chuàng)文章，遵循 CC 4.0 BY-SA 版權協(xié)議，轉載請附上原文出處鏈接及本聲明。
原文鏈接：https://blog.csdn.net/luoxueyong/article/details/99335922

總結

以上是生活随笔為你收集整理的【转】外行杂谈论—聊聊看板 vs 大屏的区别的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內容還不錯，歡迎將生活随笔推薦給好友。