萬字解讀赫编!設(shè)計師必須要掌握的數(shù)據(jù)可視化設(shè)計-基礎(chǔ)篇

設(shè)計師在工作中經(jīng)常會遇到下面這種情況:

自己辛辛苦苦、加班加點奋隶、沒日沒夜做出來的數(shù)據(jù)分析報告交到boss們手上擂送,結(jié)果沒人看得懂,全程黑人問號臉唯欣。

原因就是嘹吨,自己埋頭苦干做出來的數(shù)據(jù)分析結(jié)果,沒有用一種能夠讓別人一目了然黍聂、清晰明了的呈現(xiàn)方式展示出來躺苦,努力全白費身腻。

所以产还,為了讓大家對于數(shù)據(jù)可視化不再那么束手無措匹厘,我希望能通過這篇文章和大家一起交流學(xué)習,解決一些屬于我們共同的問題脐区。


1.1 數(shù)據(jù)可視化的定義

數(shù)據(jù)科學(xué)的大力發(fā)展愈诚,讓信息科學(xué)領(lǐng)域面臨的一個巨大挑戰(zhàn)就是數(shù)據(jù)爆炸,然而人類分析數(shù)據(jù)的能力已經(jīng)遠遠落后于獲取數(shù)據(jù)的能力牛隅。

數(shù)據(jù)量越來越大炕柔、越多元化,數(shù)據(jù)內(nèi)容的噪聲讓人們在龐雜的數(shù)據(jù)世界中倍感枯燥繁瑣媒佣,理解成本較高匕累。所以這個挑戰(zhàn)不僅在于如何從海量數(shù)據(jù)中提取出有用知識,還在于如何將數(shù)據(jù)轉(zhuǎn)化成使人快速理解的知識默伍。

如何從海量數(shù)據(jù)中提取知識是數(shù)據(jù)處理和數(shù)據(jù)挖掘的范疇欢嘿,如何讓數(shù)據(jù)轉(zhuǎn)化成使人快速理解的知識就需要數(shù)據(jù)可視化了。

相比單純的數(shù)字也糊,圖形形式可以讓人更容易洞察到數(shù)據(jù)的分布炼蹦、趨勢、關(guān)系以及異常點狸剃,從而幫助決策者快速決策掐隐。數(shù)據(jù)可視化就是將數(shù)據(jù)轉(zhuǎn)換成易讀、易懂钞馁、易操作的圖或表等虑省,以一種簡潔明了、通俗易懂的方式展現(xiàn)和呈現(xiàn)數(shù)據(jù)僧凰。

利用“可視化”的方式慷妙,龐雜的大數(shù)據(jù)通過圖形化的手段,能夠為工作帶來3大好處:

1.2 數(shù)據(jù)可視化發(fā)展歷程

關(guān)于可視化的發(fā)展史可追溯至19世紀上半葉允悦,這個時期可以說是數(shù)據(jù)制圖的黃金時期膝擂,統(tǒng)計圖形、概念圖等迅猛爆發(fā)隙弛,此時人們已經(jīng)掌握了整套統(tǒng)計數(shù)據(jù)可視化工具架馋,包括直方圖、柱狀圖全闷、餅圖叉寂、折線圖、時間線总珠、輪廓線等屏鳍。

這里分享一個這個時期典型的數(shù)據(jù)可視化案例勘纯。1864年一名John Snow的醫(yī)生使用散點在地圖上標注了倫敦的霍亂發(fā)病案例,從而判斷出Broad Street的水井污染是疫情爆發(fā)的根源钓瞭。

John Snow著手調(diào)查病例發(fā)生的地點和取水的關(guān)系驳遵,發(fā)現(xiàn)73個病例離布拉德街水井的距離比附近其他任何一個水井的距離都更近。在拆除布拉德街水井的搖把后不久山涡,霍亂停息堤结。

可視化真正被提到一個應(yīng)用理論的高度是到了 1987 年布魯斯·麥考梅克和馬克沁·布朗所編寫的美國國家科學(xué)基金會報告《Visualization in Scientific Computing》(科學(xué)計算之中的可視化),其意在強調(diào)了基于計算機的可視化技術(shù)方法的必要性鸭丛,此時的概念已經(jīng)與現(xiàn)在我們所接觸的工作中的數(shù)據(jù)可視化是非常接近竞穷。

到了 90 年代初人們發(fā)起了一個稱為“信息可視化”的研究領(lǐng)域旨在為許多應(yīng)用領(lǐng)域(科學(xué)、商業(yè)鳞溉、行政瘾带、財務(wù)、數(shù)字媒體)之中對于抽象的異質(zhì)性數(shù)據(jù)集的分析工作提供支持熟菲,與前面提到的“科學(xué)可視化”交叉形成了現(xiàn)在耳熟能詳?shù)摹皵?shù)據(jù)可視化”看政,此時這個詞匯才慢慢的被更多的專業(yè)領(lǐng)域的人所接受,并在之后互聯(lián)網(wǎng)的不斷發(fā)展中擴充著自己的分支科盛。

過去 1 年帽衙,全球塑料瓶的銷量達到 4800 億只,這個數(shù)字看起來很大贞绵,但到底有多大厉萝?這個作品就通過可視化呈現(xiàn)了出來。方式很簡單——看看一小時榨崩、一天谴垫、一個月、一年母蛛、十年產(chǎn)生的塑料瓶能堆多高——效果很震撼翩剪,看到世界最高的建筑也比不過堆積成山的塑料瓶,就能體會到我們消耗的塑料瓶數(shù)量之巨大彩郊。

1.3 為什么要做數(shù)據(jù)可視化

據(jù)IBM稱前弯,我們的世界每天要創(chuàng)建出高達2.5萬億字節(jié)的數(shù)據(jù)。

麻省理工學(xué)院的研究科學(xué)家安德魯·邁克菲(Andrew McAfee)和麻省理工學(xué)院的埃里克·布林約爾夫森(Erik Brynjolfsson)教授指出秫逝,“每秒通過互聯(lián)網(wǎng)的數(shù)據(jù)比20年前存儲在整個互聯(lián)網(wǎng)中的數(shù)據(jù)還多恕出。”

隨著世界與越來越多的電子設(shè)備建立聯(lián)系违帆,數(shù)據(jù)量將繼續(xù)呈指數(shù)增長浙巫。科學(xué)家們預(yù)測,到2025年將有163 ZB(163萬億GB)的數(shù)據(jù)的畴。

人腦很難理解所有這些數(shù)據(jù)渊抄,實際上,如果不進行某種類比或抽象丧裁,人腦很難理解大于5的數(shù)字护桦。數(shù)據(jù)可視化設(shè)計師可以在創(chuàng)建這些抽象中發(fā)揮至關(guān)重要的作用。

而對于用戶尤其是決策層的用戶來說在現(xiàn)實的工作場景中經(jīng)常需要同時處理超過 5 組以上的數(shù)據(jù)并需要對其建立精準的分析模型以便于做出最準確的決策所以基于這樣的需求渣慕,數(shù)據(jù)可視化設(shè)計氤氳而生嘶炭。

而數(shù)據(jù)可視化能夠?qū)a(chǎn)生的數(shù)據(jù)抱慌,以視覺圖表的方式逊桦,清晰有效地傳遞出數(shù)據(jù)當中的重要信息。很多企業(yè)管理層從實踐中看到了數(shù)據(jù)可視化的價值抑进,它能夠使決策者能夠解決難以快速讀懂數(shù)據(jù)分析報告的問題强经,以數(shù)據(jù)可視化的模式來理解數(shù)據(jù),以便做出對企業(yè)更好的決策寺渗。

1.4 數(shù)據(jù)可視化有什么用

1.4.1 傳遞速度快

人腦對視覺信息的處理要比書面信息塊10倍匿情。使用圖表來總結(jié)復(fù)雜的數(shù)據(jù),可以確保對關(guān)系的理解要比那些混亂的報告或電子表格更快信殊。

1.4.2 數(shù)據(jù)顯示的多維性

在可視化的分析下炬称,數(shù)據(jù)將每一維的值分類、排序涡拘、組合和顯示玲躯,這樣就可以看到表示對象或事件的數(shù)據(jù)的多個屬性或變量。

1.4.3 更直觀的展示信息

數(shù)據(jù)可視化報告使我們能夠用一些簡短的圖形就能體現(xiàn)那些復(fù)雜信息鳄乏,甚至單個圖形也能做到跷车。決策者可以輕松地解釋各種不同的數(shù)據(jù)源。豐富但有意義的圖形有助于讓忙碌的主管和業(yè)務(wù)伙伴了解問題和未決的計劃橱野。

1.4.4 大腦記憶能力的限制

實際上我們在觀察物體的時候朽缴,我們大腦和計算機一樣有長期的記憶(memory 硬盤)和短期的記憶(cache 內(nèi)存)。只有我們讓要記下文字水援,詩歌密强,物體,一遍一遍的在短期記憶了出現(xiàn)之后, 它們才可能進入長期記憶蜗元。

很多研究已近表明或渤,在進行理解和學(xué)習的任務(wù)的時候,圖文一起能夠幫助讀者更好的了解所要學(xué)習的內(nèi)容许帐, 圖像更容易理解劳坑,更有趣,也更容易讓人們記住成畦。

BBC 委托數(shù)據(jù)藝術(shù)家 Federica Fragapane 制作有關(guān)太空垃圾的數(shù)據(jù)可視化作品距芬。數(shù)據(jù)集分為不同的類別:與地球的距離涝开,太空垃圾的類型以及物體的大小和質(zhì)量。作為一名意大利獨立信息可視化藝術(shù)家 Federica Fragapane 的作品在細節(jié)和色彩上尤為引人關(guān)注框仔。

1.5 數(shù)據(jù)可視化使用目標

數(shù)據(jù)可視化是一種信息交流形式舀武,它以圖形形式描繪密集和復(fù)雜的信息,最終的視覺效果旨在簡化數(shù)據(jù)离斩,并使用數(shù)據(jù)幫助用戶決策银舱。

1.5.1 準確性

數(shù)據(jù)可視化需考慮數(shù)據(jù)的準確性,清晰度和完整性跛梗。以不失真的方式呈現(xiàn)信息寻馏,減少用戶的思考成本。

1.5.2 實用性

數(shù)據(jù)需要強調(diào)實用核偿,降本提效诚欠,降低學(xué)習使用成本、數(shù)據(jù)分析成本漾岳、數(shù)據(jù)查找成本轰绵,提升操作效率、決策效率尼荆。

1.5.3 適應(yīng)性

能適應(yīng)多設(shè)備左腔、多場景⊥比澹可根據(jù)不同設(shè)備大小調(diào)整可視化液样,同時預(yù)測用戶對數(shù)據(jù)深度、復(fù)雜性和模態(tài)的需求野芒。

1.6 數(shù)據(jù)可視化應(yīng)用場景

信息圖表設(shè)計蓄愁、B端后臺界面設(shè)計、可視化大屏界面設(shè)計


一張標準樣式的圖表基本上是由標題狞悲、圖例撮抓、切換選項、圖形主體摇锋、坐標系丹拯、提示信息、值域這幾個元素構(gòu)成荸恕。除此之外乖酬,還有一些特殊的圖表(如:3D類,由背景墻融求、側(cè)面墻咬像、底座等圖表元素)。

2.1 標題

標題簡短有力,以最少的字數(shù)傳達觀點县昂、信息或故事肮柜。

信息類標題:提供理解數(shù)據(jù)所需的所有信息,回答「何事」倒彰、「何地」审洞、「何時」這三個問題

描述類標題:突出圖表中顯示的主要數(shù)據(jù)模式或趨勢,描繪出圖表所要講述的故事

2.2 圖例

通常在圖形主題的右側(cè)或頂部待讳,用來區(qū)分不同類別代表的數(shù)據(jù)含義芒澜。

2.3 切換選項

可以是tab類的切換,也可以是下拉選擇创淡,根據(jù)具體場景設(shè)計痴晦,用于同類型圖表的切換。

2.4 坐標系

由X軸辩昆,Y軸阅酪,標識線,軸標題構(gòu)成。一般場景中项棠,坐標軸是圖表中必須存在的元素之一匈庭,AntV官方給出的迷你圖表(Minichart)中,坐標軸可以被省略僚害,只保留圖形基本姿態(tài)。

2.5 圖形主體

由選擇的圖表類型決定,有時也會多個圖表類型組合使用猾骡。

2.6 提示信息

多為hover或者選擇狀態(tài),對選擇的位置數(shù)據(jù)進行詳細展示敷搪。

2.7 值域

當屏幕不足以容納圖形兴想,選擇可視范圍的工具,當圖表足夠復(fù)雜時會用到赡勘。

需要注意的是嫂便,數(shù)據(jù)可視化圖表除了上述常規(guī)元素外,還有個很重要的的概念—時間范圍闸与。因為數(shù)據(jù)的統(tǒng)計一定要有時間范圍毙替,否則這個數(shù)據(jù)圖表就是無意義的,所以大家在設(shè)計圖表時一定要體現(xiàn)出“時間范圍”践樱,它可以不出現(xiàn)在具體的某一個圖表中厂画,但是要通過標題或者其它方式表現(xiàn)出來。

2017年拷邢,荷蘭有1917人以自殺的方式結(jié)束了他們的生命袱院。來自Studio Terp 的Sonja Kuijpers從自身與自殺傾向抗爭的經(jīng)歷中獲得靈感,在搜集相關(guān)數(shù)據(jù)、制作相應(yīng)圖表的基礎(chǔ)上忽洛,以“景觀”(landscape)的形式對荷蘭2017年的自殺情況進行了可視化抛人。這幅“景觀”的左右兩邊用以區(qū)分自殺者的性別。樹脐瑰、云朵妖枚、波浪等元素表示不同的自殺方式,同一類元素的不同顏色苍在、形狀绝页、大小用以描述8個不同的年齡層。原本冰冷而絕望的自殺景觀在充滿自然意象的可視化手段下變得平靜而溫暖寂恬,作者借此喚醒有自殺傾向者對生命的眷戀


規(guī)范的流程是好結(jié)果的保證续誉。按照設(shè)計流程,步步為營初肉,就能避免很多不必要的返工酷鸦,保證設(shè)計質(zhì)量和項目進度。

3.1 根據(jù)業(yè)務(wù)需求確立關(guān)鍵指標

可視化設(shè)計要避免為了展示而展示牙咏,排版布局臼隔、圖表選用等應(yīng)服務(wù)于業(yè)務(wù),所以可視化設(shè)計是在充分了解業(yè)務(wù)需求的基礎(chǔ)上進行的妄壶。那什么是業(yè)務(wù)需求呢摔握?業(yè)務(wù)需求就是要解決的問題或達成的目標。設(shè)計師通過設(shè)計的手段幫助相關(guān)人員達成這個目標丁寄,是數(shù)據(jù)可視化的價值所在氨淌。

關(guān)鍵指標是一些概括性詞語,是對一組或者一系列數(shù)據(jù)的統(tǒng)稱伊磺。確定關(guān)鍵指標后盛正,根據(jù)業(yè)務(wù)需求擬定各個指標展示的優(yōu)先級(主、次屑埋、輔)豪筝。

3.2 確立指標分析維度

我們在制作可視化圖表時,首先要從業(yè)務(wù)出發(fā)雀彼,優(yōu)先挑選合理的壤蚜、符合慣例的圖表,尤其是如果你的用戶層次比較多樣的情況下徊哑,要兼顧各個年齡段或者不同認知能力的用戶的需求袜刷;其次是根據(jù)數(shù)據(jù)的各種屬性和統(tǒng)計圖表的特點來選擇,例如很多小伙伴做完可視化設(shè)計莺丑,發(fā)現(xiàn)可視化圖形并沒有準確表達自己的意圖著蟹,也沒能向用戶傳達出應(yīng)有的信息墩蔓,可視化圖形讓人困惑或看不懂。出現(xiàn)這種情況很大程度就是因為分析的維度沒有找準或定義的比較混亂萧豆。

比較:數(shù)據(jù)之間存在何種差異奸披、差異主要體現(xiàn)在哪些方面

分布:指標里的數(shù)據(jù)主要集中在什么范圍、表現(xiàn)出怎樣的規(guī)律

聯(lián)系:數(shù)據(jù)之間的相關(guān)性

構(gòu)成:指標里的數(shù)據(jù)都由哪幾部分組成涮雷、每部分占比如何

3.3 選定可視化圖表類型

通過上述分析阵面,我們可以跟據(jù)我們想要展現(xiàn)的數(shù)據(jù)種類,以及我們制作圖表的目的洪鸭,來選擇到合適的圖表样刷。但是日常工作中,我們往往用不到這么多的圖表種類览爵,這個篩選的維度更適合我們作為學(xué)習圖表概念的工具置鼻。我們最經(jīng)常使用的還是六件套 — 柱狀圖、條形圖蜓竹、折線圖箕母、餅圖、散點圖俱济、地圖嘶是。

3.3.1 柱狀圖? ? ?

柱狀圖用于描述分類數(shù)據(jù)之間的對比,是一種以長方形的長度為變量的統(tǒng)計圖表姨蝴,有且僅有一個變量俊啼,其中一個軸表示需要對比的分類維度,另一個軸代表相應(yīng)的數(shù)值 左医。

下圖是中國每年對象牙的需求正在下降的趨勢圖。象牙雕刻在中國已有數(shù)千年的歷史同木,但隨著需求助長非法貿(mào)易和非洲偷獵危機浮梢,當局被迫采取行動。2011年彤路,中國禁止拍賣所有瀕危物種產(chǎn)品秕硝。

3.3.2 條形圖

條形圖對比柱狀圖,看上去雖然只是 X 軸與 Y 軸交換洲尊,數(shù)據(jù)種類較為類似远豺,但不同的是,條形所能承載的項目數(shù)量相對于柱狀圖而言更多坞嘀,由于其優(yōu)良的縱向延展性一般用于手機端較多躯护,比如當條目大于12條,就適合用條形圖丽涩,而且從上到下的閱讀方式符合人眼閱讀習慣棺滞,所以也會經(jīng)常用于排行榜的設(shè)計中裁蚁。

下圖是老虎的數(shù)量逐年上升的對比圖。從 2010 年的歷史最低點開始继准,數(shù)字正在增加枉证。

3.3.3 折線圖

折線圖用于反映事物隨時間或有序類別而變化的趨勢。要繪制折線圖移必,先在笛卡爾座標上定出數(shù)據(jù)點室谚,然后用直線把這些點連接起來。通常 Y 軸用于定量數(shù)值崔泵,而 X 軸則是分類或順序刻度舞萄。負值可以顯示在 X 軸下方。使用建議:Y 軸刻度值選擇要合理管削,當前顯示的數(shù)據(jù)波動要最大化的顯示倒脓;顯示數(shù)據(jù)盡量大于3條,否則不能夠清晰地反映出數(shù)據(jù)隨時間變化的趨勢含思。

下圖是世界上85%的核彈頭退役的對比圖崎弃。圖表中兩個核大國簽署了多項條約,隨著時間的推移含潘,冷戰(zhàn)期間積累的大量核武器庫存已基本拆除饲做。

3.3.4 餅圖

餅圖以扇區(qū)的形式顯示每一個數(shù)值相對于總數(shù)值的大小。通過不同的扇面大小遏弱,表達了不同類別的比例盆均,即一個數(shù)據(jù)組中不同數(shù)據(jù)項的數(shù)據(jù)大小占所有數(shù)據(jù)和的比例;并通過帶顏色的圖例將扇面和數(shù)據(jù)項一一對應(yīng)起來漱逸。所以當我們想要一組數(shù)據(jù)中每個數(shù)據(jù)類型所占的比例時泪姨,就可以優(yōu)先選擇餅形圖。餅形圖可以分為基礎(chǔ)餅形饰抒、環(huán)形圖以及扇形圖肮砾。

下圖反映海上風力發(fā)電可以滿足美國、歐盟袋坑、中國仗处、日本和印度的電力需求。這種可再生能源具有驚人的潛力枣宫,并且隨著技術(shù)不斷改進婆誓,成本持續(xù)下降。最終可能產(chǎn)生超過當前全球電力需求18倍的電力也颤。預(yù)計到2040年洋幻,這項業(yè)務(wù)將達到萬億美元,使世界步入全面脫碳的軌道歇拆。

3.3.5 散點圖

散點圖常用于展現(xiàn)數(shù)據(jù)的分布情況鞋屈。通過數(shù)據(jù)之間的位置分布來觀察變量之間的相互關(guān)系范咨。數(shù)據(jù)之間的相互關(guān)系主要分為:正相關(guān)(兩個變量值同時增長)、負相關(guān)(一個變量呈現(xiàn)增長分布另一個變量呈現(xiàn)下降分布)厂庇、不相關(guān)渠啊、線性相關(guān)、指數(shù)相關(guān)等权旷。而分布在集群點較遠的數(shù)據(jù)點替蛉,被稱之為異常點。散點圖經(jīng)常與回歸線(就是最準確地貫穿所有點的線)結(jié)合使用拄氯,歸納分析現(xiàn)有數(shù)據(jù)以進行預(yù)測分析躲查。

下圖反映了由于得到了更好的醫(yī)療保健、教育译柏、社會條件镣煮,數(shù)百萬兒童的生命得到了挽救。人類進步的一個直接影響是壽命延長鄙麦。100年前典唇,世界上近一半的兒童在5歲之前死亡。今天胯府,這一數(shù)字還不到4%介衔。這意味著數(shù)百萬人有了生命的機會。這就是進步骂因。

3.3.6 地圖

地圖常用于顯示地理區(qū)域上的數(shù)據(jù)炎咖。使用地圖作為背景,通過圖形的位置來表現(xiàn)數(shù)據(jù)的地理位置寒波,通常來展示數(shù)據(jù)在不同地理區(qū)域上的分布情況乘盼。

下圖反映了美國每個州擁有槍支的數(shù)量,根據(jù)哥倫比亞大學(xué)的研究人員 Bindu Kalesan影所、Marcos Villarreal 和 Katherine Keyes 以及波士頓大學(xué)的 Sandro Galea最近在《傷害預(yù)防》雜志上發(fā)表的一項研究蹦肴,幾乎每三個美國人中就有一個人擁有槍支 。

3.4 可視化視覺設(shè)計

3.4.1 定義設(shè)計風格

大多數(shù)設(shè)計都應(yīng)該有APP或者Web風格定義的經(jīng)驗猴娩。我們在定義一款A(yù)PP或者Web頁面設(shè)計風格時常用的方法是什么呢?情緒版勺阐!精美的圖片搭配符合主題的關(guān)鍵詞卷中,可以向需求方和產(chǎn)品側(cè)準確地表達出頁面的設(shè)計方向和風格。

可視化設(shè)計雖然酷炫渊抽,但風格定義方法也同樣可以是用情緒版來做蟆豫,這種方法也是目前比較科學(xué)高效的風格定義手段。

3.4.2 規(guī)劃頁面布局

設(shè)計前期規(guī)劃階段懒闷,先想好打算怎么表達十减,再選擇對應(yīng)的構(gòu)圖方式栈幸。以數(shù)據(jù)大屏為例,表達上我們講究總分主次關(guān)系帮辟,那么構(gòu)圖上依舊遵循這個規(guī)則速址,先具體再抽象。

布局一:

布局二:

布局三:

3.4.3 配色的重要性

當我們打開一個頁面時由驹,第一眼看到的往往并不是板塊布局芍锚,也不是詳細內(nèi)容,而是頁面的色彩蔓榄。色彩引導(dǎo)著我們視覺進行運動并炮,較強的沖擊力很容易給用戶留下深刻的印象,設(shè)計者對色彩的運用和搭配甥郑,將決定可視化的展現(xiàn)效果逃魄。

顏色無需使用文字即可傳達大量信息。然而澜搅,使用顏色要注意以下幾點:

一般來說伍俘,我們在使用顏色的時候可以遵循以下的配色一致性原則:

數(shù)值指標一致性

當根據(jù)某一個指標的數(shù)值大小進行顏色映射時,建議使用生長色系的漸變顏色店展。

例如上圖所示养篓,統(tǒng)計的是新型冠狀肺炎病例每個區(qū)域的現(xiàn)存病例人數(shù),左邊的圖顏色并沒有色系和生長規(guī)律赂蕴,用戶難以理解具體指標數(shù)值的映含義柳弄,而此時如果使用右邊的生長色系的表達方式,它會傳達給用戶一種顏色可測量感概说。

那么用戶根據(jù)這樣的漸變生長色系碧注,就可以很輕松地理解每個區(qū)域的現(xiàn)存病例分布情況。

語義顏色一致性

符合語義的顏色可以幫助人們更快地處理信息糖赔,盡量根據(jù)指標含義選擇符合人類最直觀感受的顏色萍丐。

比如在分析股市時,我們可以使用統(tǒng)一的紅綠配色放典,分別代表了股票的上漲和下跌逝变。

指標顏色一致性

在同一儀表板中,對于相同的指標盡量使用同一色系的顏色方案奋构,避免使用過多的顏色對用戶造成干擾壳影。

例如我們在做營業(yè)額利潤分析時,通常分析指標會有成本弥臼、利潤宴咧、利潤率,那么即使我們在對同一個指標做不同維度的數(shù)據(jù)可視化分析時径缅,對于相同指標建議分別使用相同的色系進行配色掺栅,如下:

我們在遵循這樣的指標顏色一致性配色原則之后烙肺,用戶就能夠快速地根據(jù)顏色區(qū)分來理解當前的數(shù)據(jù)可視化圖表所要表達的指標含義。

色系顏色一致性

如果我們是自定義配色氧卧,需要避免一些撞色桃笙。

例如把黃+白、藍+黑假抄、紅+藍怎栽、黃+紫等等色系進行搭配,這樣不但從感官上不美觀宿饱,而且還容易對用戶的眼睛造成刺激熏瞄。

3.4.4 設(shè)計中需要遵循的原則

圖表的設(shè)計價值在于精準、高效谬以、簡單的傳遞數(shù)據(jù)信息强饮,最好能夠讓讀者一目了然,即使做不到一目了然也應(yīng)該具備自我解釋的能力为黎。所以邮丰,就要求在設(shè)計時應(yīng)該增強和突出數(shù)據(jù)元素,減少和弱化非數(shù)據(jù)元素铭乾,具體應(yīng)該注意以下原則:

刪除

除非特殊場景的考慮剪廉,應(yīng)盡可能的刪除和數(shù)據(jù)非相關(guān)的元素:

背景色、漸變色炕檩、網(wǎng)格線斗蒋、3D效果、陰影效果(如果具體操作需要強調(diào)的除外笛质,如:鼠標Hover查看具體信息)

弱化

即使有必要保留非數(shù)據(jù)元素泉沾,也要弱化或隱藏它們,盡量使用淡色:

坐標軸妇押、網(wǎng)格輔助線跷究、表格線

組織、強調(diào)

把相關(guān)的數(shù)據(jù)進行合理的組織分類敲霍,只放關(guān)鍵的俊马、重要的數(shù)據(jù)在圖表內(nèi)。并且考慮數(shù)據(jù)展示的優(yōu)先級肩杈,明確哪些數(shù)據(jù)是需要重點突出的進行重點標識潭袱,以便用戶能夠快速get到重要信息。

3.5 飛機稿溝通確認

最初的設(shè)計稿不需要十分精致锋恬,我們可以把它理解為一個“低保真”原型,然后通過不斷溝通修改编丘,讓它逐步完善精致起來与学,也就是小步快跑彤悔,避免那種一下子走到終點,然后又大修大改的情況索守。

根據(jù)頁面布局晕窑、圖表類型、頁面風格特點卵佛,我們需要用盡可能簡單的方法 杨赤,把之前幾步的成果在頁面上快速體現(xiàn)出來,然后去敲定四方面內(nèi)容:

3.6 頁面交付開發(fā)

頁面交付開發(fā)完成后截汪,我們還需要進行視覺方面的走查:關(guān)鍵視覺元素疾牲、字體字號、頁面動效衙解、圖形圖表等是否按預(yù)期顯示阳柔、有無變形、錯位等情況蚓峦。

總結(jié)

我們回顧一下舌剂,這篇文章主要是講了三個部分:

第一部分主要說明一下什么是數(shù)據(jù)可視化,數(shù)據(jù)可視化講的是將數(shù)據(jù)轉(zhuǎn)換成易讀暑椰、易懂霍转、易操作的圖或表等,以一種簡潔明了一汽、通俗易懂的方式展現(xiàn)和呈現(xiàn)數(shù)據(jù)避消。以及數(shù)據(jù)可視化的發(fā)展歷程、作用角虫、使用目標和應(yīng)用場景沾谓;

第二部分主要說明了一個圖表的組成元素都有哪些?一張標準樣式的圖表基本上是由標題戳鹅、圖例均驶、切換選項、圖形主體枫虏、坐標系妇穴、提示信息、值域這幾個元素構(gòu)成隶债;

第三部分主要介紹了數(shù)據(jù)可視化設(shè)計流程腾它,以及一些比較常見的圖表類型。其中規(guī)范的流程是好結(jié)果的保證死讹。按照設(shè)計流程瞒滴,步步為營,就能避免很多不必要的返工,保證設(shè)計質(zhì)量和項目進度妓忍。


最后虏两,除了學(xué)習以上可視化相關(guān)的基礎(chǔ)知識以外,更需要在日常工作學(xué)習中培養(yǎng)習慣世剖,養(yǎng)成數(shù)據(jù)可視化的思維方式定罢。

1、保持對數(shù)據(jù)的敏感度旁瘫;

2祖凫、嘗試利用可視化工具創(chuàng)建圖表,鍛煉分析整理的能力酬凳;

3惠况、密切關(guān)注自家產(chǎn)品線的用戶行為數(shù)據(jù),解讀各類數(shù)據(jù)指標粱年,培養(yǎng)分析的習慣售滤;

4、關(guān)注前沿技術(shù)和可視化新形式台诗,保持開放包容的心態(tài)完箩;

以上就是本文全部內(nèi)容,希望能帶給大家?guī)椭?/p>


參考:

CSDN 前端修羅場《大屏數(shù)據(jù)可視化設(shè)計指南》

且曼 B 端產(chǎn)品設(shè)計 美芳老師 《數(shù)據(jù)可視化設(shè)計之視覺篇》

《10 rules for better dashboard design》Taras Bakusevych

AntV:https://antv-2018.alipay.com/zh-cn/index.html

Echarts:https://echarts.apache.org/zh/index.html

CSDN captain811《數(shù)據(jù)可視化的重點》

馬世權(quán)《樂見數(shù)據(jù):商業(yè)數(shù)據(jù)可視化思維》

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
  • 序言:七十年代末拉队,一起剝皮案震驚了整個濱河市弊知,隨后出現(xiàn)的幾起案子,更是在濱河造成了極大的恐慌粱快,老刑警劉巖秩彤,帶你破解...
    沈念sama閱讀 217,542評論 6 504
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件,死亡現(xiàn)場離奇詭異事哭,居然都是意外死亡漫雷,警方通過查閱死者的電腦和手機,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 92,822評論 3 394
  • 文/潘曉璐 我一進店門鳍咱,熙熙樓的掌柜王于貴愁眉苦臉地迎上來降盹,“玉大人,你說我怎么就攤上這事谤辜⌒罨担” “怎么了?”我有些...
    開封第一講書人閱讀 163,912評論 0 354
  • 文/不壞的土叔 我叫張陵丑念,是天一觀的道長涡戳。 經(jīng)常有香客問我,道長脯倚,這世上最難降的妖魔是什么渔彰? 我笑而不...
    開封第一講書人閱讀 58,449評論 1 293
  • 正文 為了忘掉前任,我火速辦了婚禮,結(jié)果婚禮上胳岂,老公的妹妹穿的比我還像新娘编整。我一直安慰自己,他們只是感情好乳丰,可當我...
    茶點故事閱讀 67,500評論 6 392
  • 文/花漫 我一把揭開白布。 她就那樣靜靜地躺著内贮,像睡著了一般产园。 火紅的嫁衣襯著肌膚如雪。 梳的紋絲不亂的頭發(fā)上夜郁,一...
    開封第一講書人閱讀 51,370評論 1 302
  • 那天什燕,我揣著相機與錄音,去河邊找鬼竞端。 笑死屎即,一個胖子當著我的面吹牛,可吹牛的內(nèi)容都是我干的事富。 我是一名探鬼主播技俐,決...
    沈念sama閱讀 40,193評論 3 418
  • 文/蒼蘭香墨 我猛地睜開眼,長吁一口氣:“原來是場噩夢啊……” “哼统台!你這毒婦竟也來了雕擂?” 一聲冷哼從身側(cè)響起,我...
    開封第一講書人閱讀 39,074評論 0 276
  • 序言:老撾萬榮一對情侶失蹤贱勃,失蹤者是張志新(化名)和其女友劉穎井赌,沒想到半個月后,有當?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體贵扰,經(jīng)...
    沈念sama閱讀 45,505評論 1 314
  • 正文 獨居荒郊野嶺守林人離奇死亡仇穗,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點故事閱讀 37,722評論 3 335
  • 正文 我和宋清朗相戀三年,在試婚紗的時候發(fā)現(xiàn)自己被綠了戚绕。 大學(xué)時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片纹坐。...
    茶點故事閱讀 39,841評論 1 348
  • 序言:一個原本活蹦亂跳的男人離奇死亡,死狀恐怖列肢,靈堂內(nèi)的尸體忽然破棺而出恰画,到底是詐尸還是另有隱情,我是刑警寧澤瓷马,帶...
    沈念sama閱讀 35,569評論 5 345
  • 正文 年R本政府宣布拴还,位于F島的核電站,受9級特大地震影響欧聘,放射性物質(zhì)發(fā)生泄漏片林。R本人自食惡果不足惜,卻給世界環(huán)境...
    茶點故事閱讀 41,168評論 3 328
  • 文/蒙蒙 一、第九天 我趴在偏房一處隱蔽的房頂上張望费封。 院中可真熱鬧焕妙,春花似錦、人聲如沸弓摘。這莊子的主人今日做“春日...
    開封第一講書人閱讀 31,783評論 0 22
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽韧献。三九已至末患,卻和暖如春,著一層夾襖步出監(jiān)牢的瞬間锤窑,已是汗流浹背璧针。 一陣腳步聲響...
    開封第一講書人閱讀 32,918評論 1 269
  • 我被黑心中介騙來泰國打工, 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留渊啰,地道東北人探橱。 一個月前我還...
    沈念sama閱讀 47,962評論 2 370
  • 正文 我出身青樓,卻偏偏與公主長得像绘证,于是被迫代替她去往敵國和親隧膏。 傳聞我的和親對象是個殘疾皇子,可洞房花燭夜當晚...
    茶點故事閱讀 44,781評論 2 354

推薦閱讀更多精彩內(nèi)容