淺談可視化設計-數據時代的美味「烹飪師」（下篇）

​目錄：

1. 什麼是大屏數據可視化
2. 設計流程介紹

3. 結合情感打造二維設計美感

4. 構建空間感&二維與三維的融合

5. 小結

結合情感打造二維設計美感

上篇咱們講到了《可視化設計-數據時代的美味製造者（上篇）》，分析完了邏輯性的可視化概念與設計流程。

接下來讓咱們開始具體的講解可視化設計進行中的設計方法。

首先，想要設計出一個好看的可視化大屏，藝術性是必不可少的。因此第一步咱們來走進數據藝術的世界中，從理性走入感性，體會相斥相吸所碰撞出的藝術火花給人帶來的視覺盛宴。

1.走進數據藝術

在數據藝術的世界中，要打開想象力，關注數據和情感中的聯繫，準確的說，數據藝術更可能是爲了讓人們去體驗那些讓人感受冰冷而陌生的數據，使它們從無形變爲可見的，可動的，可互動的甚至可觸摸的有形物像。就像是把冰冷的10110010的代碼賦予生命，穿上衣服造成樣貌，讓人一看就能記住這個生命體的樣子，知曉它的信息，更加人性化的與它互動。

上圖是由藝術家格約拉（Quayola）和穆罕穆德·阿克坦（Memo Akten) 在「形態「圖中將競技運動軌跡模擬成粒子數據動畫。視頻中以點線的元素伸展動畫，隨着運動路徑相應移動，讓計算機生成的圖形賦予生命力。

上圖是費爾蘭達·維埃加斯加和馬丁·瓦滕伯格的做品「風圖」（Wind Map），繪製了全美各地風的流動模式。這個可視化的製做很是實用，能夠經過縮放和平移數據庫進行研究，還能夠把鼠標停在某處瞭解該地的風速和風向。地圖上風流動越集中，越快，預報的風速就越大。但這個圖不止實用，還更是一件藝術品，它賦予了環境生命感，一樣使得冷冰冰的氣象數據經過可視化的形式變得有生命力。這即是數據藝術的魅力，也是作可視化設計所追求的方向。

2.創建視覺層次

感性的感覺到數據可視化帶來的藝術感和生命力後，咱們來經過理性的方法爲咱們的可視化增長美感。

當咱們在拿到一張可視化大屏的時候，會快速掃一眼尋找有沒有有趣的東西。並且人眼在看東西時老是趨向於識別引人注目的東西，好比明亮的顏色，較大的物體等突出的有特色的事物。利用這點，咱們能夠用醒目的顏色突出顯示數據，而淡化周圍的輔助元素，拉開背景和數據的層次。也能夠用線條或者線性元素構建一個視覺路徑，把人的視線逐漸引向一個興趣點。這樣就能夠創建一個視覺層次，幫助讀者快速關注到主數據。反之，讀者就會盲目搜索而找不到重點了。

如上圖咱們作的一個簡單的案例，左側的圖弱化了背景元素，明顯比右側的數據可讀性更強，視覺感覺更加溫馨。

上圖來源於 HistoryShots InfoArt ，以上兩張圖是政黨史的演變圖，描述了喬治·華盛頓總統到唐納德·特朗普的迷人視覺歷史。HistoryShots InfoArt 聚集了不少人文，歷史的進程，把複雜凌亂的內容經過藝術性的可視化設計，變得有趣且有邏輯性。他們很擅長運用以上所說的創建視覺路徑的層次創建方法，一步步引導讀者跟隨着引導瞭解到歷史進程，十分抓人眼球。再分享兩例 HistoryShots InfoArt 其餘的可視化設計，以便更深層次的感覺下創建視覺層次的不一樣方法與數據可視化的藝術魅力。

第一張是流行/搖滾音曲譜系圖，該圖表記錄了流行/搖滾音樂及其最暢銷的藝術家的成長和發展。記錄了從1955年到1978年，由左到右的潮流映射了700多位藝術家和30種音樂風格。提供了每一個音樂家成爲主要流行製做者的時間長度。重疊的視覺流動線條使讀者能夠比較多個藝術家在同一時間段的壽命和影響力。而且列出了每一個文體類別的起源和家譜，以及其在總唱片銷售中所佔份額的估計值。

第二張是美國陸軍戰役地圖，此圖顯示了某軍團的路線以及其分配的和附屬的單位。第二十軍於1944年7月做爲喬治·帕頓中將的第三軍的一部分登錄法國，並在法國和德國進行了戰鬥。

如上圖這些案例，視覺層次能夠用來研究數據的過程。假設在以上確立指標分析維度時生成了大量的圖表，能夠用幾張圖來詮釋全景，在其中標註出具體的細節另作二級圖表單獨顯示，這樣會使數據更清晰。此點也說明切勿爲了追求藝術效果而使視覺效果變得凌亂，設計的目的是使數據變得更加清晰易懂，分清層次，能把讀者引向關注焦點。相反，層次不分明的圖則缺乏流動感，讀者很難理解，更難進行細緻研究。

3.適宜的色彩情感

在數據可視化設計中，色彩是最重要的元素之一。合理利用色彩的情感能夠加強可視化設計的感知效果，調動觀賞者的情緒。

不一樣的色彩給人不一樣心理感覺，如：紅色表明着喜慶、熱情、歡樂、愛情、活力等。可是，不少時候紅色也與災難、戰爭、憤怒等消極情緒聯繫在一塊兒；藍色會給人帶來友好、和諧、信任、寧靜、但願等積極的情感體驗，也會給人以冷酷、無情的心理感覺。不一樣的色彩搭配能夠表現不一樣的情感，用來表達與之匹配的可視化設計主題風格，調動觀賞者的情感。

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

色彩搭配不只是總體風格色調把控，還有與場景融合的面板顏色搭配，如何讓整個畫面和諧，比較考驗設計師的藝術基礎功底，色彩設計在可視化應用中最重要的是要作到總體思考，不能只顧局部的顏色搭配。在搭配的時候也要注意不要使用純色互補色進行搭配，在遇到補色，對比色時能夠嘗試下降其中一種顏色的純度。畫面要注意不灰，不粉，不色頻，與行業相符不會讓人以爲奇怪。色彩面積的應用也十分重要，在搭配顏色時要注意主色和輔色的色彩面積比例，是決定色調的重要因素。

上圖是尼古拉斯·加西亞·貝爾蒙特的「美國風場圖」，一樣是描述風場，能夠感覺下同色系色彩面積不一樣，與不一樣色系帶來的視覺體驗與心理體驗的不一樣。雖然顏色能夠從研究物理層面上對視覺的衝擊給人帶來的不一樣感覺，但更多對於設計師而言，能作到共情很重要，須要設計師自身能體驗到這種色系的差異，有敏感的判斷性，這種須要設計師多看案例，多觀察生活而不斷訓練。

上圖是咱們作的圖表配色案例，挑選了6中基礎色規定了色調，做出明暗兩套方案。

4.背景信息視覺暗示

這是可視化大屏設計中一個小的比較討巧的方式，背景信息雖然在上面講到的視覺層次上來講屬於弱化的低層級，可是背景信息可以幫助讀者更好地理解可視化數據。它能提供一種直觀的印象，而且加強抽象的幾何圖形及顏色與現實世界的聯繫。設計時能夠經過圖表周圍的文字引入背景信息，例如最近咱們作的新型冠狀病毒的疫情地圖與病毒實驗室demo，就適當的在背景圖片和UI元素中引入了和病毒相關的元素與顏色搭配，能夠更容易渲染氣氛，使讀者快速理解到可視化的內容主題。以下圖：

5.巧用留白

留白這個說法在設計中很常見，可是這個說法並不專業。留白的設計方式屬於構圖中的一種，也是很考驗設計師構成能力的一個點。若是作設計時間長的人會發現，在構圖排版的時候，內容越多元素越多越好排，內容越少越很差作設計。如今不少的看起來「高大上」的網頁設計或者 APP 界面設計大多都採用了大面積留白，彷彿這是一個設計趨勢，許多人將這解釋成：如今的信息太多太雜，人們須要整理簡化，設計也愈來愈簡化，因此留白盛行。事實上確實有這種社會趨勢，可是更重要的是對於設計自己而言，簡潔的設計是最難的，構成設計是最考驗設計能力的。優秀的留白設計之因此高大上，並非由於運用了留白的手段，而是設計師的構成能力十分優秀才能夠作出如此優秀的做品。

咱們能夠嘗試一下這種訓練：給你一張白紙，如何切三刀構成出富有設計感的畫面？接下來嘗試如何切兩刀構成出富有設計感的畫面？最後嘗試若是隻是切一刀，如何使畫面富有設計感？這樣的訓練能夠培養構成的能力，等到能夠一刀切出藝術品的時候，就能夠稱得上很是優秀的設計師了。

另外，在交互設計中如何留白，也是柵格化佈局的一個應用點。衆所周知，混亂是可讀性的大敵。大量的文字和圖形擠在一塊兒，會讓一幅圖看起來混亂不清。而他們中留一些留白可使圖表變得很容易閱讀。在一張大屏中能夠用留白來分隔圖形，從而劃分出多個圖表，造成模塊化。留白會讓可視化圖表更易於瀏覽和分階段處理。可是留白不可亂用，若不須要劃分視覺元素，就不要用留白，會使內容產生歧義。

上圖是設計師 Valentin Lacoste 的做品 「blank page syndrome」 運用了留白的構成方式設計出藝術性的美學動效。

6.動畫的交互運用

動畫與過渡效果能夠增長可視化結果視圖的豐富性與可理解性，增長用戶交互的反饋效果，操做天然、連貫；還能夠加強重點信息或者總體畫面的表現力，吸引用戶的關注力，增長印象。

可是，動畫與過渡使用不當會帶來拔苗助長的效果。如何巧用動畫與過渡，須要作到如下幾點：

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

第一類交互動畫的做用主要做用於點擊按鈕的過渡動畫，這類動畫應用物理學動力學比較多，經過動效給人更加真實的交互體驗。對於這類 motion design 的教學案例，比較權威的是谷歌的 Material Design ,以下案例：

因爲動畫這部分屬於可視化中的輔助效果成分，具體的設計方法就不在文章中過多贅述，若是有興趣能夠去谷歌 material 設計中的 Motion 板塊學習。

第二類交互動畫能夠用於模擬實物的運動，以及業務需求所須要的動效，使可視化大屏更加生動，展現方式多樣。下圖是咱們作過的一些demo的動畫效果案例爲參考：

綜上所述，在可視化中合理的運用微動畫，很容易引發觀賞者的注意力。有重要信息須要觀賞者快速捕捉時，能夠選擇微交互動效吸引用戶的注意力。此外，微交互也常常用於增長設計的趣味性，提升觀賞者的興趣，使觀賞者產生情感上的共鳴。

構建空間感&二維與三維的融合

傳統的數據可視化以各類通用圖表組件爲主，不能達到炫酷、震撼人心的視覺效果。優秀的數據可視化設計須要有炫酷的視覺效果，讓可視化設計隨時隨地脫穎而出。這時用三維元素的添加製造出空間感能夠大大的加大畫面層次感，且能夠多維度觀察，每一個角度可能會產生震撼的視覺體驗。下圖是咱們作過的一些三維設計案例：

然而，三維的web端場景設計有必定的侷限性，由於web端受性能影響，模型只有輕量的模型才能夠顯示流暢不卡頓。因此設計師在設計時須要嚴格控制面數與貼圖量，以保證流暢。另外，web端的性能也沒法帶動龐大的渲染器，因此咱們採用了使用 color 貼圖來表現模型的光影和質感。經過三維的項目經驗咱們也總結了一套三維設計流程：

• 準備階段：理解需求，蒐集相關資料，建模統計列表
• 開始建模：初步輪廓，模型細化，拓撲低模
• 展UV
• 貼圖繪製：烘培AO光影信息，材質信息。PS貼圖繪製
• 搭建場景：導入 Hightopo 引擎，搭建出場景，擺放二維圖標
• 氛圍調整：添加陰影，環境光等效果。模型層級關係，命名與標籤繪製。

有許多的大屏設計案例都會涉及二維和三維相融合，須要總體的考慮風格一致。風格一致能夠從色調與元素使用樣式來作到統一，沒有違和感。咱們直接展現案例來講明：

這是咱們作的一個招聘 demo，總體用的是插畫風格，二維與三維的融合都使用了插畫風的元素，達到統一的效果。

這是咱們作的一個風機的案例，以線框的風格爲主，UI也配合了線框狀態的風機模型樣式，加上總體顏色的統一，就能夠達到一個不違和的效果。

若是仔細看上方招聘demo的案例會發如今展開的地圖界面裏有一些 2.5d 的元素，2.5d 的設計屬於哪一種界定呢？其實 2.5d 的學術名是軸測插畫或軸測插圖。軸測插圖的意思顧名思義，是一種單面投影圖，在一個投影面上能同時反映出物體三個座標面的形狀，並接近於人們的視覺習慣，形象、逼真，富有立體感。也就是說用二維的製做方式畫出物體的三個面。富有立體感。但軸測插畫須要找透視面，對設計師的空間想象能力要求很高，在製做的時候的難度和時間成本因圖形的複雜程度而定有些會高於三維的工做量。下圖是咱們作過的一個 2.5d 的案例：

還有一種類型的圖，以下圖，許多讀者和客戶看事後會以爲，這種效果看起來也很立體呀，是否是也是屬於 2.5d 呢？

其實這種並不屬於 2.5d，若是咱們仔細觀察每一個圖標，會發現咱們只能看見正面一個面，而沒法看到三個面，因此這種咱們稱爲：寫實風 2d 圖標。寫實風 2d 圖標是經過調圖形的漸變顏色來達到一種立體的效果，可是在繪製時不用找透視，只用繪製正面一個面就能夠，因此製做起來相較於 2.5d 而言就比較簡單，屬於 2d 製做範疇的工做量。因此 2.5d 的界定範圍並非以寫實的效果而定的，而是以物體透視所展出的觀測面數而決定的。2.5d 之因此看起來立體是由於展現的面數多，而寫實風 2d 之因此看起來立體是經過顏色漸變造成的一種視覺效果，二者雖然看起來不容易分別可是在設計師繪製的方法和工做量上卻大大不一樣。

綜上所述咱們結合了正確的設計流程，適當的設計思惟，便捷的設計技巧，二維三維的結合與豐富的動效和人性化的交互體驗，一個合格的可視化設計就完成了。想要查看更多的案例能夠訪問咱們的官網：https://www.hightopo.com/demos/index.html

小結

前言說過，設計就像烹飪，雖然每一道菜都有它的菜譜，油鹽醬醋的比例都寫的很是詳細，可是每一個人作同一道菜的味道仍是各有不一樣。可視化設計也是如此，咱們能夠總結規定出許多原則，步驟，設計方法，一開始能夠嚴格遵照這些規定作出好看的可視化大屏，但隨着每一個設計師的經驗不一樣，會漸漸根據本身全部用的和看到的作出調整，就會設計出與時俱進的做品，有個性的做品。

隨着科技的發展，也許你據說過有人提出過全自動化便當販賣機的概念：全部的烹飪都由機器來進行，而後自動打包放在像自動販賣機的櫃子裏掃碼售賣。可是與此相比，咱們可能反而更愛早上公司外大爺蒸的腸粉和下班後路邊大媽作的煎餅果子。想必緣由每一個人心理也都有答案。設計也是如此，現在科技已經令人提出了各類各樣的人工智能作設計的案例。可是和烹飪的道理同樣，設計是不能被機器所取代的——由於靈魂不能被取代，每一個人都有每一個人獨特的思想，我想這也許是設計珍貴的緣由。

但願咱們設計的每一張可視化大屏均可以迴歸到行業裏，體現出設計師所理解的數據作出的設計後爲社會生活帶來的真實的價值。就算它可能不夠炫酷，不夠時尚，可是它的每一項數據的表現，每個元素的繪製，都是通過細節的設計雕琢，細節決定成敗。

最後，我認爲一個好的設計標準不是它好很差看，由於好看的標準不少，每一個人的審美都會不同。咱們在評估設計的時候要評估它合不合適，最合適的設計，最合適的方案，就是最好的設計。

參考文獻：

1.數據可視化設計（1）情感化設計指導可視化設計理念 —— Nemo

2.數據可視化設計（2）：可視化設計原則 —— Nemo

3.如何作大屏數據可視化設計？超全面設計指南 —— 魚大大設計鋪

4.Data V數據可視化：一屏在手萬物可視，企業如何在數據浪潮中脫穎而出？ —— 數據智能小二

5.數據之美：一本書學會可視化設計 —— Nathan Yau