2022-7-28 鶴鶴
數(shù)據(jù)可視化已迅速成為在網(wǎng)絡(luò)上傳播信息的標準。它用于各種行業(yè)，從商業(yè)智能到新聞，幫助我們理解和傳達見解。
我們的大腦善于處理可視化信息，這使我們更容易理解圖表或圖形中可視化的數(shù)據(jù)，而不是表格和電子表格中列出的數(shù)據(jù)。一個偉大的數(shù)據(jù)可視化應(yīng)該利用人類視覺系統(tǒng)的優(yōu)勢來呈現(xiàn)數(shù)據(jù)，以便數(shù)據(jù)被吸收和理解。它應(yīng)該考慮用戶對視覺處理的了解，提高并簡化用戶的數(shù)據(jù)體驗。
目前有很多工具和框架可用于構(gòu)建這些圖形，是時候回歸基礎(chǔ)了。是什么讓數(shù)據(jù)可視化有效？在設(shè)計數(shù)據(jù)時我們應(yīng)該遵循哪些指導(dǎo)原則？
以下最佳實踐將幫助您設(shè)計豐富、有洞察力的數(shù)據(jù)體驗。
可視化是用于揭示模式的，提供上下文并描述數(shù)據(jù)中的關(guān)系。雖然設(shè)計師對給定的一組數(shù)據(jù)集中的模式和關(guān)系沒有任何影響，但她可以根據(jù)用戶的需求選擇顯示哪些數(shù)據(jù)以及提供怎樣的語境。畢竟，就像其他產(chǎn)品一樣，如果用戶無法使用它，那么可視化就毫無意義。
為小白用戶設(shè)計的可視化應(yīng)該是結(jié)構(gòu)化的、明確的和有吸引力的。他們應(yīng)該用文字直接說明受眾應(yīng)該從數(shù)據(jù)中得到什么。
轉(zhuǎn)換雙親的工作時間：媽媽VS爸爸
來源：https://flowingdata.com/2016/04/20/parent-work-hours/
另一方面，面向?qū)＜矣脩舻目梢暬梢燥@示更精細的數(shù)據(jù)視圖，以驅(qū)動用戶探索和發(fā)現(xiàn)。細節(jié)和數(shù)據(jù)密度應(yīng)該簡單明了。
工作來來往往：國民失業(yè)
來源：http://graphics.wsj.com/job-market-tracker/
這是一個發(fā)人深省的數(shù)字：《紐約時報》網(wǎng)站上只有10-15％參與可視化交互的訪客實際點擊了按鈕。《紐約時報》的圖形團隊制作了一些業(yè)內(nèi)最好的作品，但幾乎沒有人與他們互動！
這表明，關(guān)于交互可視化設(shè)計，我們不能依賴交互來建立理解。關(guān)鍵數(shù)據(jù)不能隱藏在交互元素后面，而應(yīng)該在沒有交互的情況下可見。
然而，什么樣的交互比較好呢？允許整合更多數(shù)據(jù)（否則可能被排除），以允許感興趣的讀者更深入地研究數(shù)據(jù)集。Nathan Yau 的流動數(shù)據(jù)已經(jīng)壟斷了這種交互式可視化風(fēng)格市場，正如他關(guān)于死亡原因和預(yù)期壽命的圖表中所展示的那樣。
2005年至2014年的死亡率數(shù)據(jù)：死因如何因性別和種族而異
來源：https://flowingdata.com/2016/01/05/causes-of-death/
或者，交互可以用作吸引點，一個引發(fā)關(guān)注的點，可以讓你的讀者在遠遠地瀏覽之前，親自參與該項目。看看 Quartz 這款有趣的書寫和文化作品。這件作品首先要求讀者簡單地繪制一個圓圈——在繼續(xù)文化形態(tài)的分析概述之前——畫出簡單而有效的可視化的特征。
畫圓圈的方式說了很多關(guān)于你的故事
來源：https://qz.com/994486/the-way-you-draw-circles-says-a-lot-about-you/
同樣， The Pudding 最近發(fā)布了一個交互式可視化軟件，向讀者講述有關(guān)生日悖論的知識（生日悖論，指如果一個房間里有23個或23個以上的人，那么至少有兩個人的生日相同的 概率要大于50%。）。雖然大多數(shù)非統(tǒng)計學(xué)家可能會發(fā)現(xiàn)生日悖論，這是概率論中的一個標準問題，非常枯燥且不直觀，但這種可視化使得它看起來簡直令人著迷。創(chuàng)作者融入最近的用戶互動的方式使得整個體驗非常具有關(guān)聯(lián)性。
生日悖論實驗
來源：https://pudding.cool/2018/04/birthday-paradox/
這兩個交互式示例都起作用，因為它們允許讀者參與數(shù)據(jù)且不需要通過交互來理解。
視覺突出性，使視覺元素從周圍環(huán)境凸顯的特性，是數(shù)據(jù)可視化的強大工具。它可以用于引導(dǎo)用戶注意可視化中最重要的信息，以幫助防止信息過載。通過使用視覺突出一些細節(jié)并壓制其他細節(jié)，可以使我們的設(shè)計更清晰，更容易理解。
一些視覺變量——顏色和大小——是我們創(chuàng)造和控制視覺顯著性的關(guān)鍵。
色彩方案是優(yōu)秀的數(shù)據(jù)可視化的關(guān)鍵。眾所周知，色彩特別擅長打破偽裝。我們可以使用溫暖，高飽和度的顏色來突出關(guān)鍵數(shù)據(jù)點，并應(yīng)用冷色調(diào)，使用低飽和度的顏色將不太重要的信息放到背景中。
2014：最熱的年份
來源：https://www.bloomberg.com/graphics/2014-hottest-year-on-record/
尺寸也很明顯。較大的元素比較小的元素更有吸引力，因此要擴大您希望讀者首先閱讀的元素，并縮小不太相關(guān)的文本和元素。
Cleveland 和 McGill 在信息可視化方面的著名工作，研究了視覺編碼的有效性（即數(shù)據(jù)維度與視覺屬性的映射）。他們根據(jù)人們對視覺編碼的準確感知程度，對不同類型的視覺編碼進行了排序，給出了以下（簡化的）列表：
這對數(shù)據(jù)可視化設(shè)計的意義在于，我們顯示定量信息的首選應(yīng)該是按位置進行編碼（如經(jīng)典散點圖和條形圖所示）。與基于角度（如餅圖）或基于區(qū)域（如氣泡圖）的編碼相反，基于位置的編碼有助于觀眾在更短的時間內(nèi)進行更準確的比較。
然而，這并不是說所有可視化都必須是條形圖或散點圖。在研究可視化數(shù)據(jù)的新方法時，牢記這些原則是個好主意。
我真正想要強調(diào)的是，顏色不應(yīng)該用于編碼定量信息，而是應(yīng)該用來編碼分類信息。也就是說，我們可以使用顏色來表示屬于不同類別的數(shù)據(jù)。
出生時的預(yù)期壽命
來源：http://www.vizwiz.com/2017/11/life-expectancy.htm
5.使結(jié)構(gòu)元素像刻度線和軸一樣清晰但不顯眼
無論你是否支持 Edward Tufte 在設(shè)計中極簡主義的極端方法，都要幫自己一個忙，從你的圖表中消除視覺上的混亂。通過在數(shù)據(jù)元素和非數(shù)據(jù)元素之間創(chuàng)建可視化對比，來讓您的數(shù)據(jù)大放異彩，就像 Nadieh Bremer 在他的獲獎作品“美國出生時間”中所做的那樣。
嬰兒潮：白天工作時間出生高峰期
來源：https://www.visualcinnamon.com/portfolio/baby-spike
刪除不起任何作用的結(jié)構(gòu)元素使數(shù)據(jù)清晰（如背景、線條和邊框）。減弱必要的結(jié)構(gòu)元素（如軸、網(wǎng)格和刻度線），否則這些元素會與您的數(shù)據(jù)爭奪注意力。網(wǎng)格為淺灰色，最寬設(shè)為0.5 pt，軸為黑色或灰色，最寬設(shè)為1 pt。
編碼數(shù)據(jù)的每個元素都需要進行標記，以便讀者理解它所代表的內(nèi)容。簡單吧？
錯。太多設(shè)計師依靠圖例來告訴讀者哪些符號或顏色代表圖表中的哪些數(shù)據(jù)系列。列舉圖例雖然對設(shè)計師來說很容易，但對讀者來說卻很難。它們迫使讀者在圖例和數(shù)據(jù)之間來回掃描，給讀者的記憶帶來不必要的壓力。
更好的方法是直接在圖表上標記數(shù)據(jù)系列。這往往更像是一個挑戰(zhàn)，但是，嘿，你是設(shè)計師。你的工作就是做這項工作，以便于讀者不必這樣做。在下面的例子中，Nathan Yau 完成了避免使用圖例的工作，創(chuàng)建了一個帶有大量直接標簽的小型交互式多重顯示。
每人每日平均消費量
來源：https://flowingdata.com/2016/05/17/the-changing-american-diet/
7.使用消息傳遞和視覺層級創(chuàng)建敘事流程
最好的可視化講述著引人入勝的故事。這些故事來自數(shù)據(jù)中包含的趨勢、相關(guān)性或異常值，并且由于數(shù)據(jù)周圍的元素而加強。這些故事將原始數(shù)據(jù)轉(zhuǎn)化為有用的信息。
從表面上看，似乎數(shù)據(jù)可視化完全與數(shù)字相關(guān)，但一個偉大的數(shù)據(jù)故事是無法用語言來講述的。信息傳遞具有清晰的視覺層次，才能一步一步地引導(dǎo)讀者閱讀數(shù)據(jù)。
例如，可視化的標題，應(yīng)該明確闡明一個關(guān)鍵觀點，使讀者領(lǐng)會。分散在數(shù)據(jù)中的微小注釋，可以通過異常值或趨勢引起讀者注意，從而為關(guān)鍵觀點提供支撐。
來源：https://www.nytimes.com/interactive/2015/03/24/science/earth/arctic-ice-low-winter-maximum.html
我在這里要說的是：幫助讀者，確切地告訴他們在數(shù)據(jù)中尋找什么！
正如我剛才提到的，我們可以在可視化中使用注釋來幫助創(chuàng)建數(shù)據(jù)故事的過程。有時我們可以添加圖形元素來使這些注釋更有意義，以便將這些信息更直接地關(guān)聯(lián)到我們的數(shù)據(jù)。
以這張來自 Susie Lu 的圖片為例。“夏季大片”和“奧斯卡季”的數(shù)據(jù)重疊賦予了原本看似隨機的高峰和低谷以意義。它們幫助觀眾理解數(shù)據(jù)的重要性，比單獨使用字幕或注釋更直接。
2015 - 2017.08 票房趨勢：強大的開場和后期的爆發(fā)
來源：https://susielu.com/data-viz/box-office
靜態(tài)可視化通常以 JPG 和 PNG 等位圖圖像格式發(fā)布，這對移動端用戶來說是一個明顯的挑戰(zhàn)。許多數(shù)據(jù)可視化的美妙之處在于它們的視覺細節(jié)——微小的數(shù)據(jù)點和微妙的編碼——而這些細節(jié)許多在靜態(tài)格式的小屏幕上被丟失了。
例如：Accurat 工作室在諾貝爾獎上的精美復(fù)雜的作品，在印刷和高分辨率視網(wǎng)膜顯示器上看起來非常棒的全尺寸，卻在移動設(shè)備上幾乎難以辨認。
視覺數(shù)據(jù)
來源：http://giorgialupi.com/lalettura/
為移動體驗設(shè)計，或者使用像 D3.js 或 Highcharts 這樣的 JavaScript 可視化庫構(gòu)建響應(yīng)式可視化，或者為印刷、桌面和移動設(shè)備多種載體創(chuàng)建相同的靜態(tài)可視化設(shè)計。
我今天談到的所有最佳實踐可以歸結(jié)為一件事：在復(fù)雜性和清晰度之間找到合適的平衡，以滿足受眾的需求。
制作精美的、探索性的可視化細節(jié)總是誘人的，但這不一定是最合適的方法。在設(shè)計圖形時要考慮周到 ，讓讀者的知識和目標決定應(yīng)該包含哪些數(shù)據(jù)以及包含多少數(shù)據(jù)，并整理數(shù)據(jù)以講述您想要講述的故事。
原文標題：10 DATA VISUALIZATION BEST PRACTICES FOR THE WEB
原創(chuàng)作者：MIDORI NEDIGER
原文鏈接： https://www.webdesignerdepot.com/2018/07/10-data-visualization-best-practices-for-the-web/
翻譯作者：桃花果
授權(quán)獲取：張聿彤
文章審核：王翎旭
文章編輯：王鴻飛
該譯文并非完整原文，內(nèi)容已做部分調(diào)整。如在閱讀過程中發(fā)現(xiàn)錯誤與疏漏之處，歡迎不吝指出。如需轉(zhuǎn)載，請注明來自 三分設(shè)
作者：三分設(shè) 來源：站酷
藍藍設(shè)計建立了UI設(shè)計分享群，每天會分享國內(nèi)外的一些優(yōu)秀設(shè)計，如果有興趣的話，可以進入一起成長學(xué)習(xí)，請加微信ban_lanlan，報下信息，藍小助會請您入群。歡迎您加入噢~~
希望得到建議咨詢、商務(wù)合作，也請與我們聯(lián)系。
分享此文一切功德，皆悉回向給文章原作者及眾讀者. 免責(zé)聲明：藍藍設(shè)計尊重原作者，文章的版權(quán)歸原作者。如涉及版權(quán)問題，請及時與我們?nèi)〉寐?lián)系，我們立即更正或刪除。
藍藍設(shè)計( m.gyxygd.cn )是一家專注而深入的界面設(shè)計公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計、BS界面設(shè)計 、 cs界面設(shè)計 、 ipad界面設(shè)計 、 包裝設(shè)計 、 圖標定制 、 用戶體驗 、交互設(shè)計、 網(wǎng)站建設(shè) 、平面設(shè)計服務(wù)、UI設(shè)計公司、界面設(shè)計公司、UI設(shè)計服務(wù)公司、數(shù)據(jù)可視化設(shè)計公司、UI交互設(shè)計公司、高端網(wǎng)站設(shè)計公司、UI咨詢、用戶體驗公司、軟件界面設(shè)計公司
藍藍設(shè)計的小編 http://m.gyxygd.cn