推薦！你的眼睛喜歡看什么？

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

接下來我們來看個"栗子"，逛超市的時候，滿是商品的貨架上，如圖：

你會關注哪個商品呢？我相信，我們的大腦永遠在選擇最簡單、最直接的、最特別的呈現形式的事物，因為這些信息不需要經過大腦的轉換，夠直觀！不知道 各位，小時候有沒有看過寓言故事類型的連環畫，那些可愛的卡通人物，場景，完全直觀地活靈活現地展示了一個個場景在眼前，我們完全沉醉于其中，這都說明， 人的大腦喜歡直接的信息傳遞。

今天的我們生存在一個大數據的時代，密密麻麻的數字，龐大的數據庫，充斥了我們的大腦，請問各位還會有興趣去挖掘這些數據里潛在的秘密嗎？我猜應該 沒有吧！大家的時間太寶貴了，于是有了數據可視化，數據可視化的使命跟職責就是讓我們能從可視化的圖標里看到數據的關系，本質，趨勢。

數據可視化就是通過可視化手段將枯燥的數據圖形化，直觀化展示給用戶。

明白了數據可視化的使命，讓我們來看看當前業界的可視化平臺都是如何樹立自己品牌形象且抓住用戶去使用這個平臺的呢？

1."數據可視化"交互布局

首頁——上下結構布局

通過目前線上比較知名的國內外數據分析平臺首頁設計，不難發現，其首頁的架構分為上下布局，更多的是通過Banner圖來展示自己的特性，其次再通 過一個個案例來進行事例說明，或者擺出各種合作伙伴Logo來提升自我品牌形象。首頁的輪播Banner圖通常起到的作用是介紹該平臺的數據分析的特點， 通常通過這幾個方面來展示Banner圖，數據的呈現的速度、數據容量、用戶體驗、服務品質、分析的維度、多種自定義設置配置——人性化設置，其次首頁也 不可缺少的就是"新手指引"。

內頁——結構布局

根據多個案例分析，視覺可視化的交互基本分為兩類：

下圖屬于信息層級關系很明確，不是直觀展示數據，缺點：數據隱藏很深，很難讓用戶產生興趣繼續查看；優點：可承載數據量大。

下圖屬于信息扁平化呈現，數據展示直觀，缺點：承載數據量少；優點：數據展示直觀，用戶容易在查看的過程中挖掘自己的興趣點。

2."數據可視化"設計元素

認知心理學和圖形設計

信息可視化的兩大基礎是認知心理學和圖形設計，認知心理學是理論基礎，圖形設計是實踐操作。可視化不僅僅是視覺上的，該 領域的研究人員也嘗試著將聽覺、嗅覺和觸覺融合進去（比如針對殘障人士的設計）。在《信息可視化的基本過程和與主要研究領域》一文中，作者將視覺上的可視 化變量分為 7 種：位置、形狀、大小、方向、色彩、紋理、灰度，有時候也會將色彩分為色相、亮度和飽和度。基本上所有的信息可視化應用都是一個或多個變量的組合。不同的 視覺變量在呈現數據各有優劣（從認知角度），如下表所示：

——文案內容摘自百度百科知道

數據可視化——呈現形式

通常目前數據可視化的表現形式，我們最熟悉的有餅圖、直方圖、散點圖、柱狀圖，而這些都是最原始的統計圖表。

餅狀圖
用圓內各個扇形的大小表示各部分量占總量的百分之幾

直方圖
將一個變量的不同等級的相對頻數用矩形塊標繪的圖表(每一矩形的面積對應于頻數)

柱狀圖
是一種以長方形的長度為變量的表達圖形的統計報告圖，由一系列高度不等的縱向條紋表示數據分布的情況，用來比較兩個或以上的價值（不同時間或者不同條件），只有一個變量，通常利用于較小的數據集分析

散點圖
用兩組數據構成多個坐標點，考察坐標點的分布，判斷兩變量之間是否存在某種關聯或總結坐標點的分布模式

數據可視化——呈現方法

a. 將指標值圖形化
一個指標就是一個數據，將數據的大小以圖形的方式呈現。比如用柱狀圖的長度或高度表現數據大小。

b. 將指標圖形化
一般用與指標含義相近的ICON來表現

c. 將指標關系圖形化
當存在多個指標時，挖掘指標之間的關系，并將其圖形化表達，可提升圖表的可視化深度。

借助已有的場景來表現
聯想自然界或者社會現象里有無與指標關系類似的，然后借助此場景來表現數據。比如下圖，是統計全球使用操作系統分布圖，首先分為windows、mac還有其他操作系統，windows又包含XP、2003等多種子系統。

構建場景來表現
指標之間往往具有一些關聯特征，如從簡單到復雜，從低級到高級，從前到后等，如無法找到相對應的場景，也可以自己構建。支付寶新出的個人年度賬單中，在描述付款最多的三項時，構建了一個領獎臺的形式：

d. 將時間和空間可視化
時間：通過時間的維度來查看指標值的變化情況，一般通過增加時間軸的形式，地圖作為主要背景呈現所有信息點
空間：當圖表存在地域信息并且需要突出的表現的時候，可用地圖將空間可視化，地圖作為主背景呈現所有信息點

e. 將數據進行概念轉換
所謂的數據概念轉換，即我們生活中喝水的時候通常只會說喝一杯水，但不會說喝30ML的水，一個確實的數據展示，我們是難以感知的，但是用一個杯子來概念轉換，我們很容易感知到其大小。

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

f. 讓"圖表"動起來
數據圖形化完成后，可結合實際情況，將其變為動態化和可操控性的圖表，用戶在操控過程中能更好地感知數據的變化過程，提升體驗。實現動態化通常以下兩種方式： 交互和動畫。

小結：

數據可視化的可以分為以下幾個步驟：

數據可視化——視覺元素分析

接下來我們來看看目前線上的數據可視化平臺視覺設計：

通過這些案例，我們會發現設計上都有普遍的共性：

a. 在顏色的使用上都偏暖色系；
b. 顏色的數量上不超過5種；
c. 顏色使用上基本保持識別度高的色彩，如紅、綠、藍、黑、灰；
d. 背景色使用上以白，灰為主；
e. 字體的使用上只使用一種字體

推薦

"數據可視化"信息圖制作工具

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

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

StatSilk
StatSilk有網頁版和桌面客戶端，為用戶提供了具有更強交互性的，自定義極高的和栩栩如生的圖形、圖標、地圖和其他可視化數據制作精美的信息圖形。

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

當然，還有眾多的在線制作信息圖的網站等著你去嘗試：
1、Stat Planet:能讓你做出很炫的互動信息圖，成品可以輸出成互動型或者靜態圖片。缺點是只能用網站本身提供一些調研數據，制作成自己的圖表。
2、Hohli:簡單易用，設計很人性化。你可以簡單的選擇圖表類型，添加數據，調整尺寸，顏色，預覽成品。用它做出來的圖表漂亮，精致。
3、Many Eyes:這里提供的圖表/形很精美，看起來很專業。
4、Wordle:能把純文本通過特別的排列做成圖形，你可以導入整本書，一個小段落等等。
5、Tableau:用于Windows平臺的免費制作圖表軟件。它做出來的圖表色彩鮮艷，很獨特。
6、GapMinder:Adobe公司出品的制作圖表的軟件,并且提供很多行業的數據，如美國農業，美國城市發展數據等。

原文地址：騰訊ISUXhttp://isux.tencent.com/date-visualisation.html

 
================關于優設網================
"優設網uisdc.com"是一個分享網頁設計、無線端設計以及PS教程的干貨網站。
【特色推薦】
設計講座：每月邀請國內互聯網公司設計前輩及行業總監在群內及YY語音（YY頻道：15335158）分享實戰經驗。
設計微博：擁有粉絲量47萬的人氣微博@優秀網頁設計 ，歡迎關注獲取網頁設計資源、下載頂尖設計素材。
設計導航：全球頂尖設計網站推薦，設計師必備導航：http://hao.uisdc.com
———————————————————–
想在手機上、被窩里獲取設計教程、經驗分享和各種意想不到的"福利"嗎？
添加 優秀網頁設計 微信號：【youshege】優設哥的全拼
您也可以通過掃描下方二維碼快速添加：