【案例解析】數(shù)據(jù)可視化設計的底層邏輯!

5 評論 9357 瀏覽 68 收藏 10 分鐘

編輯導語:數(shù)據(jù)可視化設計在運營中有著舉足輕重的地位,做好一個可視化設計至關(guān)重要。本篇文章深度剖析數(shù)據(jù)可視化設計的底層邏輯,一起來跟著作者看看吧!

一、前言

前幾天給我們B端團隊的同事分享了幾個數(shù)據(jù)可視化設計案例,反響非常不錯,所以也分享給大家!

這幾個案例詮釋了什么是數(shù)據(jù)可視化思維,正確的思維方式本質(zhì)上就是設計的底層邏輯。

二、案例解析

在公司聽了一堂關(guān)于“結(jié)構(gòu)化思維”的課程,期間老師講了一個案例。

老師說他與公司某高管吃飯,高管跟他吐槽了一件事,高管讓下屬整理一下2021年公司科技園入園訪問人數(shù)的數(shù)據(jù),然后發(fā)給他,結(jié)果下屬給他發(fā)了下面這張圖。

【案例解析】數(shù)據(jù)可視化設計的底層邏輯!

收到這張截圖之后,高管看了很生氣,老師也表示了這位員工缺少結(jié)構(gòu)化思維,沒有給老板的需求做到一個好的體驗。

然后課堂上老師就在大屏幕上放了下面這張圖表,并表示這才是老板想要的吧,大家也是連連點頭表示認同。

【案例解析】數(shù)據(jù)可視化設計的底層邏輯!

的確如此,通過圖形化的表達,能直觀看到訪問人數(shù)的趨勢變化及各月份的數(shù)據(jù)大小感知,比單單給個數(shù)據(jù)表格好太多。

作為數(shù)據(jù)可視化設計師,難免會用苛刻的眼光發(fā)現(xiàn)到一些問題,同時也思考了如何更完美的數(shù)據(jù)可視化表達。

這個柱狀圖本身沒什么問題,但是如果深入思考需求,就能發(fā)現(xiàn)有很多可以優(yōu)化的空間。

比如老板難道不想知道一年的總訪問量嗎?然而這張圖表中并沒有體現(xiàn)。

如何在這張圖表上規(guī)范的表達總訪問量,可以通過標題展示數(shù)據(jù),標題一般可以呈現(xiàn)圖表的結(jié)論數(shù)據(jù)或是總量數(shù)據(jù),下圖所示。

【案例解析】數(shù)據(jù)可視化設計的底層邏輯!

通過把總訪問人數(shù)量放置標題,圖表不僅多了一個維度展示數(shù)據(jù),而且瀏覽圖表也會有一種先總后分的舒適結(jié)構(gòu)。

在數(shù)據(jù)可視化設計理念中,我們都知道一個規(guī)律,人通常會更關(guān)注最多和最少的數(shù)據(jù)類別。所以此圖表還可以在視覺上繼續(xù)優(yōu)化,有個設計理念是,幫助用戶做視覺選擇。

下圖所示,給最多和最少的數(shù)據(jù)使用不同顏色進行突出表現(xiàn)。

【案例解析】數(shù)據(jù)可視化設計的底層邏輯!

到此,是不是比之前好很多了,但其實還可以進一步思考并優(yōu)化。

4月份為什么有這么多人入園訪問,我相信看這個圖表一定會有很多人有這樣的疑問。

從這點可以引出數(shù)據(jù)可視化設計的一個重要技法,即圖表中添加說明。

“添加說明”能夠有效突出或解釋業(yè)務數(shù)據(jù),以及解決觀者可能會有疑問。

當然“添加說明”并不是所有的圖表都應該加,這要結(jié)合業(yè)務需求而定。

【案例解析】數(shù)據(jù)可視化設計的底層邏輯!

最終通過深入分析和思考需求,對圖表進行針對性設計,解決了很多數(shù)據(jù)疑問,這就是數(shù)據(jù)可視化設計的價值。

以上數(shù)據(jù)可視化設計,是針對“看”全方位的解決了需求問題,這其實只是數(shù)據(jù)可視化設計底層邏輯的一個方面。

底層邏輯有兩個方面,一是數(shù)據(jù)給誰看,分析關(guān)注點;二是看的人要做什么,有什么目的。

不清楚“看”的人要做什么,有什么目的,有時候哪怕設計再出彩,都有可能是畫蛇添足。

舉個案例,一個大屏設計,產(chǎn)品經(jīng)理為了保證數(shù)據(jù)的完整性,在重要的位置展示了產(chǎn)品的每日注冊數(shù)據(jù)。

然而產(chǎn)品現(xiàn)階段每日注冊數(shù)據(jù)很差,導致每次對外講解大屏數(shù)據(jù)時都很尷尬,結(jié)果就是老板怒斥產(chǎn)品經(jīng)理,趕緊把那個數(shù)據(jù)給我干掉。

【案例解析】數(shù)據(jù)可視化設計的底層邏輯!

這個案例就是前期沒有考慮大屏用來干什么,對外講解大屏數(shù)據(jù)目的是什么,最終也就不會對數(shù)據(jù)有策略性的展示。

案例總結(jié):

數(shù)據(jù)可視化設計有兩個出發(fā)點,也就是設計的底層邏輯,每次設計前從這兩方面進行深入全面的思考,基本能保證一個較好的結(jié)果。

一、思考數(shù)據(jù)給誰看,分析關(guān)注點;

二、思考數(shù)據(jù)用來做什么,目的是什么。

三、必備能力

想要真正做好數(shù)據(jù)可視化設計,設計師還要掌握好一個基本功,那就是解析數(shù)據(jù),給數(shù)據(jù)匹配恰當圖表的能力。

下面舉個案例,進行基本功能力驗證,平時也可以通過這樣的案例進行練習,鍛煉自己的數(shù)據(jù)敏感度和表達。

【案例解析】數(shù)據(jù)可視化設計的底層邏輯!

有一天領(lǐng)導突然把這組數(shù)據(jù)扔給你,讓你匹配和設計一個合適這組數(shù)據(jù)的圖表,你能很快想到用什么圖表嗎?

對于這組不太常規(guī)的數(shù)據(jù),如果你能很快給他匹配一個合適的圖表,那你的能力毋庸置疑一定是杠杠的。

能夠選擇合適圖表的關(guān)鍵是認識圖表,了解常用圖表的功能和作用,才能對數(shù)據(jù)有一定的敏感度。

下面是這組數(shù)據(jù)應該用的圖表,瀑布圖,想到了嗎?表格中的增減數(shù)據(jù)形式,用瀑布圖完美演繹。

【案例解析】數(shù)據(jù)可視化設計的底層邏輯!

當把基本功練好后,會不自覺的擁有另一種能力,就是對圖表進行更出彩的擴展性設計。

圖表擴展設計能賦予圖表更真實、貼切的情感化表達。

舉個最簡單的案例,下圖中右圖就是對男女比例圖表的擴展性設計。

【案例解析】數(shù)據(jù)可視化設計的底層邏輯!

通過使用男女剪影的圖形進行設計,看起來更加貼切靈動。

另外,圖表擴展性設計不用太擔心前端工程師能不能實現(xiàn),一般來說都沒問題,如果變動大拿不準可以先去和他們溝通。

再舉個擴展性設計的例子,南丁格爾玫瑰圖與鐘表的結(jié)合,對業(yè)務數(shù)據(jù)進行了更好的表達。

【案例解析】數(shù)據(jù)可視化設計的底層邏輯!

兩者結(jié)合非常巧妙的表達了交通早晚高峰期指數(shù),因為我們對鐘表都具有熟悉認知,所以就算掃一眼都能清楚的感知到關(guān)鍵數(shù)據(jù)的時間段據(jù)。

【案例解析】數(shù)據(jù)可視化設計的底層邏輯!

擴展性設計就是一種創(chuàng)意性的表達方式,他有無限可能,也是數(shù)據(jù)可視化設計的高級技法,所以你需要擁有這種能力。

四、最后

數(shù)據(jù)可視化產(chǎn)品,設計師價值感極高,成敗都在于設計,掌握好基本功,明白可視化設計的底層邏輯,再結(jié)合UI設計能力,才能產(chǎn)出更有價值的產(chǎn)品。

#專欄作家#

吳星辰,微信公眾號:互聯(lián)網(wǎng)設計幫,人人都是產(chǎn)品經(jīng)理專欄作家。

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

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

專欄作家

吳星辰,微信公眾號:互聯(lián)網(wǎng)設計幫,人人都是產(chǎn)品經(jīng)理專欄作家。

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

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

該文觀點僅代表作者本人,人人都是產(chǎn)品經(jīng)理平臺僅提供信息存儲空間服務。

更多精彩內(nèi)容,請關(guān)注人人都是產(chǎn)品經(jīng)理微信公眾號或下載App
評論
評論請登錄
  1. 有道理!

    回復
  2. 隨著大數(shù)據(jù)時代的到來各行各業(yè)對數(shù)據(jù)的重視程度與日俱增。

    來自山東 回復
  3. 感覺像數(shù)據(jù)可視化這類技能真的越來越重要了。正在不斷學習如何進行數(shù)據(jù)可視化這類技能中

    來自廣東 回復
  4. 可視化不管是對自己,還是匯報給領(lǐng)導,真的特別重要,清晰可見

    來自江蘇 回復
  5. 干貨滿滿的好文章,謝謝作者分享,碼住一些干貨工作可以用得上?。。?/p>

    來自廣東 回復