從方法到工具,騰訊高手帶你輕松搞定圖表設(shè)計(jì)|北京藍(lán)藍(lán)UI設(shè)計(jì)公司

2023-11-20    周周

從方法到工具,騰訊高手帶你輕松搞定圖表設(shè)計(jì)

一、數(shù)據(jù)可視化的作用

從方法到工具,騰訊高手帶你輕松搞定圖表設(shè)計(jì)

數(shù)據(jù)無處不在,幫助我們更好地做出決策。然而數(shù)據(jù)不能獨(dú)立存在,為了使數(shù)據(jù)有用,我們必須理解它。數(shù)據(jù)的質(zhì)量很大程度上依賴于其表達(dá)方式,對(duì)數(shù)據(jù)分析結(jié)果的可視化呈現(xiàn)可以幫助我們更好地理解和挖掘數(shù)據(jù)的價(jià)值。數(shù)據(jù)可視化的本質(zhì)是視覺對(duì)話,數(shù)據(jù)可視化將數(shù)據(jù)分析與圖形設(shè)計(jì)相結(jié)合,數(shù)據(jù)是可視化設(shè)計(jì)的依據(jù),可視化為數(shù)據(jù)的表達(dá)提供了靈活性。利用數(shù)據(jù)可視化可以更好更高效地獲取有價(jià)值的信息。

從方法到工具,騰訊高手帶你輕松搞定圖表設(shè)計(jì)

精心設(shè)計(jì)的可視化圖表可以清楚地傳達(dá)復(fù)雜的數(shù)據(jù),圖表為抽象的數(shù)據(jù)提供上下文,讓我們直觀地掌握數(shù)據(jù)的模式、識(shí)別數(shù)據(jù)的趨勢(shì)、進(jìn)行數(shù)據(jù)比較和追蹤數(shù)據(jù)變化。

但在日常工作中,有時(shí)候會(huì)發(fā)現(xiàn)設(shè)計(jì)師把過多精力花在了讓圖表看上去“好看”,而忽視了這樣的數(shù)據(jù)究竟適合用哪些圖表來表達(dá),導(dǎo)致沒達(dá)到想要的效果。我們結(jié)合了平時(shí)工作中的的經(jīng)驗(yàn)和對(duì)圖表設(shè)計(jì)的理解,寫出這篇文章,希望能對(duì)大家有所幫助。

一、圖表的設(shè)計(jì)方法

從方法到工具,騰訊高手帶你輕松搞定圖表設(shè)計(jì)

圖表設(shè)計(jì)的一般以目標(biāo)導(dǎo)向,根據(jù)要傳達(dá)的信息用途明確目標(biāo),從而選擇需要使用的圖表類型。制定設(shè)計(jì)方案之前,需要先明確需要符合的原則,避免錯(cuò)誤的圖表設(shè)計(jì)造成信息傳達(dá)失真。

1.  開始設(shè)計(jì)之前,如何選擇要用什么類型的圖表?——圖表的類型由數(shù)據(jù)目標(biāo)決定

從方法到工具,騰訊高手帶你輕松搞定圖表設(shè)計(jì)

①理解數(shù)據(jù)

首先需要確定你的核心內(nèi)容,圖表可以提供視覺重心,在一個(gè)頁面中有許多內(nèi)容可以被可視化,但只有最重要的內(nèi)容才應(yīng)該制成圖表,圖表會(huì)將用戶注意力引到你希望他們理解的信息上。接下來考慮你想傳達(dá)的數(shù)據(jù)的關(guān)系和數(shù)據(jù)的維度是什么?數(shù)據(jù)的關(guān)系有比較、趨勢(shì)、分布、組成、流水線等等

②分析用戶

用戶需要什么樣的體驗(yàn),圖表如何支持用戶達(dá)成目標(biāo)?首先可以關(guān)注誰是你的受眾,他們更喜歡如何消費(fèi)信息?不同的用戶角色對(duì)于數(shù)據(jù)的關(guān)注點(diǎn)也會(huì)不同,通過分析用戶的特征、使用場(chǎng)景、以及用戶使用這組數(shù)據(jù)的目的,可以進(jìn)一步幫助明確圖表設(shè)計(jì)的目標(biāo)。

比如下表是一組簡(jiǎn)單的數(shù)據(jù),從數(shù)據(jù)關(guān)系和數(shù)據(jù)維度來看,可以比較同一年里不同產(chǎn)品的銷售量,或者看同一年里不同產(chǎn)品的銷售量占比;也可以看每個(gè)產(chǎn)品的近幾年的銷售量增長(zhǎng)趨勢(shì)變化。對(duì)于老板來說,可能傾向于看總的趨勢(shì)變化,對(duì)于產(chǎn)品經(jīng)理來說,可能更側(cè)重于自己產(chǎn)品和其他產(chǎn)品的銷量對(duì)比和本產(chǎn)品的銷量變化。

從方法到工具,騰訊高手帶你輕松搞定圖表設(shè)計(jì)

③選擇圖表類型

理解數(shù)據(jù)和分析用戶后,進(jìn)一步明確了圖表需要展示什么信息,選擇能清楚展示對(duì)數(shù)據(jù)的見解的圖表。使用錯(cuò)誤的圖表類型可能會(huì)歪曲數(shù)據(jù)、混淆甚至誤導(dǎo)你的用戶。
一般我們根據(jù)需要表達(dá)的數(shù)據(jù)關(guān)系來選擇圖表類型:

從方法到工具,騰訊高手帶你輕松搞定圖表設(shè)計(jì)

1)比較

比較圖表用于顯示數(shù)據(jù)的差異和相似之處,它們包括條形、柱形圖、折線圖。

條形圖和柱形圖

條形圖是用于比較分析的主力,人類的視覺可以快速辨別高度和長(zhǎng)度的差異,所以它是呈現(xiàn)簡(jiǎn)單的有序數(shù)據(jù)的好選擇。

從方法到工具,騰訊高手帶你輕松搞定圖表設(shè)計(jì)

堆積條形圖和柱形圖

堆積條形圖非常適合顯示更復(fù)雜的類別和子類別之間的組關(guān)系和價(jià)值差異,或用于對(duì)比同一個(gè)分組數(shù)據(jù)內(nèi)不同分類的占比。堆積柱形圖還可用于顯示有序數(shù)據(jù)子集中的組關(guān)系。一般分組較多時(shí)適合使用堆積條形圖,分組較少時(shí)適合使用堆積柱形圖。

從方法到工具,騰訊高手帶你輕松搞定圖表設(shè)計(jì)

折線圖

折線圖用于展示連續(xù)數(shù)值(例如時(shí)間)或者有序數(shù)據(jù)的分類的變化趨勢(shì),非常適合表示一個(gè)或多個(gè)值隨時(shí)間的變化,尤其是趨勢(shì)數(shù)據(jù)。繪制折線圖在 X 軸的投影面積可以更直觀的展示數(shù)值大小。

從方法到工具,騰訊高手帶你輕松搞定圖表設(shè)計(jì)

2)分布

關(guān)系圖,例如散點(diǎn)圖、氣泡圖、雷達(dá)圖,用于顯示數(shù)據(jù)中值之間的關(guān)系和相關(guān)性。

散點(diǎn)圖

散點(diǎn)圖可用于顯示更復(fù)雜的數(shù)據(jù)關(guān)系,包括多個(gè)變量的相關(guān)性。與點(diǎn)圖一樣,點(diǎn)的顏色強(qiáng)度可以傳達(dá)額外的信息。

從方法到工具,騰訊高手帶你輕松搞定圖表設(shè)計(jì)

氣泡圖

氣泡圖使用顏色密度和氣泡大小來顯示兩個(gè)變量的濃度模式。

從方法到工具,騰訊高手帶你輕松搞定圖表設(shè)計(jì)

雷達(dá)圖

雷達(dá)圖是以從同一點(diǎn)開始的軸上表示的三個(gè)或更多個(gè)定量變量的二維圖表的形式顯示多變量數(shù)據(jù)的圖形方法,專門用來進(jìn)行多指標(biāo)體系的分布和比較分析,可以將多維數(shù)據(jù)投影到平面上,實(shí)現(xiàn)多維數(shù)據(jù)的可視化。

從方法到工具,騰訊高手帶你輕松搞定圖表設(shè)計(jì)

3)構(gòu)成

用于顯示相對(duì)值,或表示一個(gè)值的相對(duì)構(gòu)成,包括餅圖、環(huán)形圖、樹狀圖。

餅圖和環(huán)形圖

餅圖在數(shù)據(jù)集中映射相對(duì)值或值的相對(duì)構(gòu)成,突出顯示相對(duì)值(例如數(shù)據(jù)的分類和占比情況)而不是絕對(duì)值。也可使用環(huán)形在中間顯示更多圖表說明。

從方法到工具,騰訊高手帶你輕松搞定圖表設(shè)計(jì)

樹狀圖

樹形圖使用嵌套的矩形顯示分層數(shù)據(jù)的組成,可以清晰地顯示層的結(jié)構(gòu),通過矩形面積、排列的不同來展示層的內(nèi)部占比關(guān)系

從方法到工具,騰訊高手帶你輕松搞定圖表設(shè)計(jì)

4)流轉(zhuǎn)

流水線圖顯示了流程的各個(gè)階段,以及這些階段之間的流程。它們包括漏斗圖、瀑布圖、折紙圖和?;鶊D。

漏斗圖

漏斗圖用于表示銷售或營(yíng)銷過程中的各個(gè)階段,每個(gè)階段都有一個(gè)值。

從方法到工具,騰訊高手帶你輕松搞定圖表設(shè)計(jì)

瀑布圖

瀑布圖用于顯示流程各個(gè)階段的起始值、中間值和最終值。適合用作反映數(shù)值的增減,比如一年中各月營(yíng)收、用戶數(shù)等指標(biāo)的變化。

從方法到工具,騰訊高手帶你輕松搞定圖表設(shè)計(jì)

折紙圖

折紙圖表使用單個(gè)度量和分組顯示數(shù)據(jù)中的彈出值。您還可以使用它們來顯示值不按順序遞減的階段的可變性。它們可以很好地突出顯示相對(duì)于某個(gè)類別中的其他值表現(xiàn)良好的值。

從方法到工具,騰訊高手帶你輕松搞定圖表設(shè)計(jì)

桑基圖

?;鶊D顯示值如何在兩個(gè)分組之間流動(dòng),展示給定指標(biāo)在從一個(gè)組移動(dòng)到另一個(gè)組時(shí)是如何分布的。桑基圖可以顯示負(fù)數(shù)并計(jì)算它們對(duì)總體總數(shù)的影響。

從方法到工具,騰訊高手帶你輕松搞定圖表設(shè)計(jì)

④其他:信息圖形(Infographic)

除了常規(guī)的功能型圖表之外,還有一種表現(xiàn)型的數(shù)據(jù)可視化設(shè)計(jì)類型,那就是信息圖形。

信息圖形是一種藝術(shù)化的數(shù)據(jù)可視化設(shè)計(jì),主要應(yīng)用于需要清楚解釋或表達(dá)復(fù)雜信息的場(chǎng)景,如數(shù)據(jù)統(tǒng)計(jì)、新聞事件、人物關(guān)系、歷史脈絡(luò)、原理科普或教程指引等。其目的是通過藝術(shù)、易懂的表現(xiàn)形式傳遞復(fù)雜的信息或概念。信息圖形通常為定制設(shè)計(jì),需要設(shè)計(jì)者具備理解、提煉和美化內(nèi)容的能力,以及一定的設(shè)計(jì)專業(yè)技能。

從方法到工具,騰訊高手帶你輕松搞定圖表設(shè)計(jì)

從方法到工具,騰訊高手帶你輕松搞定圖表設(shè)計(jì)

從方法到工具,騰訊高手帶你輕松搞定圖表設(shè)計(jì)

從方法到工具,騰訊高手帶你輕松搞定圖表設(shè)計(jì)

2. 圖表設(shè)計(jì)過程中,有一些常見的原則需要設(shè)計(jì)師考慮

①準(zhǔn)確性

優(yōu)先考慮數(shù)據(jù)的準(zhǔn)確性、清晰度和完整性,以不會(huì)扭曲信息的方式呈現(xiàn)信息。盡可能使用熟悉的表格,降低理解門檻(比如柱狀圖、折線圖)。

從方法到工具,騰訊高手帶你輕松搞定圖表設(shè)計(jì)

使用過多顏色會(huì)破壞將數(shù)字與顏色相關(guān)聯(lián)的目的。有研究表明,大多數(shù)人的短期記憶一次最多可以保留 5 條信息,所以建議顏色數(shù)量的最佳最大值為 5 條。

從方法到工具,騰訊高手帶你輕松搞定圖表設(shè)計(jì)

②一致性

用統(tǒng)一的表達(dá)來描述圖表,比如始終如一地將顏色與數(shù)據(jù)屬性相匹配。如果在一個(gè)圖表中使用藍(lán)色表示銷售利潤(rùn)率,則在所有其他圖表中都使用它來表示該值。

從方法到工具,騰訊高手帶你輕松搞定圖表設(shè)計(jì)

③有幫助的

使用上下文和可簡(jiǎn)單觸達(dá)的交互來幫助用戶進(jìn)行數(shù)據(jù)導(dǎo)航。比如通過標(biāo)題和完整句子來解釋數(shù)據(jù)。當(dāng)使用用戶不熟悉的新奇圖表時(shí),需要額外解釋幫助理解(一般新奇圖表用來作為應(yīng)用的核心,而不是補(bǔ)充描述,突出顯示一個(gè)新奇圖表會(huì)激發(fā)用戶去探索和理解它;而用來輔助描述的圖表更適合用用戶熟悉的形式,他們的關(guān)注度比新奇圖表低)。

從方法到工具,騰訊高手帶你輕松搞定圖表設(shè)計(jì)

④提高可擴(kuò)展性

針對(duì)不同設(shè)備尺寸調(diào)整可視化,同時(shí)預(yù)測(cè)用戶對(duì)數(shù)據(jù)深度、復(fù)雜性和模式的需求。以下有 3 種常見的提高擴(kuò)展性的處理方式:

1)引入差異:圖表之間的差異是某事發(fā)生改變的信號(hào),當(dāng)數(shù)據(jù)屬性發(fā)生更改時(shí),適合用不同的顏色;當(dāng)數(shù)據(jù)維度發(fā)生更改時(shí),更適合改變圖表的類型。

從方法到工具,騰訊高手帶你輕松搞定圖表設(shè)計(jì)

2)整合宏觀和微觀:使用圖表來表達(dá)數(shù)據(jù)時(shí),宏觀的描述整個(gè)數(shù)據(jù)集,比如總值或平均值;微觀的描述關(guān)注單個(gè)數(shù)據(jù)點(diǎn),比如最新,最大,最小。

從方法到工具,騰訊高手帶你輕松搞定圖表設(shè)計(jì)

3)用從小圖表到大圖表的交互變化,逐步呈現(xiàn)圖表的層次性:小圖表往往是靜態(tài)的且一般不會(huì)單獨(dú)存在,常常作為另一個(gè)視圖中更大的圖表的預(yù)覽,更大的圖表有著更豐富的交互性。在同一圖表的兩個(gè)版本之間創(chuàng)建交互連接時(shí),通過保留數(shù)值、背景、顏色狀態(tài)來保持連續(xù)性,圖表在變化過程中最好保持形狀。前一個(gè)視圖中任何明顯的元素在另一個(gè)視圖里表示不同的內(nèi)容可能會(huì)令用戶感到失望或迷惑。

從方法到工具,騰訊高手帶你輕松搞定圖表設(shè)計(jì)

3. 圖表設(shè)計(jì)

①圖表基本構(gòu)成

從方法到工具,騰訊高手帶你輕松搞定圖表設(shè)計(jì)

1)圖表標(biāo)題:

使圖表易于理解和解釋,使用說明或文本提供數(shù)據(jù)背景,比如標(biāo)題、副標(biāo)題、圖例、提示信息等。描述需要位于圖表附近,可以通過總結(jié)圖表的主要結(jié)論來更好的說明內(nèi)容。

2)軸線:

軸線為標(biāo)記提供框架,為值提供參考。橫軸表示時(shí)間,縱軸表示上下限選擇。網(wǎng)格線提供估計(jì)值,設(shè)計(jì)時(shí)要調(diào)整密度,以免分散注意力。小圖表不需要網(wǎng)格線,了解其模式即可;在大圖表中加入網(wǎng)格線有助于更精確的分析。

3)圖形:

表示數(shù)據(jù)項(xiàng)的可視化元素,比如柱狀圖中的柱,折線圖的直線,散點(diǎn)圖的點(diǎn)。圖形是圖表的視覺構(gòu)建基礎(chǔ),需要針對(duì)目標(biāo)和數(shù)據(jù)進(jìn)行設(shè)計(jì),考慮真實(shí)數(shù)據(jù)的情況和各種極限情況。

②圖表顏色

配色對(duì)圖表的美觀度也起著決定性的作用,恰當(dāng)?shù)纳蚀钆?,能夠使整個(gè)圖表的呈現(xiàn)更加清晰、整潔、準(zhǔn)確,下面講解一下關(guān)于圖表的顏色設(shè)計(jì)。

1)色相/飽和度/明度:

色相本身沒有明顯的順序性,一般不用于表達(dá)圖表數(shù)據(jù)量的高低,通常用于區(qū)分?jǐn)?shù)據(jù)的類別。例如用柱狀圖展示同一維度的數(shù)據(jù)時(shí),應(yīng)該盡量用單色。確實(shí)需要突出某一個(gè)數(shù)據(jù)的時(shí)候,可以用一個(gè)較明顯的顏色用以區(qū)別其他數(shù)據(jù)。

從方法到工具,騰訊高手帶你輕松搞定圖表設(shè)計(jì)

飽和度代表色彩的鮮艷程度,飽和度越高、顏色越鮮艷,容易給人年輕活潑的感覺;反之飽和度越低,容易給人成熟、穩(wěn)重的感覺。

明度代表色彩的亮度,不同的顏色具有不同的明度,例如同樣飽和度明度下黃色就比藍(lán)色的更亮,所以在同樣情況下,可以把亮色的明度適當(dāng)調(diào)低以保證整體配色的和諧統(tǒng)一。

從方法到工具,騰訊高手帶你輕松搞定圖表設(shè)計(jì)

因此在選擇圖表配色時(shí)要注意飽和度明度的適中,避免過高或過低,過高容易造成廉價(jià)感,過低會(huì)導(dǎo)致信息無法有效區(qū)分。

從方法到工具,騰訊高手帶你輕松搞定圖表設(shè)計(jì)

2)配色方法:

使用常見色環(huán)搭配原理,包括鄰近色、對(duì)比色、互補(bǔ)色等。

鄰近色:弱對(duì)比,選擇相鄰的顏色進(jìn)行搭配,可以打造出一致而連貫的效果。

互補(bǔ)色:強(qiáng)對(duì)比,選擇對(duì)角線的顏色,搭配在一起可以打造活力四射的強(qiáng)烈視覺效果。

對(duì)比色:強(qiáng)對(duì)比,采用等邊三角上的三種顏色進(jìn)行搭配,制造強(qiáng)烈的對(duì)比效果。

從方法到工具,騰訊高手帶你輕松搞定圖表設(shè)計(jì)

連續(xù)漸變:

用于表達(dá)同一分類中的數(shù)值大小、梯度的變化,使用連續(xù)漸變可以強(qiáng)調(diào)數(shù)據(jù)內(nèi)在的變化邏輯,使圖表閱讀起來更加有效。

從方法到工具,騰訊高手帶你輕松搞定圖表設(shè)計(jì)

從品牌 Logo 延展配色:

有時(shí)也會(huì)在一些品牌內(nèi)容上使用圖表,使用品牌配色有助于提升圖表的美感、可讀性和品牌識(shí)別度,同時(shí)有助于保持企業(yè)形象的統(tǒng)一性。

如果品牌暫時(shí)沒有配色定義,那么我們可以從 Logo 出發(fā)進(jìn)行延展配色,可以借助一些在線工具輕松提取配色,例如 Muzli Colors、Coolors 等。

從方法到工具,騰訊高手帶你輕松搞定圖表設(shè)計(jì)

從素材圖發(fā)散配色:

有時(shí)候缺少靈感或配色來源時(shí)也可以考慮從其他地方汲取,不妨大膽的從其他領(lǐng)域進(jìn)行借鑒,例如一些好看的素材圖或者海報(bào)等。

從方法到工具,騰訊高手帶你輕松搞定圖表設(shè)計(jì)

圖表配色的方法雖然相對(duì)簡(jiǎn)單易學(xué),但關(guān)鍵在于設(shè)計(jì)者需要根據(jù)圖表要傳達(dá)的信息、應(yīng)用場(chǎng)景或品牌表達(dá)等因素,有策略地選擇配色方案。此外,還要確保所選的配色方案與畫面中的其他元素和諧共存。因此,并沒有統(tǒng)一的配色標(biāo)準(zhǔn),這很大程度上考驗(yàn)了設(shè)計(jì)者的審美觀和整體把控能力。

③數(shù)據(jù)墨水比(DataInkRatio)

數(shù)據(jù)墨水比是愛德華·塔夫特(Edward Tufte)在其出版的《The Visual Display of Quantitative Data》一書中提出的一個(gè)概念:描述數(shù)據(jù)的墨水量除以所有圖形使用的墨水量的比例。

可以簡(jiǎn)單理解為設(shè)計(jì)圖表時(shí),傳達(dá)核心數(shù)據(jù)信息元素越多,數(shù)據(jù)墨水比就越高、效果越好。而低墨水比說明圖表設(shè)計(jì)中有太多核心數(shù)據(jù)信息之外的干擾元素,換句話說也就是圖表信息傳達(dá)的“信噪比”。

從方法到工具,騰訊高手帶你輕松搞定圖表設(shè)計(jì)

但是設(shè)計(jì)圖表時(shí)追求數(shù)據(jù)墨水比越高不意味著要過度簡(jiǎn)化信息,過度簡(jiǎn)化反而會(huì)導(dǎo)致信息缺失,而是應(yīng)該是在合理范圍內(nèi)達(dá)到平衡。這里可以考慮幾個(gè)要點(diǎn):

  1. 以數(shù)據(jù)展示傳遞為核心,確保圖表能夠有效傳遞關(guān)鍵信息
  2. 去除多余裝飾和跟傳遞關(guān)鍵信息無關(guān)的的元素
  3. 圍繞關(guān)鍵信息再適當(dāng)補(bǔ)充一些輔助信息
4. 常用圖表設(shè)計(jì)工具

最后跟大家介紹一些好用的數(shù)據(jù)可視化工具,大部分是在線的無需安裝即可使用~

①Flourish

Flourish 是一款在線的數(shù)據(jù)可視化平臺(tái),適合各行各業(yè),它可以幫助用戶輕松地將數(shù)據(jù)轉(zhuǎn)化為有趣和有說服力的圖表,提高數(shù)據(jù)分析和溝通的效率和質(zhì)量。比如快速地創(chuàng)建各種類型的圖表、地圖、儀表盤等,而無需編程或安裝任何軟件。

Flourish 的特點(diǎn)有:

  1. 提供了豐富的模板庫(kù),涵蓋了折線圖、柱狀圖、餅圖、散點(diǎn)圖、樹圖、桑基圖、地圖、時(shí)間軸等多種常用的數(shù)據(jù)可視化形式。
  2. 支持了多種數(shù)據(jù)源,用戶可以直接上傳 Excel、CSV 等格式的文件,或者通過 Google Sheets、SQL 等方式連接數(shù)據(jù),也可以手動(dòng)輸入或編輯數(shù)據(jù)。
  3. 具有強(qiáng)大的自定義功能,用戶可以通過簡(jiǎn)單的拖拽和點(diǎn)擊操作,調(diào)整圖表的樣式、顏色、字體、動(dòng)畫等細(xì)節(jié),也可以添加標(biāo)題、注釋、圖例等元素,使圖表更加完善和美觀。
  4. 支持了多種分享和導(dǎo)出方式,用戶可以通過鏈接或嵌入代碼將圖表分享到網(wǎng)站、社交媒體等平臺(tái),也可以導(dǎo)出為圖片、視頻或 PDF 等格式,方便保存和傳播。

從方法到工具,騰訊高手帶你輕松搞定圖表設(shè)計(jì)

②Echart

Echart 是一個(gè)開源的數(shù)據(jù)可視化工具,它可以幫助用戶創(chuàng)建各種類型的圖表,如折線圖、柱狀圖、餅圖、地圖等,來展示數(shù)據(jù)的分布、趨勢(shì)和關(guān)系。

Echart 的優(yōu)點(diǎn)有:

  1. 提供豐富的配置項(xiàng),如顏色、字體、動(dòng)畫、交互等,讓用戶可以自定義圖表的樣式和功能。
  2. 兼容多種瀏覽器和設(shè)備,如 Chrome、Firefox、Safari、IE8+等,以及移動(dòng)端和 PC 端,保證圖表的顯示效果和性能。
  3. 基于 HTML5 Canvas 繪制,支持高清屏幕和大數(shù)據(jù)量的渲染,提高圖表的清晰度和流暢度。
  4. 遵循 Apache 2.0 協(xié)議,允許用戶免費(fèi)使用和修改源代碼,促進(jìn)開源社區(qū)的發(fā)展。

從方法到工具,騰訊高手帶你輕松搞定圖表設(shè)計(jì)

③Tableau Public

Tableau Public 是一款免費(fèi)的數(shù)據(jù)可視化工具,可以幫助用戶創(chuàng)建和分享交互式的數(shù)據(jù)圖表、儀表盤和故事。用戶可以通過拖拽的方式選擇數(shù)據(jù)字段,選擇不同的圖表類型,如柱狀圖、折線圖、地圖等,以及調(diào)整顏色、大小、標(biāo)簽等視覺元素,來制作出各種各樣的數(shù)據(jù)可視化效果。Tableau Public 還支持用戶在網(wǎng)頁上發(fā)布和嵌入他們的作品,讓其他人可以在線查看和交互。

從方法到工具,騰訊高手帶你輕松搞定圖表設(shè)計(jì)

④Informationisbeautiful

Informationisbeautiful 是一個(gè)可以創(chuàng)建精美、有趣和有洞察力的圖表和圖形的在線平臺(tái)。它可以使用各種模板和選項(xiàng)來定制可視化。通過選擇不同的顏色、字體、圖例、標(biāo)簽等,來讓圖表更加吸引人和易于理解。也可以添加注釋、鏈接、引用等,來增加圖表的可信度和參考價(jià)值。它還可以分享和導(dǎo)出作品,以便在網(wǎng)站、社交媒體、報(bào)告或演示中使用。支持不同的格式,如 PNG、SVG、PDF 等,來適應(yīng)不同的場(chǎng)合和需求。

從方法到工具,騰訊高手帶你輕松搞定圖表設(shè)計(jì)

⑤D3js

D3js 是一個(gè)用于創(chuàng)建動(dòng)態(tài)、交互式和基于數(shù)據(jù)的圖形的 JavaScript 庫(kù)。它可以讓開發(fā)者使用 HTML、SVG 和 CSS 來制作各種類型的數(shù)據(jù)可視化,例如折線圖、柱狀圖、餅圖、地圖、樹狀圖等。D3js 的優(yōu)勢(shì)在于它提供了強(qiáng)大的數(shù)據(jù)綁定機(jī)制,可以讓數(shù)據(jù)和圖形元素之間建立映射關(guān)系,從而實(shí)現(xiàn)數(shù)據(jù)驅(qū)動(dòng)的視覺效果。D3js 還支持多種數(shù)據(jù)格式,如 JSON、CSV、XML 等,以及多種交互方式,如縮放、拖拽、過濾等。D3js 是一個(gè)開源的項(xiàng)目,有著龐大的社區(qū)和豐富的資源,可以幫助開發(fā)者快速學(xué)習(xí)和使用這個(gè)工具。

從方法到工具,騰訊高手帶你輕松搞定圖表設(shè)計(jì)

⑥配色參考工具

  1. Muzli Colors:在線快速生成多種配色,并支持預(yù)覽和下載自定義 UI 工具包。
  2. Brand Colors:最大的知名官方品牌配色板集合。
  3. Coolors:免費(fèi)的配色板生成器,支持圖片上傳吸取顏色。
  4. Flat UI Colors:多款精心挑選的設(shè)計(jì)師配色板推薦。

從方法到工具,騰訊高手帶你輕松搞定圖表設(shè)計(jì)

結(jié)語

數(shù)據(jù)可視化設(shè)計(jì)是一門結(jié)合了藝術(shù)和科學(xué)的學(xué)科,它能夠幫助我們更好地理解和傳達(dá)數(shù)據(jù)的含義和價(jià)值。在本文中,我們介紹了圖表設(shè)計(jì)的基本原則和設(shè)計(jì)方法,以及一些常見的圖表類型和工具。我們希望通過這篇文章,能夠激發(fā)讀者對(duì)數(shù)據(jù)可視化設(shè)計(jì)的興趣和熱情,能夠在自己的工作和生活中運(yùn)用數(shù)據(jù)可視化設(shè)計(jì),創(chuàng)造出更有吸引力和影響力的數(shù)據(jù)展示。


文章來源:優(yōu)設(shè)網(wǎng)    作者:騰訊設(shè)計(jì)族

分享此文一切功德,皆悉回向給文章原作者及眾讀者.

免責(zé)聲明:藍(lán)藍(lán)設(shè)計(jì)尊重原作者,文章的版權(quán)歸原作者。如涉及版權(quán)問題,請(qǐng)及時(shí)與我們?nèi)〉寐?lián)系,我們立即更正或刪除。


藍(lán)藍(lán)設(shè)計(jì)(www.bouu.cn )是一家專注而深入的界面設(shè)計(jì)公司,為期望卓越的國(guó)內(nèi)外企業(yè)提供卓越的大數(shù)據(jù)可視化界面設(shè)計(jì)、B端界面設(shè)計(jì)、桌面端界面設(shè)計(jì)、APP界面設(shè)計(jì)圖標(biāo)定制、用戶體驗(yàn)設(shè)計(jì)、交互設(shè)計(jì)UI咨詢、高端網(wǎng)站設(shè)計(jì)、平面設(shè)計(jì),以及相關(guān)的軟件開發(fā)服務(wù),咨詢電話:01063334945。

關(guān)鍵詞:UI設(shè)計(jì)公司、界面設(shè)計(jì)公司UI設(shè)計(jì)服務(wù)公司、數(shù)據(jù)可視化設(shè)計(jì)公司UI交互設(shè)計(jì)公司、高端網(wǎng)站設(shè)計(jì)公司用戶體驗(yàn)公司、軟件界面設(shè)計(jì)公司、軟件qt開發(fā)、軟件wpf開發(fā)、軟件vue開發(fā)。

分享本文至:

日歷

鏈接

個(gè)人資料

存檔