您當前位置:圖趣網(wǎng)(Tuquu) >> 網(wǎng)頁設(shè)計教程 >> 設(shè)計理論 >> 瀏覽設(shè)計教程

信息圖設(shè)計-你的眼睛喜歡看什么?

 

引言

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

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

1

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

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

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

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

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

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

26

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

3

4

5

 

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

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

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

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

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

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

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

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

24

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

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

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

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

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

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

 

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

a. 將指標值圖形化
一個指標就是一個數(shù)據(jù),將數(shù)據(jù)的大小以圖形的方式呈現(xiàn)。比如用柱狀圖的長度或高度表現(xiàn)數(shù)據(jù)大小。
10

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

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

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

構(gòu)建場景來表現(xiàn)
指標之間往往具有一些關(guān)聯(lián)特征,如從簡單到復(fù)雜,從低級到高級,從前到后等,如無法找到相對應(yīng)的場景,也可以自己構(gòu)建。支付寶新出的個人年度賬單中,在描述付款最多的三項時,構(gòu)建了一個領(lǐng)獎臺的形式:
13

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

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

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

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

小結(jié):

數(shù)據(jù)可視化的可以分為以下幾個步驟:
16

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

接下來我們來看看目前線上的數(shù)據(jù)可視化平臺視覺設(shè)計:
17181920

通過這些案例,我們會發(fā)現(xiàn)設(shè)計上都有普遍的共性:

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

推薦

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

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

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

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

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

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

[教程作者:admin]
免責(zé)聲明:本站文章系圖趣網(wǎng)整理發(fā)布,如需轉(zhuǎn)載,請注明出處,素材資料僅供個人學(xué)習(xí)與參考,請勿用于商業(yè)用途!
本文地址:http://m.likemindfilms.com/tutorial/di1664.html
[圖趣]SNS網(wǎng)頁設(shè)計經(jīng)驗分享
網(wǎng)絡(luò)Banner設(shè)計排版技巧
圖趣網(wǎng)微信
建議反饋
×