2020-2-6 前端達(dá)人
現(xiàn)如今無論是工作匯報(bào),產(chǎn)品設(shè)計(jì),后臺設(shè)計(jì)甚至是數(shù)據(jù)大屏,越來越多的設(shè)計(jì)師需要和數(shù)據(jù)打交道。尤其是想要做B端的設(shè)計(jì)師,數(shù)據(jù)可視化更是必不可少的一個(gè)技能。數(shù)據(jù)可視化,可謂是越來越體現(xiàn)一個(gè)設(shè)計(jì)師的專業(yè)能力。
因此掌握數(shù)據(jù)可視化能力,是面向未來的設(shè)計(jì)師所必備的能力。然而尷尬的是,國內(nèi)沒有一款針對于教學(xué)數(shù)據(jù)可視化的全套解決方案,這讓很多渴望學(xué)習(xí)的設(shè)計(jì)師摸不著頭腦。所以這也促使我開啟了這個(gè)系列――「設(shè)計(jì)師需要了解的數(shù)據(jù)可視化」,希望能夠給大家?guī)硪恍┎灰粯拥膬?nèi)容,為大家梳理一個(gè)完整的數(shù)據(jù)可視化框架。
今天帶來的就是這個(gè)系列的第一篇,數(shù)據(jù)可視化的概念以及數(shù)據(jù)可視化設(shè)計(jì)的基本準(zhǔn)則。最近一直在做國際外包,時(shí)間非常的零散,而寫邏輯性強(qiáng)的文章又非常耗費(fèi)精力。所以從開題到現(xiàn)在,用了將近2個(gè)月的時(shí)間才將這篇文章徹底收尾。全文總計(jì)25000字左右,閱讀需要20分鐘左右,干貨滿滿,請大家做好準(zhǔn)備。(如果沒有時(shí)間,我之后我也會(huì)將該內(nèi)容錄成音頻,如果有興趣,可以持續(xù)關(guān)注我)
什么是數(shù)據(jù)可視化
數(shù)據(jù)可視化就是借助視覺的表達(dá)方式(不局限于文字),將枯燥的,專業(yè)的,不直觀的數(shù)據(jù)內(nèi)容,有趣的、淺顯的、直觀的傳達(dá)給觀眾的一種手段。
非設(shè)計(jì)師在制作數(shù)據(jù)可視化時(shí),往往會(huì)因?yàn)橹攸c(diǎn)突出數(shù)據(jù)的重要性,而讓可視化圖表變得枯燥乏味。而設(shè)計(jì)師在制作數(shù)據(jù)可視化時(shí),又會(huì)因?yàn)檫^度注重絢麗多彩而讓數(shù)據(jù)的呈現(xiàn)效果大打折扣。所以在這種大環(huán)境下,催生出了數(shù)據(jù)可視化行業(yè)。作為設(shè)計(jì)師,如何擁抱這個(gè)新興的行業(yè),如何把握設(shè)計(jì)與功能之間的平衡,從而更好的溝通與傳達(dá)信息,即是本文的重點(diǎn)。
信息圖表,就是數(shù)據(jù)可視化后產(chǎn)生的結(jié)果,就是我們在工作匯報(bào)中,項(xiàng)目介紹中,以及后臺系統(tǒng)中經(jīng)常見到的數(shù)據(jù)圖表。信息圖形由信息和圖形兩個(gè)詞語組成,它被稱之為「信息圖形」(Infographics或Information Graphics)。
信息圖形最初是在舊的紙質(zhì)媒體上刊登的,更加有助于人們理解新聞信息的可視化內(nèi)容。
信息圖表的分類
根據(jù)木村博之的定義,從視覺表現(xiàn)形式的角度,將「信息圖表」的呈現(xiàn)方式分為六大類:圖解(Diagram)、圖表(Chart)、表格(Table)、統(tǒng)計(jì)圖(Graph)、地圖(Map)、圖形符號(Pictogram)。
1. 圖解—主要運(yùn)用插圖對事物進(jìn)行說明
文字有時(shí)候是一種匱乏的信息傳遞方式,而可視化的方式,則是人類最本源的一種信息傳遞方式,圖解就是將很多無法準(zhǔn)確或用語言傳達(dá)的內(nèi)容,以生動(dòng)形象的圖形解釋出來。下圖是一張經(jīng)典的對于咖啡種類圖解,38種咖啡配方,不必要用多余的文字解釋,直接用圖解表示,簡單明了,清晰易懂。
2. 圖表—運(yùn)用圖形、線條及插圖等,闡述事物的相關(guān)關(guān)系
圖表通常用于簡化人們對于大量數(shù)據(jù)之間的關(guān)系的理解。人們通常理解圖表會(huì)比理解數(shù)據(jù)要快很多。圖表和圖解唯一的不同點(diǎn)在于,圖解是用可視化的方式去傳遞信息,而圖表則是用來去闡述信息之間的邏輯關(guān)系。流程圖就是典型的圖表。
下圖是一張寵物狗的進(jìn)化圖,用巧妙的方式清晰地向我們傳遞了,狼是如何被人類馴化成不同種類的寵物狗的。
3. 表格—根據(jù)特定信息標(biāo)準(zhǔn)進(jìn)行區(qū)分,設(shè)置縱軸和橫軸
表格是按照行和列或者采用更復(fù)雜的結(jié)構(gòu)排列的數(shù)據(jù),表格廣泛應(yīng)用于通信、研究和數(shù)據(jù)分析。其實(shí)表格并沒有一個(gè)確定的定義,它會(huì)因?yàn)椴煌男袠I(yè)和談?wù)摥h(huán)境而存在差異.
4. 統(tǒng)計(jì)圖—通過數(shù)值來表現(xiàn)變化趨勢或者進(jìn)行比較
統(tǒng)計(jì)圖是根據(jù)統(tǒng)計(jì)數(shù)字,用 幾何圖形 、事物形象和地圖等繪制的各種圖形。它具有 直觀 、 形象 、 生動(dòng) 、 具體 等特點(diǎn)。統(tǒng)計(jì)圖可以使復(fù)雜的統(tǒng)計(jì)數(shù)字簡單化、通俗化、形象化,使人一目了然,便于理解和比較。因此,統(tǒng)計(jì)圖在統(tǒng)計(jì) 資料整理 與分析中占有重要地位,并得到廣泛應(yīng)用。
下圖是大城市通勤的時(shí)長統(tǒng)計(jì),通過這些柱狀圖,我們能很清晰的看出各個(gè)級別的城市通勤時(shí)長的比例關(guān)系,并了解他們的擁堵時(shí)長和非擁堵時(shí)長分別是怎樣的情況。
5. 地圖—描述在特定區(qū)域和空間里的位置關(guān)系
將真實(shí)的世界轉(zhuǎn)換為平面,在此過程中必然要講一些東西略去。實(shí)際上,要說「省略」是地圖上最關(guān)鍵的詞也不為過,無論是哪種信息地圖,最重要的是讓用戶找到想要看到的信息。
信息地圖也可分為兩大類:
第一類,將整個(gè)區(qū)域的布局或結(jié)構(gòu)完整呈現(xiàn)的地圖。
第二類,將特定對象突出顯示的地圖。
以下是美國各州擁有槍支人數(shù)占總?cè)藬?shù)的百分比統(tǒng)計(jì)圖。
6. 圖形符號—不使用文字,直接用圖畫傳達(dá)信息
所謂圖形符號(也就是我們常說的icon),基本就是通過易于理解、與人直覺相符的圖形傳達(dá)信息的一種形式。生活中處處存在圖形符號,包括地鐵站出入口上的地鐵標(biāo)識,路邊的指示牌與限速標(biāo)識。人們會(huì)約定俗成的運(yùn)用一些符號來代表一些固定的意思,比如廁所門口的男女標(biāo)識,很多商店為了個(gè)性化設(shè)計(jì),使用了不常用的符號來表示男女,這會(huì)給消費(fèi)者造成很大的困擾,因?yàn)檫@脫離了他們常見的理解范圍。
圖形符號的設(shè)計(jì)原則是盡可能不使用文字,其作用有兩條:
避免語言不通造成的困擾。
更便捷的、更清晰的傳遞信息。
多年來,最經(jīng)典的圖形符號應(yīng)用案例可以說是奧運(yùn)會(huì)和殘奧會(huì)的運(yùn)動(dòng)圖標(biāo)了。圖形符號可以說已經(jīng)成為奧運(yùn)會(huì)和殘奧會(huì)的重要組成部分,就像火炬?zhèn)鬟f和運(yùn)動(dòng)會(huì)LOGO一樣,從賽事門票到奧運(yùn)村的品牌,圖形符號都在被廣泛使用。
下圖即為東京奧運(yùn)會(huì)的運(yùn)動(dòng)圖形符號(局部)
達(dá)到數(shù)據(jù)可視化目標(biāo)的基本方法
目前我們工作中經(jīng)常遇到的數(shù)據(jù)可視化,大多數(shù)是制作數(shù)據(jù)圖表(即統(tǒng)計(jì)圖 Graph),所以我們本文的主要教學(xué)內(nèi)容也是圍繞著如何制作統(tǒng)計(jì)圖來說。
制作統(tǒng)計(jì)圖的過程可以被四個(gè)步驟,分別是:明確目的、選擇圖表、視覺設(shè)計(jì)、突出信息。
明確目的:明確數(shù)據(jù)可視化的目標(biāo),通過數(shù)據(jù)可視化我們要解決什么樣的問題,需要探索什么內(nèi)容或陳述什么事實(shí),并選擇合適的圖表。
選擇圖表:圍繞目標(biāo)找到能提供信息的指標(biāo)或者數(shù)據(jù),選擇合適的圖形去展示需要可視化的數(shù)據(jù)。
視覺設(shè)計(jì):以可視化的手段將數(shù)據(jù)轉(zhuǎn)化成有趣的設(shè)計(jì)語言。
突出信息:根據(jù)可視化展示目標(biāo),將重要信息添加輔助線或更改顏色等手段,進(jìn)行信息的凸顯,將用戶的注意力引向關(guān)鍵信息,幫助用戶理解數(shù)據(jù)意義。
1. 明確目的
大多數(shù)情況,明確圖表本身要達(dá)到的目的,比制作好圖表本身更加重要。如果對數(shù)據(jù)認(rèn)識不清,就會(huì)造成2種結(jié)果:
無法擬定合適的圖表標(biāo)題,從而使讀者失去閱讀圖表的興趣。
無法選擇出正確的可視化方式,從而使圖表難以理解。
知識點(diǎn) 01:好的圖表標(biāo)題 ―― 等于成功的一半
大多數(shù)圖表都需要一個(gè)好的標(biāo)題,這樣才能讓面試官知道他們在看什么。
標(biāo)題應(yīng)該是一個(gè)結(jié)論,是你希望面試官從中獲得的信息(有意義并且有趣的部分),而不僅僅是對圖表展示內(nèi)容的概括(即無意義且無趣的部分)。
2. 選擇圖表
Andrew Abela 根據(jù)統(tǒng)計(jì)圖的主要功能,將所有的統(tǒng)計(jì)圖分為了四大類:比較、聯(lián)系、分布、構(gòu)成。在其資料的基礎(chǔ)上,我制作了一套更適合設(shè)計(jì)師的「圖表選擇器」(The Way of Data Visualization)。
所以作為新手的我們,只要能熟練掌握這六種圖表,即可應(yīng)付大部分的使用場景,而對于我們這種更專業(yè)的人士來說,上述的「圖表選擇器」能夠大大提高我們的工作效率。
3. 視覺設(shè)計(jì)
接下來也是數(shù)據(jù)可視化中最重要的一步,視覺設(shè)計(jì)。很多時(shí)候我們在設(shè)計(jì)圖表時(shí)沒有既定的規(guī)則,全憑借在平面設(shè)計(jì)和UI設(shè)計(jì)中獲得的知識來進(jìn)行設(shè)計(jì)。但之所以數(shù)據(jù)可視化被單獨(dú)細(xì)化成一個(gè)類別,并在國外蓬勃發(fā)展,甚至衍生出了專業(yè)的數(shù)據(jù)可視化設(shè)計(jì)師,就證明在數(shù)據(jù)可視化領(lǐng)域,很多規(guī)則是與其他設(shè)計(jì)不同的。
一個(gè)最簡單的例子,市面上大多數(shù)的配色方案都在數(shù)據(jù)可視化領(lǐng)域不適用。
毫無包容性的配色方案
首先,適用于數(shù)據(jù)可視化的配色方案,一定在明度上是有變化的。很多配色方案不僅不具備這種特性,甚至不會(huì)考慮包容性。UI設(shè)計(jì)的配色方案看起來都很絢麗多彩,但是很明顯,他們是為了用戶界面而設(shè)計(jì)的。色盲人士往往很難去閱讀那些運(yùn)用了低包容性配色方案的可視化圖表。
沒有足夠多的顏色種類
另一個(gè)問題就是,大多數(shù)配色方案并沒有足夠多的顏色種類。
在構(gòu)建一套完整的可視化圖表時(shí),我們往往至少需要6種顏色的調(diào)色板來進(jìn)行設(shè)計(jì),我們見過的大多數(shù)配色方案并不具有這么多種顏色。
雖然這些配色方案同樣絢麗多彩,但是他們不能靈活應(yīng)對圖表中復(fù)雜的信息層級。
難以區(qū)分層級的配色方案
漸變配色方案可以輕松解決上述兩個(gè)問題(顏色之間有明顯的對比,且可以無限細(xì)分顏色種類)。但很抱歉,這樣的配色方案同樣不適用數(shù)據(jù)可視化,我們舉一些簡單的例子大家就可以明白。
這些漸變色看起來沒什么問題,但是當(dāng)我們選擇其中一個(gè),將其顏色分類擴(kuò)充到10時(shí),問題就出現(xiàn)了。
你能區(qū)分出最左邊的4個(gè)顏色之間有什么差別嗎?恐怕很難。
前面的闡述,大多數(shù)是為了讓大家對數(shù)據(jù)可視化有一個(gè)清晰的概念。在「視覺設(shè)計(jì)」這一章我將重點(diǎn)講解,數(shù)據(jù)可視化(即圖表制作時(shí))需要注意的設(shè)計(jì)準(zhǔn)則。下面的內(nèi)容主要解決大家在數(shù)據(jù)可視化中所遇到的三個(gè)問題。
如何制作數(shù)據(jù)可視化圖表?
如何快速的制作數(shù)據(jù)可視化圖表?
如何制作一份兼具實(shí)用性和美觀性的數(shù)據(jù)可視化圖表?
適用于所有圖表的制作規(guī)則
1. 圖表中的線條
有無刻度線
當(dāng)數(shù)據(jù)的數(shù)值非常重要時(shí),一定要使用刻度線來讓觀眾更清晰的了解數(shù)據(jù)。
如果你的聽眾只需要了解A數(shù)據(jù)大于B數(shù)據(jù),那么刻度線是沒有必要的,只需在坐標(biāo)軸上使用小刻度即可。如果你的讀者要花一些時(shí)間在柱狀圖上并感興趣A數(shù)據(jù)是45.65而B數(shù)據(jù)是37.66,那么使用刻度線將有助于他們理解。
刻度線的顏色
如果確定要使用刻度線,則需要使它們比作為實(shí)際數(shù)據(jù)的點(diǎn)或者線條要層級低。因?yàn)檫@些刻度線也屬于背景的一部分。
總結(jié)來說,不要使用全黑或者全白的線條。如果你的背景顏色是白色或者淺色系,那么你應(yīng)該讓你的線條灰一些。你也同樣可以讓這些線條變成亮灰色,點(diǎn)狀或者虛線.
負(fù)空間的刻度線網(wǎng)格
你也可以使用灰色的背景,然后將刻度線反白。這是一種很好的利用負(fù)空間做設(shè)計(jì)的方法。或者刻度線可以用稍微偏黑色一點(diǎn)的灰色,因?yàn)楹苊黠@這樣會(huì)讓刻度線更融入背景一些。
坐標(biāo)線
坐標(biāo)線應(yīng)該比刻度線,線條更粗,顏色更深,才能讓整個(gè)圖表顯得更有主次的區(qū)分。
2. 選擇合適的坐標(biāo)上下限
選擇合適的坐標(biāo)下限
一般來講,我們應(yīng)該把我們的坐標(biāo)下限設(shè)置為0。
有人會(huì)問,這樣的話我們的數(shù)據(jù)就會(huì)變得沒有那么起伏變化了。那可能是因?yàn)槟愕臄?shù)據(jù)本身就沒有那么長勢喜人。
但同樣,其實(shí)很多事情可以反過來思考,之所以有人愿意不把坐標(biāo)軸設(shè)定為0為起點(diǎn),其實(shí)就是為了在視覺上讓人形成對比強(qiáng)烈的感覺,從而突出業(yè)績。這種方法的使用因人而異。
比如在小米的發(fā)布會(huì)中,為了對比,小米把數(shù)據(jù)的下限起點(diǎn)設(shè)置為了10000,從而使小米的跑分?jǐn)?shù)據(jù)看似跑贏了友商一倍還多,但其實(shí)小米的數(shù)據(jù)增長,只比友商高出了25%。
再舉個(gè)例子:這張條形圖也是經(jīng)??怂剐侣劀?zhǔn)許使用的。
3月31日目標(biāo)的值為7,066,000,比6,000,000高17.8%,然而第二個(gè)柱形幾乎是第一個(gè)柱形長度的三倍。
這也同時(shí)提醒我們要注意,在觀看別人的圖表時(shí),僅僅觀看柱狀圖的高低趨勢往往不能得出正確結(jié)論,需要注意坐標(biāo)軸起始位置有沒有被人做過虛假處理。
同樣的,有些人為了匯報(bào)業(yè)績,也會(huì)使每個(gè)刻度的跨度不一致,從而提高柱狀圖整體的對比度。這種情況也應(yīng)該多留心觀察,不要被表面的內(nèi)容所迷惑。
選擇合適的坐標(biāo)上限
坐標(biāo)軸中另一個(gè)需要注意的點(diǎn)即為坐標(biāo)上限。上限界定的方式有兩種,可根據(jù)需求自行判斷。
如果只是為了比較各個(gè)數(shù)據(jù)的數(shù)值,可以用數(shù)據(jù)的最大值作為坐標(biāo)軸上限。
如果是需要將數(shù)據(jù)與某個(gè)最大值比較,則用此最大值作為上限.
3. 刻度值
雖然Y軸的刻度值標(biāo)簽通常放置在刻度線的最左邊,但我們也可以把它們放置在其他的地方,比如刻度線的頂部。(但此時(shí)一定要把握好親密性原則,稍不注意就會(huì)引起觀眾的困惑,這也是我們經(jīng)常會(huì)在看其他圖表時(shí)遇到的問題,到底刻度值標(biāo)記的是哪一條刻度線?)
刻度線和刻度值相輔相成,這會(huì)讓圖表看起來更加規(guī)范??潭戎捣胖迷谀睦餆o所謂好壞,只是需要根據(jù)不同的場合加以使用。
間隔均勻
在坐標(biāo)軸上應(yīng)該使用均勻的跨度0,5,10,15,20,而非不均勻的跨度0,3,5,16,50。這里即呼應(yīng)上方「坐標(biāo)軸下限」中的最后一點(diǎn),有時(shí)圖表制作人也會(huì)用不均勻的刻度來蒙騙我們對數(shù)據(jù)產(chǎn)生誤解。
當(dāng)然,此處的舉例只是夸大了錯(cuò)誤的效果,現(xiàn)實(shí)生活中的不均勻刻度往往更加隱蔽,需要我們仔細(xì)去甄別。
不要使用非水平和豎直的文字標(biāo)注,也不要使用轉(zhuǎn)行
有時(shí)坐標(biāo)軸上的注釋文字會(huì)很多,所以很多人為了妥協(xié),在小空間內(nèi)顯示出所有的文字標(biāo)注內(nèi)容,而使用傾斜的文本,或者將文本轉(zhuǎn)行處理。
不要用過于復(fù)雜的設(shè)計(jì)形式,數(shù)據(jù)可視化的第一要義是簡單易懂,所以在遇到標(biāo)簽文字過長時(shí),可以采用以下方法進(jìn)行解決。
4. 數(shù)據(jù)的處理與排序
我們在每次制作前都對數(shù)據(jù)進(jìn)行排序,而不是隨機(jī)排布。這樣我們可以在圖表中為觀眾展示更多信息,即某個(gè)數(shù)據(jù)在總的數(shù)據(jù)庫里面的序列。
大小排序
我們還是從一系列國家的數(shù)據(jù)開始。
目前的排布很隨機(jī),或者是按照字母表排序的。接下來我們要按照數(shù)值從大到小進(jìn)行排列。
我們隨機(jī)挑選一組數(shù)據(jù),比如玻利維亞(Bolivia),再上圖中,我們只能得到玻利維亞的數(shù)據(jù)值,以及他大概在數(shù)據(jù)庫中排在中游的位置,僅此而已。但是下圖中,根據(jù)大小排列好的數(shù)據(jù),我們不僅可以獲得剛才的兩個(gè)信息,同時(shí)還能馬上知道玻利維亞在整個(gè)圖表中的排名(第四名)。同時(shí)你還可以看到吉爾吉斯斯坦(Krygyzstan)和越南(Vietnam)居于榜首而美國(America)是倒數(shù)第一,這就是好的圖表能給我們帶來的「更多的信息」。
我們再看一遍按照字母表排序的圖表,你能輕易的輸說出「岡比亞(Gambia)」排名第幾嗎?
刻意的序列
在發(fā)布會(huì)中我們常常見到,為了突出自己產(chǎn)品的強(qiáng)悍,往往要與友商的數(shù)據(jù)做對比,在這種情況下,我們的數(shù)據(jù)也不是隨機(jī)排布的,我給這種數(shù)據(jù)排布方法起了個(gè)名字,叫「刻意的序列」。
在 魅族 16th 的發(fā)布會(huì)中,這張旗艦機(jī)重量對比的圖表很有講究,可以發(fā)現(xiàn),除了索尼(最重的手機(jī))以及 魅族 16th(最輕的手機(jī))外,其余所有的手機(jī)都是按照降序排列。不看顏色對比,把 236g 的索尼和 152g 的魅族放置在一起進(jìn)行講解,以更加突出魅族的輕薄。
那么這個(gè)圖表的數(shù)據(jù)排序其實(shí)經(jīng)過了三次處理。
把重量從高到低排序。
把重量最高的和的手機(jī)單獨(dú)放置,并給予特殊顏色單獨(dú)顯示。
把這兩個(gè)數(shù)據(jù)放置在最后,再次突出對比,吸引觀眾注意。
這就是我們學(xué)習(xí)數(shù)據(jù)可視化時(shí)非常需要注意的細(xì)節(jié)點(diǎn),在數(shù)據(jù)可視化中,細(xì)節(jié)決定成敗。
5. 關(guān)于圖例的設(shè)計(jì)
數(shù)字需要四舍五入
我們有時(shí)為了保證圖表的清晰整潔,并不能完全選擇符合數(shù)據(jù)上限和下限的數(shù)字作為刻度,而是選擇一些取整的數(shù)字。
同樣的,這不僅僅適用于圖例中的數(shù)字,同樣適用于坐標(biāo)軸上下限的數(shù)字。
標(biāo)記圖例的邊界比標(biāo)記圖例的范圍更好
在需要用多種顏色做區(qū)分的圖表中,有時(shí)可以通過標(biāo)記圖例邊界而不是標(biāo)記圖例范圍的方式,來提高觀眾的閱讀效率。
水平或者垂直方向的圖例
對于數(shù)字的刻度,水平圖例往往比垂直圖例更加容易閱讀,因?yàn)檫@符合我們的閱讀習(xí)慣。
但是,對于有類別區(qū)分的圖例來說,垂直圖例往往效果更好,因?yàn)槲覀兛梢栽趫D例的右邊放置更長的文本(跟坐標(biāo)軸的注釋同樣的道理)
刪除內(nèi)部邊界
有時(shí)我們甚至可以更簡約的表示圖例,當(dāng)你只想表達(dá)一個(gè)漸進(jìn)的過程,24和55之間的差異并不重要,觀眾只需要知道后者比前者大即可。在這種情況下,我們可以嘗試只標(biāo)記出圖例的最大值和最小值,而不必要標(biāo)記出每個(gè)邊界或者顏色,這樣可以給觀眾減少不必要的信息負(fù)擔(dān)。
6. 圖表上的文字信息
文字標(biāo)注的作用,不是來填充空白的,而是用來強(qiáng)調(diào)相關(guān)信息或拓展額外的背景知識的。
引用消息來源
大多數(shù)情況下,我們制作的圖表都不會(huì)將原數(shù)據(jù)附在旁邊,因此最好在圖表中引用你的數(shù)據(jù)來源。一般來說,引用規(guī)則是在左下角防止數(shù)據(jù)來源信息,往往采用特殊字體
用數(shù)字輔助表達(dá)
有時(shí)你需要在你的圖表中標(biāo)注出數(shù)據(jù)值,而不僅僅應(yīng)該依賴視覺元素向觀眾傳達(dá)信息。
通常來說,不需要太嚴(yán)謹(jǐn)?shù)膱D表,我們會(huì)對數(shù)據(jù)值進(jìn)行一定程度的處理。
有小數(shù)的值四舍五入。(234.19 ―― 234)
在數(shù)據(jù)的量級非常大時(shí),將一定位數(shù)數(shù)字取整。(52,133 ―― 52,000)
當(dāng)所有數(shù)據(jù)的量級都非常大時(shí),將一定位數(shù)的數(shù)字縮進(jìn)單位中。(521,000,000 元 ―― 5.21 億元)
Y軸刻度值盡量轉(zhuǎn)化為千位分隔符,如K,M,B。
Y軸最大值取值要恰當(dāng),保證圖表占據(jù)2/3以上。
如果我們不這樣處理,你就會(huì)發(fā)現(xiàn)你的圖表總是不那么整潔。
7. 控制字體的數(shù)量
圖表中的字體數(shù)量以及字體大小的種類加起來不要超過3種(標(biāo)題和副標(biāo)題除外)。通常來說,我們在制作時(shí)會(huì)把注釋和坐標(biāo)軸標(biāo)簽設(shè)置為兩種字體樣式,所以只需要確保將這兩者統(tǒng)一起來,那么就可以保證我們的圖表不超過3種字體樣式。
柱狀圖的制作規(guī)范
1. 柱狀過寬或過窄
過寬的柱會(huì)讓圖表看起來笨重,盡量保持柱的輕薄,這樣可以保持優(yōu)雅的外觀,但是太薄了會(huì)讓用戶很難對數(shù)據(jù)進(jìn)行比較。
標(biāo)準(zhǔn)的數(shù)值為,柱的寬度為「柱與柱間距」的2倍,當(dāng)然這只是個(gè)參考值,實(shí)際我們根據(jù)不同的情況,對寬度作出調(diào)整。
2. 盡量不要超過7個(gè)值
一般進(jìn)行數(shù)據(jù)比較時(shí),柱狀圖建議不要超過5個(gè)數(shù)據(jù)值,對于條形圖來說,建議不要超過7個(gè)數(shù)據(jù)值。
折線圖的制作規(guī)范
1. 有層次區(qū)分的折線/曲線
當(dāng)我們在制作一個(gè)復(fù)雜的折線圖時(shí),我們想要顯示其中的一條數(shù)據(jù),最好的方法就是加強(qiáng)它與其他元素的對比,從而提高它的重要性層級。
利用我們之前的方法,把其他的數(shù)據(jù)變?yōu)榛疑?
將我們需要強(qiáng)調(diào)的曲線置于頂層。
2. 什么時(shí)候是用折線圖
2017年1月和2月的大米出口量是相關(guān)的,他們代表一種數(shù)據(jù)在不同時(shí)間下的數(shù)據(jù)值,因此我們可以用折線圖將它們連接起來。但是2017年1月的大米出口量和玉米出口量(16萬噸)是不相關(guān)的,所以我們不能隨便用折線圖來代替柱狀圖。
用折線圖可以很好的表示每天去醫(yī)院的人數(shù),因?yàn)榻y(tǒng)計(jì)每天去醫(yī)院的人數(shù)可以用來觀察趨勢。
3. 按照時(shí)間推進(jìn)的數(shù)據(jù)并不能總是用折線圖來表示
有時(shí)我們也需要進(jìn)行一些區(qū)分。如果我們想要繪制美國大規(guī)模槍擊事件的傷亡人數(shù)隨時(shí)間推移的圖表。這些槍擊事件確實(shí)是一個(gè)接一個(gè)發(fā)生的,但是它們本質(zhì)上卻沒有關(guān)系,所以你不能用折線圖(應(yīng)該用條形圖)。
但是,如果按年份對它們進(jìn)行歸類,并計(jì)算每年的傷亡人數(shù)。這樣的情況下可以使用折線圖進(jìn)行統(tǒng)計(jì),因?yàn)榻y(tǒng)計(jì)結(jié)果的趨勢變化是有意義的,是可以得出相應(yīng)的結(jié)論的。
4. 使鋸齒狀的線條平滑
如果你的折線上下浮動(dòng)過于劇烈,那么你應(yīng)該嘗試?yán)L時(shí)間間隔,比如不每天采樣而以周為單位來采樣。觀眾們不會(huì)去閱讀鋸齒狀的線條,或者說他們不會(huì)喜歡這樣的圖表。
5. 在你的折線圖中繪制數(shù)據(jù)點(diǎn)
當(dāng)有些特定的數(shù)值特別重要時(shí),我們可以在線條上標(biāo)注出他們,如果你有大量的數(shù)據(jù)需要展示,或者你只想展示數(shù)據(jù)的走勢,那么其實(shí)你只需要使用折線就足夠了,不需要增加數(shù)據(jù)點(diǎn)。不信你可以試試,大量的數(shù)據(jù)點(diǎn) = 混亂不堪的界面。
餅圖的制作規(guī)范
餅圖和圓環(huán)圖在數(shù)據(jù)可視化方面生病狼藉,但卻是使用的最頻繁的圖表之一。餅圖是一種應(yīng)該避免使用的圖表,因?yàn)槿庋蹖γ娣e大小不敏感,并且?guī)缀鯖]有對與角度大小的概念。更何況是肉眼完全無法重合比較的圖形。
例如上面左圖,我們很難去比較每日從肉類(Meat)中攝入的卡路里與從糖類(Sugar&Fat)中攝入的卡路里數(shù)量的比例。人眼的直覺中,糖類與肉類的比例應(yīng)該在2:1左右,但實(shí)際的比例卻是1.5:1。
上述右圖將這一現(xiàn)象放大的更加明顯。人眼的直覺中,辦公與接待的數(shù)值差距非常大(這是由于我們直覺更習(xí)慣從面積上做判斷),但實(shí)際上接待與辦公的比例為1.5:1。
很多設(shè)計(jì)師認(rèn)為餅圖應(yīng)該是被禁止使用的圖表,我覺得不能說的太絕對,不管怎樣,迄今為止事實(shí)情況是,仍然有很多人在使用餅圖,所以我們至少可以爭取正確的使用他們。
雖然如此,但是在強(qiáng)調(diào)個(gè)體與總體的比例關(guān)系方面,餅圖還是有其獨(dú)特的優(yōu)勢。
1. 避免過度分割餅圖,否則最終會(huì)導(dǎo)致根本無法閱讀
那么有同學(xué)會(huì)問:分割多少塊是過度分割?這是一個(gè)需要在實(shí)際制作時(shí)進(jìn)行判斷的問題。一個(gè)簡單的方法,如果我們已經(jīng)很難從圖中看出其中一塊扇形是另一塊的兩倍大了,或者好幾塊較小的扇形看起來差不多大時(shí),那么就不能再分割了。此時(shí)可以考慮把較小的類目歸入一個(gè)更大的:「其他」模塊。
如果一定要給出一個(gè)確切的分類數(shù)目,我認(rèn)為一般不要超過9個(gè),超過的話,建議用條形圖來展示,不要太依賴于餅圖。
例:這張餅圖來自維基百科,它展示了國家的不同區(qū)域。
左邊這張餅圖已經(jīng)分割出了無數(shù)個(gè)扇形了,但旁邊另分離出一張餅圖,顯示出了左圖中更多的,看不到的更小國家的情況,以此來提供更多的信息。其實(shí)還有很多的方法可以展示這組數(shù)據(jù),例如樹狀圖或者普通的地圖。局限較大的餅圖只適用于展示只有幾組值的數(shù)據(jù)。
除餅圖外,環(huán)形圖(甜甜圈圖)亦可表示占比,其差異是將餅圖的中間區(qū)域挖空,在空心區(qū)域顯示文本信息,比如標(biāo)題,優(yōu)勢是其「空間利用率更高」。
2. 餅圖的起始位置要得當(dāng)
人們的閱讀習(xí)慣往往是從12點(diǎn)鐘開始的(跟表盤類似)。所以我們在制作餅圖時(shí)也要遵循觀眾的閱讀習(xí)慣,從12點(diǎn)鐘方向開始制作,這樣才能呈現(xiàn)出更加清晰的數(shù)據(jù)。
3. 餅圖的順序要得當(dāng)
這個(gè)規(guī)則與其他的數(shù)據(jù)圖表一致,我們在拿到數(shù)據(jù)后,不要急于去進(jìn)行數(shù)據(jù)可視化,而是應(yīng)該對數(shù)據(jù)進(jìn)行排序處理,一般來講,我們對于圖表都要進(jìn)行從大到小的數(shù)據(jù)排序,才更有利于我們展示數(shù)據(jù),但是有一個(gè)例外的情況。
當(dāng)數(shù)據(jù)中包含一個(gè)類別叫「其他」時(shí),無論其他的內(nèi)容占比為多少,我們最好都把他放置在餅圖的最后來展示。
4. 切割的展示方式
有時(shí),我們可以想一些創(chuàng)意形式來解決餅圖對比不夠明顯的問題。
當(dāng)我們將餅圖分拆開來設(shè)計(jì)時(shí),將他們設(shè)置為同一起點(diǎn),我們可以清晰的對比出數(shù)據(jù)的大小,但嚴(yán)格意義上來講這已經(jīng)不算是餅圖了。
散點(diǎn)圖的制作范圍
1. 散點(diǎn)圖可以承載最多四個(gè)維度的變量
當(dāng)包含多重變量時(shí),散點(diǎn)圖本身包含2個(gè)維度的數(shù)據(jù),當(dāng)出現(xiàn)更多維度時(shí),我們可以通過改變散點(diǎn)的顏色和大小甚至是形狀來對數(shù)據(jù)進(jìn)行更多維度的劃分,這個(gè)時(shí)候,散點(diǎn)圖即變成了氣泡圖。
2. 盡量為散點(diǎn)圖添加趨勢線
通過添加趨勢線,可以更好的讓觀眾感受數(shù)據(jù)的變化,人們不會(huì)愿意接受未處理的數(shù)據(jù),往往傾向于接受已經(jīng)被處理好的數(shù)據(jù)結(jié)果。
面積圖的制作規(guī)范
面積圖又叫區(qū)域圖,與折線圖很相近,都可以用來展示隨著連續(xù)時(shí)間的推移數(shù)據(jù)的變化趨勢。區(qū)別在于,面積圖在折線與類別數(shù)據(jù)的水平軸(X軸)之間填充顏色或者紋理,形成一個(gè)面表示數(shù)據(jù)體積。相對于折線而言,被填充的區(qū)域可以更好的引起人們對總值趨勢的注意,所以面積圖主要用于傳達(dá)趨勢的大小,而不是確切的單個(gè)數(shù)據(jù)值。面積圖有三種不同的形態(tài),根據(jù)數(shù)據(jù)以及背景的不同,均有其最佳的展示環(huán)境。
1. 盡量不重疊,使用透明色
當(dāng)圖表中要展示多組數(shù)據(jù)時(shí),最好保證所有的數(shù)據(jù)都不重疊,這樣才可以更好的展示數(shù)據(jù)。如果無法避免重疊,則應(yīng)該適當(dāng)?shù)脑O(shè)置顏色和透明度,使得重疊的區(qū)域變得更加易讀。
2. 不要超過四個(gè)類別
面積圖只適合展現(xiàn)少量的數(shù)據(jù),最多建議不要超過四個(gè)類別,否則就會(huì)導(dǎo)致非常難以識別。因此在多個(gè)類別下,要盡量避免使用面積圖。
突出信息
1. 重要的內(nèi)容用顏色區(qū)分
有時(shí)我們?yōu)榱送怀稣宫F(xiàn)某部分?jǐn)?shù)據(jù),需要對它們進(jìn)行特殊的處理(包括添加輔助線,更改顏色,線條粗細(xì)等方法)來加大它們與其他數(shù)據(jù)的對比,以吸引用戶注意,并表明你想陳述的觀點(diǎn)。
如上左圖,通過添加輔助線和標(biāo)紅的方式,來顯示快遞公司未達(dá)到60萬件派件標(biāo)準(zhǔn)的月份,從而突出顯示公司業(yè)績不合格部分。如上右圖,通過對9月份的顏色區(qū)分,來突出顯示二手房價(jià)格在9月份達(dá)到前所未有的高度。
2. 把不重要的內(nèi)容變?yōu)榛疑?/b>
對于不太重要的內(nèi)容,我們通常會(huì)把它們的層級降低,將其變?yōu)榛疑且粋€(gè)好方法。(如上左圖中1-6月與9月數(shù)據(jù)的配色,以及上右圖中1-8月數(shù)據(jù)的配色)
通常來說,我們會(huì)用灰色來標(biāo)記:
未被選中的元素或者背景。
為重要的數(shù)據(jù)點(diǎn)做對比的數(shù)據(jù)。
(在交互圖表中)不是當(dāng)前選中的元素。
3. 沒有那么多重點(diǎn)信息
如果你覺得每個(gè)信息點(diǎn)都很重要,然后為他們都做了特殊的備注,那么請把他們都去掉,因?yàn)槟乔∏∽C明他們都不重要。
數(shù)據(jù)可視化的精髓就在于你去用視覺元素去幫助用戶做篩選,如果觀眾們真的很想知道每個(gè)數(shù)據(jù)代表什么,那或許你應(yīng)該給他們展現(xiàn)一份表格而不是圖表。
4. 添加必要的輔助說明
關(guān)于這個(gè)圖表,如果我們不進(jìn)行標(biāo)注的話,它只能講述故事的一部分。如果要把故事講述的全面,那么就必須添加一些標(biāo)注。
如果我告訴你,這個(gè)圖表想告訴我們,在第6天的時(shí)候該團(tuán)隊(duì)使用了敏捷開發(fā),在使用新技術(shù)初期,Bug數(shù)量明顯上升,而后瞬間下降。加上了標(biāo)注,圖表講述了一個(gè)跟之前完全不一樣的故事。
所以,我們?yōu)榱烁玫恼f明我們的目的,有時(shí)需要對圖表進(jìn)行特殊處理,包括做一些突出某些信息的標(biāo)注。
5. 添加必要的輔助線
這一點(diǎn)主要針對于柱狀圖和折線圖,比如當(dāng)我們想要呈現(xiàn)兩個(gè)不同時(shí)期的數(shù)據(jù)變化時(shí),添加輔助線可以更直觀地體現(xiàn)出其中的變化。
比如像這個(gè)圖表,為了體現(xiàn)出響應(yīng)速度有很大的提升,,添加了相關(guān)輔助線并標(biāo)注了相應(yīng)的數(shù)字,使 PRO5 和 SONY Z3+ 之間的對比更加明顯.
轉(zhuǎn)自:簡書
作者:極創(chuàng)設(shè)計(jì)
鏈接:https://www.jianshu.com/p/a8996c452c2d
來源:簡書
著作權(quán)歸作者所有。商業(yè)轉(zhuǎn)載請聯(lián)系作者獲得授權(quán),非商業(yè)轉(zhuǎn)載請注明出處。
藍(lán)藍(lán)設(shè)計(jì)( m.ssll180.com )是一家專注而深入的界面設(shè)計(jì)公司,為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì) 、 圖標(biāo)定制 、 用戶體驗(yàn) 、交互設(shè)計(jì)、 網(wǎng)站建設(shè) 、平面設(shè)計(jì)服務(wù)
藍(lán)藍(lán)設(shè)計(jì)的小編 http://m.ssll180.com