国产一区二区精品-国产一区二区精品久-国产一区二区精品久久-国产一区二区精品久久91-免费毛片播放-免费毛片基地

千鋒教育-做有情懷、有良心、有品質(zhì)的職業(yè)教育機構(gòu)

手機站
千鋒教育

千鋒學(xué)習(xí)站 | 隨時隨地免費學(xué)

千鋒教育

掃一掃進入千鋒手機站

領(lǐng)取全套視頻
千鋒教育

關(guān)注千鋒學(xué)習(xí)站小程序
隨時隨地免費學(xué)習(xí)課程

當前位置:首頁  >  技術(shù)干貨  > 干貨!如何做數(shù)據(jù)可視化設(shè)計?

干貨!如何做數(shù)據(jù)可視化設(shè)計?

來源:千鋒教育
發(fā)布人:wjy
時間: 2022-06-08 13:23:00 1654665780

  關(guān)于數(shù)據(jù)可視化的經(jīng)驗分享,希望能對看到這篇文章的你,有一個初步的設(shè)計思路~

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

  數(shù)據(jù)可視化技術(shù)的基本思想,是將數(shù)據(jù)庫中每一個數(shù)據(jù)項作為單個圖元元素表示,大量的數(shù)據(jù)集構(gòu)成數(shù)據(jù)圖像,同時將數(shù)據(jù)的各個屬性值以多維數(shù)據(jù)的形式表示,可以從不同的維度觀察數(shù)據(jù),從而對數(shù)據(jù)進行更深入的觀察和分析。

  簡單理解就是,數(shù)據(jù)可視化主要是借助圖形化手段,清晰有效地傳達與溝通信息。

  如何展開數(shù)據(jù)可視化設(shè)計?

  1、明確需呈現(xiàn)的業(yè)務(wù)指標

  當我們拿到需求后,首先就是要確認需求,梳理有疑問的地方,及時與產(chǎn)品經(jīng)理溝通。在溝通這一步中,重點介紹一下3個名詞:主要指標、次要指標、輔助指標。

  主要指標反映核心業(yè)務(wù),位于屏幕中央;次要指標用于進一步闡述分析,位于屏幕兩側(cè);輔助指標是主要指標的補充信息,可不顯示或顯示在屏幕兩側(cè)或鼠標經(jīng)過時顯示。

  這3個指標將會關(guān)系到我們選擇什么樣的圖表類型,以及頁面的布局如何呈現(xiàn)。

  2、為指標選擇合適的圖表

  在這里,我只介紹常用的幾種圖表類型,如果想看更豐富的圖表類型,可以參考echarts: http://echarts.baidu.com

  (1)柱狀圖

  柱狀圖常用于類別之間的比較,反映數(shù)據(jù)之間的差異。由于肉眼對高度差異很敏感,所以柱狀圖的表現(xiàn)形式會很直觀。

  柱狀圖有單指標柱圖、多指標柱圖以及堆疊柱圖類型。

干貨!如何做數(shù)據(jù)可視化設(shè)計629

 

  (2)折線圖

  折線圖常用于反映數(shù)據(jù)隨著時間變化而變化的趨勢。

  折線圖有單指標趨勢圖和多指標趨勢圖。

  干貨!如何做數(shù)據(jù)可視化設(shè)計682

 

  (3)餅圖

  餅圖常用于表示比例關(guān)系,可以展示每一部分占總體的百分比是多少。

  在這里分享4個關(guān)于餅圖設(shè)計的經(jīng)驗。

  1.由于人的視線習(xí)慣于順時針方向觀察,因此餅圖中的數(shù)據(jù)占比盡量考慮從大到小順時針排列。

  2.肉眼對于餅圖只能感受到具有明顯面積差異的數(shù)據(jù),當面積差異很小時,我們就無法分辨數(shù)據(jù)的占比大小。因此,設(shè)計餅圖時,最好能顯示數(shù)據(jù)占比的具體百分比。

  3.當餅圖中數(shù)據(jù)類型過多時,可以考慮將餅圖換成柱狀圖,便于閱讀;或考慮將餅圖換成復(fù)合餅圖,把占比較小的數(shù)據(jù)放到第二個餅圖中,雖然還是采用的餅圖形式,但是閱讀起來會層次分明。

  4.當數(shù)據(jù)中有0的數(shù)值時,就不要使用餅圖了,因為餅圖無法體現(xiàn)0值的數(shù)據(jù)。可以考慮柱狀圖或條形圖。

  餅圖有標準餅圖,中空餅圖和環(huán)形餅圖。

干貨!如何做數(shù)據(jù)可視化設(shè)計1020

 

  (4)條形圖

  條形圖又稱橫向柱狀圖,在echarts中,直接將條形圖歸到了柱狀圖的類別中。

  其實條形圖和柱狀圖的使用場景很相似,都是用于分類之間的比較。但兩者有一個最重要的區(qū)別就是,當數(shù)據(jù)分類多且數(shù)據(jù)名稱字段較長時,應(yīng)選擇條形圖,因為條形圖能夠橫向布局,方便展示較長緯度的字段名稱。

  實際應(yīng)用中,條形圖常用于表示數(shù)據(jù)之間的順序排列。例如Top3或Top5數(shù)據(jù)。

干貨!如何做數(shù)據(jù)可視化設(shè)計1204

 

  (5)雷達圖

  雷達圖可以用來表現(xiàn)一個周期數(shù)值的變化,也可以用來表現(xiàn)特定對象主要參數(shù)的相對關(guān)系。它常用于財務(wù)分析數(shù)據(jù)中,用來分析企業(yè)的負債能力、運營能力、盈利和發(fā)展能力等指標。

  在這里分享2個關(guān)于雷達圖的設(shè)計經(jīng)驗。

  1、使用雷達圖時,應(yīng)注意其數(shù)據(jù)類別最多6個。

  2、因為用戶一般不熟悉雷達圖,所以在使用雷達圖時,要加上文字說明,減輕閱讀負擔。例如王者榮耀的對戰(zhàn)雷達圖中,每個數(shù)據(jù)點代表什么都用文字說明了。

干貨!如何做數(shù)據(jù)可視化設(shè)計1411

 

  (6)地圖

  地圖適用于有空間位置的數(shù)據(jù)集。

  地圖類型有區(qū)域地圖、散點地圖、熱力地圖。

  區(qū)域地圖:

  按照國家、省市行政區(qū)劃分,用來展現(xiàn)地理信息,以及與地理位置有關(guān)的信息,指標的多少可以用顏色深淺區(qū)分。

  散點地圖:

  基于高德地圖實現(xiàn),通過定位經(jīng)緯度,用散點來表示所在位置的信息指標。

干貨!如何做數(shù)據(jù)可視化設(shè)計1556

 

  熱力地圖:

  以特殊高亮的形式顯示訪客熱衷的頁面區(qū)域和訪客所在的地理區(qū)域的圖示。不同顏色反映不同區(qū)域密度的分布。

干貨!如何做數(shù)據(jù)可視化設(shè)計2058

 

  3、排版設(shè)計,突出關(guān)鍵信息

  (1)頁面布局

  布局主要根據(jù)我們之前定好的業(yè)務(wù)指標進行劃分。主要指標位于中間位置,次要指標按優(yōu)先級依次在主要指標周圍展開,位于屏幕兩側(cè)。一般把有關(guān)聯(lián)的指標讓其相鄰或靠近,把圖表類型相近的指標放一起,這樣布局的好處是能減少認知負擔并提高信息傳遞的效率。

  總結(jié):頁面布局需注意重點信息突出,做到主次分明、條理清晰,還需注意頁面留白,有呼吸感。

  干貨!如何做數(shù)據(jù)可視化設(shè)計1615

 

  (2)配色

  相信大家在看很多數(shù)據(jù)可視化的設(shè)計案例時,都會發(fā)現(xiàn)常用深色作為背景色。主要是因為以下3點原因:

  1.數(shù)據(jù)可視化的設(shè)計常用于大屏展示,由于背景面積過大,使用深色背景能夠減少屏幕色差對整體表現(xiàn)的影響,也避免了觀眾在視覺上覺得刺眼。

  2.深色背景更能聚焦視覺,利用色調(diào)與明度的變化,能夠保證可視化圖表的清晰辨識度,便于突出內(nèi)容。

  3.方便做出一些流光、粒子等酷炫的效果。

  整體背景深色系,雖然選擇搭配很多,不過百搭的色系還是推薦深藍色系。

  在這里,分享一些常用的色彩搭配(*^__^*) ~

  干貨!如何做數(shù)據(jù)可視化設(shè)計1803

 

  總結(jié):

  在實際的設(shè)計過程中,還會遇到其他的問題,比如字體的選擇,動效的設(shè)計。

  關(guān)于動效的設(shè)計會發(fā)現(xiàn)我們有時候難以在設(shè)計稿中表現(xiàn)的動效,開發(fā)能利用代碼輕易實現(xiàn);同理,有些效果我們能用設(shè)計工具輕易實現(xiàn),但開發(fā)卻很難實現(xiàn),或耗費時間較長。

  因此在設(shè)計的過程中,一定要注意與開發(fā)溝通,哪些地方我們可以盡情發(fā)揮,哪些地方需要遵守規(guī)則。

tags:
聲明:本站稿件版權(quán)均屬千鋒教育所有,未經(jīng)許可不得擅自轉(zhuǎn)載。
10年以上業(yè)內(nèi)強師集結(jié),手把手帶你蛻變精英
請您保持通訊暢通,專屬學(xué)習(xí)老師24小時內(nèi)將與您1V1溝通
免費領(lǐng)取
今日已有369人領(lǐng)取成功
劉同學(xué) 138****2860 剛剛成功領(lǐng)取
王同學(xué) 131****2015 剛剛成功領(lǐng)取
張同學(xué) 133****4652 剛剛成功領(lǐng)取
李同學(xué) 135****8607 剛剛成功領(lǐng)取
楊同學(xué) 132****5667 剛剛成功領(lǐng)取
岳同學(xué) 134****6652 剛剛成功領(lǐng)取
梁同學(xué) 157****2950 剛剛成功領(lǐng)取
劉同學(xué) 189****1015 剛剛成功領(lǐng)取
張同學(xué) 155****4678 剛剛成功領(lǐng)取
鄒同學(xué) 139****2907 剛剛成功領(lǐng)取
董同學(xué) 138****2867 剛剛成功領(lǐng)取
周同學(xué) 136****3602 剛剛成功領(lǐng)取
相關(guān)推薦HOT
能不能幫我打開抖音小店店鋪呢怎么弄

抖音小店是近年來非?;鸨囊粋€網(wǎng)絡(luò)業(yè)務(wù),也是提供了很多商業(yè)機會的平臺。對于一個創(chuàng)業(yè)者而言,開設(shè)抖音小店是一個不錯的選擇。但是,許多小店...詳情>>

2023-10-08 15:01:21
藍v抖音小店怎么開通店鋪

藍v抖音小店是一個非常熱門的電商平臺,它可以讓賣家在抖音上開設(shè)自己的店鋪,從而出售自己的商品。隨著抖音的不斷發(fā)展壯大,越來越多的賣家希...詳情>>

2023-10-08 14:51:53
抖音小店怎么更改類目名稱

抖音小店是現(xiàn)在非?;馃岬囊环N網(wǎng)店形態(tài),許多小生意也從中獲得了收益。但是隨著經(jīng)營時間的增長,小店也需要對自己的類目名稱進行更改,因為這可...詳情>>

2023-10-08 14:46:50
抖音小店怎么合作賣貨

抖音小店作為一種新型的電商形式,近年來在國內(nèi)市場上逐漸火熱起來,成為了許多年輕人賺取收入的途徑之一。因為抖音作為當前最流行的短視頻平臺...詳情>>

2023-10-08 14:35:49
抖音小店運營和天貓區(qū)別是什么呢

隨著社交媒體的廣泛應(yīng)用,抖音小店開始走進人們的生活,成為越來越多人的購物選擇之一。而天貓作為國內(nèi)最具影響力的電商平臺之一,是許多電商從...詳情>>

2023-10-08 14:23:10