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

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

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

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

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

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

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

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

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

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

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

- 創(chuàng)維A20:打造智能家庭新生活
- 對(duì)啊網(wǎng)設(shè)計(jì)學(xué)院:WEB的10種數(shù)據(jù)可視化
- 后疫情時(shí)期,數(shù)字化轉(zhuǎn)型為企業(yè)和人才帶
- 腳踏實(shí)地,創(chuàng)新致遠(yuǎn)—浙江省企業(yè)發(fā)明專
- 京東方副總裁原烽微博表示,P40、P40 P
- 群創(chuàng)光電狀告惠科專利侵權(quán)的17個(gè)案件全
- 深圳華星、惠州華星、華顯光電共403位
- 武漢京東方員工返程工作仍在持續(xù)推進(jìn),
- 京東方、華星光電復(fù)崗率已超90%
- 廈門天馬微電子收到廈門火炬高技術(shù)產(chǎn)業(yè)







業(yè)務(wù)咨詢微信:13183843395(掃描下方左側(cè)二維碼)