圖表有幾個要素：

• 圖表類型
• 圖表顏色
• 字體大小以及顏色
• 繪制圖表的注意點
• 圖表設計原則

一. 圖表類型

比較常用的圖表為：

• 柱形圖
• 餅圖
• 折線圖
• 表格
• 曲線圖
• 環形圖
• 熱度圖
• 雷達圖
• 列表
• 面積圖
• 組合圖
• 散點圖
• 氣泡圖

以下為具體介紹：

A.柱形圖

又稱條形統計圖，條狀圖。是一種以長方形的長度為變量的統計圖表。常用于比較兩個或以上的值。柱形圖常見的有以下4種：

垂直柱形圖，最常見的柱形圖； 水平柱形圖，一般按照數值的大小排列； 簇狀柱形圖，用于多組數據比較，強調一組數據內部的比較； 堆疊柱形圖，用于多組數據比較，和簇狀柱形圖不同的是，堆疊柱形圖更加強調一組數據中部分與整體的關系。

B.餅圖

以圓心角的度數來表達數值大小的統計圖表。常用于表現數據的占比關系，餅圖中各項的總和為100%，最適合表達單一主題，即部分占整體的比例。餅圖的類型比較少，主要有以下三種：

基礎型餅圖，包括常規型餅圖和環形餅圖； 半圓型餅圖，在某些場景中，半圓會比較方便排版，利于對齊。而且標注信息也方便呈現； 復合型餅圖，當餅圖的扇形數量過多時，可以將最后的若干項合并為其他類，在二級圖表中表現這些項目的構成。

C. 折線圖

是通過線條的波動（上升或下降）來顯示連續數據隨時間或有序類別變化的圖表。常用于強調數據的變化或者趨勢。折線圖主要可分為單條、多條、堆疊：

單條折線圖，只顯示一組數據波動的情況； 多條折線圖，同時顯示多組數據波動的情況； 多條堆疊折線圖，顯示多組數據波動的情況，同時表現多組數據之合的變化。多個數據疊加時（堆疊圖），推薦使用面積圖，不推薦使用折線圖形式

D. 表格

由若干的行與列所構成的一種有序的組織形式，表格可以高效率的展現大量數據。表格的類型多種多樣，除了單純的文本和數字外，我們還可以往里面添加圖片、操作等多種類型。表格是幾種圖表中最多樣和特殊的類型。

基礎表格，靜態純文本類的基本表格； 內容復合表格，由其他內容類型結合的較復雜的表格形式； 操作復合表格，用戶的行為對表格樣式或特征產生影響。

E. 曲線圖

使用光滑的曲線來連接。如果數據是連貫實時的，且任意兩點間的數據具有分析價值，用[曲線圖] 比用[折線圖] 更合適，如24小時數據。

F. 環形圖

即中心為空的餅圖，用來表現進度。除了顯示占比，還可用來顯示進度加載，擬鐘表/ 計時器設計

G. 熱度圖

常用在基于地理位置，對一段時間的數據（常常是離散量）累積量進行分布統計的圖表，進而可以分析數據密集區域/稀疏區域。這是一種展示效果較好的表達方式。

H.雷達圖

[雷達圖] 在比較多個類別數據序列以及查看整體情況很有用，既可以查看自身整體發展的均衡情況，也可以對比兩個序列整體的優劣勢。這也是一種展示效果不錯的數據表達方式，在展示整體綜合信息上很直觀。

I. 列表

列表是一種常見的表達方式，通常我們見到的列表往往是如下最右的Spendee的界面，但也有一些APP做了可視化嘗試，在列表中通過對數據可視化做一些分區，詳見如下左和中Elevate的界面。

J. 面積圖

面積圖強調的是數據隨著時間變化的程度。

K.組合圖

是將兩種或多種圖表類型顯示在同一圖表，主要是實現將不同角度的數據放到同一圖表中，以便發現數據之間的關聯性。

L. 散點圖

散點圖常用于顯示兩組數據之間的相關性，可展示數據的分布情況。例如，下圖展示了全年每個訂單的產品數量分別情況。

M. 氣泡圖

用于顯示三組數據之間的關系，其中一組數據作為橫坐標，一組數據作為縱坐標，另一組數據表示氣泡的大小。

二. 圖表顏色

A. 深色底

深色底上的圖表通常為了營造一種氛圍，展示數據信息一般較少，此時可以選用鮮亮的色彩，這樣圖表信息容易從深色中跳出來。

B. 淺色底

如果需要清晰展示大量的數據信息，建議選用淺色底，數據信息在淺色底上的識別度相對較高。但需要注意的是：如果數據信息量太小，淺色底上會顯得頁面太空，這會讓用戶覺得你的平臺沒有內容或者熱度。當然，這可以通過圖形質感、顏色等優化。

C. 色彩底

有時，為了讓頁面更加生動，可以將數據信息展示在大面積色塊上。
商務類APP可采用用藍色、綠色系作為底色。
運動類APP可選用的色彩自由度更高，偏活力的色彩，如橙色、黃色、橘色等都可以。

D. 圖片底

為了讓數據閱讀更加輕松，可采用圖片底。在一些天氣類APP中，這種使用方式比較常見，圖片內容與數據信息產生關聯，提升可讀性。

三. 字體大小及顏色

原則：以設計師為準
行長度：每行的字符個數對于整體的可讀性起著主要作用。如果文字段落非常寬，那是很嚇人的，難以閱讀。同理，每行文字太短也不行，會給讀者的眼睛帶來壓力，造成混亂。
行距：每行文字間的間距也同樣重要。看看這篇文章，如果每行文字都與上下兩行粘在一起，你就無法理解這些句子。
字體樣式：字體的樣式也會影響可讀性。簡潔的襯線字體和無襯線字體是最具可讀性、最易瀏覽的，而那些華麗的手書和新奇字體則最難破譯。
外邊距和內邊距：和行距一樣，元素周邊和之間的空隙也影響著用戶閱讀文字本身。
顏色與對比度：文字顏色與相應背景也至關重要。如果在綠色背景上寫綠色文字，就難以閱讀了。設計師選擇淺色字深色背景，或是深色字淺色背景，都是有原因的。對比使得字符容易閱讀。

四.繪制圖表的注意點

A.柱形圖

數據產品的圖表強調數據的準確性，通常零基線是不可或缺的，為了強調起始位置，顏色上要比其他的網格線深。考慮到用戶不同顯示設備的差異，建議至少取94的灰度值才可以保證清楚的辨識，顏色太淺在一些設備上無法顯示清楚。

柱子的寬度為D，則柱子之間的間距建議在1/2D與D之間，簇形柱形圖兩個柱子之間的間距建議為1/8D。這樣既可以保證柱子之間不會過于分散-失去數據之間的關聯性，又不會過密-保障數據之間的獨立性和舒適閱讀。

B. 餅圖

餅圖一般我們采用的繪制方法是，按照用戶的閱讀習慣，從上到下，以時鐘的12點為起點，順時針排布扇。

但這種繪制方法存在一點不足，在用戶視線的焦點——餅圖的上半部，不重要的最小數據項和最大數據項一起占據了視覺焦點。為了解決這個問題，我們在這個基礎上做了一些優化，同樣以時鐘的12點為起點，先逆時針繪制最大切片，再回到12點，順時針繪制出第二大切片，其余切片依次繪制（圖2-17）。這種方法使得用戶視線的焦點——餅圖的上半部放置的都是最重要的數據。但這種繪制方法也有一點小小的不足：在有多個餅圖時，每個餅圖的起始位置都不相同（圖中問號所標出的位置）。大家可以根據不同的使用場景選擇不同的餅圖繪制方法。

C. 折線圖

折線圖常用于表示數據的變化和趨勢，坐標軸的不同對折線的變化幅度有很大的影響。坐標軸的數值設定的太高，則折線變化過于平緩，掩蓋現實無法清晰的表現折線的變化。反之，如果坐標軸設定的太低，又會讓折線變化過于陡峭，過于夸張夸大了折線變化的趨勢。

如何提升圖表的易讀性
數據產品中往往充滿了大量的數字和圖表，用戶容易淹沒在數據的海洋中，除了精準表達這些數據以外，提升圖表的易讀性也是數據產品中圖表設計的一個顯著特點。圖表中文字部分通常為具體的數值和數值的含義解釋。通過對這些文本進行合理排版，可以使用戶快速理解圖表，從而達到高效閱讀的目的。

A. 柱形圖

坐標軸的標簽使用水平排列，不建議垂直排列或者傾斜排列，字數多的時候不易閱讀。柱形圖中部分標簽的使用方法也適用于折線圖。

柱形圖的標簽排列 水平柱形圖一般會簡化坐標，數據值跟隨在柱形圖后方，增加數據墨水比率。

水平柱形圖 當坐標軸標簽過長時，垂直柱形圖無法將所有坐標軸標簽全部顯示，有以下幾種解決方案：

可采用水平柱形圖增加標簽的顯示空間。

顯示主刻度，其余數據省略，通過交互動作來顯示。比如顯示2010年/2011年，而年里面的具體的月份隱藏，hover時出現。如圖2-22中的橫坐標。 高位數的數值可以轉化單位。比如500,000顯示為50萬，更符合中文的閱讀習慣，且節省空間。如圖2-22中的縱坐標。

B.餅圖

在餅圖內與百分比數值一起顯示。

信息連貫視覺集中，理論上最合適的位置。但受限于餅圖本身的形狀和大小，文字過多時容易溢出。

使用引導線，在餅圖周圍合適位置顯示。

引導線可以將切片與標簽有效的關聯，可以顯示更多的字符數。引導線較多時，可以進行變形規整。在數據產品中通常是活動數據，數值大小經常在變化，標簽和引導線的位置不固定，排版上難以掌控。

數值和標簽分離顯示。

標簽字符數不受局限，但標簽與餅圖分離，需要對照閱讀。

配合交互動作切換標簽在環形圓餅空白處顯示。

空白部分不受切片大小影響，標簽和數值可一起顯示。適用于強調當個切片數值。標簽與切片對應關系需要帶交互操作說明，數據展示較隱藏。

C. 表格

文字信息縱向列對比能夠很好的形成視覺引導線，符合格式塔心理學中相近原則。不同的數據類型有不同的對齊方式。一般來說文本采用左對齊，數據右對齊，方便通過數字位數的長短對比數據的量級和大小。

表示狀態的文字，通常只有固定幾種類型（如已完成、待支付等），則可以采用居中對齊。關系緊密的字段可以靠近成組排列，加強數據之間的關聯性，同時減少了數據組的量，也可以方便用戶快速定位信息。

五.圖表設計原則

首先必須要記住：圖表的任何一個元素都不可以任意擺放
為什么很多人崇尚 商業圖表 原因就是 圖表的任何一個元素都不是任意擺放的

設計圍繞的主要是以下四項基本原則：

1.親密性
親密性原則指的是：將相關項組織在一起。因為在一個圖表上，物理上的接近就意味著它們之前存在意義上的關聯。

2.對齊
對齊原則是指：任何元素都不能在圖表上隨意安放，每一項都應該與圖表上某個內容存在某種視覺聯系。

3.重復
重復原則是指：設計中的某些方面要在整個作品中重復。

4.對比
對比原則是指：如果兩項不完全相同，那么就應當使之不同，而且應當是截然不同。

B1 擺正你的元素關系[親密性詳解]

觀察附件圖片：
第一張圖表標題和圖例看起來有并列關系，但實際上，并不存在并列關系。
這樣的圖表讓人看起來會覺得沒有重點，所以圖表標題根本沒人會多看一眼，
受眾會很茫然這是什么圖？

請記住：圖表元素里 圖表標題 的意義是告訴受眾這個圖要表達什么

第二張把標題和圖例通過空間和大小分成兩組，這樣就變得好得多
受眾看到圖表標題比較大的字后，受眾馬上會明白你要通過圖表表達什么了。

B2 專業精神 [對齊詳解]

你我實際已經在Excel應用中不知不覺的使用了這一原則，而且很多情況下，你我用到的都可能是居中對齊。
尤其是Excel 圖表的標題 默認 是這樣的
但你應該知道，左右對齊給人的視覺效果更為強烈。
文字邊緣與圖表核心偏遠對齊往往有更好的效果
這里有兩個概念要講：

軟：
居中對齊的邊界是中心線 而這個中心線在人的視覺中的概念是模糊的 其兩側 大量的留空 會使人感到安全 但反應了你的怯懦

硬：
無論你愿意或不愿意 圖表的 坐標和邊框 總給人 生硬的感覺 與這些對齊 就會使圖面顯示出硬朗的感覺 讓人信服

下面的例子中，NO.3明顯要比其它好很多，最糟糕就是NO.1了。

B3 不要讓你的圖表失去統一性[重復原則詳解]

要有整體性，你甚至可以在自己的多個圖表中都沿用某一種重復，這樣別人看到這個重復的時候就能知道這個圖表是你的作品。
在圖表設計中，重復性原則有兩種應用。

第一種就是 顏色，使用顏色之前你必須清楚，顏色的大面積 尤其是圖表區背景
使用會減少圖表核心訴求的表達面積，降低圖表的表現力。
看看 圖示№ 1

第二種重復是在元素中相同的格式，這會讓受眾很清楚的明白各元素間的層次關系。
重復原則可以讓你的圖表看起來簡化一些，而且更具可讀性。
比如字體的大小 字體的類別
請盡量在圖表中不要超過一種字體 和 兩種字體大小 這個限制 因為字體是形狀
看看 圖示№ 2

無論如何：圖表中的字符千萬不要太多。坐標軸上的字符是圖表字符相對集中的區域，請慎重處理坐標軸
圖表重點體現的是： 勢 / 差異 / 趨向 這是體現你目標訴求的表現方式
如果體現信息過多 勢 / 差異 / 趨向 就不明顯了 其它的信息干擾了圖表的目標訴求表現
不要認為圖表上的某些元素圣神不可侵犯 大膽去掉它 比如坐標軸 網格線 繪圖區背景及邊框
看看 圖示№ 3

記住一個原則：所有字符和信息必須少到3秒鐘可以理解你的圖表。

B4 強烈的去表達你的訴求[對比使用詳解]
你的目的是什么：你準備使用圖表來說明什么問題？要說明這個問題 請大膽使用 對比
它將有力的幫助你完成這樣的表達

對比一定要強烈，千萬不要畏縮和偷懶。不管是有意無意，一般人很少用到對比原則，反而常常在這個問題上犯下錯誤。
需要注意：如果對比不強烈（比如三號字體和四號字體），就不能算作是對比，而會成為沖突，在觀眾看來，這種設計更像是一個失誤。

在圖表設計中，對比可以通過很多方法實現：如字號、字體 顏色 形狀[點 線 面] 等。
通常，我們需要使用以上多種方式來實現對比。

最好的對比切入點是：顏色 和 大小或面積

如果你的圖表上的顏色不多：比如只有白色 和 黑色 ，你只要將其中一個元素改為 紅色 這個對比效果將完全不同
但關于字體的使用要注意：同一圖表中應用了對比的元素，該元素的對比效果不能出現兩次[比如字體的類別 和 顏色]。

永遠記住：請保持整個圖表的布局有焦點，且焦點是唯一的

附圖右側的圖表明確向受眾傳遞了如下信息：
使用了較大的字體來這個圖是做什么的，使用了紅色這個強烈的顏色來說明當前的進度如何
注意：
色彩的使用 在這里紅色將受眾的視線集中在了當前的進度，他就成了關注焦點 因為它太強烈了
圖表標題的大字使用 在這里成了輔助說明當前進度的必要信息

左側的表現就相應差很多