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

一、需求背景

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

二、需求思路

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

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

① Who：用戶是誰？有哪些用戶類型？

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

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

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

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

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

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

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

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

⑤ How：我們怎么滿足用戶的需求，包括場景使用需求和數(shù)據(jù)需求？

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

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

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

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

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

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

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

3. 實現(xiàn)過程和難點

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

5.2. 內(nèi)容排版

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

5.3. 大屏字體

中文字體：思源黑體

主標題：36px

副標題：20px

正文：16px

特殊文字：14px

5.4. 配色

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

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