大數(shù)據(jù)、可視化、數(shù)據(jù)大屏等一系列名詞在我們的設(shè)計群里被越來越頻繁地提及。每每談到這個話題，總有設(shè)計師小伙伴吐槽這個領(lǐng)域太專業(yè)，但可以參考、復(fù)用的素材太少，在實際工作中，很難快速完成頁面搭建。 今天就從組件庫的復(fù)用、圖表的快速生成、頁面的高效布局這三個維度入手，為大家拆解如何快速搭建數(shù)據(jù)可視化項目。

一、開源分享可商用

豐富的可視化組件庫

幫你從 0-1 快速完成項目搭建

在一個條理清晰的數(shù)據(jù)可視化設(shè)計生產(chǎn)流程中，往往要經(jīng)歷多個環(huán)節(jié)：

1. 確認業(yè)務(wù)需求與設(shè)計目標
2. 規(guī)劃頁面布局與核心指標的信息排列
3. 選定圖表類型
4. 確定視覺設(shè)計風(fēng)格

如果是數(shù)據(jù)可視化大屏設(shè)計，還需要明確使用場景、設(shè)計尺寸與大屏的拼接方式，并在設(shè)計前與開發(fā)充分溝通如何實現(xiàn)。

獲取信息與業(yè)務(wù)相關(guān)方溝通的環(huán)節(jié)必不可少，也沒有什么捷徑可走。

但在選定圖表類型、確定設(shè)計風(fēng)格、準備背景裝飾等設(shè)計素材這幾個方面，就可以多看看其他人是怎么做的，又或者直接使用一些開源分享的可視化組件庫來完成快速搭建。

第一類：可視化設(shè)計規(guī)范

當你沒有思路，不知從何下手時，一些由專業(yè)團隊整理的行業(yè)可視化設(shè)計體系，可以在字體、配色、布局等方面為你劃定范圍；除此之外，成套的裝飾組件、圖表組件、以及其他通用配件，都可以直接應(yīng)用到你的作品中。

VE.Design-政務(wù)數(shù)據(jù)可視化

易知微 VED 團隊打造的一套可視化設(shè)計體系，適用于政務(wù)數(shù)據(jù)可視化大屏設(shè)計。不僅從字體、配色、布局這三個方面給出了通用且可供參考的設(shè)計規(guī)范，還匯總了同一風(fēng)格的標題、圖表、彈窗、裝飾元素等組件供設(shè)計師們復(fù)用。（分享者：EasyV數(shù)字李生可視化）

點擊鏈接免費獲取→ https://js.design/community

數(shù)據(jù)可視化設(shè)計

更適用于中后臺設(shè)計的一套可視化圖表組件庫，提供了深色和藍色兩種主題。除了數(shù)百個可復(fù)用的組件外，文檔內(nèi)還分享了十多個使用這套組件庫搭建的可視化頁面，非常有參考價值。（分享者：Freedom*）

點擊鏈接免費獲取 → https://js.design/community

VE.Design-金融行業(yè)可視化

易知微團隊分享的另一套數(shù)據(jù)可視化大屏設(shè)計體系，適用于金融行業(yè)。從色彩選擇到圖表風(fēng)格樣例都更能凸顯行業(yè)屬性。（分享者：EasyV數(shù)字李生可視化）

點擊鏈接免費獲取→ https://js.design/community

第二類：可視化設(shè)計通用組件

如果將數(shù)據(jù)可視化拆解，主要的設(shè)計元素包含這幾類：標題，主視覺、圖表、色彩體系、字體、動效、臨時彈窗等等。

其中標題、圖表都可以從通用組件庫內(nèi)選取復(fù)用，或者在此基礎(chǔ)上有修改完善。

Ray Data 大屏數(shù)據(jù)可視化圖表組件

點擊鏈接免費獲取 → https://js.design/community

文檔內(nèi)組件包含大量的變體和自動布局，支持拖拽拉伸更改尺寸、自適應(yīng)文本，可編輯性與通用性都很強，略作修改就可以應(yīng)用到你的作品中。

在提供了常用類型圖表組件的基礎(chǔ)上，RayData 還將組成圖表的標題、坐標軸、圖例、表格、背景元素都拆分開做成了組件。

這樣的設(shè)計賦予了這套資源極高的可復(fù)用性，你可以自由組合以上組件構(gòu)建更符合業(yè)務(wù)需求的圖表。

（分享者：RayData UED）

數(shù)據(jù)可視化設(shè)計通用組件

點擊鏈接免費獲取 → https://js.design/community

除常用的圖表外，這套資源還提供了十多個數(shù)據(jù)大屏可用的主標題。

一些比較少用到的圖表也都能在這個組件庫中找到對應(yīng)的資源，比如斑馬紋理圖、條形排名占比圖、3D 面積圖等等。（分享者：楚瀟瀟）

淺色系可視化組件

點擊鏈接免費獲取 → https://js.design/community

適用于中后臺數(shù)據(jù)可視化設(shè)計的一套淺色系圖表組件。相同寬度的卡片設(shè)計，方便你根據(jù)數(shù)據(jù)展示需求自由組合。

第三類：成套可參考的作品

如果你已經(jīng)確定了圖表類型、組件風(fēng)格，但還在糾結(jié)布局與主視覺，從其他人分享的成套作品中尋找思路與靈感就是不錯的選擇。

數(shù)據(jù)可視化大屏模板

點擊鏈接免費獲取→ https://js.design/community

車載可視化大屏儀表盤

點擊鏈接免費獲取→ https://js.design/community

以及「即時設(shè)計-資源社區(qū)」由設(shè)計師們分享的 150+ 數(shù)據(jù)可視化作品。

點擊鏈接獲取更多素材 → https://js.design/community

二、多樣圖表工具

支持導(dǎo)入真實業(yè)務(wù)數(shù)據(jù)

4 步做出保真可視化圖表

除了使用現(xiàn)成的圖表素材，你還可以借助一些工具導(dǎo)入真實業(yè)務(wù)數(shù)據(jù)生成效果更保真的可視化圖表。

「高級圖表」插件

插件內(nèi)置了包含柱狀圖、條形圖、折線圖、餅圖等在內(nèi)的 6 種常見類型圖表，可以充分滿足絕大多數(shù)情況下的數(shù)據(jù)可視化設(shè)計需求。

使用流程也非常簡單：選擇圖表類型→編輯樣式→輸入數(shù)據(jù)→生成圖表，只需 4 步就可以制作出精美的可視化圖表。

點擊立即安裝使用 → https://js.design/community

「Fast Chart」插件

不僅提供了我們最常用的折線圖、柱狀圖、條形圖、面積圖、散點圖，還有許多特殊圖表如折柱混合圖、地圖、漏斗圖、雷達圖、餅圖/環(huán)形圖。

點擊立即安裝使用→ https://js.design/community

除了數(shù)據(jù)支持 100%自定義外，尺寸調(diào)整、標簽、軸名稱、圖例等屬性都可以直接在插件里配置。

與使用圖表組件還需要手動修改標題、圖例、圖形主體、坐標系、值域等相比，插件提供的簡化流程讓圖表的設(shè)計與調(diào)整不再耗時費力，可以快速配置想要的桌面端/移動端圖表類型。

而且這些圖表都支持二次編輯，你可以在此基礎(chǔ)上調(diào)整配色、修改底色、設(shè)置透明漸變等各種效果，使其更好地融入你的數(shù)據(jù)化設(shè)計中。

三、增刪模塊也能快速復(fù)原

自動布局+響應(yīng)式調(diào)整

打造靈活可變的頁面設(shè)計

與更追求炫酷效果的數(shù)據(jù)可視化大屏設(shè)計相比，做中后臺的數(shù)據(jù)可視化設(shè)計時，還需要額外注意，在設(shè)計時盡可能保證頁面的靈活可變性。

可視化大屏的尺寸往往是固定不變的，但數(shù)據(jù)后臺經(jīng)常需要適配不同尺寸的設(shè)備，提供最好的展示效果。

為了實現(xiàn)這一目標，我們一般推薦使用「卡片」來排版，它最大的優(yōu)勢就在于可以無限地修改、操作和擴展。

在組織卡片內(nèi)信息的時候，可以通過對標題、數(shù)據(jù)標簽等添加響應(yīng)式調(diào)整來約束它的相對位置；也可以選中的多個數(shù)據(jù)項添加「自動布局」，控制它們的間距與相對位置。

你還可以選中多個卡片添加「自動布局」并設(shè)置自適應(yīng)，以達到任意增加、刪除、隱藏某個模塊時，其他模塊也能自動復(fù)原的效果。

今天的數(shù)據(jù)可視化分享就先到這里了~ 還有超多精美資源因為篇幅限制不能一一展示給大家，有需要的可以點擊鏈接到「即時設(shè)計-資源社區(qū)」搜索使用！

點此獲取 250+ 可視化設(shè)計資源 → https://js.design/community