亚洲欧美v国产一区二区三区,中文字日产幕乱五区,综合亚洲,,,色,亚洲伊人久久大香线蕉综合,亚洲综合精品伊人久久

首頁 > SEO動(dòng)態(tài) > 網(wǎng)站技術(shù)6大章節(jié)18張圖例!帶你輕松了解B端數(shù)據(jù)圖表(一)

6大章節(jié)18張圖例!帶你輕松了解B端數(shù)據(jù)圖表(一)

6大章節(jié)18張圖例!帶你輕松了解B端數(shù)據(jù)圖表(一)

工作中 B 端數(shù)據(jù)圖表使用頻率不多,但真的接到需求時(shí),自己也會(huì)詢問周圍同事或網(wǎng)站,圖表的類型有哪些?由哪些元素組成、每一類型的圖表應(yīng)該對(duì)應(yīng)的場景有哪些?為了設(shè)計(jì)圖表時(shí)得心應(yīng)手,今天我們先一起探究下有關(guān)圖表的基礎(chǔ)知識(shí)。

本文以數(shù)據(jù)圖表的定義、優(yōu)勢(shì)、構(gòu)成、分類、應(yīng)用場景羅列及可讓大家工作效率翻倍的網(wǎng)站和插件這六個(gè)部分,作為本文對(duì)圖表的初步了解,后續(xù)我們將以系列文章形式挖掘"數(shù)據(jù)圖表"這座寶藏。既然發(fā)現(xiàn)寶藏,定能夠淘到自己想要的"金子",帶走它!下圖為寶藏地圖,請(qǐng)先領(lǐng)??!

6大章節(jié)18張圖例!帶你輕松了解B端數(shù)據(jù)圖表(一)

一、圖表的定義

圖表是將研究對(duì)象的數(shù)據(jù)進(jìn)行可視化表達(dá),它可以呈現(xiàn)數(shù)據(jù)的整體形態(tài)、趨勢(shì)、對(duì)比等;更加直觀明了,同時(shí)也不會(huì)分散人的注意力,有利于快速展示大量的數(shù)據(jù)關(guān)系,圖表是數(shù)據(jù)的表現(xiàn)形式之一。

例如:在數(shù)據(jù)可視化圖表設(shè)計(jì)出現(xiàn)之前,我們多用于 Excel 表格進(jìn)行羅列數(shù)據(jù)、計(jì)算等,如下圖把表格中的數(shù)字以圖形的形式進(jìn)行展示,對(duì)于用戶來講圖形化要比一長串"數(shù)字"更吸引眼球。

6大章節(jié)18張圖例!帶你輕松了解B端數(shù)據(jù)圖表(一)

二、圖表的優(yōu)勢(shì)

作為一個(gè)設(shè)計(jì)師,接到需求時(shí),面對(duì)龐大的數(shù)據(jù),也會(huì)撓腦皮,問煩同事;但辦法總比困難多,大多數(shù)設(shè)計(jì)師會(huì)利用"可視化"圖形的方法,在工作中因數(shù)據(jù)具有針對(duì)性變得高效、直觀性顯得更易理解、數(shù)據(jù)樣式組合會(huì)更加的實(shí)用等這 3 個(gè)優(yōu)勢(shì),做到這三個(gè)優(yōu)勢(shì)在整體上降低用戶閱讀數(shù)據(jù)的門檻和分析;那我們就結(jié)合例子分別看看這三個(gè)優(yōu)勢(shì):

第一:針對(duì)性

在工作中我們也會(huì)遇到不同類型的數(shù)據(jù)需要使用不同的圖表形式,例如曲線圖一般會(huì)用來顯示在一個(gè)連續(xù)的時(shí)間或者時(shí)間跨度上的變化,它的特點(diǎn)是能夠看到事物隨著時(shí)間的變化趨勢(shì);柱狀圖使用垂直或水平的坐標(biāo)顯示類別之間的數(shù)值比較,其中一個(gè)軸表示需要對(duì)比的分類維度,另一個(gè)軸代表相應(yīng)的數(shù)值。我們使用圖表時(shí),需要先對(duì)數(shù)據(jù)屬性進(jìn)行判斷,再對(duì)哪種形式的圖表作出選擇。

6大章節(jié)18張圖例!帶你輕松了解B端數(shù)據(jù)圖表(一)

第二:直觀性

圖表與文字相比,在數(shù)據(jù)的表現(xiàn)上非常直觀。如下圖,從只有"數(shù)據(jù)"到以折柱圖的形式呈現(xiàn),不僅可以讓用戶一目了然地看到數(shù)據(jù),還能讓用戶將數(shù)據(jù)進(jìn)行對(duì)比。

6大章節(jié)18張圖例!帶你輕松了解B端數(shù)據(jù)圖表(一)

第三:拓展組合

根據(jù)數(shù)據(jù)屬性與圖表對(duì)比,圖表有更強(qiáng)的拓展性,可以進(jìn)行組合使用;圖表拓展性一般是根據(jù)基礎(chǔ)圖表樣式,以及數(shù)據(jù)的增加,拓展出系列或類似的圖表,例如我們常見的基礎(chǔ)柱狀圖,由于數(shù)據(jù)屬性多樣可以衍生出雙向柱狀圖、堆疊柱狀圖等。

6大章節(jié)18張圖例!帶你輕松了解B端數(shù)據(jù)圖表(一)

6大章節(jié)18張圖例!帶你輕松了解B端數(shù)據(jù)圖表(一)

三、圖表的元素構(gòu)成

了解完什么是圖表及它的優(yōu)勢(shì)后,接下來我們來看下圖表由幾個(gè)的基礎(chǔ)部分組成。圖表是由:標(biāo)題、坐標(biāo)軸、圖例、圖形、信息標(biāo)簽等組成。如下圖示例:

6大章節(jié)18張圖例!帶你輕松了解B端數(shù)據(jù)圖表(一)

  1. 標(biāo)題:標(biāo)題簡潔明了,表達(dá)圖表主題,有些圖表只有一個(gè)主題,也有主標(biāo)題與副標(biāo)題;
  2. 坐標(biāo)軸:數(shù)據(jù)關(guān)系映射在坐標(biāo)系的視覺展示,包括軸線(縱軸、橫軸)、標(biāo)尺;
  3. 圖例:圖表中信息和數(shù)據(jù)較多,需要用來數(shù)據(jù)屬性區(qū)別,一般會(huì)用圖例對(duì)內(nèi)容與數(shù)據(jù)進(jìn)行說明;
  4. 信息標(biāo)簽:鼠標(biāo)在懸停時(shí)出現(xiàn)、固定在圖形上展示數(shù)據(jù)信息,這也是常見的交互方式,也是對(duì)當(dāng)前數(shù)據(jù)的內(nèi)容提示信息的一種方式;
  5. 圖形:數(shù)據(jù)在視覺展示中映射出來的圖形,可以反映數(shù)據(jù)差異與關(guān)系,例如常見的柱狀圖、餅狀圖、折線圖;

如下圖在工作中出現(xiàn)或常見的小錯(cuò)誤,會(huì)遺忘標(biāo)題、圖例、信息標(biāo)簽等。

6大章節(jié)18張圖例!帶你輕松了解B端數(shù)據(jù)圖表(一)

四、圖表常見的分類

其實(shí)在了解圖表的分類和概念過程中發(fā)現(xiàn),圖表是我們工作中使用圖表類型的依據(jù),在了解圖表的過程中,發(fā)現(xiàn)安德魯·阿伯拉(Andrew Abela)制作的一份圖表類型選擇指南,他將圖表展示關(guān)系可大致分為 4 類:比較、分布、構(gòu)成、聯(lián)系四種類型(見下圖)。此圖更多的幫助我們思考圖表的起點(diǎn)和思維,在設(shè)計(jì)實(shí)踐中并不都是每個(gè)人認(rèn)可的組合方式。

6大章節(jié)18張圖例!帶你輕松了解B端數(shù)據(jù)圖表(一)

數(shù)據(jù)圖表類型有很多,考慮設(shè)計(jì)師們習(xí)慣于搭建組件庫提高團(tuán)隊(duì)效率,凡子整理了自身工作中常見的使用場景,并且從比較、占比、城市分布、排名等維度進(jìn)行歸納,將圖表分為:柱狀圖、折線圖、餅狀圖&環(huán)形圖、面積圖、子彈圖、雷達(dá)圖、漏斗圖等常見類型并做簡單的使用場景概述,后面也希望做為圖表類型進(jìn)行詳解。

6大章節(jié)18張圖例!帶你輕松了解B端數(shù)據(jù)圖表(一)

1. 柱狀圖:多使用垂直或水平的坐標(biāo)顯示類別之間的數(shù)值比較。柱狀圖除了單條柱狀圖,還可以多條柱狀對(duì)比,在信息過多,或者對(duì)比分類過多時(shí)豎向排布的柱狀圖(如上圖左上一)也是個(gè)不錯(cuò)的選擇。

2. 折線圖:折線圖也被稱為曲線圖,一般會(huì)用來顯示數(shù)據(jù)在一個(gè)連續(xù)的時(shí)間或者是時(shí)間跨度上的變化,他的特點(diǎn)是能夠看到事物隨著時(shí)間的變化趨勢(shì)。

3. 餅狀圖:廣泛應(yīng)用在各個(gè)領(lǐng)域,用于表示不同分類的占比情況,通過弧度大小來對(duì)比各種分類。

6大章節(jié)18張圖例!帶你輕松了解B端數(shù)據(jù)圖表(一)

4. 面積圖:適用于百分比堆疊面積圖,例如:幾個(gè)月安卓手機(jī)各個(gè)版本在市場的占比情況;但是面積圖不適合的用在"分類數(shù)據(jù)的比較,如下圖錯(cuò)誤與正確的使用。

6大章節(jié)18張圖例!帶你輕松了解B端數(shù)據(jù)圖表(一)

6大章節(jié)18張圖例!帶你輕松了解B端數(shù)據(jù)圖表(一)

5. 子彈圖:子彈圖更適合顯示階段性數(shù)據(jù)信息,例如季度的數(shù)據(jù)顯示

6大章節(jié)18張圖例!帶你輕松了解B端數(shù)據(jù)圖表(一)

6. 雷達(dá)圖:雷達(dá)又叫戴布拉圖、蜘蛛網(wǎng)圖、星圖。是由一個(gè)點(diǎn)向 3 個(gè)或者 3 個(gè)以上不同維度的數(shù)據(jù),它能夠用一張圖呈現(xiàn)多個(gè)緯度的數(shù)據(jù)量。它的對(duì)象屬性往往是多維度的。

7. 漏斗圖:適用于流程流量分析。如業(yè)務(wù)上規(guī)范、周期長、環(huán)節(jié)多的單流程單向分析,通過漏斗各環(huán)節(jié)業(yè)務(wù)數(shù)據(jù)的比較能夠直觀地發(fā)現(xiàn)和說明問題所在的環(huán)節(jié),進(jìn)而做出決策。

以上為大家簡單介紹常用的 7 種數(shù)據(jù)圖表類型和簡單場景(后續(xù)我們將作為另一篇文章詳解)。

感謝大家已經(jīng)閱讀到此,接下來可以開啟法寶箱之一:推薦阿里的 Antv (網(wǎng)站建議收藏: https://antv.vision/zh/ )此網(wǎng)站中有圖表分類目錄,包含比較、趨勢(shì)、組成、占比、分布、排名、關(guān)系、空間等 8 個(gè)大類??炜焓障麓朔▽殻瑘D表效率要翻倍!

6大章節(jié)18張圖例!帶你輕松了解B端數(shù)據(jù)圖表(一)

五、圖表的應(yīng)用場景羅列

隨著數(shù)據(jù)可視化趨勢(shì),其中數(shù)據(jù)圖表使用場景也可以分為信息圖表設(shè)計(jì)、B 端后臺(tái)界面設(shè)計(jì)、可視化大屏設(shè)計(jì)、系統(tǒng)后臺(tái)檢測(cè)、移動(dòng)端界面設(shè)計(jì)、游戲數(shù)據(jù) UI 這六大場景,由于文章篇幅問題,在此篇暫不過多贅述。

6大章節(jié)18張圖例!帶你輕松了解B端數(shù)據(jù)圖表(一)

六、插件推薦和網(wǎng)站合集

第一:插件

  1. https://www.figma.com/community/plugin/731451122947612104/Charts
  2. https://www.figma.com/community/plugin/734590934750866002/Chart
  3. https://kitchen.alipay.com/

6大章節(jié)18張圖例!帶你輕松了解B端數(shù)據(jù)圖表(一)

第二:數(shù)據(jù)圖表網(wǎng)站合集

  1. https://dycharts.com/apPV2/#/pages/home/index
  2. https://chartcube.alipay.com/
  3. https://psdrepo.com/free-psd/analytics-charts-freebie/
  4. https://echarts.apache.org/en/index.Html

6大章節(jié)18張圖例!帶你輕松了解B端數(shù)據(jù)圖表(一)

七、總結(jié)回顧

以上內(nèi)容就是凡子在深夜碼字、整理圖片的成果,我們從圖表的定義、優(yōu)勢(shì)、類型及簡易場景描述、過程中的小 Tips,網(wǎng)站和插件等六個(gè)部分對(duì)圖表進(jìn)行學(xué)習(xí)和了解,希望可以為想要了解圖表知識(shí)的伙伴們解惑、帶來幫助,榮幸之至,此外還請(qǐng)期待圖表系列(二)《B 端后臺(tái)產(chǎn)品的圖表類型及使用場景詳解》。

作者:兆日 UCD

想了解更多網(wǎng)站技術(shù)的內(nèi)容,請(qǐng)?jiān)L問:網(wǎng)站技術(shù)

本文來源:http://www.sonygallery.com.cn/seodongtai/19338.html

免責(zé)聲明:部分文章信息來源于網(wǎng)絡(luò)以及網(wǎng)友投稿,本網(wǎng)站只負(fù)責(zé)對(duì)文章進(jìn)行整理、排版、編輯,是出于傳遞更多信息之目的,并不意味著贊同其觀點(diǎn)或證實(shí)其內(nèi)容的真實(shí)性,不承擔(dān)任何法律責(zé)任。