引言數據庫
每一天從咱們睜眼開始,咱們就開始不斷地接收着這個世界傳遞給咱們的各類信息,海量的信息不斷地充斥着咱們的眼球、大腦。如此龐大的信息庫,咱們平時都在看什麼呢?不知道各位有沒有這樣的經歷,走在大街上,你最容易被什麼樣的人羣所吸引呢?毋庸置疑,必然是精心打扮的女生!windows
接下來咱們來看個「栗子」,逛超市的時候,盡是商品的貨架上,如圖 互聯網的一些事架構
你會關注哪一個商品呢?我相信,咱們的大腦永遠在選擇最簡單、最直接的、最特別的呈現形式的事物,由於這些信息不須要通過大腦的轉換,夠直觀!不知道各位,小時候有沒有看過寓言故事類型的連環畫,那些可愛的卡通人物,場景,徹底直觀地活靈活現地展現了一個個場景在眼前,咱們徹底沉醉於其中,這都說明,人的大腦喜歡直接的信息傳遞。工具
今天的咱們生存在一個大數據的時代,密密麻麻的數字,龐大的數據庫,充斥了咱們的大腦,請問各位還會有興趣去挖掘這些數據裏潛在的祕密嗎?我猜應該沒有吧!你們的時間太寶貴了,因而有了數據可視化,數據可視化的使命跟職責就是讓咱們能從可視化的圖標裏看到數據的關係,本質,趨勢。佈局
數據可視化就是經過可視化手段將枯燥的數據圖形化,直觀化展現給用戶。字體
明白了數據可視化的使命,讓咱們來看看當前業界的可視化平臺都是如何樹立本身品牌形象且抓住用戶去使用這個平臺的呢?大數據
1.「數據可視化」交互佈局動畫
首頁——上下結構佈局網站
經過目前線上比較知名的國內外數據分析平臺首頁設計,不難發現,其首頁的架構分爲上下佈局,更多的是經過Banner圖來展現本身的特性,其次再經過一個個案例來進行事例說明,或者擺出各類合做夥伴Logo來提高自我品牌形象。首頁的輪播Banner圖一般起到的做用是介紹該平臺的數據分析的特色,一般經過這幾個方面來展現Banner圖,數據的呈現的速度、數據容量、用戶體驗、服務品質、分析的維度、多種自定義設置配置——人性化設置,其次首頁也不可缺乏的就是「新手指引」。spa
內頁——結構佈局
根據多個案例分析,視覺可視化的交互基本分爲兩類: 互聯網的一些事
下圖屬於信息層級關係很明確,不是直觀展現數據,缺點:數據隱藏很深,很難讓用戶產生興趣繼續查看;優勢:可承載數據量大。 互聯網的一些事
下圖屬於信息扁平化呈現,數據展現直觀,缺點:承載數據量少;優勢:數據展現直觀,用戶容易在查看的過程當中挖掘本身的興趣點。 yixieshi.com
2.「數據可視化」設計元素
認知心理學和圖形設計
信息可視化的兩大基礎是認知心理學和圖形設計,認知心理學是理論基礎,圖形設計是實踐操做。可視化不只僅是視覺上的,該領域的研究人員也嘗試着將聽覺、嗅覺和觸覺融合進去(好比針對殘障人士的設計)。在《信息可視化的基本過程和與主要研究領域》一文中,做者將視覺上的可視化變量分爲 7 種:位置、形狀、大小、方向、色彩、紋理、灰度,有時候也會將色彩分爲色相、亮度和飽和度。基本上全部的信息可視化應用都是一個或多個變量的組合。不一樣的視覺變量在呈現數據各有優劣(從認知角度),以下表所示:
——文案內容摘自百度百科知道
數據可視化——呈現形式 互聯網的一些事
一般目前數據可視化的表現形式,咱們最熟悉的有餅圖、直方圖、散點圖、柱狀圖,而這些都是最原始的統計圖表。
餅狀圖
用圓內各個扇形的大小表示各部份量佔總量的百分之幾
直方圖
將一個變量的不一樣等級的相對頻數用矩形塊標繪的圖表(每一矩形的面積對應於頻數)
柱狀圖
是一種以長方形的長度爲變量的表達圖形的統計報告圖,由一系列高度不等的縱向條紋表示數據分佈的狀況,用來比較兩個或以上的價值(不一樣時間或者不一樣條件),只有一個變量,一般利用於較小的數據集分析
散點圖
用兩組數據構成多個座標點,考察座標點的分佈,判斷兩變量之間是否存在某種關聯或總結座標點的分佈模式
數據可視化——呈現方法
a. 將指標值圖形化 互聯網的一些事
一個指標就是一個數據,將數據的大小以圖形的方式呈現。好比用柱狀圖的長度或高度表現數據大小。
b. 將指標圖形化 yixieshi.com
通常用與指標含義相近的ICON來表現
c. 將指標關係圖形化 yixieshi.com
當存在多個指標時,挖掘指標之間的關係,並將其圖形化表達,可提高圖表的可視化深度。
藉助已有的場景來表現 互聯網的一些事
聯想天然界或者社會現象裏有無與指標關係相似的,而後藉助此場景來表現數據。好比下圖,是統計全球使用操做系統分佈圖,首先分爲windows、mac還有其餘操做系統,windows又包含XP、2003等多種子系統。
構建場景來表現
指標之間每每具備一些關聯特徵,如從簡單到複雜,從低級到高級,從前到後等,如沒法找到相對應的場景,也能夠本身構建。支付寶新出的我的年度帳單中,在描述付款最多的三項時,構建了一個領獎臺的形式:
d. 將時間和空間可視化
時間:經過時間的維度來查看指標值的變化狀況,通常經過增長時間軸的形式,地圖做爲主要背景呈現全部信息點
空間:當圖表存在地域信息而且須要突出的表現的時候,可用地圖將空間可視化,地圖做爲主背景呈現全部信息點
e. 將數據進行概念轉換
所謂的數據概念轉換,即咱們生活中喝水的時候一般只會說喝一杯水,但不會說喝30ML的水,一個確實的數據展現,咱們是難以感知的,可是用一個杯子來概念轉換,咱們很容易感知到其大小。
若是隻看左半部分中國菸民的數量:32000000,知道數據量級很大,但具體有多大卻很難感知;直到看到右半部分:中國菸民數量超過了美國人口總和,這樣一對比,對數據的感知就加深了。
f. 讓「圖表」動起來
數據圖形化完成後,可結合實際狀況,將其變爲動態化和可操控性的圖表,用戶在操控過程當中能更好地感知數據的變化過程,提高體驗。實現動態化一般如下兩種方式: 交互和動畫。
小結:
數據可視化的能夠分爲如下幾個步驟:
數據可視化——視覺元素分析
接下來咱們來看看目前線上的數據可視化平臺視覺設計: 互聯網的一些事
經過這些案例,咱們會發現設計上都有廣泛的共性: 互聯網的一些事
a. 在顏色的使用上都偏暖色系;
b. 顏色的數量上不超過5種;
c. 顏色使用上基本保持識別度高的色彩,如紅、綠、藍、黑、灰; 互聯網的一些事
d. 背景色使用上以白,灰爲主;
e. 字體的使用上只使用一種字體 yixieshi.com
推薦
「數據可視化」信息圖製做工具 yixieshi.com
在茫茫的文字海洋裏解讀你的疑問,已是過期的形式了,而且也是低效率的工做方式了。上篇大篇幅的介紹了數據可視化平臺的設計展現形式,其目的與意義都是爲了給用戶帶來方便,讓大量的數據信息直觀地展現給用戶,爲用戶提供更易解讀,更有樂趣,更加美觀,快捷的獲取信息的方式。可是可視化的圖形制做卻也大大地爲難了設計師,這裏爲廣大苦惱的感性的悲催的視覺設計師們提供一些小工具——輕鬆製做超讚的信息圖形。
infogr.am
Infogr.am仍然是面向非設計師的信息圖形設計工具。它容許用戶將數據傳到網站上並將其解讀成圖表模式,容許用戶自定義圖形,並提供更多智能化界面展現信息。
StatSilk
StatSilk有網頁版和桌面客戶端,爲用戶提供了具備更強交互性的,自定義極高的和栩栩如生的圖形、圖標、地圖和其餘可視化數據製做精美的信息圖形。
看到這裏是否是挑起了你的興趣了呢?
固然,還有衆多的在線製做信息圖的網站等着你去嘗試: yixieshi.com
1.Stat Planet:能讓你作出很炫的互動信息圖,成品能夠輸出成互動型或者靜態圖片。缺點是隻能用網站自己提供一些調研數據,製做成本身的圖表。 互聯網的一些事
2.Hohli:簡單易用,設計很人性化。你能夠簡單的選擇圖表類型,添加數據,調整尺寸,顏色,預覽成品。用它作出來的圖表漂亮,精緻。
3.Many Eyes:這裏提供的圖表/形很精美,看起來很專業。
4.Wordle:能把純文本經過特別的排列作成圖形,你能夠導入整本書,一個小段落等等。
5.Tableau:用於Windows平臺的免費製做圖表軟件。它作出來的圖表色彩鮮豔,很獨特。
6.GapMinder:Adobe公司出品的製做圖表的軟件,而且提供不少行業的數據,如美國農業,天龍八部私服美國城市發展數據等。