編輯導(dǎo)語：數(shù)據(jù)調(diào)研可以幫助我們更專業(yè)地做設(shè)計(jì)，尤其在數(shù)據(jù)可視化設(shè)計(jì)中，設(shè)計(jì)前對(duì)數(shù)據(jù)的了解可以幫助設(shè)計(jì)師提前做好方案規(guī)劃，從而實(shí)現(xiàn)更好的可視化效果，展示數(shù)據(jù)的真實(shí)樣貌。本篇文章里，作者就數(shù)據(jù)調(diào)研于可視化設(shè)計(jì)的重要性、以及如何進(jìn)行數(shù)據(jù)調(diào)研等方面做了總結(jié)，一起來看一下。

你說把大屏畫好，卻對(duì)數(shù)據(jù)摸不清頭腦，然后你想，那我問你改到深夜要不要？

大家好，這里是EasyV數(shù)字孿生可視化設(shè)計(jì)師（劃掉：腿長(zhǎng)1米8的）元寶，來填坑了，這是最近幾天寫的關(guān)于“數(shù)據(jù)調(diào)研”的文章。

距離我上一次更新的文章也已經(jīng)過去一年多了，系列前兩篇指路：

• 數(shù)據(jù)可視化大屏設(shè)計(jì)師，我不信你沒有這些困惑(上）
• 需求調(diào)研不積極，數(shù)據(jù)可視化大屏改到你窒息！

今天這是《數(shù)據(jù)大屏設(shè)計(jì)師，我不信你沒有這些困惑》系列的第3篇——關(guān)于數(shù)據(jù)調(diào)研。

一、寫在前面

• 因?yàn)槲沂窃O(shè)計(jì)師，所以這是一篇設(shè)計(jì)師視角下的關(guān)于數(shù)據(jù)調(diào)研的心得，不夠?qū)I(yè)之處，歡迎指正交流～
• 文風(fēng)平易近人和藹可親，不嚴(yán)肅。

若無單獨(dú)說明，配圖均來自個(gè)人制作或EasyV平臺(tái)。

二、為什么要做數(shù)據(jù)調(diào)研

上理論：

• 可視化=裝盤，數(shù)據(jù)=菜。
• 菜有多有少，有干有湯，有長(zhǎng)有短，如果你不知道菜啥樣，你就裝不好盤。
• 避免“無中生有”、“憑空想象”地做設(shè)計(jì)，不然等接數(shù)據(jù)的時(shí)候，你要改很多 ， 客戶還會(huì)覺得你很不專業(yè)。
• 客戶對(duì)你的“理想效果圖”很滿意，但是因?yàn)閿?shù)據(jù)原因，看到落地效果很差，會(huì)有種“被騙”的感覺，先揚(yáng)后抑的情緒會(huì)影響交付。

好！舉一些沒有根據(jù)真實(shí)數(shù)據(jù)做設(shè)計(jì)而踩坑的生動(dòng)例子。

1. 菜很多，但你準(zhǔn)備了個(gè)小盤子

翻譯：你預(yù)留的空間被數(shù)據(jù)撐爆了！

最常見的是這種：

如果設(shè)計(jì)前對(duì)數(shù)據(jù)做了了解，我們就可以針對(duì)性地做調(diào)整：

• 調(diào)節(jié)X軸標(biāo)簽的文字方向，避免重疊。
• 排序（柱子少的時(shí)候，我們可以很快地用肉眼比較大小，但柱子數(shù)量太多時(shí)，判斷起來就沒那么容易了）。

然后就能得到一個(gè)更好一點(diǎn)的可視化效果：

沒有對(duì)數(shù)據(jù)做截?cái)嗵幚恚?/p>

沒有針對(duì)指標(biāo)名稱太太太太太長(zhǎng)的情況做處理：

增長(zhǎng)率會(huì)超過100%，但是右側(cè)軸的最大值卡死成了100：

給翻牌器的數(shù)位留少了，都長(zhǎng)到擋住了右邊的icon：

2. 你準(zhǔn)備了大盤子，但菜只有一小點(diǎn)兒

翻譯：你以為數(shù)據(jù)很多很飽滿，但其很干癟。

一個(gè)近年來的趨勢(shì)圖，結(jié)果只有兩年的數(shù)據(jù)，要是早知道是這樣，就不會(huì)用折線圖了：

你以為數(shù)據(jù)是全省開花很豐滿：

但接了數(shù)據(jù)以后，發(fā)現(xiàn)很“慘淡”：

如果早知道是這種情況，在設(shè)計(jì)上，可以在西北方加點(diǎn)光暈點(diǎn)綴，讓地圖的視覺更平衡，也更加突出：

當(dāng)然，也可以放大地圖到東南部地區(qū)，但是不利于得到一個(gè)“全局”觀感：

3. 你準(zhǔn)備好了盤子，但是菜沒了

翻譯：你設(shè)計(jì)完了，最后客戶說這些指標(biāo)數(shù)據(jù)取不到/不要了。

令客戶決定去掉某個(gè)指標(biāo)的原因，包括但不限于：

• 需要跨部門取數(shù)，那個(gè)部門的人不給。
• 這個(gè)數(shù)據(jù)顯得我們業(yè)務(wù)很差。
• 這個(gè)數(shù)據(jù)在庫(kù)里有做字段，但實(shí)際沒有收集到。
• 這個(gè)數(shù)據(jù)的計(jì)算規(guī)則太復(fù)雜了，被人問到可能說不清楚。
• 我們地圖上的點(diǎn)位和路線都是手畫的，沒有經(jīng)緯度數(shù)據(jù)。
• 我就是不想要了。
• ……

作為設(shè)計(jì)師，又能怎么辦呢？所以要在開始設(shè)計(jì)前，盡量確定取數(shù)難度和數(shù)據(jù)質(zhì)量，降低客戶砍數(shù)據(jù)的概率。

4. 菜不好看，但要你裝盤得好看

翻譯：就是數(shù)據(jù)美化。

例如，數(shù)據(jù)差異太大，除了系列四，其他三類基本看不出來變化趨勢(shì)：

面對(duì)這種情況，我們不能去強(qiáng)行拉小差距（比如改大Y軸的最小值），這會(huì)造成數(shù)據(jù)觀測(cè)的“失真”！但我們可以通過交互去解決：

因?yàn)榻?jīng)常吃這種虧，所以我現(xiàn)在都是（在EasyV中）優(yōu)先選擇帶“點(diǎn)擊圖例隱藏系列”功能的圖表組件去還原設(shè)計(jì)了。

這種坑，對(duì)于“一枝獨(dú)秀”的柱狀圖，也是可以套用的：

還有這種，收入在上升，增長(zhǎng)率在下降，客戶說看上去像是業(yè)績(jī)下滑：

首先，我認(rèn)為，這是讀圖（就是閱讀理解）的問題，不能拋開指標(biāo)本身的含義，去單獨(dú)得出「下降就是業(yè)績(jī)不好」的結(jié)論。環(huán)比增長(zhǎng)率下降，但依然為正值，所以只是“增速變緩”而已。

但是，對(duì)于展示類的可視化大屏，客戶不想被觀眾第一眼就理解為業(yè)績(jī)變差，也是可以理解的！所以，建議增長(zhǎng)率在下降的情況下，就不要展示增長(zhǎng)率了，直接換成柱子的數(shù)據(jù)，增強(qiáng)業(yè)務(wù)在上升的感覺：

如果甲方就是要顯示增長(zhǎng)率，可以在上一張圖的基礎(chǔ)上，將增長(zhǎng)率做定制開發(fā)，顯示在兩根柱子之間：

一些負(fù)面類數(shù)據(jù)，其實(shí)數(shù)據(jù)少才代表業(yè)務(wù)好，但客戶經(jīng)常會(huì)覺得“太空”：

面對(duì)這種觀感反饋，我們可以給出以下三種方案：

1. 空什么空？那是業(yè)務(wù)好，請(qǐng)尊重事實(shí)，就這樣不改了！
2. 可以反轉(zhuǎn)換成類似“不逾期率”、“良率”（但估計(jì)沒有這樣的反義使用）和“及格率”，這樣業(yè)務(wù)好的時(shí)候就是滿滿的數(shù)據(jù)了
3. 將圖形換成帶有警示意味的顏色，能得到一個(gè)比較順暢的邏輯：紅色少 = 壞的少 = 業(yè)務(wù)好 。

大家應(yīng)該看出來了，我們?cè)O(shè)計(jì)師能做的“美化”，不是去干“下降的變上升、少的變多、強(qiáng)行拉小差距”這種違背事實(shí)的騷操作。

而是在尊重?cái)?shù)據(jù)真實(shí)樣貌的前提下：

• 讓觀眾把數(shù)據(jù)看全、看清；
• 幫助客戶更好地達(dá)到展示目的；
• 用更符合邏輯的方式展示數(shù)據(jù)，促進(jìn)理解。

5. 其他

圖片（圖片也是一種數(shù)據(jù)）的尺寸不都是方形，填充到容器內(nèi)發(fā)生變形：

這Y軸上一大串的0，真是有、、多：

這種最煩人，大部分的X軸標(biāo)簽長(zhǎng)度都可以在2行內(nèi)顯示完，就有那么一個(gè)特別的長(zhǎng)，也沒造成遮擋，但是就是看著不舒服：

上面這種情況（就是文本長(zhǎng)度差距大的），建議直接橫向柱狀圖走起：

總之，在對(duì)數(shù)據(jù)了解不充分的情況下，我們?cè)O(shè)計(jì)出來的可視化系統(tǒng)，無法很好地承接和展現(xiàn)真實(shí)數(shù)據(jù)的樣貌，會(huì)顯得很“蹩腳”、“不專業(yè)”！

三、那么我們應(yīng)該去調(diào)研數(shù)據(jù)的哪些方面呢！

在論證完設(shè)計(jì)前做數(shù)據(jù)調(diào)研的重要性之后，我嘗試總結(jié)了應(yīng)該提前關(guān)注數(shù)據(jù)的以下特征。

1. 客戶是否能提供數(shù)據(jù)

1）要展示的這些指標(biāo)，是否都能提供數(shù)據(jù)？（就是提供數(shù)據(jù)接口）

• 轉(zhuǎn)給數(shù)據(jù)開發(fā)的同事核對(duì)數(shù)據(jù)接口細(xì)節(jié)；
• 了解數(shù)據(jù)格式是否統(tǒng)一規(guī)范。

2）是否能提供地圖上的經(jīng)緯度數(shù)據(jù)

• 全國(guó)各地的公司所在地的經(jīng)緯度；
• 水路運(yùn)輸?shù)穆窂浇?jīng)緯度；
• ……

因?yàn)榭蛻魺o法提供點(diǎn)位的經(jīng)緯度，要手動(dòng)“造點(diǎn)”。

2. 數(shù)據(jù)含義和文本長(zhǎng)度

1）數(shù)據(jù)的含義是什么（別設(shè)計(jì)完了，別人問你，你說不清楚指標(biāo)啥意思）

2）數(shù)據(jù)之間的關(guān)系

3）指標(biāo)名稱/文本類數(shù)據(jù)的長(zhǎng)度：

• 最少幾個(gè)字；
• 最長(zhǎng)幾個(gè)字。

3. 數(shù)據(jù)的數(shù)量和種類

1）一共有多少個(gè)數(shù)據(jù)

• 各區(qū)縣營(yíng)收柱狀圖：一共有28個(gè)區(qū)縣；
• 各節(jié)點(diǎn)健康狀態(tài)：一共有120+個(gè)節(jié)點(diǎn)；
• 地圖上顯示分公司點(diǎn)位：只有3個(gè)分公司；
• ……

2）一共有多少種分類（我們要根據(jù)這個(gè)預(yù)置顏色/樣式的數(shù)量）

• 貨物種類占比圖：一共有15種貨物（對(duì)于分類過多的，一般操作是：取前5，之后歸為“其他”，我們預(yù)置6種顏色）；
• 預(yù)警信息一共有4個(gè)等級(jí)：一般、較重、嚴(yán)重、特別嚴(yán)重；
• ……

4. 數(shù)值范圍

1）一般為幾位數(shù)

2）最大值會(huì)到多少：例如，若是百分比會(huì)超過100%嗎？

3）最小值會(huì)到多少：例如，最小會(huì)為負(fù)值嗎？

4）是否可為空：例如，為空時(shí)如何處理：隱藏 or 占位標(biāo)記？

5）是否有人為設(shè)定的區(qū)間：

• ?>80%變?yōu)轭A(yù)警狀態(tài)；
• ……

5. 數(shù)據(jù)格式

1）單位是什么

• 人民幣還是美元；
• 元還是萬元；
• …

2）小數(shù)還是百分比

3）保留幾位小數(shù)：小數(shù)末尾為0是否保留

4）帶經(jīng)緯度的數(shù)據(jù)格式

• 基于什么坐標(biāo)系；
• 點(diǎn)線面數(shù)據(jù)的格式；
• ……

6. 其他

1）監(jiān)控視頻流

• 畫面比例是多少；
• 視頻流格式是什么。

2）圖片類數(shù)據(jù)

• 來源：靜態(tài)還是URL；
• 尺寸比例。

3）數(shù)據(jù)樣式規(guī)范

• “紅增綠減”還是“綠增紅減”；
• 有的正常狀態(tài)的顏色不能用綠色，要依照已有系統(tǒng)沿用為藍(lán)色；
• ……

還有很多零零碎碎的，但是我年紀(jì)大了記不起來了。

四、真實(shí)工作中的數(shù)據(jù)調(diào)研

在真實(shí)工作中，往往因?yàn)楦鞣N條件限制，我們無法得到充分的數(shù)據(jù)調(diào)研支持，原因包括但不限于：

• 沒有數(shù)據(jù)分析師幫你；
• 你自己調(diào)研太被動(dòng)；
• 甲方的對(duì)接人也要去問不同的人，調(diào)研周期太長(zhǎng)；
• ……

在這樣的條件下，我們只好先設(shè)計(jì)，然后多問題也只能等到接上了真實(shí)數(shù)據(jù)之后再去發(fā)現(xiàn)。

但是，心態(tài)要放好，經(jīng)驗(yàn)告訴我，當(dāng)開始刻意關(guān)注數(shù)據(jù)情況之后，你會(huì)條件反射地預(yù)判之前說的那些可能發(fā)生的問題，然后提前做一些預(yù)備處理，等到真的發(fā)生了，就不會(huì)慌（但是依舊是會(huì)煩），會(huì)產(chǎn)生一種“我就知道會(huì)這樣！”的穩(wěn)重感哈哈哈。

最后用三句話，想讓大家給我點(diǎn)18個(gè)贊

很多時(shí)候，我們并不是在“設(shè)計(jì)數(shù)據(jù)”，而是在“給數(shù)據(jù)設(shè)計(jì)容器”。

基于真實(shí)數(shù)據(jù)做可視化設(shè)計(jì)，會(huì)更容易感受到數(shù)據(jù)的意義和價(jià)值，會(huì)更有收獲感。

祝大家少踩坑，少改圖，少加班??

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

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