在企業(yè)數(shù)字化轉(zhuǎn)型的浪潮中，數(shù)據(jù)可視化大屏已成為展示企業(yè)核心業(yè)務(wù)數(shù)據(jù)和指標(biāo)的重要工具。本文將分享企業(yè)級(jí)數(shù)據(jù)可視化大屏設(shè)計(jì)的實(shí)戰(zhàn)經(jīng)驗(yàn)，全方位剖析如何打造一個(gè)既炫酷又實(shí)用的數(shù)據(jù)可視化大屏。

一、需求背景

公司希望開發(fā)一個(gè)炫酷的可視化大屏，展示公司的核心業(yè)務(wù)數(shù)據(jù)和指標(biāo)，用戶主要是領(lǐng)導(dǎo)層（對(duì)內(nèi)）和外部客戶或合作伙伴（對(duì)外）。

二、需求思路

1. 確定業(yè)務(wù)場(chǎng)景

通過(guò)回答5W（Who、What、Why、When、Where、How），我們逐步深入和細(xì)化業(yè)務(wù)場(chǎng)景和用戶需求。

① Who：用戶是誰(shuí)？有哪些用戶類型？

經(jīng)過(guò)內(nèi)部溝通，本次大屏主要為對(duì)外商務(wù)演示使用，用戶類型主要為：同行、（潛在）合作伙伴、（潛在）投資方和其他參觀者。

② What：數(shù)據(jù)大屏是什么？用戶希望看到的數(shù)據(jù)大屏是什么樣的，他們有哪些期望？用戶重點(diǎn)關(guān)注哪些數(shù)據(jù)和指標(biāo)？

經(jīng)過(guò)溝通，了解到業(yè)務(wù)方對(duì)于大屏的期望：

• 展示公司的資產(chǎn)規(guī)模、交易規(guī)模和用戶規(guī)模，有匯總也要有明細(xì)，支持?jǐn)?shù)據(jù)下鉆；
• 展示業(yè)務(wù)的核心指標(biāo)，按照業(yè)務(wù)類型分別展示。
• 數(shù)據(jù)既要真實(shí)、可靠、相互可佐證，又要符合公司對(duì)外宣傳的規(guī)模和形象，還需要系統(tǒng)自動(dòng)更新數(shù)據(jù)，不依賴人力維護(hù)。
• 希望大屏外觀上比較炫酷、有科技感、有動(dòng)態(tài)、能交互。

③ Why：用戶為什么需要數(shù)據(jù)大屏，主要用途是什么？

B端究竟需要什么样的产品经理？

B端产品经理都是以提升供应侧的工作效率为目的，所以B端需求主要是以业务问题为导向。 这个是B端产品比较重要的一点，B端产品是服务于一个主体 ...

查看详情 >

主要用于客戶演示，但領(lǐng)導(dǎo)層也希望通過(guò)大屏了解公司業(yè)務(wù)全局，所以會(huì)有對(duì)內(nèi)對(duì)外兩個(gè)方向的使用場(chǎng)景。

④ When、Where：用戶在什么時(shí)候什么場(chǎng)景在哪里看數(shù)據(jù)可視化大屏？

初步確定使用場(chǎng)景和投屏設(shè)備

⑤ How：我們?cè)趺礉M足用戶的需求，包括場(chǎng)景使用需求和數(shù)據(jù)需求？

這部分就是具體的需求分析和方案設(shè)計(jì)了。

2. 確定業(yè)務(wù)指標(biāo)

根據(jù)大屏的使用場(chǎng)景和作用，確定大屏上要展示的數(shù)據(jù)和指標(biāo)，比如設(shè)備運(yùn)維監(jiān)控大屏，可能會(huì)展示設(shè)備的規(guī)模和區(qū)域分布、設(shè)備運(yùn)行的實(shí)時(shí)狀態(tài)和設(shè)備故障告警等。

我本次的數(shù)據(jù)大屏主要是對(duì)外演示，展示公司某一核心業(yè)務(wù)的規(guī)模和運(yùn)營(yíng)效率等，向外展示公司在這一業(yè)務(wù)上的實(shí)力和能力。

主要的數(shù)據(jù)包括：

1. 規(guī)模數(shù)據(jù)：資產(chǎn)規(guī)模、交易規(guī)模、用戶規(guī)模、客戶規(guī)模
2. 細(xì)分?jǐn)?shù)據(jù)：資產(chǎn)不同維度的分布、交易分布、日新增、日活躍等
3. 區(qū)域分布：資產(chǎn)覆蓋省份和城市，具體省份和城市的數(shù)據(jù)。
4. 核心指標(biāo)：業(yè)務(wù)質(zhì)量指標(biāo)和效率指標(biāo)，加上一定時(shí)間的趨勢(shì)圖，增加數(shù)據(jù)豐富度。
5. 區(qū)域排行：省份和城市資產(chǎn)/交易/指標(biāo)排行和分布

列舉出所有要展示的業(yè)務(wù)指標(biāo)、計(jì)算公式和數(shù)據(jù)維度，在列舉的同時(shí)，初步規(guī)劃展示形式和排版布局。

3. 實(shí)現(xiàn)過(guò)程和難點(diǎn)

在做這個(gè)企業(yè)級(jí)數(shù)據(jù)可視化大屏過(guò)程中，主要有三個(gè)難點(diǎn)：

① 大屏展示的數(shù)據(jù)和指標(biāo)

如果完全零基礎(chǔ)搭建數(shù)據(jù)和指標(biāo)，需要完成數(shù)據(jù)采集、清洗和指標(biāo)輸出等全流程開發(fā)，在開始大屏需求之前要先完成底層數(shù)據(jù)指標(biāo)系統(tǒng)的搭建，對(duì)于研發(fā)和測(cè)試來(lái)說(shuō)是一個(gè)非常大的工作量。

好在我們小團(tuán)隊(duì)已經(jīng)對(duì)該業(yè)務(wù)積累了基礎(chǔ)數(shù)據(jù)和指標(biāo)體系，大屏所需的數(shù)據(jù)基本是現(xiàn)成的，部分?jǐn)?shù)據(jù)需要再基于檔案和訂單再做統(tǒng)計(jì)和呈現(xiàn)。

② 好看、高大上的大屏界面

大屏需兼顧數(shù)據(jù)可讀性與視覺表現(xiàn)力，涉及動(dòng)態(tài)圖表、空間布局、視覺動(dòng)效等多維度設(shè)計(jì)。由于部門UI資源短缺，作為產(chǎn)品經(jīng)理真的是硬著頭皮完成了大屏的UI設(shè)計(jì)圖和動(dòng)態(tài)效果。

前端同事非常給力，最終效果還原度90%，得到領(lǐng)導(dǎo)的好評(píng)。

③ 數(shù)據(jù)真實(shí)性和展示策略的平衡

我們的大屏數(shù)據(jù)是真實(shí)值和屏顯值雙軌并行的。屏顯值是指在真實(shí)值上加上了偏移值，最終顯示在大屏上的數(shù)據(jù)，如果數(shù)據(jù)未加偏移，屏顯值=真實(shí)值。

這樣做是因?yàn)轭I(lǐng)導(dǎo)層希望平時(shí)看到最真實(shí)的數(shù)據(jù)，但對(duì)外客戶演示時(shí)，有些數(shù)據(jù)較為敏感或不符合對(duì)外宣傳，則需要在真實(shí)數(shù)據(jù)基礎(chǔ)上增加偏移值。

最終證明，我們這個(gè)雙軌并行真的是太“明智”了，避免了業(yè)務(wù)和研發(fā)的“糾纏”。

4. 最終實(shí)現(xiàn)結(jié)果

感謝前端和后端大佬的鼎力支持，大屏很順利地按期上線，后面根據(jù)業(yè)務(wù)部門的建議，進(jìn)行了幾個(gè)小版本的優(yōu)化，目前已在正常使用。

5. 大屏設(shè)計(jì)的一些方法

5.1. 了解展示的設(shè)備

需要提前了解大屏?xí)故驹谀男┰O(shè)備上，設(shè)備分辨率和尺寸是多少，更專業(yè)的可能還要考慮點(diǎn)間距、最佳可視距離等。

如果投屏設(shè)備的尺寸和分辨率不標(biāo)準(zhǔn)、屏幕是拼接屏，設(shè)計(jì)稿最好是基于投屏設(shè)備進(jìn)行設(shè)計(jì)，但這樣復(fù)用性就不高，投屏到其他設(shè)備，大屏?xí)冃巍?/p>

由于我們投屏設(shè)備是比較標(biāo)準(zhǔn)的尺寸和屏幕，分辨率也支持調(diào)整。所以設(shè)計(jì)稿選擇常規(guī)的1920:1080，電腦和投屏設(shè)備打開，都能正常展示。

5.2. 內(nèi)容排版

1. 信息層級(jí)：核心內(nèi)容占60%，輔助信息占30%，次要信息占10%，凸出核心內(nèi)容。
2. 符合人視覺動(dòng)線習(xí)慣：一般人們習(xí)慣左上→右上→左下→右下的視覺動(dòng)線看屏幕。我們?cè)O(shè)計(jì)的時(shí)候可以結(jié)合用戶習(xí)慣，先把核心重點(diǎn)內(nèi)容放在左上方，再通過(guò)一些對(duì)比、動(dòng)態(tài)、高亮、微交互等吸引用戶關(guān)注重要內(nèi)容。
3. 數(shù)據(jù)-圖表：數(shù)據(jù)要表達(dá)什么信息（趨勢(shì)、占比和分布），使用哪種圖表類型更合適清晰。
4. 明確主題：圖表不要太過(guò)簡(jiǎn)化，要完整準(zhǔn)確地告知表達(dá)的信息。

5.3. 大屏字體

中文字體：思源黑體

主標(biāo)題：36px

副標(biāo)題：20px

正文：16px

特殊文字：14px

5.4. 配色

1. 黃金6:3:1法則：60%主色（重要內(nèi)容）、30%輔色（一般）、10%對(duì)比色（次要）
2. 大屏一般是暗色背景，最好使用高飽和度且協(xié)調(diào)統(tǒng)一的配色，背景優(yōu)先使用純色，避免漸變和圖片底色（我們第一版加了很淺的網(wǎng)格底圖，后面投屏放上去，網(wǎng)格非常明顯，顯得大屏有點(diǎn)幼態(tài)）。
3. 顏色含義匹配：紅色一般表示預(yù)警/危險(xiǎn)/下降，綠色表示安全/正常/上升、灰色表示暫停/無(wú)變化等。

大概先這樣了~先完結(jié)了