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

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

可視化報(bào)表設(shè)計(jì)規(guī)范

一個(gè)完整項(xiàng)目的UI視覺(jué)規(guī)范，通常包含以下幾個(gè)方面：

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

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

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

1.頁(yè)面布局：

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

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

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

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

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

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

2.色彩搭配：

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

輔色選擇主色的對(duì)比色、平衡色，對(duì)比突出主色的特點(diǎn)，同時(shí)可以隱藏兩者的缺點(diǎn)，使畫(huà)面平衡。

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

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

3.字體樣式：

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

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

4.組件樣式：

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

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

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

可視化報(bào)表設(shè)計(jì)流程

1.溝通需求：

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

2.初版設(shè)計(jì)：

進(jìn)行設(shè)計(jì)構(gòu)思，初步制定設(shè)計(jì)方案，開(kāi)始做視覺(jué)設(shè)計(jì)。開(kāi)始實(shí)施設(shè)計(jì)（確定配色、布局等風(fēng)格）。

3.確認(rèn)方案：

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

4.制定規(guī)范：

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

可視化報(bào)表案例展示

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

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

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