Facebook加入
LINE加入
2021/12/25
詳細解析設計師的眼睛喜歡看什麼
這一次的教學是屬於設計理論領域中的設計理論的相關教學。
文章出處是來自優設的設計理論類文章，寫教學的作者是情非得已，感謝情非得已提供設計理論的實作教學。
教學大綱:
每一天從我們睜眼開始，我們就開始不斷地接收着這個世界傳遞給我們的各種信息，海量的信息不斷地充斥着我們的眼球、大腦。如此龐大的信息庫，我們平時都在看什麼呢?
設計理論教學開始
每一天從我們睜眼開始，我們就開始不斷地接收着這個世界傳遞給我們的各種信息，海量的信息不斷地充斥着我們的眼球、大腦。如此龐大的信息庫，我們平時都在看什麼呢?不知道各位有沒有這樣的經歷，走在大街上，你最容易被什麼樣的人群所吸引呢?毋庸置疑，必然是精心打扮的女生!
接下來我們來看個”栗子”，逛超市的時候，滿是商品的貨架上，如圖：
你會關注哪個商品呢?我相信，我們的大腦永遠在選擇最簡單、最直接的、最特別的呈現形式的事物，因為這些信息不需要經過大腦的轉換，夠直觀!不知道 各位，小時候有沒有看過寓言故事類型的連環畫，那些可愛的卡通人物，場景，完全直觀地活靈活現地展示了一個個場景在眼前，我們完全沉醉於其中，這都說明， 人的大腦喜歡直接的信息傳遞。
今天的我們生存在一個大數據的時代，密密麻麻的數字，龐大的數據庫，充斥了我們的大腦，請問各位還會有興趣去挖掘這些數據里潛在的秘密嗎?我猜應該 沒有吧!大家的時間太寶貴了，於是有了數據可視化，數據可視化的使命跟職責就是讓我們能從可視化的圖標里看到數據的關係，本質，趨勢。
數據可視化就是通過可視化手段將枯燥的數據圖形化，直觀化展示給用戶。
明白了數據可視化的使命，讓我們來看看當前業界的可視化平台都是如何樹立自己品牌形象且抓住用戶去使用這個平台的呢?
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有網頁版和桌面客戶端，為用戶提供了具有更強交互性的，自定義極高的和栩栩如生的圖形、圖標、地圖和其他可視化數據製作精美的信息圖形。
–本文轉載自 http://www.missyuan.net 教學網 —
熱門推薦
留言回覆
