2023-2-16 博博
有許多小伙伴經(jīng)常會有這種疑問,我做的可視化設(shè)計為什么按著需求做了,可是為什么畫面卻被吐槽空,太簡單,不夠炫。因為在可視化領(lǐng)域會經(jīng)常存在誤區(qū),要把他們跟平面或者UI區(qū)分開,拆解開來講。可視化領(lǐng)域所注重的小伙伴們一定不陌生:字要大,顏色多一點,要酷炫,要科技感。沒錯這就是老板口中的設(shè)計,但并不否認,這些點都說在了可視化的關(guān)鍵點上,但是想要更了解可視化如何制作,我們需要從以下幾個方面去解讀數(shù)據(jù)可視化。
靈活運用點線面構(gòu)成(可以單獨去找一下三大構(gòu)成中的平面構(gòu)成內(nèi)容),科技感線條,不可太過顯眼而喧賓奪主,只求使畫面豐富,透氣,不影響整體畫面效果。
下圖就是我選用的一種畫面裝飾線,并通過點線面等元素來設(shè)計成的一個畫面
邊框的樣式很大程度決定了畫面的整體協(xié)調(diào)性,在邊框融入整體畫面的時候,要考慮到與主視覺的協(xié)調(diào)性。一般邊框的顏色可以根據(jù)主視覺所展現(xiàn)出來的色彩傾向,從而進行選擇,最大程度上保持協(xié)調(diào)統(tǒng)一。
分級邊框可以很大程度上切割大的模塊,獨立的同時融于整體。由各種方塊分割,同時選取最適合畫面的切割比例。(大框套小框)
主要包括:主視覺撒點,地圖彈框,主視覺數(shù)字指標,以及懸浮于地圖之上的分級菜單以及圖例。
文字加數(shù)字,文字是數(shù)字的描述,數(shù)字是對文字的統(tǒng)計 (可以著重展示數(shù)字,數(shù)字大,文字小,一般可以上下結(jié)構(gòu),或者結(jié)合圖形,特殊情況特殊對待)
凡是出現(xiàn)對比,占比或者其他需要做對比的東西,一般推薦用餅圖
出現(xiàn)多條數(shù)據(jù),多個維度,多角度進行比較的時候,一般推薦用柱狀圖(包含柱折圖),出現(xiàn)趨勢,走勢等字眼時,一般采用折線圖。
例:描邊,描邊可以虛線,虛線可以調(diào)整間距,間距可以調(diào)圓角和直角。
例:發(fā)光,發(fā)光可以外發(fā)光,可以內(nèi)發(fā)光。
例:漸變,漸變可以線性漸變,角度漸變,鏡像漸變。
例:填充,可以漸變填充,可以純色填充,可以填充有透明,透明度沒有透明。
在你嘔心瀝血做完一兩個圖表的時候,如果想讓他有更多的同風格的東西,就好比做字體設(shè)計一樣,所有字體都要寫完,才是一套完整的,所以需要提煉該“字體”的細節(jié),或者說是與正常字體不同的地方,提煉出他的特殊樣式,再運用到其他的圖表當中去,這個從0到1的過程,我把它叫做組件化的過程。在你多做了幾套組件的時候,就會覺得圖表可以千變?nèi)f化,但你還是能夠知道他是怎么利用基礎(chǔ)圖形變形而來的??炊嗔耍龆嗔?,網(wǎng)上看到好看的圖表,一眼就能提煉出他的特殊點,再運用組件化思維,真正的化為己用。
再教大家一個方法,設(shè)計出一套組件的時候,只有運用到項目中,實現(xiàn)出來,才是一個成功的商業(yè)組件化過程(我自己做項目就是,看到好的設(shè)計,我下次做項目怎么我都要用上去)。此處指的不是抄襲,而是提煉不同點,運用到自己的組件中。
找出所有圖表的共性
區(qū)分不同圖表的差異性
結(jié)合基礎(chǔ)組件,去變形,去豐富
了解組件的顏色以及風格,去運用
拓展文字排版,地圖樣式
拓展撒點,以及彈框
在布局的時候,挑選合適的布局方式,需要考慮到字段的長短,圖表的寬窄,圖標的大小,以及畫面的平衡,需要提前進行布局(就跟繪畫構(gòu)草圖一個道理)。
1. 標題與logo沒有形成好的聯(lián)系
2. 指標數(shù)字類的東西,沒有與地圖關(guān)聯(lián),比較分散
3. 地圖主視覺表現(xiàn)內(nèi)容太少,空洞
4. 文字區(qū)域示意不明,圖表?地圖內(nèi)容?
5. 整體布局不和諧,各處模塊太分散
6. 畫面裝飾無法連接各個模塊
1. 標題與LOGO之間要建立聯(lián)系
2. 將指標類的數(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)方式來進行區(qū)分,兩個或者多個情況時,可以通過改變一些輕微的東西,來使之具有差異性,同時又有統(tǒng)一的風格。
2. 兩個或者多個的情況下,該處區(qū)域只夠展示一個,但又必須展示,可以通過tab列表的方式,或者做切換等方式(例如柱狀圖時,x軸顯示不完時,可以做個x軸滑動功能)。
在同一個畫面里有同一個類型的圖表時(比如兩個餅圖),盡可能地不要讓這兩個餅圖靠近顯示,盡量互相遠離,在數(shù)據(jù)導(dǎo)入的情況下,一左一右,呼應(yīng)的同時又統(tǒng)一。
作者:AYONG_BDR 來源:站酷網(wǎng)
藍藍設(shè)計建立了UI設(shè)計分享群,每天會分享國內(nèi)外的一些優(yōu)秀設(shè)計,如果有興趣的話,可以進入一起成長學習,請加微信ban_lanlan,報下信息,藍小助會請您入群。歡迎您加入噢~~
希望得到建議咨詢、商務(wù)合作,也請與我們聯(lián)系01063334945。
分享此文一切功德,皆悉回向給文章原作者及眾讀者. 免責聲明:藍藍設(shè)計尊重原作者,文章的版權(quán)歸原作者。如涉及版權(quán)問題,請及時與我們?nèi)〉寐?lián)系,我們立即更正或刪除。
藍藍設(shè)計( www.wnxcall.com )是一家專注而深入的界面設(shè)計公司,為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計、BS界面設(shè)計 、 cs界面設(shè)計 、 ipad界面設(shè)計 、 包裝設(shè)計 、 圖標定制 、 用戶體驗 、交互設(shè)計、 網(wǎng)站建設(shè) 、平面設(shè)計服務(wù)、UI設(shè)計公司、界面設(shè)計公司、UI設(shè)計服務(wù)公司、數(shù)據(jù)可視化設(shè)計公司、UI交互設(shè)計公司、高端網(wǎng)站設(shè)計公司、UI咨詢、用戶體驗公司、軟件界面設(shè)計公司
藍藍設(shè)計的小編 http://www.wnxcall.com