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

大數(shù)據(jù)可視化界面設(shè)計(jì)之一:超全面的數(shù)據(jù)可視化設(shè)計(jì)指南:風(fēng)格篇

2022-6-13    博博

各位數(shù)據(jù)可視化設(shè)計(jì)師們大家好,鑒于平時(shí)有很多同學(xué)對(duì)我們的可視化大屏的設(shè)計(jì)知識(shí)點(diǎn)有很多不理解的地方,阿勇決定花一些時(shí)間去詳細(xì)剖析一下關(guān)于這方面的知識(shí),全部都是多年工作經(jīng)驗(yàn)所得,絕對(duì)有料。

整個(gè)合輯一共有 10 篇文章,分別涉及到設(shè)備篇、風(fēng)格篇、字體篇、色彩篇、組件篇、布局篇、版式篇、視覺(jué)篇、團(tuán)隊(duì)篇、技能篇十篇文章,詳細(xì)的講一講可視化大屏設(shè)計(jì)的知識(shí)點(diǎn)。


風(fēng)格篇主要包含:常用風(fēng)格 > 風(fēng)格解析 > 風(fēng)格選擇 > 風(fēng)格應(yīng)用。

本篇文章將會(huì)從風(fēng)格分類入手,進(jìn)行風(fēng)格解析,總結(jié)可視化設(shè)計(jì)的風(fēng)格,選擇風(fēng)格并應(yīng)用到場(chǎng)景,教大家如何選擇合適的風(fēng)格應(yīng)用到商業(yè)可視化項(xiàng)目中。

畫面中的動(dòng)效 GIF 圖會(huì)比較大,請(qǐng)大家耐心等候加載~

超全面的數(shù)據(jù)可視化設(shè)計(jì)指南:風(fēng)格篇

超全面的數(shù)據(jù)可視化設(shè)計(jì)指南:風(fēng)格篇

總結(jié)了商業(yè)項(xiàng)目中遇到的一些可視化案例以及科幻可視化風(fēng)格,大體的將其分為三個(gè)大類:傳統(tǒng)風(fēng)格、HUD 風(fēng)格、FUI 風(fēng)格。


傳統(tǒng)酷炫風(fēng)格


傳統(tǒng)狹義上的數(shù)據(jù)可視化, 更多是純圖形去代表數(shù)據(jù),通過(guò)圖形去展示數(shù)據(jù),直觀的展示所需要表現(xiàn)的指標(biāo)。數(shù)據(jù)可視化也有很多分類, 不過(guò)也許你也懶得了解了。

比如,網(wǎng)站后臺(tái)分析,可以說(shuō)是可視化分析報(bào)表類的,例如百度統(tǒng)計(jì),谷歌統(tǒng)計(jì)等等;比如,面對(duì) B 端后臺(tái)的數(shù)據(jù)可視化,國(guó)內(nèi)做的最好的無(wú)非就是 antdesign,element;我們此處說(shuō)的是基于 G 端的數(shù)據(jù)可視化大屏,G 端數(shù)據(jù)可視化從本質(zhì)上來(lái)說(shuō)是注重直接解決問(wèn)題,通過(guò)直觀的展示數(shù)據(jù)圖表去了解各個(gè)指標(biāo)的詳細(xì)數(shù)值;

也有甚者比較注重視覺(jué)效果,要酷炫,心理學(xué)家說(shuō), 人腦 70%的神經(jīng)信號(hào)來(lái)自視覺(jué), 我們的視覺(jué)系統(tǒng)最完善, 而不同的感官之間, 多少是可以轉(zhuǎn)化的, 而且是每個(gè)人的天性。國(guó)內(nèi)傳統(tǒng)可視化對(duì)于此處的接受程度確實(shí)不一樣。B 端和 G 端的用戶,對(duì)于可視化風(fēng)格的接受程度確實(shí)是不太一樣的,B 端對(duì)于前沿技術(shù)以及可視化表現(xiàn)會(huì)有一定的接受能力,但是 G 端更多注重于界面酷炫,功能反而不是很重要了,這多少有點(diǎn)本末倒置的感覺(jué)。

超全面的數(shù)據(jù)可視化設(shè)計(jì)指南:風(fēng)格篇

在傳統(tǒng)可視化面前,頁(yè)面的雜糅程度較強(qiáng),彷佛是由一塊塊圖表堆砌而成,比較注重色彩的運(yùn)用,多色搭配,色彩一般具有特質(zhì)。一般大多數(shù)可視化可以看到共同的點(diǎn)就是:配色/布局/構(gòu)圖,機(jī)械而又重復(fù),彷佛一個(gè)流水線生產(chǎn)出來(lái)的。當(dāng)然,現(xiàn)如今新基建乃是主流,人群對(duì)可視化大屏的認(rèn)知和審美也在逐漸提升,設(shè)計(jì)師在以后的工作中還需要取長(zhǎng)補(bǔ)短,多吸收一些好的東西去豐富我們具有中國(guó)特色的數(shù)據(jù)可視化大屏設(shè)計(jì)。


HUD 風(fēng)格


平視顯示器(Head Up Display),以下簡(jiǎn)稱 HUD,是運(yùn)用在航空器的飛行輔助儀器。平視的意思是指飛行員不需要低頭就能夠看到他需要要的重要資訊。平視顯示器最早出現(xiàn)在軍用飛機(jī)上,降低飛行員需要低頭查看儀表的頻率,避免注意力中斷以及喪失對(duì)狀態(tài)意識(shí)(Situation Awareness)的掌握。

因?yàn)?HUD 的方便性以及能夠提高飛行安全,民航機(jī)也紛紛跟進(jìn)安裝,汽車也開(kāi)始安裝,在一些游戲用戶界面,很多地方都會(huì)采用 HUD 的風(fēng)格,比如射擊類,格斗類,動(dòng)作類游戲等等(賽博朋克,堡壘之夜,絕地求生)。

超全面的數(shù)據(jù)可視化設(shè)計(jì)指南:風(fēng)格篇

超全面的數(shù)據(jù)可視化設(shè)計(jì)指南:風(fēng)格篇

在設(shè)計(jì)的細(xì)節(jié)當(dāng)中使用大量的圖形元素,并輔以一定的裝飾元素,主要以點(diǎn)線為主裝飾,排版版式參考價(jià)值較強(qiáng)。HUD 相比較于傳統(tǒng)和 FUI 來(lái)說(shuō),更貼合我們的日常設(shè)計(jì),對(duì)于圖形的展示也更加的有意義,所以透析 HUD 風(fēng)格,對(duì)于提升可視化設(shè)計(jì)水平有很大的幫助。


FUI 風(fēng)格


相對(duì)于當(dāng)前流行的扁平化設(shè)計(jì),F(xiàn)UI 可謂是在 Ul 設(shè)計(jì)中獨(dú)樹(shù)一幟,設(shè)計(jì)風(fēng)格十分鮮明,極具未來(lái)感和科技感。

FUI 是一個(gè)非常有趣的 Ul 設(shè)計(jì)領(lǐng)域,是我們?cè)谌粘,F(xiàn)實(shí)生活之中天法探索的用戶界面設(shè)計(jì)方式。在我們的日常工作中,通常日常設(shè)計(jì)很難有機(jī)會(huì)為宇宙飛船、時(shí)間旅行設(shè)備,或者感知型人工智能和外星人使用的用戶界面做設(shè)計(jì)。FUI 使設(shè)計(jì)師有機(jī)會(huì)去突破現(xiàn)有的用戶體驗(yàn)和用戶界面的限制,探索一個(gè)新的領(lǐng)域。通過(guò)虛幻界面設(shè)計(jì)我們可以大膽的設(shè)想以及尋找新的解決方案。例如我們可以大膽的設(shè)想 AR 技術(shù)的應(yīng)用,地圖可以采用全息投影技術(shù)、人與智能硬件的環(huán)境交互等等。

超全面的數(shù)據(jù)可視化設(shè)計(jì)指南:風(fēng)格篇

超全面的數(shù)據(jù)可視化設(shè)計(jì)指南:風(fēng)格篇

超全面的數(shù)據(jù)可視化設(shè)計(jì)指南:風(fēng)格篇

虛幻界面設(shè)計(jì)甚至可以是新的發(fā)明,它們可以作為一種概念的驗(yàn)證它們可以啟發(fā)我們,提出問(wèn)題,探索什么可行,什么不可行。正如科幻小說(shuō)可以激勵(lì)人們登上月球或建造自動(dòng)駕駛汽車一樣,虛幻用戶界面可以激勵(lì)人們?yōu)槲磥?lái)創(chuàng)造技術(shù)。

FUI 的圖形裝飾元素可以說(shuō)是極其豐富,形式感很強(qiáng)。在設(shè)計(jì)的細(xì)節(jié)當(dāng)中使用大量的“異形”的圖形元素,并輔以一定的裝飾元素,但是一定程度上對(duì)于設(shè)計(jì)中繁瑣的需求,需求層次上尋找設(shè)計(jì)靈感沒(méi)有太多幫助。常用在科幻電影以及概念游戲等領(lǐng)域,落地較難。


升華:如何培養(yǎng)出自己的可視化設(shè)計(jì)風(fēng)格


如何培養(yǎng)和完善自己的可視化設(shè)計(jì)風(fēng)格呢?其實(shí)這個(gè)問(wèn)題有點(diǎn)狹隘,不同客戶不同使用場(chǎng)景我們可能風(fēng)格都會(huì)不太一樣,但是唯一我們不會(huì)變的是我們對(duì)于組件圖表的理解,圖表圖形的展示形式。

  • 傳統(tǒng)風(fēng)格:多種色彩
  • FUI 風(fēng)格:科技圖形
  • HUD 風(fēng)格:版式排版

超全面的數(shù)據(jù)可視化設(shè)計(jì)指南:風(fēng)格篇

一個(gè)合格的可視化設(shè)計(jì)師,對(duì)于任何可以參考的頁(yè)面,都可以迅速領(lǐng)略到可以應(yīng)用的部分頁(yè)面和展示形式,多吸收知識(shí),提升自己,這就是取其精華,去其糟粕的正確解答吧!所以要將現(xiàn)有風(fēng)格結(jié)合,完善設(shè)計(jì)理念,提升視覺(jué)技法,這才是當(dāng)下比較重要的。

超全面的數(shù)據(jù)可視化設(shè)計(jì)指南:風(fēng)格篇

最近由于工作中的一個(gè)項(xiàng)目,對(duì)自己充滿了懷疑,究竟什么叫科技感?不同的應(yīng)用場(chǎng)景,科技感是否還依舊有效?同展示條件下不同應(yīng)用場(chǎng)景,又會(huì)有什么樣的差異?究竟是什么樣子的設(shè)計(jì),才能被“甲方爸爸”認(rèn)定為科技感十足,并且很酷炫呢?從酷炫科技感出發(fā),總結(jié)了以下四個(gè)方面去解析科技感風(fēng)格。

  • 科技感的界面有哪些特征?
  • 同展示條件下不同應(yīng)用場(chǎng)景,又會(huì)有什么樣的差異?
  • 三維的表現(xiàn)形式,是否真的跟科技感成正比?
  • 面對(duì)段落文本需求,列表需求等如何把頁(yè)面做出科技感?

超全面的數(shù)據(jù)可視化設(shè)計(jì)指南:風(fēng)格篇

1. 科技感的界面有哪些特征?

相信很多可視化設(shè)計(jì)師聽(tīng)到最多的一句話:要酷炫,要科技感!每每聽(tīng)到這句話我都會(huì)變得非常暴躁。究竟是酷炫科技感代表可視化?還是數(shù)據(jù)可視才是可視化的內(nèi)核?每每遇到這種令人糟心的問(wèn)題,我想的是如何通過(guò)自己的專業(yè)知識(shí)去解釋,可是我發(fā)現(xiàn)根本解釋不清楚,也無(wú)法令甲方客戶信服,甚至和同為乙方的總包也無(wú)法達(dá)成統(tǒng)一戰(zhàn)線。那么我們應(yīng)該如何去做呢,又應(yīng)該如何去解釋科技感這個(gè)抽象的概念呢?

超全面的數(shù)據(jù)可視化設(shè)計(jì)指南:風(fēng)格篇

配色

提到科技感色系一般我們想到的就是藍(lán)色系(科技藍(lán)),但是很多人可能走進(jìn)了一個(gè)誤區(qū),科技感的專屬色彩并不是只有藍(lán)色,而且一些藍(lán)色確實(shí)讓我們有審美疲勞的感覺(jué)。如圖,就是我們比較常見(jiàn)的傳統(tǒng)可視化設(shè)計(jì),一眼看去滿屏都是藍(lán)色,具有中國(guó)特色的藍(lán)色科技感。正如所有人都公認(rèn)的黨建題材為紅色加黃色,那么科技感真的只有藍(lán)色專屬嗎?黨建題材都是紅色專屬嗎?

超全面的數(shù)據(jù)可視化設(shè)計(jì)指南:風(fēng)格篇

由此可見(jiàn),紅色并不是黨建題材的專屬色彩,存在即合理,也并沒(méi)有說(shuō)黨建可視化一定要做成紅色的。制約的因素有很多:項(xiàng)目背景,項(xiàng)目需求,設(shè)計(jì)提案,專業(yè)認(rèn)知等等,可視化大屏歸根結(jié)底還是做的是服務(wù)設(shè)計(jì),因此服務(wù)好客戶,得到客戶的認(rèn)可,就能體現(xiàn)設(shè)計(jì)的價(jià)值。但是在設(shè)計(jì)稿中可以發(fā)現(xiàn),界面運(yùn)用到了一些黨建色彩的元素,也是通過(guò)這種方式去展示,這也是設(shè)計(jì)師需要注意的一點(diǎn)。

  • 傳統(tǒng)科技藍(lán)風(fēng)格可視化

超全面的數(shù)據(jù)可視化設(shè)計(jì)指南:風(fēng)格篇

  • 其他科技藍(lán)風(fēng)格可視化

超全面的數(shù)據(jù)可視化設(shè)計(jì)指南:風(fēng)格篇

超全面的數(shù)據(jù)可視化設(shè)計(jì)指南:風(fēng)格篇

  • 橘色科技感風(fēng)格可視化

超全面的數(shù)據(jù)可視化設(shè)計(jì)指南:風(fēng)格篇

超全面的數(shù)據(jù)可視化設(shè)計(jì)指南:風(fēng)格篇

由此我們可以推斷,配色是塑造科技感界面的一個(gè)比較重要的因素。色彩的選擇需要根據(jù)實(shí)際所運(yùn)用到的場(chǎng)景,比如安全行業(yè),藍(lán)綠色會(huì)比較好一點(diǎn);比如公安行業(yè),傳統(tǒng)藍(lán)色就比較合適;比如衛(wèi)星地圖,用藍(lán)色就不合適;根據(jù)不同的業(yè)務(wù)范疇以及不同的應(yīng)用場(chǎng)景去確定配色,這才是我們要做的。

藍(lán)色并不是科技感的專有屬性,任何一種顏色都是可以塑造科技感的感覺(jué)的。比如適合用綠色的場(chǎng)景做的界面,沒(méi)有做好看,那只能怪自己學(xué)藝不精,跟配色無(wú)關(guān)。不排斥藍(lán)色,但是討厭到處都是用藍(lán)色,上來(lái)就是用藍(lán)色。

背景

說(shuō)到背景這是一個(gè)影響科技感非常重要的因素,一張超神比比皆是,一張超鬼也是隨處可見(jiàn),究竟什么樣的背景才是一個(gè)優(yōu)秀的可視化界面所具備的?不是畫面發(fā)光,有閃光點(diǎn),宇宙或者銀河那種圖;也不是科技點(diǎn)線,帶漸變的線條(混合工具做出來(lái)的那種)看起來(lái)就特別復(fù)雜;也不是那種亮度超過(guò)畫面任何一個(gè)元素的圖。

超全面的數(shù)據(jù)可視化設(shè)計(jì)指南:風(fēng)格篇

科技感的背景所起到的作用應(yīng)該是襯托畫面,而不是在畫面中比較跳,搶視覺(jué),一大坨發(fā)光或者復(fù)雜的圖形,只會(huì)起到反作用。

一個(gè)好的背景一定是不影響視覺(jué)的同時(shí),襯托畫面和主視覺(jué),如果整個(gè)頁(yè)面分黑白灰三層,那么背景一定是黑的那一層,這樣的畫面效果才會(huì)好。

圖形

圖形應(yīng)該是以上指標(biāo)中,最令人可以接受對(duì)科技感風(fēng)格詮釋的一種,科技感的圖形到底有哪些特征,我們又該如何去做呢?

超全面的數(shù)據(jù)可視化設(shè)計(jì)指南:風(fēng)格篇

超全面的數(shù)據(jù)可視化設(shè)計(jì)指南:風(fēng)格篇

通過(guò)以上案例我們可以發(fā)現(xiàn),所謂圖形表現(xiàn)科技感,最大的特征就是點(diǎn)線面應(yīng)用的多元化,通過(guò)一種或者多種規(guī)律將點(diǎn)線面組合起來(lái),線條粗細(xì)長(zhǎng)短不一,點(diǎn)大小不等。在使用圖形進(jìn)行點(diǎn)綴搭配時(shí),切不可過(guò)于花哨,從而搶了主要內(nèi)容的風(fēng)頭。

不規(guī)則圖形,點(diǎn)線裝飾,色彩,外發(fā)光,都是圖形詮釋科技感的方式。

此處可能會(huì)出現(xiàn)一些三維樣式的圖形,特殊的視角以及不常見(jiàn)的設(shè)計(jì)都會(huì)增加科技感的元素,但是也不是所有的三維都可以比二維更有科技感的。我最近做的就是甲方客戶一直覺(jué)得:三維元素太少了,科技感不夠。我就納悶了,到底什么才是科技感?難道科技感只能用三維的來(lái)表示了?只能說(shuō)一定條件下,三維是優(yōu)于二維展示的,但這也不是絕對(duì)的。如果你的場(chǎng)景主視覺(jué)本身就是二維范疇的,何必要要求組件三維展示。

下圖的二維科技感表現(xiàn)上肯定是超過(guò)三維地球的,至少我是這么認(rèn)為的。

超全面的數(shù)據(jù)可視化設(shè)計(jì)指南:風(fēng)格篇

動(dòng)效

動(dòng)效應(yīng)該是最能體現(xiàn)科技感的方式了,通過(guò)動(dòng)態(tài)演示組件,通過(guò)動(dòng)效展示界面,遠(yuǎn)遠(yuǎn)比靜態(tài)頁(yè)面要合理的多。動(dòng)效主要是通過(guò):位移、旋轉(zhuǎn)、透明度(閃爍)、縮放等方式去制作,形成獨(dú)特的動(dòng)畫節(jié)奏。

最常用的科技動(dòng)畫:粒子動(dòng)畫,線條動(dòng)畫,輝光,剪切路徑,偏移字符等等。

超全面的數(shù)據(jù)可視化設(shè)計(jì)指南:風(fēng)格篇

超全面的數(shù)據(jù)可視化設(shè)計(jì)指南:風(fēng)格篇

超全面的數(shù)據(jù)可視化設(shè)計(jì)指南:風(fēng)格篇

超全面的數(shù)據(jù)可視化設(shè)計(jì)指南:風(fēng)格篇

可以發(fā)現(xiàn)科技感動(dòng)效一般都伴隨著極快的閃爍動(dòng)畫,動(dòng)畫的節(jié)奏也是比較偏快,再通過(guò)出現(xiàn)動(dòng)畫,字符偏移,剪切路徑等演示組件的形成過(guò)程。

2. 同展示條件下不同應(yīng)用場(chǎng)景,會(huì)有怎樣的差異?

可能大家沒(méi)有遇到過(guò)這種情況,比如在三維建筑可視化中,科技感本身就依賴于場(chǎng)景的表現(xiàn),但是不知道大家有沒(méi)有試過(guò),將三維建筑可視化換成二維 GIS 之后,我們?nèi)绾稳ナ巩嬅姹憩F(xiàn)的更具科技感呢?

圖一,圖二,圖三分別就是替換不同的場(chǎng)景,那么我們來(lái)看看這些場(chǎng)景為什么不適合原本的之前的科技感風(fēng)格呢,我們一起思考一下~

超全面的數(shù)據(jù)可視化設(shè)計(jì)指南:風(fēng)格篇

超全面的數(shù)據(jù)可視化設(shè)計(jì)指南:風(fēng)格篇

超全面的數(shù)據(jù)可視化設(shè)計(jì)指南:風(fēng)格篇

以上三張圖可以看出,圖一的飛機(jī)可視化是畫面的原稿,后兩張是在同一種設(shè)計(jì)面板,替換了不用的主視覺(jué)場(chǎng)景,由此可以看出不同主視覺(jué)場(chǎng)景可能對(duì)應(yīng)不同的風(fēng)格 UI 組件,沒(méi)有通用的組件,如果想完美表達(dá)一些面板組件,那么需要取設(shè)計(jì)不同風(fēng)格的主視覺(jué)場(chǎng)景才可以。

大家可能會(huì)覺(jué)得科技感只針對(duì)于一些特殊的場(chǎng)景,或者說(shuō)是深色場(chǎng)景,比如一些實(shí)景地圖和衛(wèi)星地圖又該如何去表現(xiàn)科技感的元素呢?那么如果是淺色可視化我們又該如何去做科技感呢?

科技感風(fēng)格應(yīng)用于不同的場(chǎng)景,那么表現(xiàn)科技感的方式也是有很大的不同的。

超全面的數(shù)據(jù)可視化設(shè)計(jì)指南:風(fēng)格篇

3. 三維的表現(xiàn)形式,是否真的跟科技感提升成正比?

其實(shí)這本身就是一個(gè)偽命題,三維表現(xiàn)對(duì)畫面的沖擊力是非常強(qiáng)的,對(duì)于畫面視覺(jué)效果的提升有很大的幫助。不過(guò)是否所有的三維就是最合適的呢,這個(gè)也確實(shí)有待商榷。不過(guò)能肯定的是,一定程度上,三維一定會(huì)比二維更加具有沖擊,更加具有科技感。

首先必須要確定的是,此處三維一定是科技感點(diǎn)線組成或者說(shuō)是線描類型的三維主體,而不是實(shí)景以及仿真的主體,當(dāng)然并不是絕對(duì)的,此處針對(duì)大多數(shù)場(chǎng)景下。

超全面的數(shù)據(jù)可視化設(shè)計(jì)指南:風(fēng)格篇

超全面的數(shù)據(jù)可視化設(shè)計(jì)指南:風(fēng)格篇

超全面的數(shù)據(jù)可視化設(shè)計(jì)指南:風(fēng)格篇

可以通過(guò)以上圖片看出,科技感一定伴隨的是大量的點(diǎn)線裝飾,畫面主體一定是最突出的地方。而不是有時(shí)候遇到的是:GIS 地圖就是很普通的樣式,可編輯性不是很強(qiáng),樣式也比較老舊,對(duì)設(shè)計(jì)就會(huì)造成大量的困擾。在主視覺(jué)沒(méi)有完美表現(xiàn)的時(shí)候,就不要強(qiáng)求說(shuō)把兩邊去做好看,主視覺(jué)不好看,那么圖表做的特別華麗也只是讓主視覺(jué)更掉分。

其實(shí)最正確的表現(xiàn)就是二維表現(xiàn)加上三維場(chǎng)景展示,兩者相輔相成,對(duì)于畫面的展示才是最好的。通過(guò)下面這組案例可以發(fā)現(xiàn),二維表現(xiàn)加上三維場(chǎng)景才是最優(yōu)解。

超全面的數(shù)據(jù)可視化設(shè)計(jì)指南:風(fēng)格篇

4. 面對(duì)段落文本列表需求時(shí)如何把頁(yè)面做出科技感?

很多同學(xué)對(duì)于文字需求如何制作科技感有很多的疑問(wèn),通過(guò)最近的作圖,總結(jié)出四種關(guān)于文字排版科技感的展示,總結(jié)起來(lái)其實(shí)就那么幾點(diǎn):裝飾,圖形,字體,版式,表現(xiàn)形式…

超全面的數(shù)據(jù)可視化設(shè)計(jì)指南:風(fēng)格篇

超全面的數(shù)據(jù)可視化設(shè)計(jì)指南:風(fēng)格篇

超全面的數(shù)據(jù)可視化設(shè)計(jì)指南:風(fēng)格篇

超全面的數(shù)據(jù)可視化設(shè)計(jì)指南:風(fēng)格篇

其實(shí)對(duì)于數(shù)據(jù)可視化設(shè)計(jì)科技感的研究,不僅需要了解表現(xiàn)層,更需要上升到業(yè)務(wù)層。一些特定的圖形或者裝飾,對(duì)于畫面的豐富程度一定是有幫助的。

講了這么多,不知道對(duì)大家理解科技感是否有幫助,如何提升畫面科技感,是我們做為數(shù)據(jù)可視化設(shè)計(jì)必定會(huì)面臨的一大難題。希望大家在以后的工作或者項(xiàng)目中,多多酷炫,多多科技感?。?!

超全面的數(shù)據(jù)可視化設(shè)計(jì)指南:風(fēng)格篇

1. 根據(jù)場(chǎng)景-了解展示需求

場(chǎng)景是什么?是人物、時(shí)間、地點(diǎn)三要素所組成的特定關(guān)系。在某某時(shí)間(when),某某地點(diǎn)(where),特定類型的用戶(who),干了某某事情(what)。

因此我們要確定的是,根據(jù)這四個(gè)“W”去確定整體業(yè)務(wù)框架的基礎(chǔ)構(gòu)成,這對(duì)于設(shè)計(jì)風(fēng)格的初步意向確認(rèn)有著很積極的意義。

超全面的數(shù)據(jù)可視化設(shè)計(jì)指南:風(fēng)格篇

  • who:王局長(zhǎng)
  • when:領(lǐng)導(dǎo)人會(huì)議時(shí)
  • where:公安局
  • what:新基建建設(shè) 數(shù)字化轉(zhuǎn)型事項(xiàng)

在領(lǐng)導(dǎo)人會(huì)試上,公安局王局長(zhǎng)提議通過(guò)了關(guān)于新基建,數(shù)字化轉(zhuǎn)型的各種措施。面對(duì)這一場(chǎng)景,有以下幾個(gè)問(wèn)題。受眾是誰(shuí)?需要干什么事情?誰(shuí)去干?數(shù)字化轉(zhuǎn)型怎么做?怎么實(shí)現(xiàn)?需要用到的技術(shù)?展示風(fēng)格?重功能?還是重展示?

在有了這些的前提下,對(duì)于我們?cè)O(shè)計(jì)風(fēng)格的選擇就有了很強(qiáng)的指導(dǎo)意義,比如王局長(zhǎng)比較喜歡多色搭配,科技感強(qiáng)的風(fēng)格,主要為了配合展示匯報(bào),那么就可以通過(guò)這一些需求,初步制定風(fēng)格為效果酷炫的展示類大屏,但是主視覺(jué)的展示形式還是要根據(jù)其他的具體情況去進(jìn)一步確認(rèn)。

2. 根據(jù)含義-確立設(shè)計(jì)方向

在面對(duì)一些特有的項(xiàng)目時(shí),一般客戶會(huì)給出一些參考術(shù)語(yǔ):“3 個(gè)一帶”,“2 個(gè)方針”,“八大成果”“三山,兩水,百林,千田”……

面對(duì)這種問(wèn)題,能做的就是理解其包含的真實(shí)意義,究竟需要展示哪方面的,了解清楚項(xiàng)目的背景需求,結(jié)合客戶所說(shuō)的一些關(guān)鍵字段,剖析以上的內(nèi)容可以發(fā)現(xiàn),客戶通過(guò)一些方針和方法,對(duì)“山水林田”進(jìn)行治理,取得了一些階段性成果。

超全面的數(shù)據(jù)可視化設(shè)計(jì)指南:風(fēng)格篇

因此展示的內(nèi)容可以確定為智慧治理,或者智慧生態(tài)方向的,然后就可以根據(jù)項(xiàng)目背景的內(nèi)容去選擇可以應(yīng)用的具體的一些方案了。

3. 根據(jù)需求-明確設(shè)計(jì)內(nèi)容

因在到了需求分析的階段,可以根據(jù)客戶提供的大量的資料和業(yè)務(wù)需求,去明確的設(shè)計(jì)方向,究竟是需要展示哪些內(nèi)容?可以提供的數(shù)據(jù)有哪些?展示條件(硬件設(shè)施)是否具備?想要的效果有哪些?

超全面的數(shù)據(jù)可視化設(shè)計(jì)指南:風(fēng)格篇

比如客戶需要查看到山水林田的各個(gè)改進(jìn)措施的效果,以及改進(jìn)前后的效果對(duì)比。說(shuō)到這單純的二維 GIS 和影像已經(jīng)不太好滿足了,那么可以將場(chǎng)景風(fēng)格定位到三維展示,需要實(shí)際 1:1 建模,至于是通過(guò) WEBGL,UE,UNITY 就看各自的團(tuán)隊(duì)擅長(zhǎng)的方向了。

場(chǎng)景大體風(fēng)格確定,那么展示面板需求根據(jù)場(chǎng)景去搭建就可以了,這樣一個(gè)完整的風(fēng)格選擇過(guò)程就算初步走通了,具體的驗(yàn)證環(huán)節(jié),可以在一次次會(huì)議中再去進(jìn)行交流和修改即可。

超全面的數(shù)據(jù)可視化設(shè)計(jì)指南:風(fēng)格篇

二維 GIS(深淺)、衛(wèi)星影像

  • 優(yōu)點(diǎn)

展示容易,風(fēng)格切換皮膚多,可編輯性高,開(kāi)發(fā)難度低,地圖資源較多,適合快速搭建可視化大屏模版,開(kāi) 源內(nèi)容較多,前端開(kāi)發(fā)直接調(diào)用樣式即可。

  • 缺點(diǎn)

展示形式較普通,地圖風(fēng)格樣式不出彩,設(shè)計(jì)效果也會(huì)打很多折扣,很難與同行拉開(kāi)差距。

  • 難點(diǎn)

開(kāi)發(fā)過(guò)程中可能需要基于高德 API 以及一些平臺(tái),對(duì)封裝地圖進(jìn)行二次開(kāi)發(fā),沒(méi)有 GIS 開(kāi)發(fā)經(jīng)驗(yàn)的前端,會(huì)比較困難。

  • 網(wǎng)址

https://lbs.amap.com/product/mapstyle#/ Mapbox,高德 API,百度 API,超圖,天地圖等等。

以高德 API 為例

超全面的數(shù)據(jù)可視化設(shè)計(jì)指南:風(fēng)格篇

矢量地圖、省市區(qū)塊

  • 優(yōu)點(diǎn)

展示靈活,可下載 svg 矢量區(qū)塊,并可下載 json 文件直接交付開(kāi)發(fā),可下鉆到縣級(jí),可編輯性高,一般會(huì)結(jié)合二維 GIS 來(lái)展示,有插件可以直接繪制全國(guó)地圖。

  • 缺點(diǎn)

不夠立體,可選樣式比較少,畫面主視覺(jué)容易空洞導(dǎo)致畫面效果不強(qiáng)。

  • 難點(diǎn)

開(kāi)發(fā)對(duì)于設(shè)計(jì)圖的一些效果還原比較困難,例如發(fā)光,漸變等等。只能做一些比較基礎(chǔ)屬性的修改,對(duì)于效果還原可能達(dá)不到 80%以上。

  • 網(wǎng)址

http://datav.aliyun.com/tools/atlas/

以 DATAV 地圖下載器為例

超全面的數(shù)據(jù)可視化設(shè)計(jì)指南:風(fēng)格篇

矢量地圖模型、省市區(qū)塊

  • 優(yōu)點(diǎn)

展示效果好,三維場(chǎng)景,有立體效果,材質(zhì)貼圖不同效果會(huì)完全不一樣,可編輯性較強(qiáng),相比較二維更推薦這種表現(xiàn)形式。

  • 缺點(diǎn)

三維范疇,不會(huì)三維知識(shí)的小伙伴會(huì)比較難,此處會(huì)涉及到三維軟件合并擠壓,展 UV,漫射貼圖,QGIS 制作高度貼圖,PS 制作法線貼圖等等知識(shí)點(diǎn)。

  • 難點(diǎn)

對(duì)于不懂三維的小伙伴比較困難,涉及知識(shí)點(diǎn)較多,容易一知半解。

  • 教程

https://mp.weixin.qq.com/s/zjR_pJyU1jpeLJMXZ-4FyA (原作者已授權(quán))

3D 地圖建模及貼圖的制作獲取方法

超全面的數(shù)據(jù)可視化設(shè)計(jì)指南:風(fēng)格篇

三維模型、城市建模

  • 優(yōu)點(diǎn)

展示形式新穎,展示效果非常好,三維表現(xiàn)往往讓人耳目一新,對(duì)于可視化的展示可以說(shuō)是所見(jiàn)即所得,深得客戶喜愛(ài)。

  • 缺點(diǎn)

開(kāi)發(fā)難度高,專業(yè)性人才比較少,懂三維的設(shè)計(jì)也是非常的少,對(duì)于三維知識(shí)以及引擎開(kāi)發(fā)知識(shí)需要比較熟悉才行。

  • 難點(diǎn)

人才稀缺,入門難,做好更難,教程自學(xué)難度有點(diǎn)大,例如 cityengine 程序化建模,houdini 程序化建模等等。

  • 教程

https://space.bilibili.com/21247145?from=search&seid=10582171815506234319

cityengine 程序化建模

超全面的數(shù)據(jù)可視化設(shè)計(jì)指南:風(fēng)格篇

知識(shí)圖譜、數(shù)據(jù)中臺(tái)等

  • 優(yōu)點(diǎn)

主視覺(jué)效果強(qiáng),特殊場(chǎng)景的處理能夠很完美的講清邏輯,對(duì)于圖形化的理解有很強(qiáng)的意義。

  • 缺點(diǎn)

邏輯復(fù)雜,難懂,比較抽象,專業(yè)難度高,對(duì)業(yè)務(wù)理解能力需要很強(qiáng)。

  • 難點(diǎn)

邏輯處理比較難,設(shè)計(jì)效果比較難以想象,設(shè)計(jì)容易偏離主題,比如數(shù)據(jù)中臺(tái),是一個(gè)非常虛幻的東西,很難講清楚處理邏輯和過(guò)程。

  • 網(wǎng)址

https://www.zcool.com.cn/work/ZMzg4OTQ5ODQ=.html

以知識(shí)圖譜為例

超全面的數(shù)據(jù)可視化設(shè)計(jì)指南:風(fēng)格篇


知識(shí)點(diǎn)總結(jié)


可視化風(fēng)格三大分類以及對(duì)于圖形的應(yīng)用(傳統(tǒng)、HUD、FUI);

如何培養(yǎng)自己的數(shù)據(jù)可視化設(shè)計(jì)風(fēng)格(色彩+圖形+板式);

影響科技感風(fēng)格的四大影響因素(配色,圖形,背景,動(dòng)效);

設(shè)計(jì)風(fēng)格的選擇以及確定思路(根據(jù)場(chǎng)景、含義、需求);

可視化風(fēng)格的應(yīng)用以及拓展(各種主視覺(jué)的應(yīng)用優(yōu)缺難點(diǎn))。

超全面的數(shù)據(jù)可視化設(shè)計(jì)指南:風(fēng)格篇

講了這么多,不知道對(duì)大家理解科技感是否有幫助,如何提升畫面科技感,是我們做為數(shù)據(jù)可視化設(shè)計(jì)必定會(huì)面臨的一大難題。希望大家在以后的工作或者項(xiàng)目中,多多酷炫,多多科技感!??!不知道大家有沒(méi)有一種錯(cuò)覺(jué),突然有一段時(shí)間,某個(gè)時(shí)候發(fā)現(xiàn)自己突然不會(huì)做設(shè)計(jì)了,啥也想不明白了,莫名的有點(diǎn)浮躁,做什么都不能專心。其實(shí)很簡(jiǎn)單,總的來(lái)說(shuō)就是,你即將突破現(xiàn)有的設(shè)計(jì)水準(zhǔn),如果能想明白,解決掉問(wèn)題,你的審美以及設(shè)計(jì)水平都會(huì)有很大的進(jìn)步。這就是別人口中的,突然就會(huì)了,知道怎么做了,其實(shí)無(wú)非就是積累夠了,需要升入下一個(gè)等級(jí)了~

作者:生活因你而火熱

轉(zhuǎn)載請(qǐng)注明:優(yōu)設(shè)網(wǎng)

藍(lán)藍(lán)設(shè)計(jì)建立了UI設(shè)計(jì)分享群,每天會(huì)分享國(guó)內(nèi)外的一些優(yōu)秀設(shè)計(jì),如果有興趣的話,可以進(jìn)入一起成長(zhǎng)學(xué)習(xí),請(qǐng)掃碼藍(lán)小助,報(bào)下信息,藍(lán)小助會(huì)請(qǐng)您入群。歡迎您加入噢~~希望得到建議咨詢、商務(wù)合作,也請(qǐng)與我們聯(lián)系。

魏華的微信.png

分享此文一切功德,皆悉回向給文章原作者及眾讀者.

免責(zé)聲明:藍(lán)藍(lán)設(shè)計(jì)尊重原作者,文章的版權(quán)歸原作者。如涉及版權(quán)問(wèn)題,請(qǐng)及時(shí)與我們?nèi)〉寐?lián)系,我們立即更正或刪除。

藍(lán)藍(lán)設(shè)計(jì)m.88yangsc.com )是一家專注而深入的界面設(shè)計(jì)公司,為期望卓越的國(guó)內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)

ui設(shè)計(jì),界

計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì) 、 圖標(biāo)定制 、 用戶體驗(yàn) 、交互設(shè)計(jì)、 網(wǎng)站建設(shè) 、平面設(shè)計(jì)服務(wù)、UI設(shè)計(jì)公司、界面設(shè)計(jì)公司、UI設(shè)計(jì)服務(wù)公司、數(shù)據(jù)可視化設(shè)計(jì)公司、UI交互設(shè)計(jì)公司、高端網(wǎng)站設(shè)計(jì)公司、UI咨詢、用戶體驗(yàn)公司、軟件界面設(shè)計(jì)公司



更多精彩文章:

大數(shù)據(jù)可視化界面設(shè)計(jì)之一:可視化大屏設(shè)計(jì)快速入門指南

大數(shù)據(jù)可視化界面設(shè)計(jì)之九:超全面的數(shù)據(jù)可視化設(shè)計(jì)指南:設(shè)備篇

大數(shù)據(jù)可視化界面設(shè)計(jì)之十:數(shù)據(jù)可視化必修課:表格篇












分享本文至:

日歷

鏈接

個(gè)人資料

存檔