前言

有許多小伙伴經(jīng)常會有這種疑問，我做的可視化設(shè)計為什么按著需求做了，可是為什么畫面卻被吐槽空，太簡單，不夠炫。因為在可視化領(lǐng)域會經(jīng)常存在誤區(qū)，要把他們跟平面或者UI區(qū)分開，拆解開來講。可視化領(lǐng)域所注重的小伙伴們一定不陌生：字要大，顏色多一點，要酷炫，要科技感。沒錯這就是老板口中的設(shè)計，但并不否認(rèn)，這些點都說在了可視化的關(guān)鍵點上，但是想要更了解可視化如何制作，我們需要從以下幾個方面去解讀數(shù)據(jù)可視化。

1. 畫面裝飾線

靈活運用點線面構(gòu)成（可以單獨去找一下三大構(gòu)成中的平面構(gòu)成內(nèi)容），科技感線條，不可太過顯眼而喧賓奪主，只求使畫面豐富，透氣，不影響整體畫面效果。

下圖就是我選用的一種畫面裝飾線，并通過點線面等元素來設(shè)計成的一個畫面

2. 模塊邊框

邊框的樣式很大程度決定了畫面的整體協(xié)調(diào)性，在邊框融入整體畫面的時候，要考慮到與主視覺的協(xié)調(diào)性。一般邊框的顏色可以根據(jù)主視覺所展現(xiàn)出來的色彩傾向，從而進(jìn)行選擇，最大程度上保持協(xié)調(diào)統(tǒng)一。

3. 分級邊框

分級邊框可以很大程度上切割大的模塊，獨立的同時融于整體。由各種方塊分割，同時選取最適合畫面的切割比例。（大框套小框）

4. 主視覺彈框

主要包括：主視覺撒點，地圖彈框，主視覺數(shù)字指標(biāo)，以及懸浮于地圖之上的分級菜單以及圖例。

1. 圖表的使用方式

文字加數(shù)字，文字是數(shù)字的描述，數(shù)字是對文字的統(tǒng)計 （可以著重展示數(shù)字，數(shù)字大，文字小，一般可以上下結(jié)構(gòu)，或者結(jié)合圖形，特殊情況特殊對待）

凡是出現(xiàn)對比，占比或者其他需要做對比的東西，一般推薦用餅圖

出現(xiàn)多條數(shù)據(jù)，多個維度，多角度進(jìn)行比較的時候，一般推薦用柱狀圖（包含柱折圖），出現(xiàn)趨勢，走勢等字眼時，一般采用折線圖。

2. 圖表的表現(xiàn)形式

例：描邊，描邊可以虛線，虛線可以調(diào)整間距，間距可以調(diào)圓角和直角。

例：發(fā)光，發(fā)光可以外發(fā)光，可以內(nèi)發(fā)光。

例：漸變，漸變可以線性漸變，角度漸變，鏡像漸變。

例：填充，可以漸變填充，可以純色填充，可以填充有透明，透明度沒有透明。

3. 圖表的組件化

在你嘔心瀝血做完一兩個圖表的時候，如果想讓他有更多的同風(fēng)格的東西，就好比做字體設(shè)計一樣，所有字體都要寫完，才是一套完整的，所以需要提煉該“字體”的細(xì)節(jié)，或者說是與正常字體不同的地方，提煉出他的特殊樣式，再運用到其他的圖表當(dāng)中去，這個從0到1的過程，我把它叫做組件化的過程。在你多做了幾套組件的時候，就會覺得圖表可以千變?nèi)f化，但你還是能夠知道他是怎么利用基礎(chǔ)圖形變形而來的。看多了，做多了，網(wǎng)上看到好看的圖表，一眼就能提煉出他的特殊點，再運用組件化思維，真正的化為己用。

再教大家一個方法，設(shè)計出一套組件的時候，只有運用到項目中，實現(xiàn)出來，才是一個成功的商業(yè)組件化過程（我自己做項目就是，看到好的設(shè)計，我下次做項目怎么我都要用上去）。此處指的不是抄襲，而是提煉不同點，運用到自己的組件中。

找出所有圖表的共性

區(qū)分不同圖表的差異性

結(jié)合基礎(chǔ)組件，去變形，去豐富

了解組件的顏色以及風(fēng)格，去運用

拓展文字排版，地圖樣式

拓展撒點，以及彈框

布局及優(yōu)化

在布局的時候，挑選合適的布局方式，需要考慮到字段的長短，圖表的寬窄，圖標(biāo)的大小，以及畫面的平衡，需要提前進(jìn)行布局（就跟繪畫構(gòu)草圖一個道理）。

找出問題

1. 標(biāo)題與logo沒有形成好的聯(lián)系

2. 指標(biāo)數(shù)字類的東西，沒有與地圖關(guān)聯(lián)，比較分散

3. 地圖主視覺表現(xiàn)內(nèi)容太少，空洞

4. 文字區(qū)域示意不明，圖表？地圖內(nèi)容？

5. 整體布局不和諧，各處模塊太分散

6. 畫面裝飾無法連接各個模塊

解決問題

1. 標(biāo)題與LOGO之間要建立聯(lián)系

2. 將指標(biāo)類的數(shù)字通過主視覺結(jié)合起來

3. 豐富地圖區(qū)域，增加表現(xiàn)形式

4. 文字區(qū)域單獨模塊，獨立又與主視覺有聯(lián)系

5. 優(yōu)化整體布局，添加邊框，豐富模塊

6. 調(diào)整畫面裝飾，與模塊結(jié)合

視覺差異性

在設(shè)計的過程中我們經(jīng)常會遇到一個模塊的內(nèi)容（一個畫面），兩個或者多個都是同樣的數(shù)據(jù)或者需求（或者同樣的圖表），這就要求我們在設(shè)計的過程中有變化可循，那么該如何解決此類問題呢？

1. 可以通過不同的表現(xiàn)方式來進(jìn)行區(qū)分，兩個或者多個情況時，可以通過改變一些輕微的東西，來使之具有差異性，同時又有統(tǒng)一的風(fēng)格。

2. 兩個或者多個的情況下，該處區(qū)域只夠展示一個，但又必須展示，可以通過tab列表的方式，或者做切換等方式（例如柱狀圖時，x軸顯示不完時，可以做個x軸滑動功能）。

在同一個畫面里有同一個類型的圖表時（比如兩個餅圖），盡可能地不要讓這兩個餅圖靠近顯示，盡量互相遠(yuǎn)離，在數(shù)據(jù)導(dǎo)入的情況下，一左一右，呼應(yīng)的同時又統(tǒng)一。