亚洲精品中文字幕无码蜜桃,欧美一区二区三区性视频

搜索

APP

起點課堂會員權(quán)益

職業(yè)體系課特權(quán)

線下行業(yè)大會特權(quán)

個人IP打造特權(quán)

30+門專項技能課

1300+專題課程

12場職場軟技能直播

12場求職輔導直播

12場專業(yè)技能直播

會員專屬社群

榮耀標識

發(fā)布

注冊 | 登錄

數(shù)據(jù)可視化設(shè)計（2）：可視化設(shè)計原則

Nemo

2019-05-09

2 評論 32411 瀏覽 122 收藏

16 分鐘

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

設(shè)計數(shù)據(jù)可視化時，可以遵循以下原則：

清晰&炫酷：美學原則；合理構(gòu)建空間感與元素的精致感。
內(nèi)涵：正確的可視化故事與視圖選擇；合理的信息密度篩選；數(shù)據(jù)到可視化的直觀映射；合適的可視化交互。
共情：自然的可視化隱喻；巧用動畫與過渡。

可視化設(shè)計八大原則（從下往上瀏覽）

一、可視化設(shè)計原則1：美學原則

視覺是獲取信息最重要的通道，超過50%的人腦功能用于視覺的感知，人腦對美的感知沒有絕對統(tǒng)一的定義標準，但是有一定的規(guī)律可循。要遵守美學原則，可以從構(gòu)圖、布局與色彩等角度探索。

1. 構(gòu)圖美——穩(wěn)定的構(gòu)圖

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

更精確地說，畫面的構(gòu)圖形狀、視點的選擇、構(gòu)圖的平衡感、色彩的平衡感都會影響整個可視化畫面的穩(wěn)定感。

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

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

合理的信息布局可以借鑒格式塔原則，如下圖所示，具體原則有：Proximity （接近）、Similarity （相似）、Closure （閉合）、Continuation （連續(xù)）、Simplicity?（簡單）、Symmetry（對稱）等。

3. 色彩美——適宜的色彩情感

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

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

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

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

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

「同色系」配色-藍紫

「非同色系」配色-紅黑

二、可視化設(shè)計原則2：合理地構(gòu)建空間感與元素的精致感

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

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

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

炫酷的數(shù)據(jù)可視化大屏效果

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

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

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

舉個例子：某公司需要通過數(shù)據(jù)向甲方爸爸展示公司某款產(chǎn)品的能力。如何用一套可視化解決方案hold住甲方爸爸？首先需要策劃一個令人信服的可視化故事，這里引用發(fā)現(xiàn)問題→分析問題→解決問題的思路構(gòu)建可視化故事。

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

根據(jù)可視化故事線，視圖的選取也得到了確認：分析數(shù)據(jù)（問題數(shù)據(jù)&預(yù)言效果）、產(chǎn)品情況（技術(shù)、能力）、實際應(yīng)用場景（預(yù)演）。

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

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

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

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

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

第一種極端情況，可視化設(shè)計者想傳遞的信息量過多，增加可視化視覺負擔的同時，還會使觀賞者難以理解，重要信息淹沒在眾多的次要信息之中，可視化設(shè)計無法快速準確地敘述想表達的故事。
另一種極端情況，可視化設(shè)計者高度精簡了信息，對用戶形成了認知障礙，用戶無法銜接相關(guān)數(shù)據(jù)，片段的信息無法串聯(lián)形成可視化的故事。

五、可視化設(shè)計原則5：數(shù)據(jù)到可視化的直觀映射

可視化的核心作用是，使用戶在最短的時間內(nèi)獲取數(shù)據(jù)所表達的信息。直接觀察抽象的數(shù)據(jù)顯然無法快速獲取數(shù)據(jù)想表達的信息，因此選擇合適的數(shù)據(jù)到可視化元素的映射，可以提高可視化設(shè)計的可用性和功能性。

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

六、可視化設(shè)計原則6：恰當?shù)目梢暬换?/h2>
在數(shù)據(jù)可視化敘事過程中，可以用信息輪播、動畫等效果自動切換數(shù)據(jù)信息，以推進可視化故事的敘述。此種取代用戶主動操作的方式不宜使用過多，以免產(chǎn)生混亂，對信息讀取造成干擾。

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

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

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

本體與喻體之間存在某種關(guān)聯(lián)或相似性，這樣的可視化隱喻顯得自然而不突兀，具象的模型可以降低可視化用戶的理解門檻，加深對產(chǎn)品的印象。比如：利用車間生產(chǎn)流程表現(xiàn)數(shù)據(jù)治理的過程，實體工業(yè)生產(chǎn)的過程完美詮釋出抽象的數(shù)據(jù)旅程；用零件加工的過程隱喻人腦對信息的認知，并將信息轉(zhuǎn)化為知識存儲、使用的全過程。

八、可視化設(shè)計原則8：巧用動畫與過渡

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

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

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

在什么情況下用動畫與過渡會達到事半功倍的效果呢？主要用于以下幾種場景：

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

如果可視化的信息篩選后，密度仍然較大，那么設(shè)計者通常會設(shè)計多個視圖用于展示各種數(shù)據(jù)表達的信息，不同視圖直接的切換可以使用動效或過渡效果，有助于用戶跟蹤不同視圖的元素變換。
可視化視覺通道（數(shù)據(jù)量、表現(xiàn)形式/狀態(tài)）發(fā)生變化時，為了減輕視圖變化給用戶帶來的“沖擊”，避免用戶在變化中迷失，可以使用動畫的形式過渡。

數(shù)據(jù)變化動效

不同圖表類型切換動效

（2）交互反饋效果

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

（3）可視化細節(jié)：微交互動效，引起觀賞者的注意力

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