超碰av在线|无码精品一区二区三区在线|伊人色色日韩一级片内射视频群批_欧美丰满少妇人妻HD高清在线_亚洲一区二区中文_亚洲无码动漫专区

萬字干貨系列,爆肝的實用圖表詳解指南

2021-8-24    seo達人


 

圖表的作用在于對數(shù)據(jù)的合理的詮釋而不是美觀。所以,在了解圖表怎么繪制前,更重要的是了解圖表是什么,包含哪些類型。下面就做下相應(yīng)解釋方便大家理解~

 

1.1 圖表是什么

在今天,隨著大數(shù)據(jù)和數(shù)據(jù)分析理念深入人心,圖表在 B 端設(shè)計的地位越發(fā)重要。

那么什么叫圖表呢?

圖表指的是可以直觀展示統(tǒng)計信息屬性和數(shù)值的圖形表格,對于多數(shù)人來說第一次接觸圖表概念都源自中小學計算機課程中的 Office Excel 表格教學。

 

要理解圖表,你就繞不開 Excel 這個軟件或其功能形式。我們都知道 Excel 是一個表格工具,可以任意填寫表格化的信息內(nèi)容進去。

但那只是呈現(xiàn)出來的表象,Excel 的真實身份應(yīng)該是一個數(shù)據(jù)記錄工具,通過這種表格形式記錄,比如班級學生成績、客戶聯(lián)系方式、倉庫進銷記錄等等。每一條記錄下的信息都是一條獨立的 “數(shù)據(jù)”。

 

盯著表格看,我們確實可以看到一些具體的信息、數(shù)據(jù)、內(nèi)容。但是,數(shù)據(jù)的作用只是讓我們自己去精確定位想要的內(nèi)容而已?顯然是否定的。

我們統(tǒng)計數(shù)據(jù)的目的,還包括要從眾多的數(shù)據(jù)條目中獲得反映真實情況的 “規(guī)律”、“趨勢”,如果我們只盯著數(shù)據(jù)條目一條條的瀏覽,是很難找出這些信息的。

于是,人類就發(fā)明了圖表這種可視化工具,幫助我們對數(shù)據(jù)進行總結(jié),用更直觀的視覺方式來認識數(shù)據(jù)和找出規(guī)律和趨勢,這也是為什么 Excel 是最強大的圖表生產(chǎn)軟件的原因之一。

 

總結(jié):圖表是統(tǒng)計學的子學科,它幫助我們更好的找到數(shù)據(jù)背后的真相,并做出正確的決定。

 

1.2 圖表的內(nèi)容構(gòu)成

圖表既然由數(shù)據(jù)內(nèi)容生成,這個生成和轉(zhuǎn)化的過程當然具備一些基本的規(guī)則和條件。要滿足圖表生成的數(shù)據(jù)必須要包含兩種基礎(chǔ)信息 —— ”維度“ 和 ”數(shù)值“。

它們是組成絕大多數(shù)圖表的基石,比如看下面的表格,一次體檢中有三個班級的5個同學,他們的身高、體重、體脂率、肌肉含量、視力各不相同。

 

我們可以從中挑選維度和數(shù)值,比如姓名做緯度(X軸),體脂率作為數(shù)值(Y軸),那么就可以生成基礎(chǔ)柱狀圖表。

 

從上面案例可以知道,橫向緯度表示的是你圖表中要包含多少不同的展示對象,縱向數(shù)值則表示你要顯示該維度的哪一類數(shù)據(jù)。

緯度通常指某個具體的人、日期、事件、分類,通常是 不可量化 的內(nèi)容。而數(shù)值則是指包含 可量化 的數(shù)據(jù)類型,重點要記得數(shù)值是指 “數(shù)據(jù)類型”,而不是指具體的參數(shù)值。

再進一步,上方生成的圖表,雖然直接反映了我們選擇的緯度、數(shù)值的情況,但顯然對于不了解數(shù)據(jù)背景的人來說太簡陋了,不知道它們代表的意義。所以,一個完整的圖表還會包含一些 “解釋” 性元素,來讓觀看者更好的理解圖表內(nèi)容。

所以,一個完整的圖表中除了中心圖形,還會包含標題、單位、緯度圖例、網(wǎng)格、選中提示等內(nèi)容,用來提升其閱讀性。

 

以上只是最基礎(chǔ)的示例,不同圖表、內(nèi)容,對說明信息的要求各有不同,我們會在下方做出一定的解釋。一個優(yōu)秀的設(shè)計師要學會如何因地制宜,優(yōu)化圖表的內(nèi)容構(gòu)成,并對展示的信息進行取舍。

 

1.3 圖表的類型認識

隨著統(tǒng)計學的發(fā)展,圖表也經(jīng)歷了一系列的增長與創(chuàng)新,除了我們常見的幾種圖表外,還發(fā)展出了大量平??床坏?,只存在于各自專業(yè)領(lǐng)域的特殊種類。但是,它們對我們的生活和工作也起到產(chǎn)生了重要的影響。

比如在新冠危機中,政府和專業(yè)機構(gòu)對民眾開放的數(shù)據(jù)就大量使用了圖表進行解釋,讓我們可以很清晰的了解事情的走勢和真相。

 

之所以有這么多不同圖表,讓人眼花繚亂,在于數(shù)據(jù)所包含的信息和特性不同,導(dǎo)致了它們所總結(jié)的規(guī)律類型也不同。

業(yè)界將圖表展示類型分成了四個大類,包含比較、分布、構(gòu)成、聯(lián)系,雖然比較簡陋,但這是新手認識圖表最簡單的方式。

 

我們簡單解釋下這四個分類代表的作用:

  • 比較:用來對比不同對象數(shù)值高低,比如上一份學生身高案例
  • 分布:展示不同對象數(shù)值的分布區(qū)間,比如新冠新增分布省份
  • 構(gòu)成:表示某子對象的構(gòu)成關(guān)系,比如班級中的男女比例
  • 聯(lián)系:表示不同對象之間的聯(lián)系情況,比如不同城市之間的人口流動

之后我們就會以這個框架,來解釋不同分類下的圖表,幫助大家建立對圖表的正確認識和設(shè)計方式。除了這種標準分類以外,我還額外做了一個歸類,就是基礎(chǔ)和高級圖表。

前面提到,一般圖表就只反映緯度、數(shù)值兩個方面的圖表類型,很容易理解。但復(fù)雜的圖表,就會超過這個范圍,它可能包含了多個維度、多種數(shù)值、甚至第三、第四。

比如下面這個散點圖,除了身高(緯度)、體重(數(shù)值)外,還表現(xiàn)了個體(圓點)、性別(色彩)。在圖表本身的解釋性元素中,還包含分布區(qū)域、最大最小值標識、體重/身高均值。

 

這已經(jīng)超出一個沒有接觸過統(tǒng)計的新手認知范疇了,是需要具體學習才能學會如何閱讀和應(yīng)用的圖表。

這還是比較簡單的高級圖表,往后還有類似?;鶊D、K線圖(韭菜的自我修養(yǎng))、和弦圖等類型,它們有各自使用的規(guī)范、參數(shù),以及應(yīng)用的場景。

 

高級圖表的復(fù)雜度和抽象性,決定了它的使用門檻較高,識別效率較低。而隨著數(shù)據(jù)各行各業(yè)數(shù)據(jù)重要性的提升,對圖表的需求已經(jīng)不再局限在二維抽象圖形的應(yīng)用上,而是提供了視覺效果更精美,制作過程更復(fù)雜,閱讀門檻更低的可視化數(shù)據(jù)展示內(nèi)容。

 

雖然我們在本篇文章不會拓展到大屏可視化的領(lǐng)域,但是掌握好平面二維的統(tǒng)計圖表,提升對統(tǒng)計目的的認識,是深入學習可視化的必要條件。

 

接下來,我們就要來介紹一下如何繪制圖表了。雖然圖表之間有比較大的區(qū)別,但它們有很多細節(jié)是具有統(tǒng)一規(guī)范的。優(yōu)先掌握這些一致的內(nèi)容,再理解不同圖表的具體繪制差異,可以幫助設(shè)計師快速上手圖表設(shè)計工作。

 

2.1 基本內(nèi)容繪制思路

上面我們提了,一個成熟的圖表會包含不少解釋性信息,怎么放置解釋信息和圖形元素是我們在設(shè)計時的第一個考慮要素。

常見的抽象圖表都有一個完整的矩形區(qū)域,我們要先確定該圖表的具體占比尺寸。然后,對這個區(qū)域進行布局的規(guī)劃,而這個布局的規(guī)劃就和解釋信息的展示有非常大的關(guān)系。

比如,你需要在圖表中增加標題和圖形解釋,那一開始把圖形做成了上、中、下三欄。有的情況下我們可能還會增加一個默認存在的文本型解釋模塊,那么還會再右側(cè)再切割出一個區(qū)域出來。

 

除了解釋信息外,我們在設(shè)計中有時候還不能忽視交互內(nèi)容,比如要包含分類篩選、時間線控制、開關(guān)等控件時,它們準備放在哪里,也要在這個階段確定出來。

 

經(jīng)過前面的切割,其實我們就能確定出中間的圖形區(qū)域了。在開始繪制前,我們還要對圖形具備的信息做進一步的確認,XY 軸坐標是否包含文字解釋,餅圖類是否包含延長指示線說明。

將這些區(qū)域先確定出來,減去它們的空間,就留下了最終要圖形展示的區(qū)域了。

 

合理的圖表繪制流程變是先布局,確定信息內(nèi)容,最后才集中處理圖形元素。如果對于前端適配有一定了解的同學,也就知道在完成這些步驟以后,圖表的適配規(guī)則制定就暢通無阻了。

 

2.2  圖形分布和比例映射

有了圖形區(qū)域,接著就可以開始動手畫圖形了。不管是基礎(chǔ)還是復(fù)雜的圖形,你想要讓自己輸出的作品嚴謹、質(zhì)量高,就需要應(yīng)用專業(yè)的繪制方法。

圖表圖形的繪制類似尺寸作圖,需要應(yīng)用各種參考線、輔助工具來完成。圖形本身并不是我們用來做創(chuàng)意的地方,而是要以準確的方式繪制出來。它包含兩個重點,分布和比例映射。

以一個柱狀圖表舉例,該圖表中維度包含了 7 個對象,即應(yīng)該出現(xiàn) 7 個柱形。那么首先就要通過等分圖形區(qū)域,來確定柱形的分布,XY軸文字的對齊對象。

 

如果你不羅列對象具體數(shù)值的話,到這步也就結(jié)束了,但如果對象數(shù)值是必要顯示內(nèi)容的話,那么就要盡量確保柱狀的顯示比例和數(shù)值是一致的。

假設(shè)在上方案例中,Y軸總高是 100px,那么數(shù)值中每 1 小時的高度就是 100/16 = 6.25px,我們就要用你寫下來的數(shù)值 * 6.25,保證柱狀圖高度比例和你的數(shù)值一致。

 

而類似餅圖這樣的圖形中,只要添加了具體數(shù)值內(nèi)容,那么餅圖中不同的扇形角度,也要符合對應(yīng)的比例。比如占比 10%、20%、30%、40% 的四個對象,它們的角度就分別為 36、72、108、144。

 

這就是分布和比例映射的基本邏輯,不管是什么圖表,只要它根據(jù)數(shù)值在區(qū)域中進行繪制,就一定會受到數(shù)值的影響。不管學習什么新的圖表,都只要確定這兩個步驟就可以輕松準確的完成繪制。

至于具體該怎么實現(xiàn),用插件還是參考線,就是軟件基礎(chǔ)的問題了,不在這里展開。

 

2.3 圖表配色的基本原理

在圖表設(shè)計中的最后一個問題,就是關(guān)于配色的方案了。圖表配色的技巧主要關(guān)注兩點,選色邏輯和搭配方法。

選色邏輯,就是圖表用色的一些基本規(guī)范。我們知道圖表往往非常的復(fù)雜,或者頁面一屏中會包含大量的圖表。

在這個基礎(chǔ)上,圖表的用色就注定是不能太 “剛猛” 的,飽和度要偏低,明度要適中。在選色面板中,它大概處中部偏上的區(qū)域。即使產(chǎn)品主色用的飽和度非常高,圖表要和主色統(tǒng)一,也建議在主色基礎(chǔ)上做適當調(diào)節(jié),在色系上接近即可。

 

并且,建議新手在繪制圖表的過程中千萬不要用漸變色。即使在各類飛機稿中,漸變色的展示效果也非常的不理想,沒有任何可讀性。

 

有了選色邏輯,多色搭配的思路也就變得而非常簡單了,只要重點關(guān)注色環(huán)的配色模式即可。

配色模式多種多樣,包括補色、三角對立、類似、四元、方形、臨近等等,不用想的那么復(fù)雜,只要牢記根據(jù)你的設(shè)計風格需要,你是要相鄰配色,還是等分配色。

相鄰配色,即以一個色系的臨近色系為標準的搭配。以 H(色相)、S(飽和度)、B(明度) 配色模式為準,飽和度和明度數(shù)值基本不變的情況下,小幅度變更色相。

 

等分配色,也是保持飽和度、明度的一致,根據(jù)需要的色彩數(shù)量(大于三個)在色環(huán)中按角度等分,獲得均勻的色彩過度。

 

配色的方法很簡單,難的是你們?nèi)绾胃鶕?jù)頁面的需要、視覺的體驗,合理的運用配色的方案,這沒有統(tǒng)一的標準。要記得圖表配色不是僅僅針對自身,會和頁面其它色彩產(chǎn)生聯(lián)系。

保證相對平緩、不太激進的圖表配色思路,是最安全的做法。 

 

首先解釋第一類圖表 —— 比較。

比較圖表的作用,是用來對緯度的數(shù)值做對比的圖表類型,直觀對比不同對象的強弱、排序、趨勢。

 

3.1 柱狀類圖表

3.1.1 基本認識:

柱狀圖,是一個使用柱狀圖形反映緯度數(shù)值的二維坐標軸圖表,也是我們最常見的圖表類型。

在這個二維坐標軸中,我們可以用縱軸代表數(shù)值,也可以用橫軸代表數(shù)值,另一個軸代表緯度。即在顯示的過程中可以使用縱向或者橫向的(橫向的也被叫成條形圖,都是一回事)。

 

柱狀圖除了每個對象包含一類數(shù)值的做法以外,也允許包含多個數(shù)值類型,每個類型使用一種顏色表示,這種圖表叫分組柱狀。

 

并且,柱狀圖作為最基礎(chǔ)的圖形,衍生了非常多下級的柱狀類型。包括:堆疊柱狀、子彈圖、正負混合、瀑布圖、直方圖等。但要注意的是,并不是所有柱狀類圖表,都是作為對比來使用的。后續(xù)會有進一步提示。

 

3.1.2 設(shè)計建議:

柱狀圖通過柱體的長短,可以直接對比不同緯度數(shù)值的高低,但使用也有一定的差別。

緯度之間關(guān)聯(lián)性不是太強,或者按時間順序排列的就適合用橫向排列的方式,比如下方記錄我隨時可能猝死的打工人一周睡眠時間(見左圖)。而涉及排名或者時間的數(shù)據(jù)組,就適合使用縱向排列的,比如 Geekbench 展現(xiàn)不同 Mac 處理器強弱的排行榜(見右圖)(os:Pro 居然比 M1 還低?)。

 

兩種圖表的選擇還和 UI 環(huán)境的交互方式有關(guān),在APP中,橫向排列的柱狀圖可以顯示的數(shù)量非常有限,想放更多緯度就要左右滾動,體驗不佳。而使用縱向排列則對空間的要求沒那么高。

 

3.2 折線類圖表

3.2.1 基本認識

折線圖也是基礎(chǔ)圖表,通過創(chuàng)建端點并使用直線連接的方式展示出高低不平曲折的線段。折線圖在圖表形式上和柱狀圖非常類似,但兩者在使用上是有一定區(qū)別的。

當我們要選擇使用柱狀圖的時候,往往關(guān)注數(shù)值的總量,或者維度代表的是不同的對象,比如不同 CPU 之間的跑分對比。但是折線圖的使用就沒有那么單一,它主要應(yīng)用在單一對象的單個維度變化對比中。

比如,我們監(jiān)控 CPU 的占用頻率,那么維度使用時間,數(shù)值用百分比,這里面產(chǎn)生的數(shù)據(jù)都是圍繞 CPU 的占用頻率展開,但如果維度改成了當前時間不同核心的占用數(shù)值、溫度,那么我們就肯定不會用折線圖來表示。

 

折線圖的使用是要通過線段的曲折來反映數(shù)值的波動,在應(yīng)用過程中往往不作為一個靜態(tài)的圖表展示,而是應(yīng)用于監(jiān)控的場景,比如監(jiān)控股市市值、網(wǎng)站在線人數(shù)、CPU溫度、同一地區(qū)降水量等等。

 

3.2.2 設(shè)計建議:

在折線圖中,最大的認知誤區(qū)就是對于曲線線段的應(yīng)用了。在數(shù)之不盡的網(wǎng)上飛機稿中,使用曲線的折線圖表 90% 以上都是錯誤的。

 

這要回歸本質(zhì)來探討,折線圖也是進行對比的圖形,如果沒有直觀的波動,那么這個圖形帶來的信息量就非常有限。曲線會因為圓角的緣故而降低波動帶來的沖擊力,甚至抹平這種對比。

只有在必定會連續(xù)出現(xiàn)極大波動的圖表中才適合使用曲線,例如圍繞在會有一個中間值數(shù)值,曲線進行正負兩端移動的類型,比如監(jiān)控呼吸中含氧量(呼和吸一個周期的維度)。

 

所以,盡量避免曲線的應(yīng)用,不僅畫起來麻煩,而且實際使用效果極差。

作為折線圖,在一些數(shù)值代表完成、占滿、填充的概念時,往往就會覺得單純的線段表示不夠直觀,于是就產(chǎn)生了將下方的區(qū)域填充色彩的 —— 面積圖。只展示一個數(shù)值類型不夠要加入多個數(shù)值和線段的就叫折線堆疊圖。

 

3.3 雷達類圖表

3.3.1 基本認識

雷達圖,相信大家看到最多的地方就是在游戲的角色面板或者武器面板中。雷達圖是一種偏向概括性的圖表,并不能用來體現(xiàn)大數(shù)值和高頻變化,是用來對比同一個對象不同維度數(shù)值的圖表。

雷達圖的應(yīng)用,首先要確認出不低于5個的維度,并且這些維度可以使用相同的數(shù)值體系,比如0-10分,0-100%等。并且,這些維度最好是由同一個對象身上拆分出來的,而不是 5 個維度指代不同的對象。

簡單來講,就是我們可以用雷達圖來表現(xiàn)一個學生不同科目的水準,這樣雷達圖可以大致概括這個學生科目掌握情況和相對的強弱。

但是不應(yīng)該用雷達圖來表示不同學生同一科目的水準,那就只是更基礎(chǔ)的對比,用柱狀圖就可以了。

 

當然,雷達圖中的占用內(nèi)容,也可以添加多個對象,一個雷達圖中可以放多個同學不同科目掌握水平的疊加圖形,以此對比他們的差異。

 

3.3.2 設(shè)計建議

雷達圖的繪制,也是優(yōu)先制定說明內(nèi)容區(qū)域,然后再開始圖形的設(shè)計。

因為在雷達圖中,我們對維度的描述,基本只能設(shè)計到不同端點外部,那么文字本身的數(shù)量、占比,就會對圖形的顯示產(chǎn)生非常大的影響,并且在雷達圖中維度的描述文字是必須的,過度精簡還是用其它方式體現(xiàn)都很不直觀,所以優(yōu)先預(yù)留足夠的文字空間。

然后,根據(jù)我們需要的維度數(shù)量繪制一個等邊的多邊形,并設(shè)置合理的數(shù)值。

 

之后,才是確定出這個多邊形內(nèi)所包含的數(shù)值刻度數(shù)量。假設(shè)除圓心外總共要顯示5級,那么就要畫 5 個堆疊的等邊形,那么我們就從最大的那個等邊形入手,再復(fù)制4個出來,對它們分別乘以 80%、60%、40%、20% 即可。

最后,再將每個維度對應(yīng)數(shù)值根據(jù)百分比將端點打在維度的直線上,用鋼筆工具將每個端點連接起來創(chuàng)建一個完整的不規(guī)則多邊形,就完成了雷達圖的設(shè)計。

 

如果想要在一個雷達圖添加多個對象,只要用不同顏色描邊繪制對應(yīng)數(shù)量多邊形即可,如果要填充這些圖形,就一定要使用透明度填充來完成,否則可能遮擋后方的端點,導(dǎo)致圖形不全。

 

3.4 其它類型

3.4.1 階梯圖

階梯圖是一種用來對比前后數(shù)值漲跌的圖形,它是柱狀和折線圖的合體。它和折線圖的不同之處在于,更關(guān)注每個對象增減的份額大小。

不僅僅是關(guān)注波動,而是更具體的值。類似關(guān)注一只股票全年的股價漲跌情況,每個月漲跌的具體額度,就適合使用階梯圖表現(xiàn)。

 

3.4.2 漏斗圖

漏斗圖因為長得像漏斗而聞名。雖然這個圖形看起來像一個錐形或者三角形,但本質(zhì)上漏斗只是條形圖(橫向柱狀圖)的變體。

漏斗圖是一種對階段進行分層表現(xiàn)的圖形,從上到下的順序中,數(shù)值一定會呈現(xiàn)衰減的趨勢(起碼不會變大),然后從上到下的柱體就越來越小。

例如,UX 數(shù)據(jù)分析經(jīng)常用的漏斗模型,就會建立一個從用戶訪問主頁,到最后完成下單的轉(zhuǎn)化率,每一個步驟都會有一定的用戶流失。

在基礎(chǔ)漏斗圖之上還有進一步拓展,比如對這個轉(zhuǎn)化本身有一個預(yù)期,那么可以做對比漏斗圖,比較現(xiàn)實和預(yù)想中的差距。如果要對比 iOS 和 Android 端的漏斗數(shù)據(jù),還有比較漏斗圖,對比兩側(cè)的長短數(shù)據(jù)。

 

第二個解釋的圖表類型 —— 分布。主要是用來研究數(shù)據(jù)分布情況的圖表,對不同數(shù)據(jù)的統(tǒng)計分布狀況進行描述。

 

4.1  直方類圖表

4.1.1 基本認識

直方圖是一個看起來和普通柱狀圖非常接近的圖表類型,是一個用來表示同一個緯度范圍中,不同區(qū)間頻率的圖形。

 

直方圖是一個二級圖表,是對一級數(shù)據(jù)的進一步轉(zhuǎn)化。比如看上圖案例,散點圖(下面會說)本身記錄了不同的數(shù)據(jù)的位置,而直方圖就是記錄在發(fā)生在這個緯度內(nèi)的次數(shù)。

直方圖乍一看很像柱狀圖,但實際應(yīng)用場景往往使用了非常密集的柱體,讓它看上去像折線圖。對于設(shè)計師來說和直方圖打交道是非常普遍的,那就是在 Lightroom 和 Photoshop 中的通道直方圖。

 

當視覺設(shè)計師、攝影師在學習處理位圖的時候,就必然要學會直方圖的讀取,它并不是用來讓我們學習如何對比前后數(shù)據(jù)差異的,而是讓我們可以快速掌握這張圖片中像素點在不同通道的分布量。

直方圖是統(tǒng)計學中的 “頻率分布” 的視覺表現(xiàn)形式,需要確保使用的場景符合直方圖的定義,以及確保用戶能理解圖表內(nèi)容。

 

4.1.2 設(shè)計建議

對于直方圖來說,如果維度對象少,只要獲得相關(guān)的信息和數(shù)值,就可以像柱狀圖一樣來繪制。

如果是針對一些比較專業(yè)的場景,如上方的通道直方圖,那么就要放棄自己完成的目標,一定要借助相關(guān)插件,或者使用 Excel 等工具實現(xiàn)后再導(dǎo)入進來。

 

4.2 箱型類圖表

4.2.1 基本認識

箱型圖也叫盒須圖,和直方圖類似,它也是一個二級圖表,即它不是直觀反應(yīng)原始數(shù)據(jù),而是對原始數(shù)據(jù)的狀態(tài)進行轉(zhuǎn)譯。圖表中的每個箱型反應(yīng)一組數(shù)據(jù)的分散情況資料,每個箱型包含下面這些信息元素。

 

箱型圖反應(yīng)的是一種 “大概” 情況,它不是一種用來進行精確數(shù)值展示的圖形。箱體主要是上四分衛(wèi)和下四分衛(wèi)的區(qū)間組成,下/上四分衛(wèi)指的是 “樣本中所有數(shù)值由小到大排列后的 25%/75% 的數(shù)字”。

這里的排列主要通過 “數(shù)值大小” 來決定,而不是分布數(shù)據(jù)。比如一個班上100個同學包含身高 150、160、170、180、190 五種身高,雖然每個身高包含的人數(shù)不同,但 160 就是它的下四分衛(wèi),180 是它的上四分衛(wèi)。

那么160-180身高包含的人數(shù)就是箱體本身的區(qū)域,上四分衛(wèi)到上邊緣是 180-190 的人數(shù),下四分衛(wèi)到下邊緣是 160-150 的人數(shù)。

 

箱型圖可以反應(yīng)的信息是非常豐富的,它可以非常有效的反應(yīng)不同數(shù)據(jù)組的虛實、占比、上下限,可以獲得非常多有趣的結(jié)論。

 

4.2.2 設(shè)計建議

在箱型圖的設(shè)計中,對于箱體和觸須的表達要依據(jù)數(shù)據(jù)本身的重要性來判斷。有些場景對最大最小值更在意,則箱體顏色就淺,線段更矚目。而要重點關(guān)注箱體的話,則可以對觸須進行弱化使用虛線。

同時,箱型圖的主要識別信息是 Y 軸的長度,一個美觀易度的箱型圖,箱體寬度盡量控制在一個比較纖細的水平,不要為了填充畫面的空白強行做寬。

 

4.3  K線圖

4.3.1 基本認識

相信稍微了解過股票還是基金的同學,對K線圖那可就一點也不見外了,下陽線、收盤光頭陽、小陽線,開口就是老韭……不對,老股民了。

K線圖是箱型圖的一個變種,也叫蠟燭圖,主要應(yīng)用在股票、幣市、期貨等市場的交易數(shù)據(jù)上。一個K線圖包含了陽線、陰線兩個大類。陽線代表上漲,陰險代表下跌。

每個類型中,同時還表示當日成交中的最低價和最高價,柱體代表的是開盤價和收盤價。在我國股市,上漲用紅色,下跌用綠色,在幣市則相反。

 

K線圖實際上動手設(shè)計它的情況微乎其微(只用開發(fā)好的),我們只要了解它的原理即可。

 

4.3.2 設(shè)計建議

K線圖基本只應(yīng)用在和理財有關(guān)的證券行業(yè)中,在會出現(xiàn) K 線圖的圖表模塊中,必然會出現(xiàn)相應(yīng)的交互操作。如左右滑動、放大縮小,它是一個具備響應(yīng)模式的圖表類型,包含兩種狀態(tài)。

如果空間足夠,則使用箱體和虛線的常規(guī)設(shè)計。如果顯示的對象密集,那么就會以一條直線來顯示,忽略掉箱體的部分。

同時,不同的場景,對于陰陽線箱體的展示會有一定區(qū)別,除了色彩外,還會應(yīng)用實心和描邊的區(qū)別。

因為涉及財產(chǎn)、交易,針對K線圖的設(shè)計,一定要做好前期的業(yè)務(wù)調(diào)研,以及對比不同的競品,降低設(shè)計出錯的概率。

 

4.4 散點類圖表

4.4.1 基本認識

散點圖是一個使用也非常頻繁的圖表,它通過在 XY 坐標軸中添加圓點來表示不同對象的分布情況。

常見的散點圖就是對普通二維坐標軸進行 “打點” 的圖表,每個點代表統(tǒng)計學中的一個 “樣本” 或數(shù)學概念中的一個 “定量”,下面我們就用樣本來稱呼每個散點。

 

每個樣本在散點圖中必然包含兩種以上的信息,一個是緯度值,一個是數(shù)值,這樣我們才能確定它在坐標軸中的位置。

當然,針對樣本并不是只可以包含兩種信息,比如表示班級成員身高體重的散點圖,我們可以再引入男女的對比,對散點圖進行色彩的區(qū)分。再者,還可以添加體脂率,用每個點的大小來表示。

 

散點圖是一個很直觀的樣本分布圖表,它是概率論中做回歸分析的主要工具。所以往往我們會看到散點圖內(nèi)出現(xiàn)了一個線段,那條線段叫做 “回歸線”,他是通過散點分布情況,計算出來的一條均值線段。這個線段不僅可以大致標識數(shù)據(jù)的趨勢,同時可以用來做概率計算和預(yù)測。

回歸線包含指數(shù)、線性、多項式三種,對應(yīng)繪制出來的回歸線是曲線、直線、還是波浪線。

 

4.4.2 設(shè)計建議散點圖的圓點可以使用軟件的 Symbol 功能進行創(chuàng)建,確保后續(xù)可以統(tǒng)一修改配色和樣式,尤其是在包含多種色彩的散點圖中。

散點圖的繪制不一定要完美契合數(shù)據(jù)內(nèi)容,但是在大致的分布和數(shù)量上要和實際情況貼合。如果僅僅是隨意的進行分布、均分,那么這個圖表就會顯得非常的不嚴謹和隨意,比如下圖圖表。

 

4.5 其它類型

4.5.1 地圖圖表

地圖圖表,是將抽象的 XY 二維坐標軸替換成地圖類圖形的圖表。本質(zhì)上它們也包含 XY 軸,所以一樣可以將數(shù)據(jù)內(nèi)容進行映射。

最常見的,就是地圖散點圖了。背景由實際的地圖完成,坐標則由經(jīng)緯度體系來記錄。這是可視化設(shè)計中非常常見的中心圖表應(yīng)用類型。

同時,背景的地圖并不是只包含地理信息地圖,還可以是球場、商場、網(wǎng)頁、建筑表面等內(nèi)容。

 

4.5.2 熱力圖

熱力圖則是地圖和散點圖的合體,也是在二維坐標體系中顯示樣本,只是熱力圖更注重的是這些樣本之間的對比。例如區(qū)域的降水量、臺風風力表現(xiàn)、網(wǎng)頁的點擊區(qū)域等等。

熱力圖本質(zhì)上也是將坐標軸切割成了若干小塊(樣本),每個小塊有一個對應(yīng)的數(shù)值,然后通過算法繪制邊緣和不同的漸變。

它也是很少直接通過設(shè)計軟件繪制的圖表,需要借助插件導(dǎo)入數(shù)據(jù)來實現(xiàn),我們只需要確認色彩樣式即可。

 

構(gòu)成圖表相對其它圖表來說是最簡單的一種,包含扇形、環(huán)形、餅圖、堆疊、矩形樹等類型。

 

5.1 餅圖類圖表

5.1.1 基本認識

前面看到的圖表大多是遵循我們小學就看過的 XY 軸坐標系(笛卡爾坐標系)建立的,但是餅圖并不需要考慮坐標空間的問題。它是一個依靠角度來反映數(shù)據(jù)的圖表類型。

餅圖作為一種常見圖表,包含兩個大類,一般餅圖和環(huán)形圖。如果沒有一些特殊的交互或者復(fù)雜衍生類別的話,環(huán)形圖其實就是餅圖中間鏤空的版本……

 

餅圖繪制的主要依據(jù)是需要表現(xiàn)幾條維度,以及它們對應(yīng)的百分比值。餅圖的顯示有比較大的局限性,那就是顯示的維度數(shù)不能過多。控制在 2-9 條比較合理,數(shù)量過多就會導(dǎo)致圖形失去實際的使用意義。

 

除此以外,南丁格爾圖、旭日圖,也是餅圖的延伸,通過添加額外的維度或者子分類,對餅圖中的每個對象進行額外的示意。

 

5.1.2 設(shè)計建議

餅圖作為基礎(chǔ)圖形,多數(shù)情況下也是由設(shè)計師自己完成的。但很多新手沒有找到要領(lǐng),導(dǎo)致做出來圖形非常的別扭。我提供一個繪制的簡單的思路,那就是通過繪制不同的三角形來拼裝出一個餅圖。

 

這類圖形繪制的要點是確保三角形在圓心中的頂點時一致的,如果對比例的繪制有比較精確的要求,可以通過 Excel 之類的工具生成一個基礎(chǔ)圖形做背景,貼著它畫即可。

南丁格爾圖也可以沿用上面的畫法,那就是對每個維度的三角形采取不同直徑的圓做蒙版,就可以畫出不同半徑的占比區(qū)域了。

這么做的好處,是將圖形的每個維度獨立成一個單獨的矢量圖形,方便我們后續(xù)進行上色。

 

5.2 堆疊類圖表

5.2.1 基本認識

堆疊類圖表算是一個相對不那么嚴謹?shù)念悇e,因為它多數(shù)由其它基礎(chǔ)圖表發(fā)展而來。主要包括柱狀堆疊圖、面積堆疊圖、百分比堆疊圖。

之所以把它歸類到分布而不是其它大類下的圖表子項,原因是只要出現(xiàn)堆疊,就意味著這個圖表的核心目的是展示構(gòu)成內(nèi)容而不是對比或者分布。

在柱狀類堆疊圖中,通過將每個柱體切割成不同的更小柱體來呈現(xiàn)子分類的占比。面積堆疊圖,則是單純的把折線圖進行填充然后疊加的圖形。

 

而百分比堆疊,雖然看起來和面積堆疊和接近。但它是以最上層數(shù)據(jù)為 100% 標準,往下的每一級對象都根據(jù)頂層百分比呈現(xiàn)的分布樣式。

 

5.2.2 設(shè)計建議

堆疊類圖形的設(shè)計,最難的不是圖形,而是色彩的應(yīng)用上。之所以說堆疊只要應(yīng)用就比原先圖形的作用更大,原因就是堆疊使用不同的色彩表現(xiàn)層級,對于我們的視覺吸引力遠遠大于圖形本身的輪廓。

而將豐富的色彩無縫拼接在一起,是最容易翻車的配色場景。在這種狀態(tài)下,建議大家只用臨近色來實現(xiàn)下級分類的搭配,千萬不要使用色相差異過大的色彩。

 

而對于面積和百分比堆疊圖,都建議在配色的過程中,直接使用帶有透明度的色彩。因為這些折線并不一定會完美上下覆蓋,當中間出現(xiàn)交匯的時候,不至于信息被遮擋。

 

5.3 矩陣樹圖

5.3.1 基本認識

矩形樹圖最初是一個設(shè)計用來表示磁盤空間占用情況的圖形,通過將一塊矩形切割成不同的區(qū)域來表示不同維度的占比,以及位置。

 

雖然也表示占比,但它比餅圖類圖表表示的信息更豐富。第一點是位置信息和并列關(guān)系,比如下面的 M1 芯片的示意圖,就是矩陣樹圖的一種直觀體現(xiàn),在矩形中不同位置應(yīng)用的不同芯片以及其占用的具體面積。

 

當然上方是最理想的情況,通常矩陣樹圖是為了對一些更抽象的概念實現(xiàn)矩陣化的排列。而這個排列中,還有個非常關(guān)鍵的要素是其中的 ”樹“ 字。

因為矩陣中的每個切割出來的矩形,都可以作為一個獨立矩形進行下一級的分割,實現(xiàn)一個類樹狀圖結(jié)構(gòu)的信息收納。所以,完整的矩陣樹圖,是可以支持縮放或點擊進入下一層級的。

 

而使用矩陣樹圖不使用樹狀圖,原因也在于我們需要表現(xiàn)它的占比,而不是單純的結(jié)構(gòu)。所以如果只是簡單表現(xiàn)層級結(jié)構(gòu),如企業(yè)組織架構(gòu)、知識點拆分之類的,要用樹狀圖而不能使用矩陣樹圖。

 

5.3.2 設(shè)計建議

在這類圖表在項目中基本不會獨立開發(fā)出來,因為其復(fù)雜度基本都會使用開源代碼。

設(shè)計師的主要工作,就是根據(jù)對應(yīng)開源圖表,指定配色的方案,切割的邊緣大小,以及文字的顯示規(guī)范即可。

 

聯(lián)系圖表,是用來展示維度之間聯(lián)系的圖表類型,包含?;?、關(guān)系、和弦、韋恩圖、依賴關(guān)系圖等。

聯(lián)系類圖表中,多數(shù)是非常復(fù)雜的圖形,已經(jīng)脫離直接手工繪制的范疇,所以我們只簡單介紹其中幾個有代表性的圖表且給出設(shè)計建議了。

 

6.1 ?;鶊D類圖表

?;鶊D是一個用來描述某維度值 ”流動“ 到其它維度走勢的流動圖表。

這是一個比較復(fù)雜的概念,比如下面的概念,不同國家人口的流動,人還是原來那些人(數(shù)值),但他們以不同的數(shù)量比例,移動到不同的國家(維度)。

 

桑基圖的應(yīng)用,關(guān)鍵在對數(shù)值遷移流向的關(guān)注上,它適合應(yīng)用的場景在監(jiān)控產(chǎn)品用戶的跳轉(zhuǎn)去向,貨物的外貿(mào)出口狀況,或類似新冠患者流動城區(qū)、地點的表示。

?;鶊D的數(shù)值總量通常是不變的,會包含起點和終點的維度,而維度的長短即代表其包含的數(shù)值總量(權(quán)重)。

它有非常多的變種,只有借助特定的圖表生成工具,才能繪制出曲率、比例精準的流線。

 

6.2 關(guān)系類圖表

關(guān)系圖是大家比較不會陌生的圖表類型,它在各類工具性軟件、網(wǎng)站中都有應(yīng)用。比如天眼查股東關(guān)系圖、Wolai 頁面關(guān)系圖等。

 

關(guān)系圖中包含了大量的節(jié)點,節(jié)點之間還有對應(yīng)的關(guān)系,同構(gòu)線段進行鏈接。常見的關(guān)系圖有兩種類型,一種是力導(dǎo)圖,一種是弧長鏈接圖。

力導(dǎo)圖這名字也很難理解,源于力學中粒子存在某種互斥又具有引力的規(guī)律,粒子在兩種力的作用下從初期的隨機性會不斷位移趨于平衡有序(讀書多的好處?)。

 

力導(dǎo)圖通常有一個起點,然后去關(guān)聯(lián)后續(xù)的其它節(jié)點,如果節(jié)點之間還有關(guān)聯(lián),它也可以對這些節(jié)點的關(guān)聯(lián)做出連接。它不僅表現(xiàn)一對多的關(guān)系,也表現(xiàn)多對多的關(guān)系,甚至在極其復(fù)雜的關(guān)系網(wǎng)中可以呈現(xiàn)成一定的強關(guān)聯(lián) ”聚類“ 信息。

而弧長鏈接圖,則是通過弧線對節(jié)點進行關(guān)聯(lián)的圖表,它既可以是環(huán)形,也可以是水平橫線的展示。

 

6.3 和弦圖

和弦圖是環(huán)形關(guān)系圖和?;鶊D結(jié)合的圖表,它表示結(jié)構(gòu)之間的依賴關(guān)系和強度,鏈接的線段不再是粗細統(tǒng)一的而是具有粗細比例的標識,且維度之間的長度也有表示。

 

這類圖表常用于社會學、生物學等學科的研究統(tǒng)計結(jié)果繪制上。如果單純?yōu)g覽,看上去非常復(fù)雜,所以正確的使用形式是可以進行指定維度的展示和隱藏的。

 

6.4 韋恩圖

韋恩圖,它是所有學 UI、UX 設(shè)計的老朋友了,一個用圖形層疊相交來表示它們關(guān)系的圖形。RGB、CMYK 的色彩介紹里韋恩圖的身影必不可少。

 

韋恩圖的使用相比起來沒有那么嚴格的數(shù)學運算,它只是一種關(guān)系表現(xiàn)的方法,可以對各種無法量化的對象進行關(guān)系的陳述。比如,UX 設(shè)計師應(yīng)該具備的知識點……

 

下面是超人的電話亭團隊持續(xù)整理收集到的可視化組件庫工具網(wǎng)站,以供參考:

 

原文地址:站酷

作者:酸梅干超人

轉(zhuǎn)載請注明:學UI網(wǎng)》萬字干貨系列,爆肝的實用圖表詳解指南

藍藍設(shè)計建立了UI設(shè)計分享群,每天會分享國內(nèi)外的一些優(yōu)秀設(shè)計,如果有興趣的話,可以進入一起成長學習,請掃碼藍小助,報下信息,藍小助會請您入群。歡迎您加入噢~~希望得到建議咨詢、商務(wù)合作,也請與我們聯(lián)系。

截屏2021-05-13 上午11.41.03.png

分享此文一切功德,皆悉回向給文章原作者及眾讀者.
免責聲明:藍藍設(shè)計尊重原作者,文章的版權(quán)歸原作者。如涉及版權(quán)問題,請及時與我們?nèi)〉寐?lián)系,我們立即更正或刪除。

藍藍設(shè)計www.miumiuwan.com )是一家專注而深入的界面設(shè)計公司,為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計、BS界面設(shè)計 、 cs界面設(shè)計 、 ipad界面設(shè)計 、 包裝設(shè)計 、 圖標定制 、 用戶體驗 、交互設(shè)計、 網(wǎng)站建設(shè) 、平面設(shè)計服務(wù)



分享本文至:

日歷

鏈接

個人資料

藍藍設(shè)計的小編 http://www.miumiuwan.com

存檔