如何設(shè)計(jì)成功而有價(jià)值的數(shù)據(jù)可視化?

3 評(píng)論 29083 瀏覽 48 收藏 16 分鐘

可視化能將不可見(jiàn)的數(shù)據(jù)現(xiàn)象轉(zhuǎn)化為可見(jiàn)的圖形符號(hào),能將錯(cuò)綜復(fù)雜、看起來(lái)沒(méi)法解釋和關(guān)聯(lián)的數(shù)據(jù),建立起聯(lián)系和關(guān)聯(lián),發(fā)現(xiàn)規(guī)律和特征,獲得更有商業(yè)價(jià)值的洞見(jiàn)和價(jià)值。

what:什么是數(shù)據(jù)可視化?

塔夫特所說(shuō):

圖形表現(xiàn)數(shù)據(jù)。實(shí)際上比傳統(tǒng)的統(tǒng)計(jì)分析法更加精確和有啟發(fā)性。

對(duì)于廣大的編輯、設(shè)計(jì)師、運(yùn)營(yíng)分析師、大數(shù)據(jù)研究者等等都需要從不同維度、不同層面、不同粒度的數(shù)據(jù)處理統(tǒng)計(jì)中,借助圖表和信息圖的方式為用戶(只獲得信息)、閱讀者(消費(fèi)信息)及管理者(利用信息進(jìn)行管理和決策)呈現(xiàn)不同于表格式的分析結(jié)果。數(shù)據(jù)可視化技術(shù)綜合運(yùn)用計(jì)算機(jī)圖形學(xué)、圖像、人機(jī)交互等,將采集、清洗、轉(zhuǎn)換、處理過(guò)的符合標(biāo)準(zhǔn)和規(guī)范的數(shù)據(jù)映射為可識(shí)別的圖形、圖像、動(dòng)畫(huà)甚至視頻,并允許用戶與數(shù)據(jù)可視化進(jìn)行交互和分析。而任何形式的數(shù)據(jù)可視化都會(huì)由豐富的內(nèi)容、引人注意的視覺(jué)效果、精細(xì)的制作三個(gè)要素組成,概括起來(lái)就是新穎而有趣、充實(shí)而高效、美感且悅目三個(gè)特征。

why:為什么要進(jìn)行數(shù)據(jù)可視化?

無(wú)論是哪種職業(yè)和應(yīng)用場(chǎng)景,數(shù)據(jù)可視化都有一個(gè)共同的目的,那就是準(zhǔn)確而高效、精簡(jiǎn)而全面地傳遞信息和知識(shí)。可視化能將不可見(jiàn)的數(shù)據(jù)現(xiàn)象轉(zhuǎn)化為可見(jiàn)的圖形符號(hào),能將錯(cuò)綜復(fù)雜、看起來(lái)沒(méi)法解釋和關(guān)聯(lián)的數(shù)據(jù),建立起聯(lián)系和關(guān)聯(lián),發(fā)現(xiàn)規(guī)律和特征,獲得更有商業(yè)價(jià)值的洞見(jiàn)和價(jià)值。并且利用合適的圖表直截了當(dāng)且清晰而直觀地表達(dá)出來(lái),實(shí)現(xiàn)數(shù)據(jù)自我解釋、讓數(shù)據(jù)說(shuō)話的目的。而人類(lèi)右腦記憶圖像的速度比左腦記憶抽象的文字快100萬(wàn)倍。因此,數(shù)據(jù)可視化能夠加深和強(qiáng)化受眾對(duì)于數(shù)據(jù)的理解和記憶。

how:如何實(shí)現(xiàn)可靠的數(shù)據(jù)可視化

數(shù)據(jù)可視化包括數(shù)據(jù)的采集、分析、治理、管理、挖掘在內(nèi)的一系列復(fù)雜數(shù)據(jù)處理,然后由設(shè)計(jì)師設(shè)計(jì)一種表現(xiàn)形式,或許是二維圖表、三維立體視圖,不管是什么樣的信息圖,最后由前端工程師創(chuàng)建對(duì)應(yīng)的可視化算法及前端渲染和展現(xiàn)的實(shí)現(xiàn)。如果僅僅是能夠?qū)?shù)據(jù)轉(zhuǎn)化成漂亮的圖表,設(shè)計(jì)出固定維度、不同式樣的圖表來(lái)解釋你的觀點(diǎn),并不說(shuō)明這樣的結(jié)局就足夠好。這只是一個(gè)簡(jiǎn)單的開(kāi)始,只是一個(gè)美好愿望的萌芽。如果要成功報(bào)告結(jié)果,將你所分析的度量和數(shù)據(jù)有效地轉(zhuǎn)化為有商業(yè)價(jià)值的見(jiàn)解,使其能夠?yàn)榛谑聦?shí)所做的決策提供支持,那么還需要做更多的功課。

色彩提升信息可視化的視覺(jué)效果。在信息可視化通過(guò)造型元素明確傳達(dá)信息及敘述的基礎(chǔ)上,把握好視覺(jué)元素中色彩的運(yùn)用,使圖形變得更加生動(dòng)、有趣,信息表達(dá)得更加準(zhǔn)確和直觀。色彩可以幫助人們對(duì)信息進(jìn)行深入分類(lèi),強(qiáng)調(diào)和淡化、生動(dòng)而有趣的可視化作品的表現(xiàn)形式,常常給受眾帶來(lái)視覺(jué)效果上的享受。當(dāng)然,視覺(jué)效果要將企業(yè)品牌的色調(diào)融合進(jìn)去,和企業(yè)的品牌文化保持高度的一致,這是一個(gè)最基本的常識(shí)。比如,如果企業(yè)的品牌色調(diào)比較熱衷紅色,你設(shè)計(jì)的可視化效果,就要有意識(shí)地朝著這個(gè)基調(diào)靠攏。但沒(méi)有必要吻合,因?yàn)榧t色的可視化效果,通常都包含警示的韻味,所以,紅色適合做預(yù)警、提醒和突出信息的功能。

排版布局增強(qiáng)信息可視化的敘事性。我有酒,你有故事嗎?排版布局四大基本原則:

  1. 對(duì)比(Contrast): 如果兩個(gè)項(xiàng)不完全相同,就應(yīng)當(dāng)使之不同,而且應(yīng)當(dāng)是截然不同。
  2. 重復(fù)(Repetition):設(shè)計(jì)的某些方面在整個(gè)作品中重復(fù)。
  3. 對(duì)齊(Alignment):任何元素都不能在頁(yè)面上隨意安放。每一項(xiàng)都應(yīng)當(dāng)與頁(yè)面上的某個(gè)內(nèi)容存在某種視覺(jué)聯(lián)系。
  4. 親密性(Proximity):將相關(guān)的項(xiàng)組織在一起,使它們的物理位置相互靠近相關(guān)的項(xiàng)將被看作凝聚為一體的一個(gè)組。

動(dòng)態(tài)增加信息可視化的視覺(jué)體驗(yàn)。在信息可視化的視覺(jué)表達(dá)中,動(dòng)態(tài)地將相互分離的各種信息傳播形式有機(jī)地融合在一起,進(jìn)行有關(guān)聯(lián)、有節(jié)奏的信息處理、傳輸和實(shí)現(xiàn)。最終的目的是,為了實(shí)現(xiàn)數(shù)據(jù)之間的聯(lián)動(dòng),解釋數(shù)據(jù)表現(xiàn)之間驅(qū)動(dòng)和聯(lián)系的關(guān)系。通過(guò)圖表樣式和色彩的運(yùn)動(dòng),滿足受眾的視覺(jué)感受,同時(shí)將信息內(nèi)容更加深刻而精簡(jiǎn)地傳達(dá)給閱讀者,使整個(gè)信息傳達(dá)的過(guò)程更加輕松便捷。對(duì)于數(shù)據(jù)可視化有諸多工具,如:ECharts、iCharts、D3js、Flot、Rapha?l等功能都十分強(qiáng)大,但對(duì)于非專(zhuān)業(yè)可視化而又經(jīng)常與圖表打交道的職場(chǎng)人士來(lái)說(shuō),一款輕便易學(xué)而又實(shí)用的可視化軟件則顯得十分重要。比如cognos、tebleue等。如果需要展現(xiàn)的數(shù)據(jù)結(jié)構(gòu)不是特別復(fù)雜,而又要把數(shù)據(jù)展現(xiàn)的絢麗多彩,而且具有交互性,那么水晶易表是不二之選。

1.誰(shuí)是你的閱讀者?

無(wú)論你是否在做一份傳統(tǒng)的報(bào)表還是新式的信息圖,首先問(wèn)問(wèn)自己有哪些閱讀者看到這份報(bào)告?他們對(duì)將要討論的事項(xiàng)了解多少?他們需要什么?、還有,他們會(huì)如何利用你要展示的信息和數(shù)據(jù)呢?而我之前講過(guò),明確清晰的分析目標(biāo)和方法會(huì)有多重要,因?yàn)橹挥忻鞔_分析目標(biāo),才能有一個(gè)良好的驅(qū)動(dòng)過(guò)程。無(wú)論是目標(biāo)驅(qū)動(dòng)還是分析過(guò)程驅(qū)動(dòng),后續(xù)的數(shù)據(jù)分析工作和分析報(bào)告里所要呈現(xiàn)的全部?jī)?nèi)容事項(xiàng)都是緊緊圍繞著這個(gè)目標(biāo)主題而服務(wù)的。

2.規(guī)劃數(shù)據(jù)可視化方案

數(shù)據(jù)可視化方案,是一定是能夠解決用戶特定問(wèn)題的。既然是能夠解決用戶特定的問(wèn)題,那么這樣的高度,是在基于你在深入地理解了這些數(shù)據(jù)的現(xiàn)象和本質(zhì)的基礎(chǔ)之上。簡(jiǎn)單來(lái)說(shuō),就是你的可視化方案,不僅懂得并且能夠很好地解釋數(shù)據(jù)分析的結(jié)論、信息和知識(shí)。并且管理者能夠沿著你規(guī)劃的可視化路徑能夠迅速地找到和發(fā)現(xiàn)決策之道。

舉例來(lái)說(shuō),當(dāng)企業(yè)的業(yè)績(jī)不達(dá)標(biāo)時(shí)(企業(yè)的業(yè)績(jī)是否達(dá)標(biāo),關(guān)系到企業(yè)最關(guān)鍵的利益和存亡。)可視化方案的設(shè)計(jì)路徑應(yīng)該是這樣的:

Step1,從整體運(yùn)營(yíng)出發(fā),明確有哪些關(guān)鍵因素會(huì)影響成交和業(yè)績(jī)。

比如:有效名單、demo品質(zhì)、客服服務(wù)、產(chǎn)品屬性等,相應(yīng)地去看這些關(guān)鍵因素對(duì)應(yīng)的KPI的表現(xiàn),對(duì)整體的業(yè)績(jī)來(lái)講,這些因素都會(huì)是驅(qū)動(dòng)因素,這些因素對(duì)應(yīng)的KPI都會(huì)是對(duì)STV有直接驅(qū)動(dòng)和影響作用的。這些驅(qū)動(dòng)數(shù)據(jù)的可視化是基礎(chǔ),也是尋找解決方案最終的出發(fā)點(diǎn)和落腳點(diǎn)。因?yàn)?,這些數(shù)據(jù)的表現(xiàn),是關(guān)乎運(yùn)營(yíng)成功與否的最直接視圖。

Step2,對(duì)關(guān)鍵因素深入分析確定是什么因素導(dǎo)致了業(yè)績(jī)沒(méi)達(dá)成,發(fā)現(xiàn)和挖掘?qū)е聵I(yè)績(jī)未達(dá)標(biāo)的根本原因和問(wèn)題。

比如:

  1. 對(duì)比分析,逐一觀測(cè)201601月-201612月全部關(guān)鍵因素對(duì)應(yīng)的KPI的表現(xiàn),對(duì)比成交業(yè)績(jī)最高的月份和成交業(yè)績(jī)最差月份的關(guān)鍵因素對(duì)應(yīng)的KPI差異在哪里,能夠快速定位出哪些方面、哪些因素導(dǎo)致業(yè)績(jī)未達(dá)標(biāo)。然后能夠有針對(duì)性地驅(qū)動(dòng)和幫助業(yè)務(wù)部門(mén)去改善。
  2. 追蹤對(duì)成交和業(yè)績(jī)有驅(qū)動(dòng)和改善的行動(dòng)方案的落地和實(shí)施進(jìn)度,存在什么樣的問(wèn)題,是否存在行動(dòng)方案的執(zhí)行不力影響了業(yè)績(jī)達(dá)標(biāo)。

Step3,針對(duì)這些問(wèn)題因素,有的放矢地去做改善和探索提升業(yè)績(jī)之道。

否則,設(shè)計(jì)再商業(yè)絢麗的可視化圖表,如果不能快速地得到信息和商業(yè)決策建議和方案就毫無(wú)意義??梢暬瘍H僅成了虛假和欺騙,華麗而不務(wù)實(shí)的結(jié)果?;跍?zhǔn)備好的全部的這些問(wèn)題所得出的答案,就要開(kāi)始定制你的數(shù)據(jù)可視化方案以滿足每個(gè)決策者的特定要求。數(shù)據(jù)可視化始終都應(yīng)該是為其受眾專(zhuān)門(mén)定制的,這樣的報(bào)告里只應(yīng)包括受眾需要知道的信息,且應(yīng)將這些信息置于和他們有關(guān)并對(duì)他們有意義的背景下。

3.給數(shù)據(jù)可視化一個(gè)清晰的標(biāo)題。

當(dāng)你的報(bào)告像一份報(bào)紙、雜志的新聞一樣。從這個(gè)標(biāo)題,就能給閱讀者強(qiáng)烈的沖擊。一個(gè)清晰的標(biāo)題是能夠很好地闡釋報(bào)告和故事的主題,是對(duì)整個(gè)報(bào)告和故事概括的信息。當(dāng)然,并不是鼓勵(lì)運(yùn)營(yíng)分析人員去做“標(biāo)題黨”。好的標(biāo)題,既不要模棱兩可,也不要畫(huà)蛇添足,只要解釋清楚圖表即可。這有助于幫受眾直接進(jìn)入主題。這樣能讓讀者大致瀏覽文件,并能快速抓住核心所在。盡量讓你的標(biāo)題突出。

4.將數(shù)據(jù)可視化和你的策略、方案聯(lián)系起來(lái)

如果數(shù)據(jù)可視化的目的在于介紹能解決具體的、可衡量的、可執(zhí)行的、有相關(guān)性和時(shí)效性問(wèn)題的數(shù)據(jù),那就在開(kāi)場(chǎng)白里加上這些問(wèn)題。稍后再和你的策略連接起來(lái)以理清這些數(shù)據(jù)的定位,因此,讀者便能立刻明白可視化數(shù)據(jù)的相關(guān)性和價(jià)值。最終,他們便能更好地參與進(jìn)來(lái),并能夠更明智地利用這些信息。數(shù)據(jù)可視化,最終時(shí)為了企業(yè)良好的運(yùn)營(yíng)而服務(wù)的,這是它的商業(yè)價(jià)值。如果你不關(guān)注企業(yè)的戰(zhàn)略和行動(dòng)方案,很難建立起具有聯(lián)動(dòng)價(jià)值的信息圖。比如,企業(yè)執(zhí)行的行動(dòng)方案,通常是為了達(dá)成和實(shí)現(xiàn)企業(yè)的戰(zhàn)略目標(biāo),通過(guò)這樣的手段實(shí)現(xiàn)精益管理和精益運(yùn)營(yíng)。所以,可視化的解決方案要能夠做到,行動(dòng)方案對(duì)戰(zhàn)略目標(biāo)的驅(qū)動(dòng)效果、個(gè)體、團(tuán)隊(duì)對(duì)部門(mén)整體指標(biāo)、KPI的驅(qū)動(dòng)和影響效果。只有建立起來(lái)具有聯(lián)系的信息視圖,才會(huì)獲得有價(jià)值的數(shù)據(jù)可視化。

5.明智地選擇你的展示圖表。

不管使用哪一類(lèi)圖表,bar圖、折線圖、雷達(dá)圖等等,每一種圖表都有它自身的優(yōu)點(diǎn)和局限性。你無(wú)法找到完美的可視化圖表。但你可以通過(guò)嘗試混合展現(xiàn)方式讓可視化表現(xiàn)再人性化一點(diǎn)點(diǎn)。所以的可視化效果,都應(yīng)該盡可能簡(jiǎn)單精準(zhǔn)地傳達(dá)訊息。這就意味著:不論有多新潮、多好看或者多絢麗,這都不是設(shè)計(jì)數(shù)據(jù)可視化的初衷。誠(chéng)然,我們?cè)诔掷m(xù)地并且永不滿足地追求數(shù)據(jù)之美。但最佳的平衡點(diǎn)在于,用合適的數(shù)據(jù)可視化開(kāi)闡釋恰到好處的信息和知識(shí)的價(jià)值之美。

  • 只用有關(guān)聯(lián)能傳達(dá)重要信息的且為你的受眾所需要的圖形。
  • 無(wú)需填滿頁(yè)面的所有空白——太多雜亂的內(nèi)容只會(huì)干擾對(duì)重要信息的接收,會(huì)讓人太難記住,又太容易忽略。
  • 恰當(dāng)運(yùn)用色彩,增加信息深度。同時(shí)要注意有些色彩具備潛在含義。舉例來(lái)說(shuō),紅色被認(rèn)為是代表警告或危險(xiǎn)的顏色。適合預(yù)警額。
  • 不要使用太多不同類(lèi)的圖表、表格和圖形。如果需要對(duì)比各種圖表,要確保你闡述數(shù)據(jù)時(shí)使用的是同類(lèi)的圖表,這樣才能便于互相比較。

6.在恰當(dāng)處備注文字說(shuō)明

文字說(shuō)明有助于用語(yǔ)言解釋數(shù)據(jù),并能在情境化圖表的同時(shí)增加內(nèi)容的深度。數(shù)字和表格或許僅能提供快照,而文字說(shuō)明則讓人對(duì)關(guān)鍵處了解更多,加以評(píng)論并強(qiáng)調(diào)其內(nèi)涵。引導(dǎo)觀看者去思考圖形的主題,而不是方法論、圖形設(shè)計(jì)、圖形生成或其他東西。

  • 避免歪曲數(shù)據(jù)原本的意圖。
  • 讓龐大的數(shù)據(jù)集連貫一致。
  • 吸引讀者將不同的數(shù)據(jù)片段進(jìn)行比對(duì)和比較,突出重點(diǎn)和優(yōu)劣。
  • 主旨要相當(dāng)明確:描述、挖掘、作表、可視化自我解讀。

 

作者:楊進(jìn)玉,微信號(hào)公眾號(hào):Bear-it-am,VIPABC BI產(chǎn)品經(jīng)理,4年產(chǎn)品設(shè)計(jì)經(jīng)驗(yàn),曾主導(dǎo)過(guò)企業(yè)級(jí)BI產(chǎn)品的策劃和運(yùn)營(yíng)工作。

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

更多精彩內(nèi)容,請(qǐng)關(guān)注人人都是產(chǎn)品經(jīng)理微信公眾號(hào)或下載App
評(píng)論
評(píng)論請(qǐng)登錄
  1. 您好,看了您的文章,學(xué)習(xí)到很多,謝謝!
    另外想請(qǐng)教您一個(gè)問(wèn)題,現(xiàn)在的可視化組件antv、echarts等有很多,如果要給自己企業(yè)單獨(dú)開(kāi)發(fā)一套可視化組件,怎么才能做出不同的呢?因?yàn)槲野l(fā)現(xiàn)這類(lèi)組件樣式造型大多都是一樣的,希望您給出指導(dǎo)意見(jiàn),謝謝!
    期待您的回復(fù)!

    來(lái)自香港 回復(fù)
  2. 文章中的動(dòng)效用Axure都能實(shí)現(xiàn)嗎

    來(lái)自北京 回復(fù)
    1. 你可以用開(kāi)源的可視化工具,ECHARS 、D3js 等,

      來(lái)自上海 回復(fù)