報表設(shè)計的目的是利用各類圖表組件，來呈現(xiàn)不同維度的數(shù)據(jù)，讓數(shù)據(jù)直觀美觀的展示出來，并通過數(shù)據(jù)挖掘數(shù)據(jù)背后的價值。

報表可視化設(shè)計需要結(jié)合業(yè)務(wù)邏輯，設(shè)計符合業(yè)務(wù)需求、頁面布局合理的界面，可視化報表要具備可用性、易用性、好用性的特點。

可視化報表設(shè)計規(guī)范

一個完整項目的UI視覺規(guī)范，通常包含以下幾個方面：

基礎(chǔ)配色、頁面布局、文字規(guī)范、圖標樣式、按鈕樣式、默認圖樣式、組件樣式。

在可視化報表設(shè)計中，我們把重點聚焦在頁面布局、色彩搭配、文字樣式和組件樣式上。

（視覺規(guī)范流程圖）

1.頁面布局：

根據(jù)實際需求，對頁面組件、元素進行排列組合，使頁面整潔美觀，設(shè)計時一般遵守以下四個原則:

①對比：避免元素太過相似。如果元素不同，就讓他們截然不同；

②重復(fù)：視覺要素在作品中重復(fù)出現(xiàn)，增加條理性和統(tǒng)一性；

③對齊：每一元素與另一元素有某種視覺聯(lián)系。另外觀清晰、精巧、清爽；

④親密性：彼此相關(guān)的項歸組在一起，建立一個視覺單元。組織信息、減少混亂、結(jié)構(gòu)清晰親密性。

好的排版布局，可以清晰地看到組件之間的關(guān)聯(lián)關(guān)系，突出核心數(shù)據(jù)指標。

2.色彩搭配：

配色采用“1主2輔3其他”的原則，主色根據(jù)頁面風格確定，突出主題印象。

輔色選擇主色的對比色、平衡色，對比突出主色的特點，同時可以隱藏兩者的缺點，使畫面平衡。

最深色用在底部或陰影部分，增加頁面的厚重感。最淺色是光的部分，讓頁面有空氣感，輕薄透氣。

同頻色是選取與主色相近的顏色，豐富畫面的色彩構(gòu)成，使畫面生動活潑，具有層次感。在畫面色彩的運用上，注意色彩的調(diào)和、對比、平衡、節(jié)奏與韻律。

3.字體樣式：

一般選擇方便閱讀的常規(guī)字體，中文字體如思源黑體、蘋方等；英文字體如Arial、HelveticaNeue等；避免選擇一些過于個性化的藝術(shù)字體，不便于閱讀，且有版權(quán)糾紛問題。

如要使用一些個性化的字體，請先關(guān)注一下是否有版權(quán)限制。系統(tǒng)中常用字體大小為：14px、16px、18px、20px、24px、26px、28px、30px、36px......常規(guī)默認的系統(tǒng)字體規(guī)范最小為12px。

4.組件樣式：

根據(jù)內(nèi)容及整體布局，來調(diào)整組件內(nèi)部的樣式，使整個布局和諧統(tǒng)一。

組件選擇上要符合業(yè)務(wù)需求，可以直觀快捷的展示數(shù)據(jù)內(nèi)容。組件內(nèi)部調(diào)整和整體風格保持一致，重點數(shù)據(jù)、核心內(nèi)容要突出。

（產(chǎn)品部分主題效果圖）

可視化報表設(shè)計流程

1.溝通需求：

通過現(xiàn)場與客戶及項目負責人溝通，了解項目需求。結(jié)合企業(yè)特點、官網(wǎng)配色等、了解具體設(shè)計需求，進行案例展示。

2.初版設(shè)計：

進行設(shè)計構(gòu)思，初步制定設(shè)計方案，開始做視覺設(shè)計。開始實施設(shè)計（確定配色、布局等風格）。

3.確認方案：

對細節(jié)進行調(diào)整優(yōu)化后，跟客戶確認方案，收集反饋意見，進行修改。

4.制定規(guī)范：

制定統(tǒng)一的UI設(shè)計規(guī)范，同實施人員對接設(shè)計規(guī)范，其他頁面的風格效果圖參照模板進行設(shè)計。

可視化報表案例展示

基于可視化的設(shè)計規(guī)范和流程，用Desktop制作出來的數(shù)據(jù)可視化大屏案例：

（產(chǎn)品落地效果圖）

數(shù)據(jù)可視化的需求在不斷增加，好的可視化展現(xiàn)可以準確、高效地傳遞信息，方便用戶提取信息，降低用戶的決策成本，釋放出數(shù)據(jù)價值。