致數(shù)據(jù)可視化設計師-風格篇詳解

本片文章共8000字，閱讀大概需要25分鐘。

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

整個合輯一共有10篇文章，分別涉及到設備篇、風格篇、字體篇、色彩篇、組件篇、布局篇、版式篇、視覺篇、團隊篇、技能篇十篇文章，詳細的講一講可視化大屏設計的知識點。

風格篇主要包含：常用風格 > 風格解析 > 風格選擇 > 風格應用。

本篇文章將會從風格分類入手，進行風格解析，總結可視化設計的風格，選擇風格并應用到場景，教大家如何選擇合適的風格應用到商業(yè)可視化項目中。

畫面中的動效GIF圖會比較大，請大家耐心等候加載～

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

• 傳統(tǒng)酷炫風格

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

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

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

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

• HUD風格

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

因為HUD的方便性以及能夠提高飛行安全，民航機也紛紛跟進安裝，汽車也開始安裝，在一些游戲用戶界面，很多地方都會采用HUD的風格，比如射擊類，格斗類，動作類游戲等等（賽博朋克，堡壘之夜，絕地求生）。

在設計的細節(jié)當中使用大量的圖形元素，并輔以一定的裝飾元素，主要以點線為主裝飾，排版版式參考價值較強。HUD相比較于傳統(tǒng)和FUI來說，更貼合我們的日常設計，對于圖形的展示也更加的有意義，所以透析HUD風格，對于提升可視化設計水平有很大的幫助。

• FUI風格

相對于當前流行的扁平化設計，F(xiàn)UI可謂是在Ul設計中獨樹一幟，設計風格十分鮮明，極具未來感和科技感。

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

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

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

• 升華：如何培養(yǎng)出自己的可視化設計風格

如何培養(yǎng)和完善自己的可視化設計風格呢？其實這個問題有點狹隘，不同客戶不同使用場景我們可能風格都會不太一樣，但是唯一我們不會變的是我們對于組件圖表的理解，圖表圖形的展示形式。

傳統(tǒng)風格：多種色彩

FUI  風格：科技圖形

HUD風格：版式排版

一個合格的可視化設計師，對于任何可以參考的頁面，都可以迅速領略到可以應用的部分頁面和展示形式，多吸收知識，提升自己，這就是取其精華，去其糟粕的正確解答吧！所以要將現(xiàn)有風格結合，完善設計理念，提升視覺技法，這才是當下比較重要的。 

最近由于工作中的一個項目，對自己充滿了懷疑，究竟什么叫科技感？不同的應用場景，科技感是否還依舊有效？同展示條件下不同應用場景，又會有什么樣的差異？究竟是什么樣子的設計，才能被“甲方爸爸"認定為科技感十足，并且很酷炫呢？從酷炫科技感出發(fā)，總結了以下四個方面去解析科技感風格。

• 科技感的界面有哪些特征？

• 同展示條件下不同應用場景，又會有什么樣的差異？

• 三維的表現(xiàn)形式，是否真的跟科技感成正比？

• 面對段落文本需求，列表需求等如何把頁面做出科技感？

01 科技感的界面有哪些特征？

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

• 1.1 配色 

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

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

• 傳統(tǒng)科技藍風格可視化

• 其他科技藍風格可視化

• 橘色科技感風格可視化

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

藍色并不是科技感的專有屬性，任何一種顏色都是可以塑造科技感的感覺的。比如適合用綠色的場景做的界面，沒有做好看，那只能怪自己學藝不精，跟配色無關。不排斥藍色，但是討厭到處都是用藍色，上來就是用藍色。

1.2 背景 

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

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

一個好的背景一定是不影響視覺的同時，襯托畫面和主視覺，如果整個頁面分黑白灰三層，那么背景一定是黑的那一層，這樣的畫面效果才會好。

1.3 圖形 

圖形應該是以上指標中，最令人可以接受對科技感風格詮釋的一種，科技感的圖形到底有哪些特征，我們又該如何去做呢？

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

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

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

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

1.4 動效 

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

最常用的科技動畫：粒子動畫，線條動畫，輝光，剪切路徑，偏移字符等等。

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

02 同展示條件下不同應用場景，會有怎樣的差異？

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

圖一，圖二，圖三分別就是替換不同的場景，那么我們來看看這些場景為什么不適合原本的之前的科技感風格呢，我們一起思考一下~

以上三張圖可以看出，圖一的飛機可視化是畫面的原稿，后兩張是在同一種設計面板，替換了不用的主視覺場景，由此可以看出不同主視覺場景可能對應不同的風格UI組件，沒有通用的組件，如果想完美表達一些面板組件，那么需要取設計不同風格的主視覺場景才可以。

大家可能會覺得科技感只針對于一些特殊的場景，或者說是深色場景，比如一些實景地圖和衛(wèi)星地圖又該如何去表現(xiàn)科技感的元素呢？那么如果是淺色可視化我們又該如何去做科技感呢？

科技感風格應用于不同的場景，那么表現(xiàn)科技感的方式也是有很大的不同的。

03 三維的表現(xiàn)形式，是否真的跟科技感提升成正比？

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

首先必須要確定的是，此處三維一定是科技感點線組成或者說是線描類型的三維主體，而不是實景以及仿真的主體，當然并不是絕對的，此處針對大多數(shù)場景下。

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

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

04 面對段落文本列表需求時如何把頁面做出科技感？

很多同學對于文字需求如何制作科技感有很多的疑問，通過最近的作圖，總結出四種關于文字排版科技感的展示，總結起來其實就那么幾點：裝飾，圖形，字體，版式，表現(xiàn)形式...

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

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

1、根據(jù)場景-了解展示需求

場景是什么？是人物、時間、地點三要素所組成的特定關系。在某某時間（when），某某地點（where），特定類型的用戶（who），干了某某事情（what）。

因此我們要確定的是，根據(jù)這四個“W”去確定整體業(yè)務框架的基礎構成，這對于設計風格的初步意向確認有著很積極的意義。

who：王局長

when：領導人會議時

where：公安局

what：新基建建設 數(shù)字化轉型事項

在領導人會試上，公安局王局長提議通過了關于新基建，數(shù)字化轉型的各種措施。面對這一場景，有以下幾個問題。受眾是誰？需要干什么事情？誰去干？數(shù)字化轉型怎么做？怎么實現(xiàn)？需要用到的技術？展示風格？重功能？還是重展示？

在有了這些的前提下，對于我們設計風格的選擇就有了很強的指導意義，比如王局長比較喜歡多色搭配，科技感強的風格，主要為了配合展示匯報，那么就可以通過這一些需求，初步制定風格為效果酷炫的展示類大屏，但是主視覺的展示形式還是要根據(jù)其他的具體情況去進一步確認。

2、根據(jù)含義-確立設計方向

在面對一些特有的項目時，一般客戶會給出一些參考術語：“3個一帶”，“2個方針”，“八大成果”“三山，兩水，百林，千田”......

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

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

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

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

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

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

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

優(yōu)點

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

缺點

展示形式較普通，地圖風格樣式不出彩，設計效果也會打很多折扣，很難與同行拉開差距。

難點

開發(fā)過程中可能需要基于高德API以及一些平臺，對封裝地圖進行二次開發(fā)，沒有GIS開發(fā)經(jīng)驗的前端，會比較困難。

網(wǎng)址

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

以高德API為例

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

優(yōu)點

展示靈活，可下載svg矢量區(qū)塊，并可下載json文件直接交付開發(fā)，可下鉆到縣級，可編輯性高，一般會結合二維GIS來展示，有插件可以直接繪制全國地圖。

缺點

不夠立體，可選樣式比較少，畫面主視覺容易空洞導致畫面效果不強。

難點

開發(fā)對于設計圖的一些效果還原比較困難，例如發(fā)光，漸變等等。只能做一些比較基礎屬性的修改，對于效果還原可能達不到80%以上。

網(wǎng)址

http://datav.aliyun.com/tools/atlas/index.html#&lat=33.50475906922609&lng=104.2822265625&zoom=4

以DATAV地圖下載器為例

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

優(yōu)點

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

缺點

三維范疇，不會三維知識的小伙伴會比較難，此處會涉及到三維軟件合并擠壓，展UV，漫射貼圖，QGIS制作高度貼圖，PS制作法線貼圖等等知識點。

難點

對于不懂三維的小伙伴比較困難，涉及知識點較多，容易一知半解。

教程

https://mp.weixin.qq.com/s/zjR_pJyU1jpeLJMXZ-4FyA（原作者已授權）

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

• 三維模型、城市建模

優(yōu)點

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

缺點

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

難點

人才稀缺，入門難，做好更難，教程自學難度有點大，例如cityengine程序化建模，houdini程序化建模等等。

教程

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

cityengine程序化建模

• 知識圖譜、數(shù)據(jù)中臺等

優(yōu)點

主視覺效果強，特殊場景的處理能夠很完美的講清邏輯，對于圖形化的理解有很強的意義。

缺點

邏輯復雜，難懂，比較抽象，專業(yè)難度高，對業(yè)務理解能力需要很強。

難點

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

網(wǎng)址

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

以知識圖譜為例

知識點總結

可視化風格三大分類以及對于圖形的應用（傳統(tǒng)、HUD、FUI）；

如何培養(yǎng)自己的數(shù)據(jù)可視化設計風格（色彩+圖形+板式）；

影響科技感風格的四大影響因素（配色，圖形，背景，動效）；

設計風格的選擇以及確定思路（根據(jù)場景、含義、需求）；

可視化風格的應用以及拓展（各種主視覺的應用優(yōu)缺難點）。

講了這么多，不知道對大家理解科技感是否有幫助，如何提升畫面科技感，是我們做為數(shù)據(jù)可視化設計必定會面臨的一大難題。希望大家在以后的工作或者項目中，多多酷炫，多多科技感?。。〔恢来蠹矣袥]有一種錯覺，突然有一段時間，某個時候發(fā)現(xiàn)自己突然不會做設計了，啥也想不明白了，莫名的有點浮躁，做什么都不能專心。其實很簡單，總的來說就是，你即將突破現(xiàn)有的設計水準，如果能想明白，解決掉問題，你的審美以及設計水平都會有很大的進步。這就是別人口中的，突然就會了，知道怎么做了，其實無非就是積累夠了，需要升入下一個等級了~

藍藍設計建立了UI設計分享群，每天會分享國內(nèi)外的一些優(yōu)秀設計，如果有興趣的話，可以進入一起成長學習，請掃碼ben_lanlan，報下信息，會請您入群。歡迎您加入噢~~希望得到建議咨詢、商務合作，也請與我們聯(lián)系。

免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們?nèi)〉寐?lián)系，我們立即更正或刪除。

藍藍設計( www.bouu.cn )是一家專注而深入的界面設計公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網(wǎng)站建設 、平面設計服務