編輯導(dǎo)語：數(shù)據(jù)可視化需要利用大屏這一工具實現(xiàn)，若想讓數(shù)據(jù)展示變得更加生動，可視化大屏的藝術(shù)性設(shè)計便不可缺少，而這需要結(jié)合許多設(shè)計技巧。本篇文章里，作者就數(shù)據(jù)可視化大屏的藝術(shù)化設(shè)計如何實現(xiàn)做了相應(yīng)闡述，一起來看一下。

首先，想要設(shè)計出一個好看的可視化大屏，藝術(shù)性是必不可少的。所以第一步我們來走進數(shù)據(jù)藝術(shù)的世界中，從理性走入感性，體會相斥相吸所碰撞出的藝術(shù)火花給人帶來的視覺盛宴。再通過 2D 與 3D 的結(jié)合應(yīng)用使可視化更加生動形象說明。

一、結(jié)合情感打造二維設(shè)計美感

1. 走進數(shù)據(jù)藝術(shù)

在數(shù)據(jù)藝術(shù)的世界中，要打開想象力，關(guān)注數(shù)據(jù)和情感中的聯(lián)系。

準(zhǔn)確地說，數(shù)據(jù)藝術(shù)更多是為了讓人們?nèi)ンw驗?zāi)切┳屓烁杏X冰冷而陌生的數(shù)據(jù)，使它們從無形變?yōu)榭梢姷摹⒖蓜拥?、可互動的甚至可觸摸的有形物像。就像是把冰冷的 10110010 的代碼賦予生命，穿上衣服形成樣貌，讓人一看就能記住這個生命體的樣子，知曉它的信息，更加人性化地與它互動。

2. 建立視覺層次

感性的感受到數(shù)據(jù)可視化帶來的藝術(shù)感和生命力后，我們來通過理性的方法為我們的可視化增加美感。

當(dāng)我們在拿到一張可視化大屏的時候，會快速掃一眼尋找有沒有有趣的東西。而且人眼在看東西時總是趨向于識別引人注目的東西，比如明亮的顏色，較大的物體等突出的有特點的事物。

利用這點，我們可以用醒目的顏色突出顯示數(shù)據(jù)，而淡化周圍的輔助元素，拉開背景和數(shù)據(jù)的層次。也可以用線條或者線性元素構(gòu)建一個視覺路徑，把人的視線逐漸引向一個興趣點。這樣就可以建立一個視覺層次，幫助讀者快速關(guān)注到主數(shù)據(jù)。反之，讀者就會盲目搜索而找不到重點了。

如上圖我們做的一個簡單的案例，左側(cè)的圖弱化了背景元素，明顯比右側(cè)的數(shù)據(jù)可讀性更強，視覺感受更加舒適。

3. 適宜的色彩情感

在數(shù)據(jù)可視化設(shè)計中，色彩是最重要的元素之一。合理利用色彩的情感可以增強可視化設(shè)計的感知效果，調(diào)動觀賞者的情緒。

不同的色彩給人不同心理感受，如：紅色代表著喜慶、熱情、歡樂、愛情、活力等。但是，很多時候紅色也與災(zāi)難、戰(zhàn)爭、憤怒等消極情緒聯(lián)系在一起；藍色會給人帶來友好、和諧、信任、寧靜、希望等積極的情感體驗，也會給人以冷酷、無情的心理感受。

不同的色彩搭配可以表現(xiàn)不同的情感，用來表達與之匹配的可視化設(shè)計主題風(fēng)格，調(diào)動觀賞者的情感。

• 科技/科幻感、未來感、前衛(wèi)感：紫外光色、藍色等。
• 青春、活力：紅、黃、綠等。
• 高端感、質(zhì)感：黑色、灰色+漸變/光照等；在色彩搭配上可以選擇同色系配色，畫面顯得更豐富；也可以選擇非同色系配色，畫面會更加多彩。

色彩搭配不僅是整體風(fēng)格色調(diào)把控，還有與場景融合的面板顏色搭配，如何讓整個畫面和諧，比較考驗設(shè)計師的藝術(shù)基礎(chǔ)功底，色彩設(shè)計在可視化應(yīng)用中最重要的是要做到整體思考，不能只顧局部的顏色搭配。

在搭配的時候也要注意不要使用純色互補色進行搭配，在遇到補色，對比色時可以嘗試降低其中一種顏色的純度。

畫面要注意不灰、不粉、不色頻，與行業(yè)相符，不會讓人覺得奇怪。

色彩面積的應(yīng)用也十分重要，在搭配顏色時要注意主色和輔色的色彩面積比例，是決定色調(diào)的重要因素。

上圖是尼古拉斯·加西亞·貝爾蒙特的“美國風(fēng)場圖”，同樣是描述風(fēng)場，可以感受下同色系色彩面積不同，與不同色系帶來的視覺體驗與心理體驗的不同。

雖然顏色可以從研究物理層面上對視覺的沖擊給人帶來的不同感受，但更多對于設(shè)計師而言，能做到共情很重要，需要設(shè)計師自身能體驗到這種色系的差別，有敏感的判斷性，這種需要設(shè)計師多看案例，多觀察生活而不斷訓(xùn)練。

上圖是我們做的圖表配色案例，挑選了6中基礎(chǔ)色規(guī)定了色調(diào)，作出明暗兩套方案。

4. 背景信息視覺暗示

這是可視化大屏設(shè)計中一個小的比較討巧的方式，背景信息雖然在上面講到的視覺層次上來說屬于弱化的低層級，但是背景信息能夠幫助讀者更好地理解可視化數(shù)據(jù)。它能提供一種直觀的印象，并且增強抽象的幾何圖形及顏色與現(xiàn)實世界的聯(lián)系。

設(shè)計時可以通過圖表周圍的文字引入背景信息，例如最近我們做的新型冠狀病毒的疫情地圖與病毒實驗室demo，就適當(dāng)?shù)卦诒尘皥D片和UI元素中引入了和病毒相關(guān)的元素與顏色搭配，可以更容易渲染氣氛，使讀者快速理解到可視化的內(nèi)容主題。如下圖：

5. 巧用留白

留白這個說法在設(shè)計中很常見，但是這個說法并不專業(yè)。留白的設(shè)計方式屬于構(gòu)圖中的一種，也是很考驗設(shè)計師構(gòu)成能力的一個點。如果做設(shè)計時間長的人會發(fā)現(xiàn)，在構(gòu)圖排版的時候，內(nèi)容越多元素越多越好排，內(nèi)容越少越不好做設(shè)計。

現(xiàn)在很多的看起來“高大上”的網(wǎng)頁設(shè)計或者 APP 界面設(shè)計大多都采用了大面積留白，仿佛這是一個設(shè)計趨勢，許多人將這解釋成：現(xiàn)在的信息太多太雜，人們需要整理簡化，設(shè)計也越來越簡化，所以留白盛行。

事實上確實有這種社會趨勢，但是更重要的是對于設(shè)計本身而言，簡潔的設(shè)計是最難的，構(gòu)成設(shè)計是最考驗設(shè)計能力的。優(yōu)秀的留白設(shè)計之所以高大上，并不是因為運用了留白的手段，而是設(shè)計師的構(gòu)成能力十分優(yōu)秀才可以做出如此優(yōu)秀的作品。

6. 動畫的交互運用

動畫與過渡效果可以增加可視化結(jié)果視圖的豐富性與可理解性，增加用戶交互的反饋效果，操作自然、連貫；還可以增強重點信息或者整體畫面的表現(xiàn)力，吸引用戶的關(guān)注力，增加印象。

但是，動畫與過渡使用不當(dāng)會帶來適得其反的效果。如何巧用動畫與過渡，需要做到以下幾點：

• 適量原則：動畫不宜使用過多，避免陷入過渡設(shè)計的危機中。
• 統(tǒng)一原則：相同動畫語義統(tǒng)一、相同行為與動畫保持一致，保持一致的用戶體驗。
• 易理解原則：簡單的形變、適量的時長、易判斷、易捕捉，避免增加觀賞者的認知負擔(dān)。

二、構(gòu)建空間感 & 二維與三維的融合

傳統(tǒng)的數(shù)據(jù)可視化以各種通用圖表組件為主，不能達到炫酷、震撼人心的視覺效果。優(yōu)秀的數(shù)據(jù)可視化設(shè)計需要有炫酷的視覺效果，讓可視化設(shè)計隨時隨地脫穎而出。

這時用三維元素的添加制造出空間感可以大大的加大畫面層次感，且可以多維度觀察，每個角度可能會產(chǎn)生震撼的視覺體驗。下圖是我們做過的一些三維設(shè)計案例：

然而，三維的 web 端場景設(shè)計有一定的局限性，因為 web 端受性能影響，模型只有輕量的模型才可以顯示流暢不卡頓。所以設(shè)計師在設(shè)計時需要嚴(yán)格控制面數(shù)與貼圖量，以保證流暢。

另外，web 端的性能也無法帶動龐大的渲染器，所以我們采用了使用 color 貼圖來表現(xiàn)模型的光影和質(zhì)感。通過三維的項目經(jīng)驗我們也總結(jié)了一套三維設(shè)計流程：

• 準(zhǔn)備階段：理解需求，搜集相關(guān)資料，建模統(tǒng)計列表。
• 開始建模：初步輪廓，模型細化，拓撲低模。
• 展UV。
• 貼圖繪制：烘培AO光影信息，材質(zhì)信息。PS貼圖繪制。
• 搭建場景：導(dǎo)入 Hightopo 引擎，搭建出場景，擺放二維圖標(biāo)。
• 氛圍調(diào)整：添加陰影，環(huán)境光等效果。模型層級關(guān)系，命名與標(biāo)簽繪制。

有許多的大屏設(shè)計案例都會涉及二維和三維相融合，需要整體的考慮風(fēng)格一致。風(fēng)格一致可以從色調(diào)與元素使用樣式來做到統(tǒng)一，沒有違和感。我們直接展示案例來說明：

這是我們做的一個風(fēng)機的案例，以線框的風(fēng)格為主，UI 也配合了線框狀態(tài)的風(fēng)機模型樣式，加上整體顏色的統(tǒng)一，就可以達到一個不違和的效果。

三、小結(jié)

隨著科技的發(fā)展，也許你聽說過有人提出過全自動化便當(dāng)販賣機的概念：所有的烹飪都由機器來進行，然后自動打包放在像自動販賣機的柜子里掃碼售賣。

但是與此相比，我們可能反而更愛早上公司外大爺蒸的腸粉和下班后路邊大媽做的煎餅果子。想必原因每個人心里也都有答案。

設(shè)計也是如此，如今科技已經(jīng)使人提出了各種各樣的人工智能做設(shè)計的案例。但是和烹飪的道理一樣，設(shè)計是不能被機器所取代的——因為靈魂不能被取代，每個人都有每個人獨特的思想，我想這也許是設(shè)計珍貴的原因。

本文由 @Hightopo 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理。未經(jīng)許可，禁止轉(zhuǎn)載。

題圖來自Unsplash，基于CC0協(xié)議