編輯導(dǎo)語：在數(shù)據(jù)業(yè)務(wù)展示場景中，數(shù)據(jù)可視化大屏已經(jīng)變得十分常見。那么在設(shè)計(jì)思路上，數(shù)據(jù)可視化大屏應(yīng)當(dāng)遵循什么樣的設(shè)計(jì)邏輯？本篇文章里，作者結(jié)合實(shí)際案例，對(duì)數(shù)據(jù)化大屏的可視化設(shè)計(jì)原則做了分析，一起來看一下。

數(shù)據(jù)化大屏現(xiàn)在是公司的一項(xiàng)常用的數(shù)據(jù)業(yè)務(wù)設(shè)計(jì)展示模式，最近在負(fù)責(zé)公司的一款數(shù)據(jù)大屏的設(shè)計(jì)工作，做一下復(fù)盤吧。沒有太多看法，只說幾點(diǎn)思路想法。

一、設(shè)計(jì)開始時(shí)，要確定尺寸和顏色風(fēng)格

大屏是電腦內(nèi)容投影到大屏上的頁面，要結(jié)合電腦屏幕的分辨率來定設(shè)計(jì)稿尺寸。

拿我們公司來說，我們公司的大屏是拼接屏16:9的，所以設(shè)計(jì)頁面尺寸選用了1920*1080的尺寸，當(dāng)然了也可以用4k電腦屏幕的3840*2160；因?yàn)槭瞧唇悠?，所以采用了深色暗色背景，這樣可減少拼縫帶來的不適感。

確定好尺寸和背景顏色后，需要明確出發(fā)點(diǎn)：大屏設(shè)計(jì)是在充分了解業(yè)務(wù)需求的基礎(chǔ)上進(jìn)行的。

我們都知道大屏數(shù)據(jù)可視化是以大屏為主要展示載體的數(shù)據(jù)可視化設(shè)計(jì)。大屏數(shù)據(jù)可視化目前主要有信息展示、數(shù)據(jù)分析及監(jiān)控預(yù)警三大類。所以拿到需求的時(shí)候首先要知道這個(gè)大屏是干什么的？功能是什么？

而大屏的設(shè)計(jì)要堅(jiān)持，大屏數(shù)據(jù)可視化設(shè)計(jì)原則——即設(shè)計(jì)服務(wù)需求、先總體后細(xì)節(jié)。

二、好了，接下來進(jìn)行第一點(diǎn)分析——大屏的數(shù)據(jù)怎么放？

我們想象一下，一個(gè)屏幕承載的內(nèi)容，用戶第一眼看到它，你希望他一眼記下全部？ 怎么可能呢，怎么可能會(huì)讓人一眼全部看的仔細(xì)，而且記得深刻，這是不現(xiàn)實(shí)，我們無需說一些冠冕堂皇、大而空的話說會(huì)通過設(shè)計(jì)手法實(shí)現(xiàn)這個(gè)。

大屏因?yàn)榇?，承載數(shù)據(jù)多，而大屏承載的又是數(shù)據(jù)信息，它的特點(diǎn)就是數(shù)據(jù)可視化的展示；所以，它最不缺的就是數(shù)據(jù)!

當(dāng)信息聚集的時(shí)候，人接收信息的方式有3種：視覺性型，聽覺型和觸覺型。

而其中獲得的大部分信息是由視覺提供的。這時(shí)候大量的數(shù)據(jù)信息集中出現(xiàn)，那么用戶對(duì)于信息的獲取其實(shí)是短暫的、遲鈍的，容易視覺混亂、迷失。

這時(shí)對(duì)于大屏的數(shù)據(jù)展示來說，它最缺少的恰恰是數(shù)據(jù)的篩選主次。

因此主要而首要的設(shè)計(jì)任務(wù)是要有一個(gè)數(shù)據(jù)及其內(nèi)容的主次之分，輕重緩急，讓信息呈現(xiàn)要有焦點(diǎn)、有主次。大白話就是既然你無法對(duì)信息全部吸收，那就對(duì)你第一眼看到的信息過目不忘吧!

明確了這一關(guān)鍵點(diǎn)后，接下來需要對(duì)數(shù)據(jù)根據(jù)業(yè)務(wù)需求擬定各個(gè)指標(biāo)展示的優(yōu)先級(jí)（主、次、輔）。

我們可以通過對(duì)比，先把核心數(shù)據(jù)展示給用戶，待用戶理解大屏主要內(nèi)容與展示邏輯后，再慢慢逐級(jí)瀏覽二三級(jí)內(nèi)容。而且部分細(xì)節(jié)數(shù)據(jù)其實(shí)是可以暫時(shí)隱藏，用戶需要時(shí)可通過鼠標(biāo)點(diǎn)擊等交互方式喚起。接下來就是：

1. 核心業(yè)務(wù)指標(biāo)安排在中間位置、占較大面積。
2. 其余的指標(biāo)按優(yōu)先級(jí)依次在核心指標(biāo)周圍展開。
3. 一般把有關(guān)聯(lián)的指標(biāo)讓其相鄰或靠近，把圖表類型相近的指標(biāo)放一起，這樣能減少觀者認(rèn)知上的負(fù)擔(dān)并提高信息傳遞的效率。

當(dāng)然了這要看屏幕的布局，如果是左右布局，那主要信息在左邊，如果是三欄布局，那主要信息在中間，遵循：上下布局擇上；左右布局擇左，三欄布局擇中的原則。

三、數(shù)據(jù)的優(yōu)先級(jí)確定好后，需要進(jìn)行第二點(diǎn)分析——大屏的數(shù)據(jù)展示怎么設(shè)計(jì)？

1. 拿到數(shù)據(jù)和需求，我該怎么辦？

首先大屏設(shè)計(jì)是直面用戶的，以體驗(yàn)設(shè)計(jì)為例，大家都知道，用戶體驗(yàn)分為五要素，分別為表現(xiàn)層、框架層、結(jié)構(gòu)層、范圍層以及戰(zhàn)略層，每層都有相應(yīng)的內(nèi)容做支撐。

拿體驗(yàn)設(shè)計(jì)師來說，體驗(yàn)設(shè)計(jì)師的系統(tǒng)化設(shè)計(jì)思路，其實(shí)就是在拿到上層需求時(shí)，會(huì)先從底層戰(zhàn)略入手，思考底層戰(zhàn)略需要傳達(dá)的特征含義是什么，表現(xiàn)層怎么達(dá)成戰(zhàn)略落地。這就是為什么手里拿到一個(gè)需求，僅往上挖，挖不出太大價(jià)值的點(diǎn)，只能往下挖的原因。

作為設(shè)計(jì)師，在設(shè)計(jì)之初就要有模擬好要溝通的人（針對(duì)的用戶），可以通過對(duì)情緒反應(yīng)、情緒體驗(yàn)和情感關(guān)系的關(guān)注，運(yùn)用對(duì)于用戶的同理心、共情能力，尊重用戶的感受，并將這些思考應(yīng)用于設(shè)計(jì)策略中。同樣的，這種思考在大屏的展示設(shè)計(jì)中也是至關(guān)重要的，

大屏設(shè)計(jì)，數(shù)據(jù)是主要的，但是重點(diǎn)突出數(shù)據(jù)的重要性，會(huì)讓可視化圖表變得枯燥乏味，而過度注重絢麗多彩而讓數(shù)據(jù)的呈現(xiàn)效果大打折扣。

就像你看一本圖書的興趣大于一本純文字的書一樣，信息數(shù)據(jù)在大屏上的展示，也是設(shè)計(jì)的一個(gè)重點(diǎn)。而這個(gè)重點(diǎn)也是設(shè)計(jì)的其中一個(gè)要解決的問題——就是將枯燥的、專業(yè)的、不直觀的數(shù)據(jù)內(nèi)容，轉(zhuǎn)變成有趣的、淺顯的、直觀的信息傳達(dá)給觀眾。實(shí)現(xiàn)設(shè)計(jì)與功能之間的平衡，更好地溝通與傳達(dá)信息。

2. 首先第一個(gè)技巧就是：聯(lián)想

如何進(jìn)行聯(lián)想呢？聯(lián)想在于溝通，你溝通了才知道怎么去想啊，沒有目的的天馬行空只是胡思亂想。

設(shè)計(jì)師是需要溝通的:

1. 設(shè)計(jì)大屏的開始就是設(shè)計(jì)師對(duì)內(nèi)業(yè)務(wù)的溝通；
2. 其次是設(shè)計(jì)師對(duì)外需求的溝通；
3. 最后落足在設(shè)計(jì)師與大屏的溝通。

對(duì)內(nèi)業(yè)務(wù)溝通在于理解整體：

運(yùn)營同事和產(chǎn)品提供了信息與數(shù)據(jù)；那么設(shè)計(jì)師在挖掘到足量的數(shù)據(jù)基礎(chǔ)上，就要思考如何把業(yè)務(wù)用可視化的故事視角串聯(lián)起來。
到這就需要進(jìn)行聯(lián)想了，因?yàn)樯頌樵O(shè)計(jì)，聯(lián)想是很重要的，設(shè)計(jì)師從所要傳達(dá)事物的特征標(biāo)題文字或數(shù)據(jù)、或宣傳語等數(shù)據(jù)、文字出發(fā)進(jìn)行的聯(lián)想，這種聯(lián)想往往具有雙關(guān)的效果，本身就帶有一定趣味性。

所以需要我們要對(duì)語言文字（理解文案想表達(dá)的）、數(shù)據(jù)有一定的整體了解(理解這些數(shù)據(jù)的最大值及其最小值，是方便你進(jìn)行組件設(shè)計(jì)，進(jìn)行開發(fā))，在此基礎(chǔ)上進(jìn)行聯(lián)想和變通。

在我看來，一個(gè)大屏就是一個(gè)故事集；需要做的就是做好聯(lián)結(jié)聯(lián)系作用。

如果信息是業(yè)務(wù)層，那好辦了，那我們就可以聯(lián)想到業(yè)務(wù)的接觸者、實(shí)施者。

比如我們的大屏是以一帶一路為出發(fā)點(diǎn)，溝通海內(nèi)外企業(yè)交流合作的，那么從地理信息出發(fā)，我們的載體很明確，從宏觀到微觀依次是全球、國家、城市、商圈、單個(gè)建筑。整個(gè)布局就可以以這些標(biāo)志載體作為烘托和配圖。

對(duì)外需求的溝通在于輔助動(dòng)效：

我們都知道根據(jù)動(dòng)效的作用可分為：交互式動(dòng)效?和?非交互式動(dòng)效；但是呢，大屏上的展示多是以給交互式動(dòng)效進(jìn)行。

大多數(shù)情況，設(shè)計(jì)師我們要明確大屏設(shè)計(jì)本身要達(dá)到的目的，這比設(shè)計(jì)好大屏本身更加重要。

就像在我們工作中會(huì)有各種成品展示啊，工作匯報(bào)ppt啊等等，這就是展示成果。

說白了一句話：簡易的功能導(dǎo)航，有效的過渡以及酷炫的動(dòng)效最終都是服務(wù)用戶。

a：大屏輔之以動(dòng)效，這是加分的!

炫酷的動(dòng)效能夠迅速抓住用戶的注意力，同時(shí)還能起到引導(dǎo)用戶視線的作用，也用這種巧妙的方式清晰地向用戶傳遞了企業(yè)的品牌力和產(chǎn)品平臺(tái)實(shí)力；

b：用戶的每一個(gè)操作都會(huì)有一個(gè)期望，這個(gè)期望可能來源于現(xiàn)實(shí)映射!

對(duì)于用戶的這種操作期望，利用有效的時(shí)間來去吸引我們的用戶，就需要好看的畫面，有趣的動(dòng)效，將真實(shí)的現(xiàn)實(shí)轉(zhuǎn)換為虛擬平面，在此過程中必然要將一些“期望”情感放大，然后利用模型和3d及其動(dòng)效，將平面的設(shè)計(jì)增強(qiáng)情景感觸；這樣達(dá)到了縮小用戶期望，也給用戶身臨其境的真實(shí)感，加強(qiáng)體驗(yàn)舒適度。

c：利用動(dòng)效，讓整個(gè)大屏模塊過度盡量的流暢!

動(dòng)效的輔助使得界面與界面之間、界面上元素的出現(xiàn)和消失都的流暢，通過大小、位置和透明度的變化，使用戶和產(chǎn)品的交互過程也變得更流暢。

d：動(dòng)效的存在最大的作用就在于一點(diǎn)，那就是：讓用戶有操縱感。

這種操縱感不僅僅表現(xiàn)在對(duì)用戶的操作有了反應(yīng)、有了不同、有了顯示，還表現(xiàn)在讓用戶知道當(dāng)前模塊運(yùn)行的狀態(tài)，它是停止還是進(jìn)行中亦或者是在線還是下線；

所以可以反向思維一下:

既然用戶需要提升操縱感，那么就通過設(shè)計(jì)動(dòng)效去引導(dǎo)，來進(jìn)行暗示和指導(dǎo)，讓用戶主動(dòng)抑或者被動(dòng)的關(guān)注你想讓用戶關(guān)注某一功能或者是信息，那么這時(shí)候通過動(dòng)效展示數(shù)據(jù)屬性的定量信息進(jìn)行的暗示和指導(dǎo)，也就能快速的幫助用戶使用功能和注意到這個(gè)信息；

設(shè)計(jì)師與大屏的溝通其實(shí)在于有趣。

可視化大屏，每張界面不僅僅只是形態(tài)多變，而是真正做到給用戶帶來震撼的視覺沖擊，有趣很重要的。

a：數(shù)據(jù)和信息的展示更要發(fā)現(xiàn)數(shù)據(jù)內(nèi)在的信息和規(guī)律，讓他們變得有趣生動(dòng)起來。

我們可以通過大屏的硬件去了解，通過圖表類型的選擇，字體字號(hào)的選擇、顏色的對(duì)比、基礎(chǔ)組件的構(gòu)成這些去了解去實(shí)現(xiàn)讓信息和數(shù)據(jù)還有操作都變得有趣起來。

比如顏色，就和我們app和網(wǎng)頁設(shè)計(jì)一樣，都是選擇頁面中60%使用主色調(diào)，30%使用輔助色調(diào)，10%使用對(duì)比色調(diào)，選用包容性的配色方案。

拿數(shù)據(jù)的文字大小來說啊，我們想要顯示其中的一條數(shù)據(jù)，最好的方法就是加強(qiáng)它與其他元素的對(duì)比，從而提高它的重要性層級(jí)。就像兩個(gè)人面紅耳赤，非要一較高下，有趣有趣!

其他的就不細(xì)說了，都是一樣的； 當(dāng)然了，可能你想要的“有趣”對(duì)于開發(fā)相對(duì)困難，這時(shí)候就需要跟開發(fā)多多溝通。

四、最后，設(shè)計(jì)完成了，需要進(jìn)行第三點(diǎn)——大屏的交付

切圖與標(biāo)注是少不了的，按照網(wǎng)頁設(shè)計(jì)標(biāo)準(zhǔn)切就好了。也要看一下大屏的運(yùn)行、展示環(huán)境。UI走查一下，看看設(shè)計(jì)稿在大屏展示的效果，是否存在色差、文字內(nèi)容是否清晰可見、頁面動(dòng)效是否流暢、圖形圖表等是否按預(yù)期顯示、頁面是否存在變形拉伸等現(xiàn)象；當(dāng)然了，看看你的領(lǐng)導(dǎo)是否有新的需求和更改意見，這些都是要注意的。

最后我想說，隨著智能化校園或者智能社區(qū)等的興起，還有公司項(xiàng)目的宣傳性提高，大屏可視化設(shè)計(jì)對(duì)于數(shù)據(jù)和信息的展示也將是向用戶傳遞了企業(yè)的品牌力和產(chǎn)品實(shí)力的重要一環(huán)！

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

題圖來自Unsplash，基于 CC0 協(xié)議