對啊網(wǎng)設計學院:WEB的10種數(shù)據(jù)可視化最佳做法
作者:未知時間:2020-04-01 來源:未知
北京時間04月01日消息,中國觸摸屏網(wǎng)訊,數(shù)據(jù)可視化已迅速成為在網(wǎng)絡上傳播信息的標準。從商業(yè)智能到新聞業(yè),它廣泛用于各個行業(yè),其幫助我們理解和交流數(shù)據(jù)。
本文來自:http://www.zc28898.cn/lcd/news/dynamic/2020/0401/56721.html
我們的大腦已經(jīng)準備好處理可視化呈現(xiàn)的信息,這使我們比圖表和電子表格中列出的數(shù)據(jù)更容易理解圖表和圖形中可視化的數(shù)據(jù)。出色的數(shù)據(jù)可視化應該利用人類視覺系統(tǒng)的這些優(yōu)勢來顯示數(shù)據(jù),以便可以輕松地理解數(shù)據(jù)。它應該考慮到我們對視覺處理的認知,以增強或減輕觀看者對數(shù)據(jù)的體驗。
現(xiàn)在有如此多的工具和框架可用于構建這些圖形,現(xiàn)在該回到基礎知識了。是什么使數(shù)據(jù)可視化有效?使用數(shù)據(jù)進行設計時應遵循哪些指導原則?
以下最佳做法將幫助您設計豐富而有見地的數(shù)據(jù)體驗。
1.針對特定受眾的設計
可視化用于揭示模式,提供上下文并描述數(shù)據(jù)內的關系。盡管設計師對給定數(shù)據(jù)集中的模式和關系沒有影響,但可以根據(jù)受眾的需求選擇要顯示多少數(shù)據(jù)以及要提供什么上下文。畢竟,就像其他任何產(chǎn)品一樣,如果查看者無法使用可視化,它就毫無意義。

新手的可視化應該結構化,明確且具有吸引力。他們應該用語言直接說明觀眾應該從數(shù)據(jù)中獲取的內容。
另一方面,面向專業(yè)瀏覽者的可視化可以顯示更細致的數(shù)據(jù)視圖,從而允許瀏覽者進行驅動的探索和發(fā)現(xiàn)。細節(jié)和數(shù)據(jù)密度應勝過簡單性和清晰度。

2.使用交互性來促進探索
這是一個令人震驚的數(shù)字:“紐約時報”網(wǎng)站上交互式可視化效果的訪問者中只有10-15%實際上點擊了按鈕。《紐約時報》圖形團隊制作了業(yè)務中一些最好的作品,幾乎沒有人與他們互動!
這表明交互式可視化設計的意義在于,我們不能依靠交互來建立理解。關鍵數(shù)據(jù)不得隱藏在交互元素后面,而應在不交互的情況下可用。
但是,交互的最大好處是允許集成其他數(shù)據(jù),以使感興趣的觀看者可以更深入地探索數(shù)據(jù)集。
一個吸引注意力的設計,可以使您的聽眾親自投資于該項目,然后他們才能導航至更遠的地方。看看Quartz 撰寫的有關手寫和文化的有趣文章。該文章首先要求讀者簡單地畫一個圓,然后再概述對文化形狀繪圖的分析,該分析具有一些簡單但有效的可視化效果。

3.使用視覺顯著性集中注意力并引導體驗
視覺顯著性是使視覺元素與周圍環(huán)境脫穎而出的特征,是數(shù)據(jù)可視化中的強大工具。它可以用來引導用戶注意可視化中最重要的信息,以幫助防止信息過載。通過使用視覺顯著性突出顯示某些細節(jié)而壓制其他細節(jié),我們可以使我們的設計更清晰,更容易理解。
一些視覺變量(主要是顏色和大小)是我們創(chuàng)建和控制視覺顯著性的關鍵。
配色方案是實現(xiàn)出色數(shù)據(jù)可視化的關鍵,因為眾所周知,色彩特別擅長打破平衡。我們可以使用溫暖的,高度飽和的顏色突出顯示關鍵數(shù)據(jù)點,并應用涼爽的,不飽和的顏色將不太重要的信息推入背景。

4.使用位置和長度對定量信息進行編碼,并使用顏色對分類信息進行編碼
克利夫蘭和麥吉爾在信息可視化方面的著名工作研究了視覺編碼的有效性。在他們的發(fā)現(xiàn)中,他們根據(jù)我們對它們的準確度對視覺編碼的不同類型進行了排序,從而為我們提供了以下(簡化的)列表:
沿通用比例尺定位
長度、角度、區(qū)域、顏色
對于數(shù)據(jù)可視化設計,這意味著我們顯示定量信息的首選應該是按位置對數(shù)據(jù)進行編碼(如經(jīng)典散點圖和條形圖中所示)。與基于角度的編碼(如餅圖)或基于區(qū)域的編碼(如氣泡圖)相反,基于位置的編碼可幫助觀看者在更短的時間內進行更準確的比較。
但這并不是說所有可視化必須是條形圖或散點圖。在探索新穎的數(shù)據(jù)可視化方法時,牢記這些基本原理是一個好主意。
我在這里真正要強調的是,顏色不應該用于編碼定量信息,而應該用于編碼分類信息。也就是說,我們可以使用顏色顯示不同的數(shù)據(jù)位屬于不同的類別。

5.使刻度線和軸等結構元素清晰但不顯眼
無論您是否支持極簡設計方法,請轉換一下角度,并從圖表中消除視覺混亂。通過在數(shù)據(jù)元素和非數(shù)據(jù)元素之間創(chuàng)建視覺對比來使數(shù)據(jù)發(fā)光,就像Nadieh Bremer在她屢獲殊榮的美國出生時間可視化中所做的那樣。

刪除所有對澄清數(shù)據(jù)無效的結構元素(例如背景,線條和邊框)。衰減基本的結構元素(如軸,網(wǎng)格和刻度線),否則這些結構元素會與您的數(shù)據(jù)競爭以引起注意。樣式網(wǎng)格為淺灰色,最大權重為0.5 pt,樣式軸為黑色或灰色,最大權重為1 pt。
6.直接標記數(shù)據(jù)點
每個對某些數(shù)據(jù)進行編碼的視覺元素都需要標記,以便觀看者理解它代表什么。
太多的設計人員依靠圖例告訴讀者哪些符號或顏色代表其圖表中的哪些數(shù)據(jù)系列。圖例雖然對設計人員很容易,但對讀者卻很難。它們迫使讀者在圖例和數(shù)據(jù)之間來回掃描,從而給讀者的工作記憶帶來不必要的壓力。
更好的替代方法是直接在圖表上標記數(shù)據(jù)系列。通常這是一個更大的挑戰(zhàn),在下面的示例中,Nathan Yau已經(jīng)完成了避免使用圖例的工作,創(chuàng)建了帶有許多直接標簽的交互式小倍數(shù)顯示。

7.使用消息傳遞和視覺層次結構創(chuàng)建敘事流程
最好的可視化效果可以講述引人入勝的故事。這些故事來自數(shù)據(jù)的趨勢,相關性或離群值,并被圍繞數(shù)據(jù)的元素所加強。這些故事將原始數(shù)據(jù)變成有用的信息。
從表面上看,數(shù)據(jù)可視化似乎就是數(shù)字,但如果沒有文字,就無法說出一個偉大的數(shù)據(jù)故事。消息傳遞具有清晰的視覺層次結構,可用于逐步引導讀者瀏覽數(shù)據(jù)。
例如,可視化的標題應該通過明確說明讀者應該從可視化中帶走的單個關鍵見解開始敘述。分散在數(shù)據(jù)中的微小注釋可以通過吸引人們注意離群值或趨勢來為敘述提供支持。

8.將上下文信息直接覆蓋到圖表上
正如我剛才提到的,我們可以在可視化中使用注釋來幫助創(chuàng)建敘事流程。有時,我們可以添加圖形元素以使這些注釋更加有意義-從而將信息更直接地連接到我們的數(shù)據(jù)。
以Susie Lu的這張圖片為例。“夏季重磅炸彈”和“奧斯卡季節(jié)”疊加圖賦予了山峰和山谷以其他含義的含義。它們可以幫助觀看者以比僅提供字幕或注釋更直接的方式來理解數(shù)據(jù)的重要性。

9.移動體驗設計
靜態(tài)可視化通常以JPG和PNG等位圖圖像格式發(fā)布,這對移動查看器構成了明顯的挑戰(zhàn)。許多數(shù)據(jù)可視化的優(yōu)點在于它們的視覺細節(jié),而許多這些細節(jié)在靜態(tài)格式的小屏幕上丟失了。
舉個例子:Accurat工作室關于諾貝爾獎的精美復雜的作品,在移動設備上幾乎難以辨認,在印刷品和高分辨率視網(wǎng)膜顯示屏上看起來像是全尺寸的神話般。

為了設計移動體驗,可以使用JavaScript可視化庫構建響應式可視化,或者為臺式機和移動設備創(chuàng)建同一靜態(tài)可視化的多個變體。
10.平衡清晰與清晰以促進理解
我今天談到的所有最佳實踐都歸結為一件事:在復雜性和清晰度之間找到合適的平衡點,以符合受眾的需求。
進行精美,細致,探索性的可視化總是很誘人的,但這很少是最合適的方法。設計圖形時要考慮周全-允許聽眾的知識和目標來決定應包含哪些數(shù)據(jù)以及應包含多少數(shù)據(jù),并整理數(shù)據(jù)以講述您要講述的故事。
觸摸屏與OLED網(wǎng)推出微信公共平臺,每日一條微信新聞,涵蓋觸摸屏材料、觸摸屏設備、觸控面板行業(yè)主要資訊,第一時間了解觸摸屏行業(yè)發(fā)展動態(tài)。關注辦法:微信公眾號“i51touch” 或微信中掃描下面二維碼關注,或這里查看詳細步驟