引言

每一天從我們睜眼開(kāi)始，我們就開(kāi)始不斷地接收著這個(gè)世界傳遞給我們的各種信息，海量的信息不斷地充斥著我們的眼球、大腦。如此龐大的信息庫(kù)，我們平時(shí)都在看什么呢？不知道各位有沒(méi)有這樣的經(jīng)歷，走在大街上，你最容易被什么樣的人群所吸引呢？毋庸置疑，必然是精心打扮的女生！

接下來(lái)我們來(lái)看個(gè)“栗子”，逛超市的時(shí)候，滿是商品的貨架上，如圖

你會(huì)關(guān)注哪個(gè)商品呢？我相信，我們的大腦永遠(yuǎn)在選擇最簡(jiǎn)單、最直接的、最特別的呈現(xiàn)形式的事物，因?yàn)檫@些信息不需要經(jīng)過(guò)大腦的轉(zhuǎn)換，夠直觀！不知道各位，小時(shí)候有沒(méi)有看過(guò)寓言故事類型的連環(huán)畫，那些可愛(ài)的卡通人物，場(chǎng)景，完全直觀地活靈活現(xiàn)地展示了一個(gè)個(gè)場(chǎng)景在眼前，我們完全沉醉于其中，這都說(shuō)明，人的大腦喜歡直接的信息傳遞。

今天的我們生存在一個(gè)大數(shù)據(jù)的時(shí)代，密密麻麻的數(shù)字，龐大的數(shù)據(jù)庫(kù)，充斥了我們的大腦，請(qǐng)問(wèn)各位還會(huì)有興趣去挖掘這些數(shù)據(jù)里潛在的秘密嗎？我猜應(yīng)該沒(méi)有吧！大家的時(shí)間太寶貴了，于是有了數(shù)據(jù)可視化，數(shù)據(jù)可視化的使命跟職責(zé)就是讓我們能從可視化的圖標(biāo)里看到數(shù)據(jù)的關(guān)系，本質(zhì)，趨勢(shì)。

數(shù)據(jù)可視化就是通過(guò)可視化手段將枯燥的數(shù)據(jù)圖形化，直觀化展示給用戶。

明白了數(shù)據(jù)可視化的使命，讓我們來(lái)看看當(dāng)前業(yè)界的可視化平臺(tái)都是如何樹(shù)立自己品牌形象且抓住用戶去使用這個(gè)平臺(tái)的呢？

1.“數(shù)據(jù)可視化”交互布局

• ?首頁(yè)——上下結(jié)構(gòu)布局

通過(guò)目前線上比較知名的國(guó)內(nèi)外數(shù)據(jù)分析平臺(tái)首頁(yè)設(shè)計(jì)，不難發(fā)現(xiàn)，其首頁(yè)的架構(gòu)分為上下布局，更多的是通過(guò)Banner圖來(lái)展示自己的特性，其次再通過(guò)一個(gè)個(gè)案例來(lái)進(jìn)行事例說(shuō)明，或者擺出各種合作伙伴L(zhǎng)ogo來(lái)提升自我品牌形象。首頁(yè)的輪播Banner圖通常起到的作用是介紹該平臺(tái)的數(shù)據(jù)分析的特點(diǎn)，通常通過(guò)這幾個(gè)方面來(lái)展示Banner圖，數(shù)據(jù)的呈現(xiàn)的速度、數(shù)據(jù)容量、用戶體驗(yàn)、服務(wù)品質(zhì)、分析的維度、多種自定義設(shè)置配置——人性化設(shè)置，其次首頁(yè)也不可缺少的就是“新手指引”。

• 內(nèi)頁(yè)——結(jié)構(gòu)布局

根據(jù)多個(gè)案例分析，視覺(jué)可視化的交互基本分為兩類：

下圖屬于信息層級(jí)關(guān)系很明確，不是直觀展示數(shù)據(jù)，缺點(diǎn)：數(shù)據(jù)隱藏很深，很難讓用戶產(chǎn)生興趣繼續(xù)查看；優(yōu)點(diǎn)：可承載數(shù)據(jù)量大。

下圖屬于信息扁平化呈現(xiàn)，數(shù)據(jù)展示直觀，缺點(diǎn)：承載數(shù)據(jù)量少；優(yōu)點(diǎn)：數(shù)據(jù)展示直觀，用戶容易在查看的過(guò)程中挖掘自己的興趣點(diǎn)。

2.“數(shù)據(jù)可視化”設(shè)計(jì)元素

認(rèn)知心理學(xué)和圖形設(shè)計(jì)

信息可視化的兩大基礎(chǔ)是認(rèn)知心理學(xué)和圖形設(shè)計(jì)，認(rèn)知心理學(xué)是理論基礎(chǔ)，圖形設(shè)計(jì)是實(shí)踐操作?？梢暬粌H僅是視覺(jué)上的，該領(lǐng)域的研究人員也嘗試著將聽(tīng)覺(jué)、嗅覺(jué)和觸覺(jué)融合進(jìn)去（比如針對(duì)殘障人士的設(shè)計(jì)）。在《信息可視化的基本過(guò)程和與主要研究領(lǐng)域》一文中，作者將視覺(jué)上的可視化變量分為 7 種：位置、形狀、大小、方向、色彩、紋理、灰度，有時(shí)候也會(huì)將色彩分為色相、亮度和飽和度?；旧纤械男畔⒖梢暬瘧?yīng)用都是一個(gè)或多個(gè)變量的組合。不同的視覺(jué)變量在呈現(xiàn)數(shù)據(jù)各有優(yōu)劣（從認(rèn)知角度），如下表所示：

——文案內(nèi)容摘自百度百科知道

• 數(shù)據(jù)可視化——呈現(xiàn)形式

通常目前數(shù)據(jù)可視化的表現(xiàn)形式，我們最熟悉的有餅圖、直方圖、散點(diǎn)圖、柱狀圖，而這些都是最原始的統(tǒng)計(jì)圖表。

餅狀圖

用圓內(nèi)各個(gè)扇形的大小表示各部分量占總量的百分之幾

直方圖

將一個(gè)變量的不同等級(jí)的相對(duì)頻數(shù)用矩形塊標(biāo)繪的圖表(每一矩形的面積對(duì)應(yīng)于頻數(shù))

柱狀圖

是一種以長(zhǎng)方形的長(zhǎng)度為變量的表達(dá)圖形的統(tǒng)計(jì)報(bào)告圖，由一系列高度不等的縱向條紋表示數(shù)據(jù)分布的情況，用來(lái)比較兩個(gè)或以上的價(jià)值（不同時(shí)間或者不同條件），只有一個(gè)變量，通常利用于較小的數(shù)據(jù)集分析

散點(diǎn)圖

用兩組數(shù)據(jù)構(gòu)成多個(gè)坐標(biāo)點(diǎn)，考察坐標(biāo)點(diǎn)的分布，判斷兩變量之間是否存在某種關(guān)聯(lián)或總結(jié)坐標(biāo)點(diǎn)的分布模式

• 數(shù)據(jù)可視化——呈現(xiàn)方法

a.?將指標(biāo)值圖形化

一個(gè)指標(biāo)就是一個(gè)數(shù)據(jù)，將數(shù)據(jù)的大小以圖形的方式呈現(xiàn)。比如用柱狀圖的長(zhǎng)度或高度表現(xiàn)數(shù)據(jù)大小。

b.?將指標(biāo)圖形化

一般用與指標(biāo)含義相近的ICON來(lái)表現(xiàn)

c.?將指標(biāo)關(guān)系圖形化

當(dāng)存在多個(gè)指標(biāo)時(shí)，挖掘指標(biāo)之間的關(guān)系，并將其圖形化表達(dá)，可提升圖表的可視化深度。

借助已有的場(chǎng)景來(lái)表現(xiàn)

聯(lián)想自然界或者社會(huì)現(xiàn)象里有無(wú)與指標(biāo)關(guān)系類似的，然后借助此場(chǎng)景來(lái)表現(xiàn)數(shù)據(jù)。比如下圖，是統(tǒng)計(jì)全球使用操作系統(tǒng)分布圖，首先分為windows、mac還有其他操作系統(tǒng)，windows又包含XP、2003等多種子系統(tǒng)。

構(gòu)建場(chǎng)景來(lái)表現(xiàn)

指標(biāo)之間往往具有一些關(guān)聯(lián)特征，如從簡(jiǎn)單到復(fù)雜，從低級(jí)到高級(jí)，從前到后等，如無(wú)法找到相對(duì)應(yīng)的場(chǎng)景，也可以自己構(gòu)建。支付寶新出的個(gè)人年度賬單中，在描述付款最多的三項(xiàng)時(shí)，構(gòu)建了一個(gè)領(lǐng)獎(jiǎng)臺(tái)的形式：

d.?將時(shí)間和空間可視化

時(shí)間：通過(guò)時(shí)間的維度來(lái)查看指標(biāo)值的變化情況，一般通過(guò)增加時(shí)間軸的形式，地圖作為主要背景呈現(xiàn)所有信息點(diǎn)

空間：當(dāng)圖表存在地域信息并且需要突出的表現(xiàn)的時(shí)候，可用地圖將空間可視化，地圖作為主背景呈現(xiàn)所有信息點(diǎn)

e.?將數(shù)據(jù)進(jìn)行概念轉(zhuǎn)換

所謂的數(shù)據(jù)概念轉(zhuǎn)換，即我們生活中喝水的時(shí)候通常只會(huì)說(shuō)喝一杯水，但不會(huì)說(shuō)喝30ML的水，一個(gè)確實(shí)的數(shù)據(jù)展示，我們是難以感知的，但是用一個(gè)杯子來(lái)概念轉(zhuǎn)換，我們很容易感知到其大小。

如果只看左半部分中國(guó)煙民的數(shù)量：32000000，知道數(shù)據(jù)量級(jí)很大，但具體有多大卻很難感知；直到看到右半部分：中國(guó)煙民數(shù)量超過(guò)了美國(guó)人口總和，這樣一對(duì)比，對(duì)數(shù)據(jù)的感知就加深了。

f.?讓“圖表”動(dòng)起來(lái)

數(shù)據(jù)圖形化完成后，可結(jié)合實(shí)際情況，將其變?yōu)閯?dòng)態(tài)化和可操控性的圖表，用戶在操控過(guò)程中能更好地感知數(shù)據(jù)的變化過(guò)程，提升體驗(yàn)。實(shí)現(xiàn)動(dòng)態(tài)化通常以下兩種方式：?交互和動(dòng)畫。

小結(jié)：

數(shù)據(jù)可視化的可以分為以下幾個(gè)步驟：

• 數(shù)據(jù)可視化——視覺(jué)元素分析

接下來(lái)我們來(lái)看看目前線上的數(shù)據(jù)可視化平臺(tái)視覺(jué)設(shè)計(jì)：

通過(guò)這些案例，我們會(huì)發(fā)現(xiàn)設(shè)計(jì)上都有普遍的共性：

a.?在顏色的使用上都偏暖色系；

b.?顏色的數(shù)量上不超過(guò)5種；

c.?顏色使用上基本保持識(shí)別度高的色彩，如紅、綠、藍(lán)、黑、灰；

d.?背景色使用上以白，灰為主；

e.?字體的使用上只使用一種字體

推薦

“數(shù)據(jù)可視化”信息圖制作工具

在茫茫的文字海洋里解讀你的疑問(wèn)，已經(jīng)是過(guò)時(shí)的形式了，并且也是低效率的工作方式了。上篇大篇幅的介紹了數(shù)據(jù)可視化平臺(tái)的設(shè)計(jì)展示形式，其目的與意義都是為了給用戶帶來(lái)方便，讓大量的數(shù)據(jù)信息直觀地展示給用戶，為用戶提供更易解讀，更有樂(lè)趣，更加美觀，快捷的獲取信息的方式。但是可視化的圖形制作卻也大大地為難了設(shè)計(jì)師，這里為廣大苦惱的感性的悲催的視覺(jué)設(shè)計(jì)師們提供一些小工具——輕松制作超贊的信息圖形。

infogr.am

Infogr.am仍然是面向非設(shè)計(jì)師的信息圖形設(shè)計(jì)工具。它允許用戶將數(shù)據(jù)傳到網(wǎng)站上并將其解讀成圖表模式，允許用戶自定義圖形，并提供更多智能化界面展示信息。

StatSilk

StatSilk有網(wǎng)頁(yè)版和桌面客戶端，為用戶提供了具有更強(qiáng)交互性的，自定義極高的和栩栩如生的圖形、圖標(biāo)、地圖和其他可視化數(shù)據(jù)制作精美的信息圖形。

看到這里是不是挑起了你的興趣了呢？

當(dāng)然，還有眾多的在線制作信息圖的網(wǎng)站等著你去嘗試：

1.Stat Planet:能讓你做出很炫的互動(dòng)信息圖，成品可以輸出成互動(dòng)型或者靜態(tài)圖片。缺點(diǎn)是只能用網(wǎng)站本身提供一些調(diào)研數(shù)據(jù)，制作成自己的圖表。

2.Hohli:簡(jiǎn)單易用，設(shè)計(jì)很人性化。你可以簡(jiǎn)單的選擇圖表類型，添加數(shù)據(jù)，調(diào)整尺寸，顏色，預(yù)覽成品。用它做出來(lái)的圖表漂亮，精致。

3.Many Eyes:這里提供的圖表/形很精美，看起來(lái)很專業(yè)。

4.Wordle:能把純文本通過(guò)特別的排列做成圖形，你可以導(dǎo)入整本書，一個(gè)小段落等等。

5.Tableau:用于Windows平臺(tái)的免費(fèi)制作圖表軟件。它做出來(lái)的圖表色彩鮮艷，很獨(dú)特。

6.GapMinder:Adobe公司出品的制作圖表的軟件,并且提供很多行業(yè)的數(shù)據(jù)，如美國(guó)農(nóng)業(yè)，美國(guó)城市發(fā)展數(shù)據(jù)等。