手机国产精品一区二区,另类第一页,亚欧在线,日韩一国产极品99热在线播放69_国产美女久久精品香蕉欧美_亚州中文无码aⅤ在线_免费国产v片在线

數(shù)據(jù)可視化設(shè)計如何豐富畫面

2023-2-16    博博

前言

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


1. 畫面裝飾線

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

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


2. 模塊邊框

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


3. 分級邊框

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


4. 主視覺彈框

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


1. 圖表的使用方式

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

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

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


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

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

例:發(fā)光,發(fā)光可以外發(fā)光,可以內(nèi)發(fā)光。

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

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


3. 圖表的組件化

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

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

找出所有圖表的共性

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

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

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

拓展文字排版,地圖樣式

拓展撒點,以及彈框


布局及優(yōu)化

在布局的時候,挑選合適的布局方式,需要考慮到字段的長短,圖表的寬窄,圖標的大小,以及畫面的平衡,需要提前進行布局(就跟繪畫構(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.88yangsc.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.88yangsc.com

存檔