UI DESIGN UX DESIGN UI DESIGN UX
ARTICLE :2021/11/11:)
ABOUT
VISUALIZATION
(全文共4543字,閱讀10-12min)
在上期內(nèi)容中,我們基本了解關(guān)于可視化的概念以及在現(xiàn)代社會使用可視化設(shè)計的重要性,并介紹了以數(shù)據(jù)可視化為主體的圖表類型。在今天的內(nèi)容中我們將繼續(xù)介紹關(guān)于可視化設(shè)計的更多內(nèi)容:數(shù)據(jù)可視化的操作工具、實踐案例了解可視化中的色彩應(yīng)用、近期可視化精彩設(shè)計案例。
可視化的制作工具?
這里的可視化制作工具指的是支持?jǐn)?shù)據(jù)可視化的生成與展示的軟件。
入門級工具:Excel(分析數(shù)據(jù)的理想工具,但在顏色、線條和樣式的選擇上有限)
在線數(shù)據(jù)生成工具:Goole Chart API(功能豐富,支持在線使用)、Raphael(支持創(chuàng)建圖表和圖形)
互動圖形用戶界面(GUI)控制:Crossfilter(支持?jǐn)?shù)據(jù)分析與交互展示)
地圖工具:OpenLayers(實現(xiàn)地圖動態(tài)顯示與交互)、CartoDB(把表格數(shù)據(jù)與地圖關(guān)聯(lián))
進(jìn)階工具:Processing(數(shù)據(jù)可視化招牌工具)、Python(功能強(qiáng)大效果好)
圖形工具:Ai(信息圖形化常用矢量工具)
可視化的制作包括但不限于以上工具,受到時代以及網(wǎng)絡(luò)環(huán)境影響,我們可以使用的在線生成工具較少,多數(shù)可視化的成熟呈現(xiàn)需要通過編程的學(xué)習(xí)進(jìn)行完善。對這部分感興趣可以查閱更多資料。
在這個數(shù)據(jù)驅(qū)動的世界中,從汽車傳感器到遠(yuǎn)程衛(wèi)星,信息無處不在,以適當(dāng)?shù)男问奖硎拘畔⑹且豁椫陵P(guān)重要的任務(wù)。而可視化很好的滿足了這項需求。
可視化的色彩應(yīng)用?
(在這部分內(nèi)容,將結(jié)合可視化具體案例:品牌中信息可視化色彩設(shè)計應(yīng)用進(jìn)行詳細(xì)分析。)
通常情況下,品牌調(diào)色板無法滿足數(shù)據(jù)可視化的需求。數(shù)據(jù)可視化顏色是具有不同應(yīng)用程序的不同調(diào)色板的集合。三個主要調(diào)色板被稱為分類(定性)、順序和發(fā)散,并添加了警報色和焦點調(diào)色板。
滿足數(shù)據(jù)可視化調(diào)色板的要求同時確保它具有易于訪問、打印友好、品牌化和美觀的特性,這是一項艱巨的任務(wù)。
重點1
我們創(chuàng)建的調(diào)色板必須具有這些屬性。
·品牌
·美觀
·無障礙
·打印友好
重點2
這些是需要創(chuàng)建的調(diào)色板類型。
·分類調(diào)色板
·順序調(diào)色板
·發(fā)散的調(diào)色板
·警報和焦點調(diào)色板
重點1
保持品牌形象
作為起點,請以您公司的品牌顏色指南、徽標(biāo)圖像和使命為基礎(chǔ),以制作靈感的神器。本文檔應(yīng)用作未來調(diào)色板探索的基礎(chǔ)和指路明燈。請記住,您不需要使用品牌的確切顏色,您仍然可以從相似的十六進(jìn)制代碼中喚起品牌含義。
審美
為您的調(diào)色板收集顏色并開始看到色彩和諧的一種有用方法是查看自然圖像。就我而言,我們的徽標(biāo)中有一棵果樹。我搜索了一棵被平原包圍的孤樹的圖像,并開始在圖像中推斷顏色。這并不是開發(fā)調(diào)色板的全部工具,但它在您設(shè)計時提供了獨特的視角。
無障礙
作迄今為止,在構(gòu)建調(diào)色板時,可訪問性是要考慮的最重要因素。我們希望我們的調(diào)色板考慮到我們所有的用戶,而不僅僅是一些。全球 8% 的男性和 0.5% 的女性患有某種形式的色盲。為了通過色盲測試,調(diào)色板中的相鄰顏色需要在色盲范圍內(nèi)在視覺上彼此不同。
打印
即使在 2021 年,印刷品仍然是許多組織的相關(guān)且重要的媒介。最重要的是,黑白打印仍然是最常見和最具成本效益的打印方式。如果您的調(diào)色板在亮度方面沒有很強(qiáng)的漸變,那么您的許多顏色在不飽和時,在轉(zhuǎn)換為灰度時可能看起來相同。
警惕分類調(diào)色板。通過多次反復(fù)試驗,這是在灰度中獲得正確的最具挑戰(zhàn)性的調(diào)色板??紤]以一種方式組織這個調(diào)色板,將不同的深淺色調(diào)彼此相鄰。這樣,當(dāng)轉(zhuǎn)換為灰度時,顏色將彼此區(qū)分。
重點2
分類調(diào)色板
分類(或定性)調(diào)色板用于通過為每個數(shù)據(jù)點分配其獨特的顏色(即比較美國與其他國家的 GDP)來比較明顯不同的類別,例如國家、州或性別。這些顏色變化旨在表明數(shù)據(jù)點不相關(guān)且具有相同的價值。最佳做法是將您的數(shù)據(jù)集保持在 6-8 個類別,并將剩余的數(shù)據(jù)點(最小百分比)歸入“其他”類別。但是,邊緣用例可能需要更多類別,從而需要擴(kuò)展調(diào)色板。
將您的品牌美學(xué)融入這種調(diào)色板類型的一種方法是預(yù)先加載您的品牌喚起顏色。
順序調(diào)色板
這種單色調(diào)色板最適合用于顯示具有相關(guān)性的數(shù)據(jù)。
使用從明暗漸變的單一顏色(色調(diào)),該調(diào)色板可用于顯示趨勢,例如比較各州的人口密度,甚至比較美國的 COVID-19 疫苗接種率。不同的色調(diào)按邏輯排列,其中較淺的顏色表示較低的值,而較深的顏色表示較高的值。同樣,我預(yù)先加載了我們的品牌顏色,以便將它們包含在創(chuàng)建的大量示例中。
發(fā)散調(diào)色板
發(fā)散調(diào)色板將兩個截然不同的單色調(diào)色板組合在一起,中心中點為 0。它們最適用于比較不同的值范圍集,最常用于顯示正負(fù)關(guān)系。以上面的順序 COVID-19 為例。不是按州比較疫苗接種率,為了使這個調(diào)色板不同,我們將按州比較疫苗的公眾意見[即非常積極、積極、有點積極、中立、有點消極、消極、非常消極]。
擁有積極/消極關(guān)系調(diào)色板(紅色/綠色)以及中性調(diào)色板(藍(lán)色/橙色)是有幫助的。這些中性調(diào)色板可用于比較既沒有積極意義也沒有消極意義的兩個元素。在這種情況下,我們將使用代表我們正在比較的項目的顏色,例如在地形圖中使用綠色代表森林密度和黃色代表農(nóng)田密度。
警報調(diào)色板
警報顏色(語義顏色)用于顯示好、壞或警告狀態(tài)。每種顏色都與一個狀態(tài)相關(guān)聯(lián),并且在使用時始終具有相同的含義。這些狀態(tài)通常出現(xiàn)在表單字段、警報、吐司、橫幅和對話框中,并且被普遍理解為 UX 最佳實踐。
焦點調(diào)色板
焦點調(diào)色板用于突出顯示范圍內(nèi)的特定數(shù)據(jù),以幫助推動特定故事。焦點調(diào)色板應(yīng)使用單一顏色作為其余數(shù)據(jù)點的突出顯示和灰色。例如,它可用于展示我們的品牌與同一行業(yè)的其他品牌的比較情況。
品牌可視化色板制作步驟:
1.研究和定義需求(重點1和重點2)
2.打造品牌靈感神器作為您的指路明燈
3.收集能喚起您品牌的自然或其他事物的圖像
4.使用免費的調(diào)色板生成工具并將您迄今為止發(fā)現(xiàn)的顏色輸入到其中。
5.構(gòu)建顏色陰影工具并測試分類和順序調(diào)色板
6.運行色盲測試
7.用不同的信息圖表測試調(diào)色板
8.與團(tuán)隊一起審查最終選擇,調(diào)整,審查,重復(fù)。
一旦所有這些都完成了,你還剩下一大步。您需要創(chuàng)建一個指南文檔。指南文檔的目標(biāo)是讓任何人都可以輕松選擇您的調(diào)色板并知道如何正確應(yīng)用它。
隨著這個調(diào)色板的創(chuàng)建和實施,我們現(xiàn)在為組織內(nèi)需要創(chuàng)建一致數(shù)據(jù)可視化的任何人提供了單一的事實來源。通過創(chuàng)建定義明確且易于理解的使用指南的文檔,每個人都可以訪問和使用它,而不僅僅是設(shè)計師。這使我們的組織不僅可以推動我們多樣化產(chǎn)品的一致性,還可以加快設(shè)計過程并在整個公司中使用一致的語言。現(xiàn)在我們的數(shù)據(jù)可視化具有可訪問、打印友好且具有品牌性的更多實用意義。
可視化的應(yīng)用案例?
01.可視化之ZERRABYTE
人類在 2020 年創(chuàng)造了大約 59zettabyte 的數(shù)據(jù)。而我們在 2010 年代中期只達(dá)到了1zettabyte,這是一個令人難以置信的數(shù)量。隨著世界變得更加數(shù)字化,我們的數(shù)據(jù)生產(chǎn)速度只會增加。在所謂的“Zettabyte 時代”到來之前,全球 IT 公司思科已經(jīng)為我們進(jìn)行了可視化。
可視化確實可以更容易地準(zhǔn)確理解 zettabyte 數(shù)據(jù)的巨大程度。這就是數(shù)據(jù)可視化的力量。
02.星球大戰(zhàn)系列人物互動網(wǎng)絡(luò)圖
隨著我們產(chǎn)生的數(shù)據(jù)量的增長,需要越來越復(fù)雜的可視化技術(shù)來理解它。一種越來越流行的數(shù)據(jù)形式是網(wǎng)絡(luò)圖,這使我們能夠繪制許多不同點或節(jié)點之間的關(guān)系。
這個引人注目的網(wǎng)絡(luò)圖不僅僅是一張漂亮的圖片。它跟蹤星球大戰(zhàn)宇宙中存在的 20,000 多個角色之間的聯(lián)系。每個字符由一個節(jié)點表示。并且這些節(jié)點中的每一個都通過顏色編碼的線(或“邊緣”)連接到相關(guān)節(jié)點。
紅色代表力量的陰暗面;藍(lán)色代表光明的一面;黃色顯示罪犯和賞金獵人??偣灿谐^ 66,000 個連接,這準(zhǔn)確地顯示了網(wǎng)絡(luò)圖的強(qiáng)大與美觀。
03.熱圖繪制新冠病毒傳播
隨著智能手機(jī)跟蹤我們的運動,位置標(biāo)記數(shù)據(jù)正迅速成為一種普遍現(xiàn)象。事實證明,這在 Covid-19 大流行期間尤為重要,各國爭先恐后地追蹤和追蹤潛在的感染鏈。對于這樣的位置數(shù)據(jù),地圖是一個至關(guān)重要的工具。
此可視化顯示了 2020 年春假期間在佛羅里達(dá)州收集的匿名電話數(shù)據(jù)。每部電話由單個紅色節(jié)點表示。紅色的薄霧告訴我們,有很多人在享受春假。藍(lán)色突出顯示的區(qū)域是勞德代爾堡的一個海灘。
雖然這種可視化在同等程度上既可怕又美麗,但它是我們?nèi)绾慰梢暬乩韰^(qū)域的大數(shù)據(jù)的一個很好的例子。
04.CRAN 網(wǎng)絡(luò)上流行的編程語言
這個可視化案例是氣泡圖和圓形網(wǎng)絡(luò)圖的組合——展示了在綜合 R 檔案網(wǎng)絡(luò) (CRAN) 上的 300 個包中使用流行的編程語言。
從 TIOBE 指數(shù)(衡量編程語言的流行程度)中獲取數(shù)據(jù),此可視化顯示使用哪些語言創(chuàng)建了哪些 CRAN 包。R 居首位,其次是 C 和 C++。不太流行的語言由較小的圓圈表示。每個圓圈的大小與用于生成包的代碼行數(shù)成正比。
05.全球地表溫度折線圖
該折線圖跟蹤了從 1880 年到 2010 年代后期的全球地表溫度。至關(guān)重要的是,它包括來自四個不同來源的數(shù)據(jù):NASA、NOAA、日本氣象廳和氣象局。通過疊加這四個數(shù)據(jù)源,我們可以立即看到它們的關(guān)聯(lián)程度。它們顯示了過去 200 年來全球地表溫度幾乎相同的上升。
雖然這張圖的內(nèi)容現(xiàn)在對任何人來說都不應(yīng)該是新聞,但它仍然是一個很好的例子,說明即使是簡單的數(shù)據(jù)可視化也能得出強(qiáng)有力的結(jié)論。以這種方式呈現(xiàn),很難否認(rèn)這些數(shù)據(jù)。
06.良政互動氣泡圖
可視化的交互性也可以改變我們看待數(shù)據(jù)的方式。 政府| DNA是一個屢獲殊榮的交互式在線網(wǎng)絡(luò)工具,它探索了世界各國政府的好(和壞)政府的因素。
該工具將每個國家表示為一個氣泡,讓您只需單擊一個按鈕即可比較不同的國家。例如,您可以根據(jù)就業(yè)、預(yù)期壽命、新聞自由和腐敗等變量來跟蹤每個國家/地區(qū)的世界幸福指數(shù)。
07.美國移民流圖
Streamgraphs 是一種面積圖,通常用于比較時間序列數(shù)據(jù)。雖然并不總是適合深入分析,但它們非常適合提供廣泛的概述,在視覺上也很吸引人。
這個美麗的流圖由數(shù)據(jù)記者Talia Bronshtein創(chuàng)建 ,繪制了 200 多年來(1820 年至 2015 年)到美國的不同移民的國籍。它的研究結(jié)果一目了然。例如,我們可以立即看到,在戰(zhàn)時(1939-1945)期間,移民美國幾乎停止。
08. 2010年智利地震雕塑熱圖
數(shù)據(jù)可視化不僅僅用于數(shù)據(jù)分析。正如我們所說,它可以是一種藝術(shù)形式。
2010 年,藝術(shù)家珍妮特·埃切爾曼受委托創(chuàng)作一個代表西半球 35 個國家相互聯(lián)系的雕塑。那一年,智利發(fā)生了大地震。該事件的地震強(qiáng)度如此之大,以至于引發(fā)了一場巨大的海嘯,并將地球日縮短了 1.26 微秒。
該圖像顯示了由美國國家海洋和大氣管理局 (NOAA) 建模的地震引發(fā)海嘯的熱圖。Echelman 以此為靈感創(chuàng)作了她的雕塑,她用懸掛在輕質(zhì)框架上的不同顏色的繩索建造了這座雕塑,既是藝術(shù)成就的勝利,也是令人驚嘆的數(shù)據(jù)可視化。這也證明了數(shù)據(jù)即數(shù)據(jù)——以及數(shù)據(jù)分析——可以像任何藝術(shù)領(lǐng)域一樣具有創(chuàng)造性。
09.十年十位藝術(shù)家可視化
此圖表由 Arthur Buxton 制作,用于表示 1895 年至 1905 年期間藝術(shù)家使用最多的調(diào)色板。此創(chuàng)新可視化中的餅圖與每位藝術(shù)家廣泛使用的每種顏色成正比。在這十年中,這個比例與他們調(diào)色板中的其他首選顏色有關(guān)。
10.著名創(chuàng)意人的日常
這是展示名人的日程安排或習(xí)慣的更有創(chuàng)意、更出色的數(shù)據(jù)可視化示例之一。此可視化基于 Mason Currey 的書“日常儀式”中的數(shù)據(jù)考慮了他們的每項活動。該圖表已按時間細(xì)分,我們可以輕松查看這些創(chuàng)意人物在平均一天中的某個時間點如何度過他們的時間。
通過本文的介紹,是否對數(shù)據(jù)可視化有了更多的認(rèn)識與了解呢?當(dāng)然,時代發(fā)展迅速,各類新式軟件都可以達(dá)到豐富的視覺效果,而如何將可視化合理運用至設(shè)計中,是我們設(shè)計師需要發(fā)揮主觀能動性思考的問題,更多可能性等待我們探索。
聯(lián)系客服