www.tob.design
全網首個B端&視覺化設計師網站
www.tob.design簡稱TobDesign，是全網首個B端/視覺化設計師平臺
，平臺主要在B端、視覺化、大資料、物聯網、AR/VR、人工智慧等產品設計領域耕作，致力於打造最受歡迎的B端設計平臺。讓設計更實用，讓工作更輕鬆，讓生活更有趣！
做視覺化設計時畫面很空，是如何處理？本篇文章我會從四個角度進行分析~
前言
有許多小夥伴經常會有這種疑問，我做的視覺化設計為什麼按著需求做了，可是為什麼畫面卻被吐槽空，太簡單，不夠炫。因為在視覺化領域會經常存在誤區，要把他們跟平面或者UI區分開，拆解開來講。視覺化領域所注重的小夥伴們一定不陌生：字要大，顏色多一點，要酷炫，要科技感。沒錯這就是老闆口中的設計，但並不否認，這些點都說在了視覺化的關鍵點上，但是想要更瞭解視覺化如何製作，我們需要從以下幾個方面去解讀資料視覺化。
畫面裝飾線
靈活運用點線面構成（可以單獨去找一下三大構成中的平面構成內容），科技感線條，不可太過顯眼而喧賓奪主，只求使畫面豐富，透氣，不影響整體畫面效果。
下圖就是我選用的一種畫面裝飾線，並透過點線面等元素來設計成的一個畫面。
模組邊框
邊框的樣式很大程度決定了畫面的整體協調性，在邊框融入整體畫面的時候，要考慮到與主視覺的協調性。一般邊框的顏色可以根據主視覺所展現出來的色彩傾向，從而進行選擇，最大程度上保持協調統一。
分級邊框
分級邊框可以很大程度上切割大的模組，獨立的同時融於整體。由各種方塊分割，同時選取最適合畫面的切割比例。（大框套小框）
主視覺彈框
主要包括：主視覺撒點，地圖彈框，主視覺數字指標，以及懸浮於地圖之上的分級選單以及圖例。
圖表的使用方式
文字加數字，文字是數字的描述，數字是對文字的統計 （可以著重展示數字，數字大，文字小，一般可以上下結構，或者結合圖形，特殊情況特殊對待）
凡是出現對比，佔比或者其他需要做對比的東西，一般推薦用餅圖
出現多條資料，多個維度，多角度進行比較的時候，一般推薦用柱狀圖（包含柱折圖），出現趨勢，走勢等字眼時，一般採用折線圖。
圖表的表現形式
描邊，描邊可以虛線，虛線可以調整間距，間距可以調圓角和直角。
發光，發光可以外發光，可以內發光。
漸變，漸變可以線性漸變，角度漸變，映象漸變。
填充，可以漸變填充，可以純色填充，可以填充有透明，透明度沒有透明。
圖表的元件化
在你嘔心瀝血做完一兩個圖表的時候，如果想讓他有更多的同風格的東西，就好比做字型設計一樣，所有字型都要寫完，才是一套完整的，所以需要提煉該“字型”的細節，或者說是與正常字型不同的地方，提煉出他的特殊樣式，再運用到其他的圖表當中去，這個從0到1的過程，我把它叫做元件化的過程。在你多做了幾套元件的時候，就會覺得圖表可以千變萬化，但你還是能夠知道他是怎麼利用基礎圖形變形而來的。看多了，做多了，網上看到好看的圖表，一眼就能提煉出他的特殊點，再運用元件化思維，真正的化為己用。
再教大家一個方法，設計出一套元件的時候，只有運用到專案中，實現出來，才是一個成功的商業元件化過程（我自己做專案就是，看到好的設計，我下次做專案怎麼我都要用上去）。此處指的不是抄襲，而是提煉不同點，運用到自己的元件中。
找出所有圖表的共性
區分不同圖表的差異性
結合基礎元件，去變形，去豐富
瞭解元件的顏色以及風格，去運用
拓展文字排版，地圖樣式
拓展撒點，以及彈框
佈局及最佳化
在佈局的時候，挑選合適的佈局方式，需要考慮到欄位的長短，圖表的寬窄，圖示的大小，以及畫面的平衡，需要提前進行佈局（就跟繪畫構草圖一個道理）。
找出問題
標題與logo沒有形成好的聯絡
指標數字類的東西，沒有與地圖關聯，比較分散
地圖主視覺表現內容太少，空洞
文字區域示意不明，圖表？地圖內容？
整體佈局不和諧，各處模組太分散
畫面裝飾無法連線各個模組
解決問題
標題與LOGO之間要建立聯絡
將指標類的數字透過主視覺結合起來
豐富地圖區域，增加表現形式
文字區域單獨模組，獨立又與主視覺有聯絡
最佳化整體佈局，新增邊框，豐富模組
調整畫面裝飾，與模組結合
視覺差異性
在設計的過程中我們經常會遇到一個模組的內容（一個畫面），兩個或者多個都是同樣的資料或者需求（或者同樣的圖表），這就要求我們在設計的過程中有變化可循，那麼該如何解決此類問題呢？
可以透過不同的表現方式來進行區分，兩個或者多個情況時，可以透過改變一些輕微的東西，來使之具有差異性，同時又有統一的風格。
兩個或者多個的情況下，該處區域只夠展示一個，但又必須展示，可以透過tab列表的方式，或者做切換等方式（例如柱狀圖時，x軸顯示不完時，可以做個x軸滑動功能）。
在同一個畫面裡有同一個型別的圖表時（比如兩個餅圖），儘可能地不要讓這兩個餅圖靠近顯示，儘量互相遠離，在資料匯入情況下，一左一右呼應的同時又統一。
本篇文章作者來自
TobDesign
團隊成員優秀設計師——“陳文勇”
掃碼新增小編，進群與B端及視覺化設計師一起交流
