你的眼睛喜歡看什麼?

引言

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

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

1

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

今天的我們生存在一個大資料的時代,密密麻麻的數位,龐大的資料庫,充斥了我們的大腦,請問各位還會有興趣去挖掘這些資料裡潛在的秘密嗎?我猜應該沒有吧!大家的時間太寶貴了,於是有了資料視覺化,資料視覺化的使命跟職責就是讓我們能從視覺化的圖示裡看到資料的關係,本質,趨勢。

資料視覺化就是通過視覺化手段將枯燥的資料圖形化,直觀化展示給使用者。

明白了資料視覺化的使命,讓我們來看看當前業界的視覺化平臺都是如何樹立自己品牌形象且抓住使用者去使用這個平臺的呢?

1.「資料視覺化」交互佈局

  • 首頁——上下結構佈局

26

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

3

4

5

 

  • 內頁——結構佈局

根據多個案例分析,視覺視覺化的交互基本分為兩類:

下圖屬於資訊層級關係很明確,不是直觀展示資料,缺點:資料隱藏很深,很難讓使用者產生興趣繼續查看;優點:可承載資料量大。
27

下圖屬於資訊扁平化呈現,資料展示直觀,缺點:承載資料量少;優點:資料展示直觀,使用者容易在查看的過程中挖掘自己的興趣點。
25

2.「資料視覺化」設計項目

認知心理學和圖形設計

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

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

24

  • 資料視覺化——呈現形式

通常目前資料視覺化的表現形式,我們最熟悉的有圓形圖、長條圖、散佈圖、柱狀圖,而這些都是最原始的統計圖表。

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

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

柱狀圖
是一種以長方形的長度為變數的表達圖形的統計報告圖,由一系列高度不等的縱向條紋表示資料分佈的情況,用來比較兩個或以上的價值(不同時間或者不同條件),只有一個變數,通常利用於較小的資料集分析
8

散佈圖
用兩組資料構成多個座標點,考察座標點的分佈,判斷兩變數之間是否存在某種關聯或總結座標點的分佈模式
9

 

  • 資料視覺化——呈現方法

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

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

c. 將指標關係圖形化
當存在多個指標時,挖掘指標之間的關係,並將其圖形化表達,可增益圖表的視覺化深度。

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

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

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

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

如果只看左半部分中國煙民的數量:32000000,知道資料量級很大,但具體有多大卻很難感知;直到看到右半部分:中國煙民數量超過了美國人口總和,這樣一對比,對資料的感知就加深了。
27-(2)

f. 讓「圖表」動起來
資料圖形化完成後,可結合實際情況,將其變為動態化和可操控性的圖表,使用者在操控過程中能更好地感知資料的變化過程,提升體驗。實現動態化通常以下兩種方式: 交互和動畫。

小結:

資料視覺化的可以分為以下幾個步驟:
16

  • 資料視覺化——視覺元素分析

接下來我們來看看目前線上的資料視覺化平臺視覺設計:
17181920

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

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

推薦

「資料視覺化」資訊圖製作工具

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

infogr.am
Infogr.am仍然是面向非設計師的資訊圖形設計工具。它允許使用者將資料傳到網站上並將其解讀成圖表模式,允許使用者自訂圖形,並提供更多智慧化介面展示資訊。
29

StatSilk
StatSilk有網頁版和桌面用戶端,為使用者提供了具有更強交互性的,自訂極高的和栩栩如生的圖形、圖示、地圖和其他視覺化資料製作精美的資訊圖形。
30

看到這裡是不是挑起了你的興趣了呢?

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

感謝你的閱讀,本文由 騰訊ISUX 版權所有,轉載時請注明出處,違者必究,謝謝你的合作。
注明出處格式:騰訊ISUX (HTTP://isux.tencent.com/date-visualisation.html)

 

特別注意:本站所有轉載文章言論不代表本站觀點,本站所提供的攝影照片,插畫,設計作品,如需使用,請與原作者聯繫,文章轉自alibuybuy

Comments are closed.