tft每日頭條

 > 科技

 > 信息可視化設計

信息可視化設計

科技 更新时间:2024-06-26 10:34:57

編輯導語:數據調研可以幫助我們更專業地做設計,尤其在數據可視化設計中,設計前對數據的了解可以幫助設計師提前做好方案規劃,從而實現更好的可視化效果,展示數據的真實樣貌。本篇文章裡,作者就數據調研于可視化設計的重要性、以及如何進行數據調研等方面做了總結,一起來看一下。

信息可視化設計(不做數據調研的可視化設計)1

你說把大屏畫好,卻對數據摸不清頭腦,然後你想,那我問你改到深夜要不要?

大家好,這裡是EasyV數字孿生可視化設計師(劃掉:腿長1米8的)元寶,來填坑了,這是最近幾天寫的關于“數據調研”的文章。

距離我上一次更新的文章也已經過去一年多了,系列前兩篇指路:

今天這是《數據大屏設計師,我不信你沒有這些困惑》系列的第3篇——關于數據調研。

信息可視化設計(不做數據調研的可視化設計)2

一、寫在前面
  • 因為我是設計師,所以這是一篇設計師視角下的關于數據調研的心得,不夠專業之處,歡迎指正交流~
  • 文風平易近人和藹可親,不嚴肅。

若無單獨說明,配圖均來自個人制作或EasyV平台。

二、為什麼要做數據調研

上理論:

  • 可視化=裝盤,數據=菜。
  • 菜有多有少,有幹有湯,有長有短,如果你不知道菜啥樣,你就裝不好盤。
  • 避免“無中生有”、“憑空想象”地做設計,不然等接數據的時候,你要改很多 , 客戶還會覺得你很不專業。
  • 客戶對你的“理想效果圖”很滿意,但是因為數據原因,看到落地效果很差,會有種“被騙”的感覺,先揚後抑的情緒會影響交付。

好!舉一些沒有根據真實數據做設計而踩坑的生動例子。

1. 菜很多,但你準備了個小盤子

翻譯:你預留的空間被數據撐爆了!

信息可視化設計(不做數據調研的可視化設計)3

最常見的是這種:

信息可視化設計(不做數據調研的可視化設計)4

如果設計前對數據做了了解,我們就可以針對性地做調整:

  • 調節X軸标簽的文字方向,避免重疊。
  • 排序(柱子少的時候,我們可以很快地用肉眼比較大小,但柱子數量太多時,判斷起來就沒那麼容易了)。

然後就能得到一個更好一點的可視化效果:

信息可視化設計(不做數據調研的可視化設計)5

沒有對數據做截斷處理:

信息可視化設計(不做數據調研的可視化設計)6

沒有針對指标名稱太太太太太長的情況做處理:

信息可視化設計(不做數據調研的可視化設計)7

增長率會超過100%,但是右側軸的最大值卡死成了100:

信息可視化設計(不做數據調研的可視化設計)8

給翻牌器的數位留少了,都長到擋住了右邊的icon:

信息可視化設計(不做數據調研的可視化設計)9

2. 你準備了大盤子,但菜隻有一小點兒

翻譯:你以為數據很多很飽滿,但其很幹癟。

信息可視化設計(不做數據調研的可視化設計)10

一個近年來的趨勢圖,結果隻有兩年的數據,要是早知道是這樣,就不會用折線圖了:

信息可視化設計(不做數據調研的可視化設計)11

你以為數據是全省開花很豐滿:

信息可視化設計(不做數據調研的可視化設計)12

但接了數據以後,發現很“慘淡”:

信息可視化設計(不做數據調研的可視化設計)13

如果早知道是這種情況,在設計上,可以在西北方加點光暈點綴,讓地圖的視覺更平衡,也更加突出:

信息可視化設計(不做數據調研的可視化設計)14

當然,也可以放大地圖到東南部地區,但是不利于得到一個“全局”觀感:

信息可視化設計(不做數據調研的可視化設計)15

3. 你準備好了盤子,但是菜沒了

翻譯:你設計完了,最後客戶說這些指标數據取不到/不要了。

信息可視化設計(不做數據調研的可視化設計)16

令客戶決定去掉某個指标的原因,包括但不限于:

  • 需要跨部門取數,那個部門的人不給。
  • 這個數據顯得我們業務很差。
  • 這個數據在庫裡有做字段,但實際沒有收集到。
  • 這個數據的計算規則太複雜了,被人問到可能說不清楚。
  • 我們地圖上的點位和路線都是手畫的,沒有經緯度數據。
  • 我就是不想要了。
  • ……

作為設計師,又能怎麼辦呢?所以要在開始設計前,盡量确定取數難度和數據質量,降低客戶砍數據的概率。

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

翻譯:就是數據美化。

信息可視化設計(不做數據調研的可視化設計)17

例如,數據差異太大,除了系列四,其他三類基本看不出來變化趨勢:

信息可視化設計(不做數據調研的可視化設計)18

面對這種情況,我們不能去強行拉小差距(比如改大Y軸的最小值),這會造成數據觀測的“失真”!但我們可以通過交互去解決:

信息可視化設計(不做數據調研的可視化設計)19

因為經常吃這種虧,所以我現在都是(在EasyV中)優先選擇帶“點擊圖例隐藏系列”功能的圖表組件去還原設計了。

這種坑,對于“一枝獨秀”的柱狀圖,也是可以套用的:

信息可視化設計(不做數據調研的可視化設計)20

還有這種,收入在上升,增長率在下降,客戶說看上去像是業績下滑:

信息可視化設計(不做數據調研的可視化設計)21

首先,我認為,這是讀圖(就是閱讀理解)的問題,不能抛開指标本身的含義,去單獨得出「下降就是業績不好」的結論。環比增長率下降,但依然為正值,所以隻是“增速變緩”而已。

但是,對于展示類的可視化大屏,客戶不想被觀衆第一眼就理解為業績變差,也是可以理解的!所以,建議增長率在下降的情況下,就不要展示增長率了,直接換成柱子的數據,增強業務在上升的感覺:

信息可視化設計(不做數據調研的可視化設計)22

如果甲方就是要顯示增長率,可以在上一張圖的基礎上,将增長率做定制開發,顯示在兩根柱子之間:

信息可視化設計(不做數據調研的可視化設計)23

一些負面類數據,其實數據少才代表業務好,但客戶經常會覺得“太空”:

信息可視化設計(不做數據調研的可視化設計)24

面對這種觀感反饋,我們可以給出以下三種方案:

  1. 空什麼空?那是業務好,請尊重事實,就這樣不改了!
  2. 可以反轉換成類似“不逾期率”、“良率”(但估計沒有這樣的反義使用)和“及格率”,這樣業務好的時候就是滿滿的數據了
  3. 将圖形換成帶有警示意味的顔色,能得到一個比較順暢的邏輯:紅色少 = 壞的少 = 業務好 。

信息可視化設計(不做數據調研的可視化設計)25

大家應該看出來了,我們設計師能做的“美化”,不是去幹“下降的變上升、少的變多、強行拉小差距”這種違背事實的騷操作。

信息可視化設計(不做數據調研的可視化設計)26

而是在尊重數據真實樣貌的前提下:

  • 讓觀衆把數據看全、看清;
  • 幫助客戶更好地達到展示目的;
  • 用更符合邏輯的方式展示數據,促進理解。

5. 其他

圖片(圖片也是一種數據)的尺寸不都是方形,填充到容器内發生變形:

信息可視化設計(不做數據調研的可視化設計)27

這Y軸上一大串的0,真是有、、多:

信息可視化設計(不做數據調研的可視化設計)28

這種最煩人,大部分的X軸标簽長度都可以在2行内顯示完,就有那麼一個特别的長,也沒造成遮擋,但是就是看着不舒服:

信息可視化設計(不做數據調研的可視化設計)29

上面這種情況(就是文本長度差距大的),建議直接橫向柱狀圖走起:

信息可視化設計(不做數據調研的可視化設計)30

總之,在對數據了解不充分的情況下,我們設計出來的可視化系統,無法很好地承接和展現真實數據的樣貌,會顯得很“蹩腳”、“不專業”!

三、那麼我們應該去調研數據的哪些方面呢!

在論證完設計前做數據調研的重要性之後,我嘗試總結了應該提前關注數據的以下特征。

1. 客戶是否能提供數據

1)要展示的這些指标,是否都能提供數據?(就是提供數據接口)

  • 轉給數據開發的同事核對數據接口細節;
  • 了解數據格式是否統一規範。

2)是否能提供地圖上的經緯度數據

  • 全國各地的公司所在地的經緯度;
  • 水路運輸的路徑經緯度;
  • ……

信息可視化設計(不做數據調研的可視化設計)31

因為客戶無法提供點位的經緯度,要手動“造點”。

2. 數據含義和文本長度

1)數據的含義是什麼(别設計完了,别人問你,你說不清楚指标啥意思)

2)數據之間的關系

3)指标名稱/文本類數據的長度:

信息可視化設計(不做數據調研的可視化設計)32

3. 數據的數量和種類

1)一共有多少個數據

  • 各區縣營收柱狀圖:一共有28個區縣;
  • 各節點健康狀态:一共有120 個節點;
  • 地圖上顯示分公司點位:隻有3個分公司;
  • ……

2)一共有多少種分類(我們要根據這個預置顔色/樣式的數量)

  • 貨物種類占比圖:一共有15種貨物(對于分類過多的,一般操作是:取前5,之後歸為“其他”,我們預置6種顔色);
  • 預警信息一共有4個等級:一般、較重、嚴重、特别嚴重;
  • ……

信息可視化設計(不做數據調研的可視化設計)33

4. 數值範圍

1)一般為幾位數

2)最大值會到多少:例如,若是百分比會超過100%嗎?

3)最小值會到多少:例如,最小會為負值嗎?

4)是否可為空:例如,為空時如何處理:隐藏 or 占位标記?

5)是否有人為設定的區間:

信息可視化設計(不做數據調研的可視化設計)34

5. 數據格式

1)單位是什麼

2)小數還是百分比

3)保留幾位小數:小數末尾為0是否保留

4)帶經緯度的數據格式

信息可視化設計(不做數據調研的可視化設計)35

6. 其他

1)監控視頻流

2)圖片類數據

3)數據樣式規範

  • “紅增綠減”還是“綠增紅減”;
  • 有的正常狀态的顔色不能用綠色,要依照已有系統沿用為藍色;
  • ……

還有很多零零碎碎的,但是我年紀大了記不起來了。

四、真實工作中的數據調研

在真實工作中,往往因為各種條件限制,我們無法得到充分的數據調研支持,原因包括但不限于:

  • 沒有數據分析師幫你;
  • 你自己調研太被動;
  • 甲方的對接人也要去問不同的人,調研周期太長;
  • ……

在這樣的條件下,我們隻好先設計,然後多問題也隻能等到接上了真實數據之後再去發現。

但是,心态要放好,經驗告訴我,當開始刻意關注數據情況之後,你會條件反射地預判之前說的那些可能發生的問題,然後提前做一些預備處理,等到真的發生了,就不會慌(但是依舊是會煩),會産生一種“我就知道會這樣!”的穩重感哈哈哈。

最後用三句話,想讓大家給我點18個贊

很多時候,我們并不是在“設計數據”,而是在“給數據設計容器”。

基于真實數據做可視化設計,會更容易感受到數據的意義和價值,會更有收獲感。

祝大家少踩坑,少改圖,少加班❤️

本文由 @EasyV數字孿生 原創發布于人人都是産品經理。未經許可,禁止轉載

題圖來自Unsplash,基于CC0協議

,

更多精彩资讯请关注tft每日頭條,我们将持续为您更新最新资讯!

查看全部

相关科技资讯推荐

热门科技资讯推荐

网友关注

Copyright 2023-2024 - www.tftnews.com All Rights Reserved