數(shù)據(jù)大屏這一形態(tài)現(xiàn)在已經(jīng)十分常見，那么，數(shù)據(jù)大屏相應(yīng)的設(shè)計(jì)策略是怎樣的？這篇文章里，作者從設(shè)計(jì)步驟、核心功能等方面做了一定梳理和分析，一起來看一下吧。

一、產(chǎn)品背景

1. 數(shù)據(jù)可視化

1. 抽象數(shù)據(jù)具象表達(dá)，可視、可交流、可互動(dòng)。
2. 高效表達(dá)數(shù)據(jù)內(nèi)在信息及規(guī)律，促進(jìn)數(shù)據(jù)信息的應(yīng)用。

2. 數(shù)據(jù)大屏

1. 以大屏為展示主體，營(yíng)銷氛圍，關(guān)鍵信息大屏共享，方便交流與決策。
2. 數(shù)據(jù)展示、數(shù)據(jù)分析、監(jiān)控預(yù)警三大類。

3. 服務(wù)對(duì)象

1. 高層決策。
2. 宣傳公司。

二、設(shè)計(jì)步驟

1. 設(shè)計(jì)原則

1）設(shè)計(jì)服務(wù)需求

• 基于業(yè)務(wù)需求設(shè)計(jì)。
• 聚焦解決的問題或達(dá)成的目標(biāo)。

2）先總覽后細(xì)節(jié)

• 大屏信息有焦點(diǎn)、有主次，核心數(shù)據(jù)先展示。
• 細(xì)節(jié)數(shù)據(jù)可隱藏，用戶喚起查看。

3）故事敘述原則

考慮故事敘述，通過數(shù)據(jù)聯(lián)系、趨勢(shì)變化呈現(xiàn)完整故事。

4）易讀性原則

數(shù)據(jù)結(jié)構(gòu)簡(jiǎn)明。

5）用戶交互體驗(yàn)原則

具備良好交互性，支持實(shí)時(shí)監(jiān)控、數(shù)據(jù)查詢和多維度分析。

2. 設(shè)計(jì)步驟

1）業(yè)務(wù)背景調(diào)研

1. 業(yè)務(wù)需求：了解具體業(yè)務(wù)需求，大屏使用者，用途。
2. 業(yè)務(wù)現(xiàn)狀：了解業(yè)務(wù)現(xiàn)狀，思考業(yè)務(wù)需求。
3. 業(yè)務(wù)發(fā)展：了解業(yè)務(wù)發(fā)展方向，做好前瞻性設(shè)計(jì)。

業(yè)務(wù)背景調(diào)研結(jié)果：產(chǎn)出清晰的業(yè)務(wù)流程圖及各環(huán)節(jié)關(guān)鍵指標(biāo)。

2）業(yè)務(wù)指標(biāo)制定

1. 確定北極星指標(biāo)：指明業(yè)務(wù)方向，當(dāng)前產(chǎn)品階段戰(zhàn)略層的指標(biāo)。
2. 關(guān)鍵指標(biāo)&其他指標(biāo)：按照北極星指標(biāo)結(jié)合業(yè)務(wù)需求衍生出關(guān)鍵指標(biāo)，指標(biāo)逐步拓展納入，根據(jù)業(yè)務(wù)需求擬定各個(gè)指標(biāo)優(yōu)先級(jí)（主次輔）。
3. 確認(rèn)指標(biāo)分析維度：根據(jù)各指標(biāo)特征和業(yè)務(wù)需求，確認(rèn)分析維度、分類占比、分布情況等。
4. 提供計(jì)算指標(biāo)的計(jì)算公式。
5. 指標(biāo)服務(wù)于業(yè)務(wù)實(shí)際。

業(yè)務(wù)指標(biāo)定制結(jié)果：制作指標(biāo)定義表

指標(biāo)類型：

• 維度指標(biāo)：日期等。
• 原子指標(biāo)：不可再拆分的指標(biāo)。
• 復(fù)合指標(biāo)：通過維度指標(biāo)或原子指標(biāo)計(jì)算后的結(jié)果指標(biāo)。

指標(biāo)體系定義：

帶有業(yè)務(wù)特征、運(yùn)營(yíng)效果、未來方向、衍生價(jià)值的描述。

例如對(duì)注冊(cè)用戶數(shù)指標(biāo)：

• 業(yè)務(wù)特征描述：目前活躍用戶，每天啟動(dòng)產(chǎn)品的注冊(cè)用戶數(shù)量。
• 運(yùn)營(yíng)效果描述：整體來看，上月活躍保持7.3%的增長(zhǎng)。
• 未來方向描述：渠道團(tuán)隊(duì)拉新獲得新增注冊(cè)用戶，占每月活躍用戶的40%，沿此方向推進(jìn)。
• 衍生價(jià)值描述：DAU提升對(duì)整體收入貢獻(xiàn)大。

指標(biāo)體系特征：

1. 原子性指標(biāo)：最基礎(chǔ)不可拆分指標(biāo)，如交易額。
2. 修飾詞：描述某種場(chǎng)景下的指標(biāo)，如分銷渠道交易額。
3. 時(shí)間段：限定數(shù)據(jù)的時(shí)間范圍，如本周。
4. 派生指標(biāo)：1+2+3（原子+修飾+時(shí)間），如上周分銷渠道的交易額。

指標(biāo)體系搭建的核心原則：

• 根本性：核心數(shù)據(jù)理解到位和準(zhǔn)確。
• 可理解性：指標(biāo)要配上業(yè)務(wù)解釋性，明確指標(biāo)含義。
• 結(jié)構(gòu)性：能夠充分對(duì)業(yè)務(wù)進(jìn)行解讀（新增用戶指標(biāo)需配套各渠道、轉(zhuǎn)化率及新增用戶價(jià)值等指標(biāo)）。

指標(biāo)建立步驟：

① 理清業(yè)務(wù)階段和方向（各階段核心業(yè)務(wù)內(nèi)容）

1. 業(yè)務(wù)前期：蓄客、造勢(shì)
2. 業(yè)務(wù)中期：促成交、促轉(zhuǎn)化
3. 業(yè)務(wù)后期：去庫存，做規(guī)劃

② 確定核心指標(biāo)：先確定北極星指標(biāo)（核心戰(zhàn)略指標(biāo)），再根據(jù)業(yè)務(wù)確定各階段指標(biāo)，指標(biāo)服務(wù)于業(yè)務(wù)。

③ 指標(biāo)核心的維度拆解：拆解指標(biāo)計(jì)算公式，對(duì)公示內(nèi)的維度指標(biāo)進(jìn)行計(jì)算。

④ 指標(biāo)宣貫、存檔、落地：指標(biāo)搭建后進(jìn)行存檔、宣貫、落地、反饋及修復(fù)。

北極星指標(biāo)：

為業(yè)務(wù)指明方向的指標(biāo)，當(dāng)前產(chǎn)品階段戰(zhàn)略層指標(biāo)。

北極星指標(biāo)唯一存在，北極星伴隨指標(biāo)可以有多個(gè)。

從產(chǎn)品階段選擇：

1. 誕生期：規(guī)模類指標(biāo)，如注冊(cè)用戶數(shù)。
2. 發(fā)展期：質(zhì)量類指標(biāo)，如活躍用戶數(shù)。
3. 衰退期：新增方向上的指標(biāo)：如某功能使用人數(shù)。

從產(chǎn)品客群選擇：

1. 新增用戶：關(guān)注新用戶停留時(shí)長(zhǎng)、流失率等增長(zhǎng)類指標(biāo)。
2. 老用戶：關(guān)注停留時(shí)長(zhǎng)、打開次數(shù)等活躍類指標(biāo)。
3. 已付費(fèi)用戶：關(guān)注復(fù)購(gòu)率、客單價(jià)等營(yíng)收類指標(biāo)。

3. 數(shù)據(jù)溯源和加工

數(shù)據(jù)溯源：確定指標(biāo)后對(duì)數(shù)據(jù)源頭進(jìn)行追蹤。

ETL：數(shù)據(jù)源接入后對(duì)數(shù)據(jù)進(jìn)行加工，包含數(shù)據(jù)清洗和維度建模，必要時(shí)制作E-R圖。

ETL：數(shù)據(jù)抽?。‥xtract）、轉(zhuǎn)換（Transform）、加載（Load）的簡(jiǎn)寫，它是數(shù)據(jù)從源端經(jīng)過抽取、清洗、轉(zhuǎn)換之后加載到目標(biāo)端的過程。

E-R圖，也稱為實(shí)體關(guān)系圖（Entity-Relationship Diagram），是一種用來描述實(shí)體、屬性和關(guān)系的模型。在數(shù)據(jù)庫設(shè)計(jì)中，E-R圖是概念結(jié)構(gòu)設(shè)計(jì)的一種工具，它提供了表示實(shí)體型、屬性和聯(lián)系的方法，用來描述現(xiàn)實(shí)世界的概念模型。在E-R圖中，常用矩形來表示現(xiàn)實(shí)中客觀存在且相互區(qū)別的實(shí)體，用橢圓來表示實(shí)體具有的某一特征，用菱形來表示實(shí)體和實(shí)體間一對(duì)一、一對(duì)多和多對(duì)多的關(guān)系。

數(shù)據(jù)獲取：獲取結(jié)構(gòu)化、干凈的數(shù)據(jù)。

數(shù)據(jù)加工：根據(jù)制定的業(yè)務(wù)指標(biāo)結(jié)合數(shù)據(jù)理解業(yè)務(wù)含義，得到業(yè)務(wù)指標(biāo)并確認(rèn)是否有誤。

數(shù)據(jù)加工結(jié)果：數(shù)據(jù)探查表、數(shù)據(jù)接入表。

E-R圖推薦工具：https://dbdiagram.io/home

4. UI設(shè)計(jì)

1. 定義設(shè)計(jì)風(fēng)格：了解行業(yè)常用主流風(fēng)格，科技感、商務(wù)感等。
2. 設(shè)計(jì)頁面布局：確定尺寸，劃分頁面布局，主次分明，合理利用顯示單元，避免關(guān)鍵指標(biāo)分割。
3. 選取可視化圖表類型：篩選最能體現(xiàn)設(shè)計(jì)意圖的圖表，追求易理解、可實(shí)現(xiàn)。

圖表參考網(wǎng)站：

from data to viz:

https://www.data-to-viz.com/#portfolio

echarts:

https://echarts.apache.org/examples/zh/index.html

整體風(fēng)格：

• Flat UI：簡(jiǎn)潔明快，扁平化，讓用戶能夠快速獲取數(shù)據(jù)信息。
• HUD：科技感，將數(shù)據(jù)以三維立體的方式呈現(xiàn)給用戶。通常采用黑色或深色背景，以突出數(shù)據(jù)信息的可視化效果。
• FUI：多維數(shù)據(jù)可視化，通常采用鮮艷明亮的顏色，以吸引用戶的注意力。
• 3D：立體感強(qiáng)，采用三維建模技術(shù)，通常采用仿真效果，讓用戶有更強(qiáng)的沉浸感和交互感。

頁面布局：

大屏類型：

• 標(biāo)準(zhǔn)大屏：分辨率1920*1080，比例16：9
• 超大屏：比例16：9 ，面積更大，標(biāo)準(zhǔn)屏拼接或延展而來
• 異形屏：比例不是16：9
• 布局類型：常規(guī)布局、左右布局、上下布局、繁星布局、均等布局、故事布局

可視化設(shè)計(jì)：設(shè)計(jì)風(fēng)格與圖表類型符合業(yè)務(wù)。

樣圖溝通確認(rèn)：低保真??高保真。

UI參考網(wǎng)站：

• 包圖網(wǎng)：https://ibaotu.com/
• 花瓣網(wǎng)：https://huaban.com/

5. 數(shù)據(jù)可視化

數(shù)據(jù)可視化工具：帆軟、Power BI、Tableau等，自研DMP（Data Management Platform，數(shù)據(jù)管理平臺(tái)）。

三、核心功能

1. 數(shù)據(jù)展示

提供多維度的數(shù)據(jù)展示，包括數(shù)據(jù)的實(shí)時(shí)更新、歷史數(shù)據(jù)的可視化呈現(xiàn)等。通過圖形、圖表、圖像和其他可視化元素，將數(shù)據(jù)以直觀、清晰的方式呈現(xiàn)給用戶。

• 數(shù)據(jù)的實(shí)時(shí)性
• 數(shù)據(jù)的準(zhǔn)確性
• 數(shù)據(jù)的篩選和過濾
• 數(shù)據(jù)的圖表化
• 數(shù)據(jù)的色彩搭配
• 數(shù)據(jù)的布局
• 數(shù)據(jù)的異常檢測(cè)

2. 交互操作

支持通過觸摸屏、鼠標(biāo)等進(jìn)行交互，用戶可以通過交互操作來控制數(shù)據(jù)大屏的顯示內(nèi)容、布局、樣式等，實(shí)現(xiàn)個(gè)性化定制。

• 操作簡(jiǎn)單直觀
• 減少誤操作
• 提供反饋信息
• 支持多種交互方式
• 動(dòng)態(tài)交互
• 保護(hù)用戶隱私
• 考慮多終端適配

3. 數(shù)據(jù)分析

集成各種數(shù)據(jù)分析工具和算法，能夠?qū)φ故緮?shù)據(jù)進(jìn)行深入的分析和挖掘。例如，用戶可以通過數(shù)據(jù)大屏進(jìn)行數(shù)據(jù)的過濾、篩選、比較、排序等操作，以便更好地理解數(shù)據(jù)。

• 數(shù)據(jù)挖掘與理解
• 多維度分析
• 實(shí)時(shí)監(jiān)測(cè)與互動(dòng)
• 輔助決策支持
• 信息安全與隱私保護(hù)

4. 數(shù)據(jù)預(yù)警

數(shù)據(jù)大屏可以設(shè)置數(shù)據(jù)預(yù)警功能，當(dāng)數(shù)據(jù)達(dá)到預(yù)設(shè)閾值時(shí)，會(huì)自動(dòng)觸發(fā)預(yù)警提示（字體顏色、字號(hào)變化，API推送移動(dòng)端提醒），以便用戶及時(shí)發(fā)現(xiàn)并處理問題。

• 預(yù)警設(shè)置
• 實(shí)時(shí)監(jiān)控
• 動(dòng)態(tài)閾值調(diào)整
• 異常檢測(cè)
• 預(yù)警管理
• 歷史數(shù)據(jù)分析

5. 集成其他系統(tǒng)

數(shù)據(jù)大屏可以與企業(yè)的其他信息系統(tǒng)進(jìn)行集成，如ERP、CRM、OA等，實(shí)現(xiàn)數(shù)據(jù)的共享和協(xié)同。支持不同系統(tǒng)之間的數(shù)據(jù)相互流通，提高企業(yè)整體的數(shù)據(jù)利用率。

• 在數(shù)據(jù)源上集成接入其他系統(tǒng)數(shù)據(jù)，實(shí)現(xiàn)數(shù)據(jù)集成
• 將數(shù)據(jù)大屏嵌入到第三方業(yè)務(wù)系統(tǒng)中
• 將第三方系統(tǒng)iframe嵌入到大屏系統(tǒng)
• API攜帶參數(shù)跳轉(zhuǎn)實(shí)現(xiàn)集成
• 企業(yè)微信、飛書、釘釘?shù)热杰浖慕涌谡{(diào)用
• RPA機(jī)器人的使用