在上一篇文章《數據可??視化設計（1） ：情感化設計指導可視化設計理念》中，什可視化設計根據情感化設計本能、可(ke)視行為、化設反思三種水平，原則提出了清晰&炫酷、什可視化設計內涵、可視共情的化設可視化設計理念。這篇文章，原則我將與大家分享如何用清晰&炫酷、什可視化設計內涵、可視共情的化設可視化設計理念指導可視化(╯°□°）╯︵ ┻━┻設計。（PS：此文討論的原則數據可視化設計主要以大屏為展示載體，不(O_O)考慮其他特殊載體）

設計數據可視化時(shí)，什可視??化設計可以遵循以下原則：

清晰&??;炫酷：美學(xué)原則；合理構建空間感與元素的可視精致感。內涵：正確的化??設可視化故事與視圖選擇；合理的信息密度篩選；數據到可視化的直觀(guān)映射；合適的可視化交互。共情：自然的可視化隱喻；巧用動(dòng)畫(huà)??與過(guò)渡。

可ヽ(′▽?zhuān)?ノ視化設計八大原則（從下往上瀏覽）

一、可視化設計原(′▽?zhuān)?則1：美學(xué)原則

視( ?ω?)覺(jué)是獲取信息最重要的通道，超過(guò)50%的人腦功能用于(???)視覺(jué)┐(′д｀)┌的感知，人腦對美的感知沒(méi)有絕對統一的定義標準，但是有一定的規律可循。要遵守美學(xué)原則，可以從構圖、布局與色彩等角度探索。

1. 構圖美——穩定的構( ?ω?)圖

與心理需求相似，視覺(jué)也有“向??往穩定”的需求，穩定的畫(huà)面感可以使人們獲得安定和舒適感?？梢暬O計承載在高分辨率的大屏上，對畫(huà)面的平衡感要求更加苛刻。設計師對??畫(huà)面的合理組織和安排，以及設計元素自身平衡的物理屬性共同構成平衡的畫(huà)面感。

更精確地說(shuō)，畫(huà)面的構圖形狀、視點(diǎn)的選擇、構圖的平衡感、色彩的平衡感都會(huì )影響整(//ω//)個(gè)可視化畫(huà)面的穩定感。

2. 布局美——合理的信息布局

格式塔原則在用戶(hù)體驗設計，特別是可視化大屏的界面設??計布局中非常關(guān)鍵。利用格式塔原則指導信息布局，可以幫助用戶(hù)一眼就找到他們想要的內容，并一目了然地了解所看到的內容。

合理的信(′_ゝ`)息布局可以借鑒格式塔原則，如下圖所示，具體原則有：Proximity （接近）、S??imilarity （相似）、Closure （閉合）、Continuation （連續）、Simplicity （簡(jiǎn)單）、Symmetry（對稱(chēng)）等(′ω｀)。

3(???). 色彩美——適宜的色彩情感

在數據可視化設計中，色彩是最重要的元素之一。合理利用色彩的情感可(ke)以增強可視化設計的感知效果，調動(dòng)觀(guān)賞者的情緒。

色彩情感指不同波長(cháng)色彩的(′?｀*)光信息作用于人的視覺(jué)器官，通過(guò)視覺(jué)神經(jīng)傳入大腦后，經(jīng)過(guò)思維與以往的記憶及經(jīng)驗產(chǎn)生聯(lián)想，從而形成一系列的色彩心理反應。

不同的色彩給人不同心理感??受(//ω//)，如：紅色代表著(zhù)喜慶、熱情、歡樂(lè )、愛(ài)情、活(huo)力等。但是，很多時(shí)候紅色也與災難、戰爭、憤怒等消極情緒聯(lián)系在一起；藍色會(huì )給人??帶來(lái)友好、和諧、(╯°□°）╯︵ ┻━┻信任、寧靜、希望等積極的情感體驗，也會(huì )給人以冷酷、無(wú)情的心理感受。

不(bu)同的色彩搭配可以表現不同的情感，用(′；ω；`)來(lái)表達與之匹配的可視化設計主題風(fēng)格，調動(dòng)觀(guān)賞者的情感。

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

「同色??系」配色ヽ(′ー｀)ノ-藍紫

「非同色系」配色-紅黑

二、可視化設計原則2：合理地構建空間感與元素的精致感

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

筆者做了大量的數據可視化大屏方案分析后，得出炫酷的數據可視化具有共同的視覺(jué)特征：

高級感、符合可視化主題的顏色搭配；具有很強的空間感，且信息承載性強；高精度材質(zhì)構建出的模型，配合貼近現實(shí)的光影；豐富的粒子流動(dòng)、光圈閃爍等動(dòng)畫(huà)效果。

炫酷的數據可視化大屏效果

三、??可視化設計原則3：正確的可???視化故事與視圖選擇

策劃是數據可視化大屏的靈魂。對可視化故事的提煉、視圖的精心規劃是數據可視化大(da)屏的首要的任務(wù)。

與功能型產(chǎn)品以用戶(hù)的使用場(chǎng)景為出發(fā)?點(diǎn)略微不同，數┐(′д｀)┌據可視化設計還需要重點(diǎn)關(guān)注數據。通過(guò)分析、挖掘數據，提煉數據中所隱藏的可視化故事，然后根據敘述故事的要求，確定正確的視圖。簡(jiǎn)單的數據可視化故事用一個(gè)基本的可視化視圖可以展現，復雜的可視化故事可以規劃多個(gè)視圖，多個(gè)視圖有層次、有順序地展示數據包含的重要信息，表達出相??應的可(ke)視化故事。

首先是發(fā)現問(wèn)題，用(???)(yong)數據可視化的形式展示甲方爸爸的相關(guān)數據，通過(guò)數據發(fā)現存在的問(wèn)題；其次開(kāi)始“畫(huà)餅”，預言用我司產(chǎn)品可以達到的效果。接下來(lái)分??析問(wèn)題，進(jìn)入“秀肌肉”環(huán)節，展示我司產(chǎn)品如何的高大上。最后是解決問(wèn)題，我們可以構建相關(guān)實(shí)戰場(chǎng)景，語(yǔ)言解決可能存在的問(wèn)題，增加說(shuō)服力。

根據可視化故事線(xiàn)，視圖的(de)選取也得到了確認：分析(′Д` )數據（問(wèn)題數據&預言效果）、產(chǎn)品情??況（技術(shù)、能力）(⊙_⊙)、實(shí)際應用場(chǎng)景（預演）。

四、可視化設計原則4：合理的信息密度篩選

一個(gè)好的可視化應當展示合適的信息，而不是越多越好。合理的信息展示，有利于向用??戶(hù)清晰地敘述可視化故事。合理的信息展示需要：

篩選信息密度，使信息展示量恰到好處；區分信息主次，使信息顯示主次(ci)分明。

信息篩選前后對比效果如下圖所示：

失敗的可視化案例可能主要存在兩種極端情況：過(guò)多或者過(guò)少的數據信息展示。

第一種極端情況，可視化設計者想傳遞的信息量(liang)過(guò)多，增加可視化視覺(jué)負擔的同時(shí)，還會(huì )使觀(guān)賞者難以理解，重(zhong)要信息淹??沒(méi)在眾多的次要??信息之中，可視化設計無(wú)法(′-ι_-｀)快速準確地敘述想表達的故事。另一種極端情況，可視化設計者高度精簡(jiǎn)了信息，對用戶(hù)形成了認知障礙，用戶(hù)無(wú)法銜接相關(guān)數據，片段的信息無(wú)法串聯(lián)形成可視化的故事。五、可視化設計原則5：數據到可視化的直觀(guān)映射??

可視化的核心(xin)作用是，使用戶(hù)在最短的時(shí)間內獲取數據ヽ(′▽?zhuān)?ノ所表達的信息。直接觀(guān)察抽象的數據顯然無(wú)法快速獲取數據想表達(T_T)的信息，因此選擇合適的(???)數據到可視化元素的映射，可以提高可視化設計的可用性和功能性。

數據到可視化┐(′?｀)┌元素的映射需充分利┐(′?｀)┌用固有經(jīng)驗，如利用經(jīng)驗，根據數據的特征與表達(da)目的，選取合適的圖表進(jìn)行可視??化。

六、可視化設計原(O_O)則6：恰當的可視化交互

在數據可視化敘事過(guò)程中，可以用信息輪播、動(dòng)畫(huà)等ヽ(′ー｀)ノ效果自動(dòng)切換數據信息，以推進(jìn)可視化故事的敘述。此種取代用戶(hù)主動(dòng)(′ω｀)操作的方式不宜使用過(guò)多，以免產(chǎn)生混亂，對信息讀取造成干擾。

數據可視化設計在需要用戶(hù)交互操作時(shí)，要保證操作的引導性與預見(jiàn)性，做到交互之前有引導，交互之后有反饋，使整個(gè)可視化故事自然、連貫。此外還要保證交互操作的直觀(guān)性、易理解性和易記憶性，降低用戶(hù)的使用門(mén)檻。??

七、可視化設計原則7：自然的可視化隱喻

自(zi)然的可視化隱喻在利用數據敘述故事時(shí)，將陌生的數據信息用可視化用戶(hù)所熟悉的事物進(jìn)(°□°)行比較，有助于增強??可視化用戶(hù)對故事的理解。在情感上也更加容易讓用戶(hù)形成共(gong)鳴，體現出可視化設計的人本思想。

八、可視化設計原則ヾ(′▽?zhuān)??8：巧用動(dòng)畫(huà)與過(guò)渡

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

但是，ヽ(′ー｀)ノ動(dòng)畫(huà)與過(guò)渡使用不當會(huì )帶來(lái)適得其反的效果。如何巧用動(dòng)畫(huà)與過(guò)渡??，需要做到以下幾點(diǎn)：

適(′?｀*)量原則：動(dòng)畫(huà)不宜使用過(guò)多（尤其(qi)是自動(dòng)播放的），避免陷入過(guò)渡設計的危機中；統一原則：相同動(dòng)畫(huà)語(yǔ)義統一、相同行為與動(dòng)畫(huà)保持一致，保持一致的用戶(hù)體驗；易理解原則：簡(jiǎn)單的形變、適量的時(shí)長(cháng)??、易判斷、易捕(╬ ò﹏ó)捉，避免增加觀(guān)賞者的認知負擔。

在什么情況下用動(dòng)畫(huà)與過(guò)渡會(huì )達到事半功倍的效果呢？主要用于以下幾種場(chǎng)景：

（1）輔助不同視圖/不同可視化視覺(jué)通道的變換

如果可視化的信息篩選后，密度仍然較大，那么設計者??通常會(huì )設計多個(gè)視圖(tu)用于展示各種數據表達的信息，不同視圖直接的切換可以使用動(dòng)效或過(guò)渡效果，有助于用戶(hù)跟蹤不同視圖的元素變換?？梢暬曈X(jué)通道（數據量、表現形式/狀態(tài)）發(fā)(′?ω?`)生變化時(shí)，為了減輕視圖變化給用戶(hù)帶來(lái)的“沖擊”，避(???)免用戶(hù)在變化中迷失，可以使用動(dòng)畫(huà)的形式過(guò)渡。

數據變化動(dòng)效

不同圖表類(lèi)型切換動(dòng)效

（2）交互反饋效果

實(shí)時(shí)的反饋效果有助于用戶(hù)獲得此次操作的確認(???)，避免用戶(hù)盲目重復操作。當鼠標移動(dòng)到特定可視化區域，出現光暈或者微動(dòng)效發(fā)生相應變??化，以指引用戶(hù)進(jìn)行操作。

（3）可視化細節：微交互動(dòng)效，引起觀(guān)賞者的注意力

微交互動(dòng)效的視覺(jué)通道經(jīng)常有運動(dòng)、閃爍、虛擬物(wu)體的動(dòng)作等動(dòng)畫(huà)效果，這種微交互動(dòng)效很容易引起觀(guān)賞者的注意力。有重要信息需要觀(guān)賞者快速捕捉時(shí)，可以選擇微交互動(dòng)效吸引用戶(hù)的注意力。此外，微交互也經(jīng)常用(yong)于增加設計的趣味性，提高觀(guān)賞者的興趣，使觀(guān)賞者產(chǎn)生情感上的共鳴。

閃爍動(dòng)效，吸引注意力

PS：此專(zhuān)題相關(guān)文章僅是筆者作為一名設計師的見(jiàn)(jian)解，如有不足之處還望前輩/大神指正，筆者會(huì )繼續修正與完善后續內容，充實(shí)個(gè)人知識??體系。