數據可視化設計如何豐富頁面?

有許多小夥伴經常會有這種疑問,我做的可視化設計為什麼按着需求做了。可是為什麼畫面卻被吐槽空,太簡單,不夠炫。

因為在可視化領域會經常存在誤區,要把他們跟平面或者UI區分開,拆解開來講。

可視化領域所注重的小夥伴們一定不陌生:字要大,顏色多一點,要酷炫,要科技感。

沒錯這就是老闆口中的設計。但並不否認,這些點都説在了可視化的關鍵點上;但是想要更瞭解可視化如何製作,我們需要從以下幾個方面去解讀數據可視化

一、畫面裝飾線

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

下圖就是我選用的一種畫面裝飾線,並通過點線面等元素來設計成的一個畫面。

二、模塊邊框

邊框的樣式很大程度決定了畫面的整體協調性,在邊框融入整體畫面的時候,要考慮到與主視覺的協調性。一般邊框的顏色可以根據主視覺所展現出來的色彩傾向,從而進行選擇,最大程度上保持協調統一。

三、分級邊框

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

四、主視覺彈框

主要包括:主視覺撒點,地圖彈框,主視覺數字指標,以及懸浮於地圖之上的分級菜單以及圖例。

五、圖表的使用方式

文字加數字,文字是數字的描述,數字是對文字的統計 (可以着重展示數字,數字大,文字小,一般可以上下結構,或者結合圖形,特殊情況特殊對待)。

凡是出現對比,佔比或者其他需要做對比的東西,一般推薦用餅圖。

出現多條數據,多個維度,多角度進行比較的時候,一般推薦用柱狀圖(包含柱折圖),出現趨勢,走勢等字眼時,一般採用折線圖。

六、圖表的表現形式

描邊,描邊可以虛線,虛線可以調整間距,間距可以調圓角和直角。

發光,發光可以外發光,可以內發光。

漸變,漸變可以線性漸變,角度漸變,鏡像漸變。

填充,可以漸變填充,可以純色填充,可以填充有透明,透明度沒有透明。

七、圖表的組件化

在你嘔心瀝血做完一兩個圖表的時候,如果想讓他有更多的同風格的東西,就好比做字體設計一樣,所有字體都要寫完,才是一套完整的。

所以需要提煉該“字體”的細節,或者説是與正常字體不同的地方。提煉出他的特殊樣式,再運用到其他的圖表當中去。這個從0到1的過程,我把它叫做組件化的過程。

在你多做了幾套組件的時候,就會覺得圖表可以千變萬化,但你還是能夠知道他是怎麼利用基礎圖形變形而來的。

看多了,做多了,網上看到好看的圖表,一眼就能提煉出他的特殊點,再運用組件化思維,真正的化為己用。

再教大家一個方法,設計出一套組件的時候,只有運用到項目中,實現出來,才是一個成功的商業組件化過程(我自己做項目就是,看到好的設計,我下次做項目怎麼我都要用上去)。

此處指的不是抄襲,而是提煉不同點,運用到自己的組件中。

找出所有圖表的共性。

區分不同圖表的差異性。

結合基礎組件,去變形,去豐富。

瞭解組件的顏色以及風格,去運用。

拓展文字排版,地圖樣式。

拓展撒點,以及彈框。

八、佈局及優化

在佈局的時候,挑選合適的佈局方式,需要考慮到字段的長短,圖表的寬窄,圖標的大小,以及畫面的平衡,需要提前進行佈局(就跟繪畫構草圖一個道理)。

九、找出問題

標題與logo沒有形成好的聯繫。

指標數字類的東西,沒有與地圖關聯,比較分散。

地圖主視覺表現內容太少,空洞。

文字區域示意不明,圖表?地圖內容?

整體佈局不和諧,各處模塊太分散。

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

十、解決問題

版權聲明:本文源自 網絡, 於,由 楠木軒 整理發佈,共 1423 字。

轉載請註明: 數據可視化設計如何豐富頁面? - 楠木軒