本文利用C4D軟件和three.js開發方式制作地理空間數據可視化項目。地理空間數據可視化是基于我們實際生存的空間，對信息的載體、對象映射到載體的方式進行可視化展示，從而將地理空間中的數據以一種直觀、容易理解和曹總的方式呈現給用戶。

使用軟件：c4d
飛線制作原理：樣條約束功能
地球上的起伏：置換材質
中國地圖上的飛線：在ae中做好的視頻材質
地圖模型：高德那邊拿到的，但只針對阿里內部
開發方式：three.js

地理空間數據可視化 (Geo Spatial Data Visualization) 是近年來興起的一個熱門領域，越來越多的政府、企業青睞于通過這種強視覺的形式來展示政績與實力。市場需求的增長也吸引了越來越多的設計師投身于這個領域。而在這樣一個細分領域，也對設計師的能力提出了全新的要求。在該領域，我們團隊沉淀出一套固定且可復用的設計模式。在這篇文章中，我將會詳細講述一套完整的地理空間數據可視化設計流程。希望你能通過它形成一套屬于自己的可視化設計方法。

文章分為兩部分，上半部分展示視覺，下半部分聊聊視覺背后的理論與流程。

請點擊——》》視頻1

請點擊——》》視頻2

 

作者：三魚先生

轉載請注明：學UI網》數據之美：地理空間數據可視化

藍藍設計建立了UI設計分享群，每天會分享國內外的一些優秀設計，如果有興趣的話，可以進入一起成長學習，請加藍小助，微信號:ben_lanlan，報下信息，藍小助會請您入群。歡迎您加入噢~~希望得到建議咨詢、商務合作，也請與我們聯系01063334945。

分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。

藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務、UI設計公司、界面設計公司、UI設計服務公司、數據可視化設計公司、UI交互設計公司、高端網站設計公司、UI咨詢、用戶體驗公司、軟件界面設計公司

每年的雙十一，天貓都會在剁手狂歡節中直播戰績。除了可怕的數字之外，不知道大家有沒有留意到這些同樣可怕的數據可視化大屏；

所謂大屏，顧名思義就是一個

很大的屏 !!!

可視化應用非常廣如ToC、ToB、ToG等都會存在。一般應用在交易大廳，展覽中心，管控中心，老板辦公室等等場景，把一些關鍵數據集中展示在一塊巨大的LED屏幕上，其實就是巨大化的Dashboard，是當今數一數二的裝逼方式。

數據可視化的本質是視覺對話，數據可視化將數據分析技術與圖形技術結合，清晰有效地將分析結果信息進行解讀和傳達。

設計前的準備

基礎大屏制作準備：

1、確認需求：確認展示的主題，具體展示的內容，各部分內容數據用到的圖表類型。

2、使用場景：確認大屏的使用場景，設計尺寸與大屏的拼接方式（拼接屏像素超大可等比例縮放）

3、開發實現：具體設計要根據項目確定實現的工具，現在應用比較多的：web、u3d、ue4等 不同工具實現出來的效果也是大有不同，根據項目實際需求以及開發成本，這塊設計前需要跟開發充分溝通。

4、設計素材：設計整體的背景圖、包括布局、配色等，以及大屏中用到的小圖標元素。

大屏制作一般只需四步：

1、整體：設置背景色、插入背景圖、頁面設置等。

2、部分：主標題、各圖形標題、動態KPI指標、圖表制作等。

3、細節：對標題、圖表細節的調整。

4、動態：添加動態效果，提升大屏展示效果。

（以上只是寫的一個大概的思路，具體操作流程肯定是根據實際情況做調整，要復雜的多，最重要的是多溝通、多思考）

設計思路案例實操

需求分析

設計要求：

分辨率1920*1080，在世界地圖上顯示一個黑客組織攻擊多個目標，頁面要顯示黑客組織的信息和被攻擊目標的信息。

黑客組織信息舉例：

名稱；摩訶草  位置：巴基斯坦 活躍度：80

攻擊目標：韓國 中國 朝鮮 德國

展示信息僅作為參考，可以自由發揮

風格要求：科技感 FUI

拿到需求，確定好展示場景、設計尺寸以及跟開發溝通好實現方法，大致的設計思路就有了，直接開擼。

布局

個人習慣，根據需求以及數據大概整理一個布局，可以在紙上大概畫一下，然后在軟件里具體細化布局。

根據梳理的需求：就是要在世界地圖上展示黑客攻擊各個國家的形態的大屏，要求很寬泛，可自我發揮的空間挺大。

直接附上最終效果圖。這里布局上考慮到地圖上有許多浮層的情況，把數據整體放左側和地圖下方進行展示，避免圖表的面積過大，喧賓奪主，影響整體地圖的視覺效果。

風格

根據需求定義幾個設計關鍵詞，方便自己找參考直接打開花瓣站酷一陣搜（在這里個人推薦去Pinterest、behance 里面有很多炫酷的fui效果可以參考）。

風格上，地圖參考了下圖的展示形式，采用多層疊加陰影加描邊的形式使地圖整體有立體感、厚重感，不會顯得那么單薄。

圖片來自網絡，如侵權刪

顏色

相比較網頁版設計展示，大屏更傾向于選用深色調背景，不僅為了讓視覺更好聚焦，而且長時間觀看之后眼睛也不會出現視覺刺痛感。內容部分采用亮色系，保證內容與背景有一定的對比關系，便于業務信息傳達。同時背景深色系內容亮色系遠距離觀看也會比較直觀清晰。

字體

字體上采用瀏覽器默認微軟雅黑，數字采用特殊字體DS-Digital

數據圖表

圖表是表達數據的常用方式，因為圖表可以描述了不同的數據種類，同時讓數據之間可以比較。主要就是要考慮最終用戶，圖表結果應該是一看就懂，不需要思考和過度理解，因而選定圖表時要理性，避免為了視覺上的效果而選擇一些對用戶不太友好的圖形及元素。

常用的圖表有以下幾大類別：

1、一個或者多個類別不同時間的的對比比較。

典型的圖表有折線圖、條形圖、堆疊條形圖、蠟燭圖、區域圖、時間線等。

2、不同類別數據的對比

典型的圖表有柱狀圖、分組條形圖、氣泡圖、平行坐標圖、多折線圖、子彈圖等。

3、排名 主要展示項目數據的一個排名情況。

典型的圖表有有序條形圖、有序柱狀圖、平行坐標圖等。

4、不同數據對于整體的占比情況

典型的圖表有堆疊條形圖、餅狀圖、環形圖、堆疊區域圖、樹形圖、玫瑰圖等。

以上是一些比較常見的一些分類當然還有許多不常用的圖表沒做統計區分，比如散點圖、氣泡圖、熱力圖、網絡圖等等這里就不一一列舉了（推薦大家可以看下網上的開源組件庫Echarts、Antv等等 好多）這塊也有螞蟻金服官方的分類非常詳細

https://antv.vision/zh 附上地址，需要的自取。

圖片來自網絡，如侵權刪

這里推薦一快速生成圖表的ps插件-ps拉框助手如圖所示，該插件整合了折線圖、柱狀圖、橫向柱狀圖、餅圖、雷達圖、地圖（該功能太贊了）還有系統UI等等。非常方便，用選區工具拉取選區框點擊參數一鍵生成。

實操下如何快速一鍵生成地圖的效果，省去了做可視化來回地圖的煩惱，下面開始實操：

1.新建畫布，打開拉框助手選中地圖如圖：

選中之后會有好多參數標簽寫的很清楚，第一塊是區塊、邊線寬度顏色和文字的顏色可以在這里設置，第二塊內容就是地圖這里插件里有全國各個省市的還有全球和美國的地圖 基本夠用了，根據需求大家可以自定義選擇，選擇完成之后點擊去下載對應數據，會彈出網頁出來一個新的頁面，如下圖：

這里是我選擇一個全國的地圖，大家可以根據截圖上紅框內的說明進行操作，非常簡單。往下滑，直接點擊復制json數據到剪切板。點擊后網頁會有一個復制成功的提示，證明你已經復制成功了，接下來我們就回到ps里面去粘貼就好了。

粘貼到這里，這里切記不要粘貼多次會很卡導致數據錯誤，插件里也有提示。粘貼完之后，記得用選區工具畫一個選區之后再點擊自動繪制如圖：

點擊自動繪制之后，可能會等待一會，插件需要花時間去運算生成地圖，等待一會之后就到了見證奇跡的時刻，如圖：

一份中國地圖就生成啦，就問你它香不香，而且生成的文件都是分層的矢量形狀層，可以繼續編輯。是不是功能非常強大，其他模塊的功能就不一一展示了，插件官方生怕童鞋們不會用，在插件的最后一個模塊貼心的準備了學習手冊，點擊可以查看相關的視頻教程，非常的詳細，感興趣的童鞋可以去試試哦。

插件源文件小六也給大家備好了，公眾號回復“ps插件”有需要的童鞋自行領取喲。

總結

1、設計前：一定要對用戶需求有著充分分析和理解，然后要知道大屏的展示場景及設計分辨率，大屏的拼接方法都要有一定的了解，最后是跟開發溝通下實現的工具與方法。

2、設計中：構思布局，可以在紙上簡單畫一下。根據需求定義設計關鍵詞進行設計的提煉與分析，方便自己找參考。顏色上背景深色為主，為了更好的聚焦，數據可以采用亮色，有一定的對比關系，便于業務信息傳達。字體上可以采用系統默認字體 數字采用特殊字體包的形式（這塊根據實際需求，切記不要照搬）。圖表分析好數據，選擇恰當的展示形式，同時保證視覺上的統一（分清頁面的主次關系，圖表的展示切莫設計過度，容易造成搶主體）

3、設計后：再次校驗信息層級、文字大小、圖表等各層級間的對比關系是否傳達準確，與技術同步溝通下技術的實現性。最后開發完成后，要拿演示demo去現場測試，看下整體展示效果，測試輸出是否有問題，有無拉伸問題，拼接縫與內容有無穿插，及時與開發進行頁面的校驗工作，最終才算是設計完成。

作者：小六

數據可視化是數據內在價值的最終呈現手段，它利用各類圖表及圖形化的設計手段將復雜不直觀的數據有邏輯的展現出來，使用戶找到內在規律，發現問題，從而指導經營決策，挖掘數據背后的商業價值。

首先介紹下使用場景：

可視化應用非常廣如ToC、ToB、ToG等都會存在，之前所看到的各種圖表僅以為是單純的數據統計，其不然它也是一種可視化的展示方式。現階段更多的理解數據可視化是大屏展示。多屏幕拼接，展示諸多數據和圖表，效果一定是酷炫各種特效視覺于一身的才稱之為數據可視化，其實這只是其中一種可視化的表現方式。下面基于應用場景的不同，對可視化區分介紹。

第一類使用場景：

此類以使用為主，主要在電腦上操作的pc端可視化，用戶對它需長時間使用，例如企業數據報表分析，各類BI等。在此類場景下，簡潔簡單高效的傳達數據內容是非常必要的，更多的是數據分析師及業務部門在使用，他們需要長時間停留在屏幕及數據上做分析統計比對等工作，精準的傳達數據的同時也減少對眼睛的過度疲勞，利于用戶長時間舒適閱讀，所以這類場景下以簡潔為主。

（圖片來源于網絡）

第二類使用場景：

這類是以觀看為主，并以快速傳達核心數據信息的應用場景。此類場景多應用于指揮大廳、科技展館、數字展廳等，他的特點是多屏幕拼接，展示面積大、數據類型多，展現形式多元化，業內也稱之為數據可視化大屏?？傊渲饕褪呛诵臄祿ㄟ^視覺及動畫的表現手法直觀的輸出給用戶，增加用戶的記憶達到過目不忘的效果，同時這對于數據信息的視覺傳達要求比較高。此應用場景也是問題疑問比較多的，會關系到效果定位、數據信息傳達、表現方式、軟硬件結合等諸多情況。針對此應用場景展開分析，其他可視化設計也是相通的。

（圖片來源于網絡）

1、精準把握業務需求

設計終歸是助力業務的，準確的理解業務需求是至關重要的，它將貫穿整個設計的始終，也是可視化設計開始的必要前提。如何解決用戶的問題，完成既定目標，都需要設計師對需求有一個比較準確的理解。直接有效的方法就是“不懂就問”。

2、數據圖形化的選擇方法

需求及數據確立后，接下來是數據圖形化的選擇，不同的目標不同的數據對于圖表展示的選擇也是有講究的，如：部分占總體的比例（占比）更適合選用餅圖、用來反映時間變化趨勢的圖形化更適合曲線圖等等，總之不同的數據展示維度，選擇的圖表是有差異的。同樣一組數據，存在多個圖表同可展示，怎樣選擇最恰當的圖表是至關重要的，合適有效的圖表有助于信息有效的傳達。遇到具體的數據要根據數據的維度，和要表達的業務目標，選擇一種最佳的圖表呈現。

（圖片來源于網絡）

這是可視化圖表選擇比較確切的一個方法，可以作為數據可視化圖表的選擇依據，有助于準確快速的把數據圖形化。

首先根據業務目標結合數據維度確定大的關系（比較、分部、構成、聯系），隨后選擇合適的圖表，填充數據設計排版即可。到這一步圖表基本成型，但是比較基礎，為了視覺效果和數據的傳達，也會在此基礎上進行優化設計。

優化設計之前要注意幾點：

1. 切忌設計時不要過度裝飾圖表，喧賓奪主造成數據不直觀，對觀者獲取數據產生障礙。
2. 圖形化要友好，不能一味的追求視覺效果，造成圖形識別度降低、友好度下降。
3. 圖形化后一定要利于理解。所有的設計一定是為業務服務的，數據圖形化后更不利于業務信息傳達，那就失去了圖形化設計的意義
4. 開發可實現，設計師常遇到，酷炸炫的效果讓開發落地非常困難，務必要多溝通，懂取舍。設計之初就要考慮全面。

可視化大屏一般都是多屏拼接或者LED\LCD等材質屏幕。不同的屏幕像素是不相同的，顯示像素、物理像素都不同，包括硬件設備的不同導致輸出像素也不相同，例如同樣是3X2的拼接屏，輸出像素可以是X1*Y1也可以是X2*Y2，這就造成了很多潛在問題，設計之初屏幕硬件及拼接方式需要提前確定。基本有兩個方法，簡單的說，方法一、拼接屏可以按照拼接后的橫縱像素總和設計（拼接屏像素超大可等比例縮放）。LED/LCD屏幕設計也是同樣的原理。方法二、按照硬件輸出像素設計，硬件設備的輸出像素一定是和整個拼接屏成比例或者是吻合的。所以按照輸出像素設計是可以的。

（圖片來源于網絡）

屏幕的拼接方式及屏幕材質確定后，就可以進行頁面的設計及數據的布局，頁面的布局主要是依據業務及數據的重要程度來布局，可視化中會把核心的數據或業務的要點放中間，一方面中間是視覺的中心，二來也是數據和業務最容易傳達給觀眾的核心位置。其他的數據放兩側排列，排列數據一定要考慮數據的關聯性及聯動性，應該有意識的把他們放一起或就近，讓他們有關聯系，當一組數據變化時聯動效果更凸顯，容易傳達數據的價值。

最后插播一句，如果是拼接屏記得把數據避開拼接縫，頁面布局時就要考慮屏幕拼接方式，盡量把數據有序的展示在屏幕內，合理避開拼接縫減少對用戶觀感的影響。

具體設計要根據項目確定使用的工具做調整，如web、u3d、ue4等等。項目用什么開發工具很大程度決定了設計方法方式，各種工具自有不同的優劣勢，像web輕量化圖表控件多，效果相比u3d會弱很多。u3d對三維支持好，粒子等效果有優勢。了解這些大致可知道設計思路。

字體：

選擇識別性高的，字體不要太細，同時要注意版權，不要選擇太圓潤的字體。

顏色：

顏色明度飽和度要高些，遠距離觀更利于信息清晰傳達。顏色不要過于相近，大屏顏色相近更不易于數據間的區分，降低閱讀舒適感。大屏背景選擇深色系，內容選擇亮色系。保持內容與背景有一定的對比關系，便于業務信息傳達。（同時深色系也省電）

布局示例（以1920*1080尺寸，布局示例）

風格的確定也是至關重要的，首先要確定應用場景是怎樣的（室內、室外、光照如何、燈光照射如何、硬件如何等等），要充分考慮，以及目標用戶是誰，給誰用等等。都會對風格有不小的影響，設計是相通的，可用UI的方式來定義可視化設計風格，AB測試、情緒版等等。差異比較大的一點是應用場景的環境。

通過對數據圖表的選擇，屏幕布局及風格設計，一張初步作品已經完成。

此時最好結合業務目標及數據，設計內部先自檢：

1、現在的設計布局是否合理

2、配色是否合理并能通過色彩傳達數據的意義

3、整體設計是否符合之初的業務目標

4、是否存在其他問題等等

接下來就是各個相關人員及領導確認階段。

當風格頁確定后先別急于后面的頁面設計，如果有可能的話，此時最好拿設計圖去現場實地測試（補充一句，設計開始前最好是能到現場測試硬件顯示，顏色等，應最大程度的減少隱藏問題）。確定現場硬件是否存在偏色問題、文字大小在合適的觀看距離是否清晰可見、現場燈光光照等是否對設計有影響、拼接縫和數據是否有穿插、硬件設備輸出是否和設計匹配等等。確認無誤后在開展后面的頁面設計工作。

（圖片來源于網絡）

開發工具不同（如web、u3d、ue4等等），對接方式也會有差異。相同相似之處有如標注規范，顏色，字體字號等等。對于一些三維場景需要提供三維文件，如obj、FBX等。

主要提供：設計規范（標注）、切圖、三維文件（示項目需求并不一定設計提供），特殊動效可提供范例。

補充一點，拼接屏到8K左右甚至更高，輸出像素不必達到8K，稍微加點效果，會卡到懷疑人生。一般會降低到4k左右，對硬件要求下降的同時也能保證整體效果和流暢度。

開發結束后，要拿到演示文件去現場測試，測試輸出是否有問題，有無拉伸問題，測試有無卡頓現象，拼接縫與內容有無穿插，如有控制端（控制屏）需聯調測試。確定整體無誤后，才是設計的最后交接棒。

作者：聶永真

轉載請注明：學UI網》初學者如何快速上手數據可視化設計

藍藍設計建立了UI設計分享群，每天會分享國內外的一些優秀設計，如果有興趣的話，可以進入一起成長學習，請加藍小助，微信號:ben_lanlan，報下信息，藍小助會請您入群。歡迎您加入噢~~希望得到建議咨詢、商務合作，也請與我們聯系01063334945。

分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。

藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務、UI設計公司、界面設計公司、UI設計服務公司、數據可視化設計公司、UI交互設計公司、高端網站設計公司、UI咨詢、用戶體驗公司、軟件界面設計公司

數據可視化是一種用圖形形式來描述密集和復雜信息的通訊方式。由此產生的視覺視覺效果使得數據比較和用數據講來故事都變得更加容易——這兩種方法都有助于用戶做出決策。

數據可視化可以表示不同類型和大小的數據：從少量數據點到大型多元數據集都可以表示。

類型

數據可視化可以用不同的形式來傳達。圖表是一種常用的數據傳達方法，因為它們不僅描述了不同的數據類型，還能進行數據比較。

圖表類型的使用主要取決于兩個方面：想要傳達的數據，以及想要傳達的數據有關的內容。以下指南提供并描述了各種不同類型的圖表及其用例。

圖表類型

隨時間變化

隨時間變化的圖表顯示一段時間內的數據，如多個類別的變化趨勢及其對比。

使用情況包括：

1. 股票價格表現
2. 健康統計
3. 年度報表

隨時間變化的圖表包括

1. 折線圖
2. 柱狀圖
3. 堆積柱狀圖
4. 燭臺圖
5. 面積圖
6. 時間軸
7. 地平線圖
8. 瀑布流圖

類別比較

類別比較圖比較多個不同類別之間的數據。

使用情況包括：

1. 不同國家間的收入對比
2. 熱門場次對比
3. 團隊分配

類別比較圖包括：

1. 柱狀圖
2. 分組柱狀圖
3. 氣泡圖
4. 平行線圖
5. 多條折線圖
6. 子彈圖

排序

排序圖表示一個項目在有序列表中的位置。

使用情況包括：

1. 選舉結果
2. 表現統計

排序圖包括：

1. 排序條形圖
2. 排序柱狀圖
3. 平行線圖

部分-整體

部分-整體圖表示部分元素是如何加總為整體的。

使用情況包括：

1. 產品類別綜合收益
2. 預算

部分-整體圖包括：

1. 堆積柱狀圖
2. 餅狀圖
3. 堆積面積圖
4. 矩陣樹圖
5. 太陽輻射圖

相關

相關圖展示兩個或多個變量之間的相關性。

使用情況包括：

1. 收入和預期壽命

相關圖包括：

1. 散點圖
2. 氣泡圖
3. 柱狀和折線圖
4. 熱力圖

分布

分布圖展示每個值在數據集中出現的頻率。

使用情況有：

1. 人口分布
2. 收入分布

分布圖包括：

1. 直方圖
2. 線箱圖
3. 小提琴圖
4. 密度圖

流

流圖顯示數據在多種狀態之間的流動。

使用情況包括：

1. 資金轉移
2. 投票統計和選舉結果

流圖包括：

1. 桑基圖
2. 甘特圖
3. 和弦圖
4. 網狀圖

關系

關系圖顯示多個項目之間是如何彼此關聯的。

使用情況有：

1. 社交網絡
2. 文字圖

關系圖包括：

1. 網狀圖
2. 維恩圖（或譯Venn圖、文氏圖、韋恩圖、范氏圖）
3. 和弦圖
4. 太陽輻射圖

選擇圖表

許多類型的圖表都可以用于描述數據。下面的指導方針提供了如何選擇圖表的見解。

顯示隨時間產生的變化

隨時間產生的變化可以用時間序列圖來表示，這是一種按照時間順序來表示數據點的圖表。

可以表示隨時間變化的圖表包括：折線圖、條形圖和面積圖。

*基線值是指y軸上的起始值。

條形圖和餅狀圖

條形圖和餅狀圖都可以用于顯示比例，表示部分值與整體值之間的比較。

1. 條形圖使用一條共同的基線，通過條柱的長度表達數量
2. 餅狀圖使用圓內的圓弧或圓角表示整體的一部分

條形圖、折線圖和堆積面積圖比餅狀圖更能夠表達隨時間產生的變化。因為這三種類型的圖表中，可能的值共享同一條基線，所以比基于條柱長度的條形圖更容易比較值之間的差異。

面積圖

面積圖有多種類型，包括堆積面積圖和重疊面積圖：

1. 堆積面積圖表示（在同一時間段內）多個時間序列堆積在一起
2. 重疊面積圖表示（在同一時間段內）多個時間序列重疊在一起

重疊面積圖中不建議包含兩個以上的時間序列，以免模糊數據。相反，可以使用堆積面積圖在一個時間間隔內比較多個值（橫軸表示時間）。

樣式

數據可視化使用自定義的樣式和形狀，以適應用戶需求和上下文的方式使得數據一目了然。

下列有益于圖表自定義：

1. 圖形元素
2. 排版
3. 圖標
4. 軸和標簽
5. 說明和注釋

設置不同類型數據的樣式

視覺編碼是將數據轉換成視覺形式的過程。獨特的圖形屬性可以應用于定量數據（如溫度，價格或速度）和定性數據（如類別，風味和表達式）。

這些圖形屬性包括：

1. 形狀
2. 顏色
3. 尺寸
4. 面積
5. 體積（容積/量）
6. 長度
7. 角度
8. 位置
9. 方向
10. 密度

表達不同屬性

多種視覺處理方式可以應用于數據點的多個方面。例如，條柱的色彩可以表示一個類別，與此同時條柱的長度可以表示一個值（如人口大小）。

形狀可以用來表示定性數據。在該圖表中，每個類別由一種特定形狀代替（圓形，方形和三角形），這使得比較特定范圍內的數據或與其他類別數據進行比較都很容易。

形狀

圖表可以通過形狀來以多種不同的方式表達數據。形狀可以被設計為一條有趣的曲線，或一個精確的高保真圖形，以及介于二者之間的其他方式。

形狀的精確程度

圖表可以以不同的精度來表示數據。用于深入研究的數據應該（根據觸摸目標的尺寸和相關可視化要求）使用適合交互的形狀來表示。而用于表達大致想法或趨勢的數據可以使用細節較少的形狀。

顏色

顏色有四種主要的區分數據的方式：

1. 區分不同的類別
2. 表示數量
3. 突出特定數據
4. 表達意義

顏色區分類別

在環形圖中顏色被用于定義類別。

顏色表示數量

在地圖中顏色被用于表示數據值。

顏色突出數據

在散點圖中顏色被用于突出特殊數據。

焦點區域

當顏色被少量使用時，它可以突出焦點區域。不建議使用大量的高光顏色，因為它們會分散用戶的注意力。

顏色表示意義

無障礙

為了適應無法區別色彩差異的用戶，可以使用其他的方法來強調數據，例如高對比度著色、形狀或紋理。

將文本標簽應用于數據也有助于澄清其含義，同時消除了對說明的需要。

線條

圖表中的線條可以傳達數據的質量，例如層次結構、突出強調和對比。線條的樣式可以采用不同方式，如使用虛線或不同的不透明度。

線條可以應用于特定的元素中，包括：

1. 注釋
2. 預測元素
3. 比較工具
4. 置信區間
5. 異常

排版

文本可以用于標記不同的圖表元素，包括：

1. 圖表標題
2. 數據標簽
3. 軸標簽
4. 說明

層次結構中級別最高的文本通常是圖表標題，最低的是軸標簽和說明。

文本粗細

標題和不同的字體粗細在層次結構中可以傳達哪些內容比另一些更重要（或更不重要）。然而這種處理方式應該有節制地使用，即采用數量有限的字體樣式。

圖標

圖標可以表示圖表中不同類型的數據，以提高圖表的整體可用性。

圖標可以被用于：

1. 分類數據，以區分組或類別
2. UI控件及操作，如篩選，縮放，保存和下載
3. 狀態，例如錯誤狀態，無數據狀態，完成狀態和危險狀態

當在圖表中使用圖標時，建議使用普遍可識別的圖標，尤其是在表示操作或狀態時，例如：保存，下載，完成，錯誤和危險。

在傳達意義時圖標補充了顏色的意義。

有標記的軸

有標記的軸或多個軸能夠指示數據所展示的規?；蚍秶?。例如，折線圖展示的是沿水平和豎直方向標記的軸的范圍內的值。

條形圖基線

條形圖應該從基線（y軸上的起始值）上的0開始。從不為0的基線開始可能會導致數據被錯誤地感知。

軸標簽

標簽的使用應該反映圖表中最重要的數據細節。軸的標簽應該根據需要，并在用戶界面中以一致的方式使用。它們的存在不應該妨礙圖表的閱讀。

文本方向

在圖表中文本標簽應該按水平方向放置，以保證其易于閱讀。

文本標簽不應該：

1. 被旋轉
2. 垂直堆疊

說明和注釋

說明和注釋描述圖表的信息。注釋應該突出顯示數據點、數據異常值和任何值得注意的內容。

1. 注釋
2. 說明

在桌面設備上，建議在圖表下方放置說明。而在移動設備中，建議將說明放置在圖表上方，以便在交互過程中保持說明可見。

標簽和說明

在簡單的圖表中，圖表元素可以被直接標記。但是，密集的圖表（或較大圖表組中的部分）可以在說明中顯示標簽。

小型顯示器

在可穿戴設備（或其他小型顯示屏）上顯示的圖表應該是桌面端或移動端圖表的簡化版。

行為

圖表為用戶提供了可以控制所展示數據的交互模式。這些模式讓用戶關注圖表中的特定值或特定范圍。

以下推薦的交互模式、樣式和效果（如觸覺反饋）可以提高用戶對圖表數據的理解：

1. 逐級展開 提供了一種清晰的途徑來揭示細節，可按需展示。
2. 直接操作允許用戶直接對UI元素進行操作，以減少屏幕上所需的操作步數，直接操作包括：縮放和平移，分頁，數據控件。
3. 改變透視圖可以使一項設計服務于不同的用戶和數據類型，例如數據控件和移動。

逐級展開

使用逐級展開的方式顯示圖表細節，能夠允許用戶根據需要查看特定的數據點。

縮放和平移

縮放和平移是圖表中流行的交互方式，它們影響用戶研究數據和探索圖表UI的密切程度。

縮放

縮放改變了UI顯示的距離。而設備類型則決定縮放的執行方式。

1. 在桌面端，通過點擊并拖動或滾動的方式實現縮放
2. 在移動端，使用雙指捏放的手勢來實現縮放

當縮放不是主要操作時，（在桌面端）可以通過單擊并拖動或（在移動端）通過雙擊來實現相同效果。

平移

平移能夠讓用戶探索超出屏幕之外的UI。應該以對顯示數據有意義的方式對其進行約束。例如，如果一張圖表的一個維度比另一個維度更重要，那么平移的方向可以僅限于更重要的維度方向上。

平移操作通常與縮放配合使用。

在移動端，通常通過手勢進行平移，例如單指滑動。

分頁

在移動端上，分頁是一種常見的模式，允許用戶通過左右滑動查看上一張或下一張圖表。

在移動端，用戶可以向右滑動查看前一天的內容。

數據控件

可以使用切換控件、選項卡和下拉列表篩選或更改數據。

當用戶調整控件時，這些控件也可以顯示度量。

切換控件、選項卡和下拉列表意味著可以篩選或更改數據。

動效

動效可以加強并鞏固數據間的關系以及用戶和數據的交互方式。動效應該有目的地（而不是裝飾性地）被使用，以表達不同狀態和空間之間的關系。

動效應該合乎邏輯，平穩且能夠快速響應，不妨礙用戶的體驗旅程。

在這一案例中，數據的動效設置在切換按天顯示和按周顯示的時候。在切換的過程中不顯示所選日期范圍之外的數據，從而降低了圖表復雜性。

此處的動效顯示了兩張不同圖表之間的聯系。

空狀態

空白的圖片和表格可以顯示一些表明在數據可用時期望發生的內容。

在適用的情況下，角色動畫能夠帶來愉悅感和激勵。

角色動畫豐富了空白圖片。

儀表盤

數據可視化可以在一系列的多個圖表中展現，這在UI中被稱為儀表盤。多個單獨的圖表有時比一個復雜的圖表能夠更好地傳達一個故事。

儀表盤設計

儀表盤的目的應反映在其布局、樣式和交互模式中。儀表盤的設計應該適應它的使用方式，無論它是一個演示工具還是一個深入研究數據的工具。

一個儀表盤應該：

1. （通過布局）優先考慮最重要的信息
2. 顯示根據層次結構（使用顏色、位置、大小和視覺權重）排序的信息焦點

應該根據數據提出的問題對信息進行優先級排序。在本案例所示的操作儀表盤中，考慮了以下的用戶問題：

1. 需要被注意的問題
2. 問題發生的時間
3. 問題發生的位置
4. 受問題影響的其他變量

分析型儀表盤

分析型儀表盤能夠讓用戶探索多個數據集并發現趨勢。通常這些儀表盤包括復雜的圖表，這些圖表能夠發現數據細節。

使用情況包括：

1. 強調隨時間變化的趨勢
2. 回答“為什么”和“如果……怎樣”的問題
3. 預測
4. 創建深入的報告

分析型儀表盤的案例有：

1. 跟蹤隨時間變化的廣告活動表現
2. 跟蹤產品在整個生命周期中的銷售和收益
3. 顯示城市人口隨時間改變的趨勢
4. 跟蹤隨時間變化的氣候數據

操作型儀表盤

操作型儀表板旨在回答一組預定義的問題。它們通常用于完成與監視相關的任務。

在大多數情況下，這種類型的儀表盤會把當前信息安排在一組簡單的圖表中。

使用情況包括：

1. 根據目標跟蹤當前進度
2. 實時跟蹤系統表現

操作型儀表盤的案例有：

1. 跟蹤呼叫中心活動，如呼叫量、等待時間、呼叫長度或呼叫類型
2. 監視云端應用程序的運行情況
3. 顯示股票市場表現
4. 監視賽車的遙測數據

演示型儀表盤

演示型儀表板提供了關于感興趣主題的詳細快照。

這些儀表板通常包括一些小圖表或記分卡，通過動態標題來解釋每個支持圖表中提供的趨勢和見解。

使用情況包括：

1. 提供關鍵績效的指標概述
2. 創建高級執行摘要

展示型儀表盤的案例有：

1. 提供投資帳戶表現的概述
2. 提供產品銷售和市場份額數據摘要

譯者：杜雅黎

轉載請注明：學UI網》Material Design Data Visualization 數據可視化

藍藍設計建立了UI設計分享群，每天會分享國內外的一些優秀設計，如果有興趣的話，可以進入一起成長學習，請加藍小助，微信號:ben_lanlan，報下信息，藍小助會請您入群。歡迎您加入噢~~希望得到建議咨詢、商務合作，也請與我們聯系01063334945。

分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。

藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務、UI設計公司、界面設計公司、UI設計服務公司、數據可視化設計公司、UI交互設計公司、高端網站設計公司、UI咨詢、用戶體驗公司、軟件界面設計公司

作者：BYMD

轉載請注明：學UI網》基于地理位置的美食數據可視化設計

藍藍設計建立了UI設計分享群，每天會分享國內外的一些優秀設計，如果有興趣的話，可以進入一起成長學習，請加藍小助，微信號:ben_lanlan，報下信息，藍小助會請您入群。歡迎您加入噢~~希望得到建議咨詢、商務合作，也請與我們聯系01063334945。

分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。

藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務、UI設計公司、界面設計公司、UI設計服務公司、數據可視化設計公司、UI交互設計公司、高端網站設計公司、UI咨詢、用戶體驗公司、軟件界面設計公司

常使用數據可視化的APP大致分為這幾類：「天氣類」「生理健康類」「財務記賬類」「數據分析類」「運動健身類」等。下面為大家介紹一些代表性的APP。

「天氣類」

「墨跡天氣」和「天氣通」根據城市實景和當下天氣對實時景觀圖進行模糊處理，增強產品的關聯性和代入感。

「生理健康類」

Clue會根據不同階段的心情做可視化，比如易孕期會用一些生理圖形提醒用戶你的狀態。這或許會給我們做自己的產品帶來一些思考。

你今天真好看是一款人工智能測膚美妝的應用，會使用各圖表闡明你的膚質水平。

「財務記賬類」

記賬類APP和理財類APP幾乎囊括了所有圖表樣式，折線圖、餅狀圖、條形圖都不在話下。

「專業數據分析類」

移動端設備的高速發展，使專業的數據分析平臺不再局限于PC端展示，于是移動端的數據分析軟件也應運而生。以下為友盟和神策商店圖。

「運動健身類」

移動設備在消費市場得到很大的變化——從手機到可穿戴設備。移動設備越來越實惠，實現了前所未有的大面積普及。

大家對步數、飲食、體重等數據也更加看重。市面上做的比較好的APP有：keep、薄荷健康、小米運動等。

同事給我推薦了一個應用—garmin connect(佳明)，它的界面繽紛、數據豐富、但是卻不會讓人感受到焦躁，這里面包含了一些設計原理。

介紹這么多數據可視化為主的APP，相信大家對數據可視化已經有了初步的感受。想要做好數據可視化應該怎么著手呢？以下結合實際案例進行說明。

2.可視化數據圖的配色

在上篇文章我們了解到，顏色是有溫度和進退性的，不同的配色帶來不同的體驗。因此，可視化設計也需要考慮到配色對數據的影響。

「深色底」

深色底圖表通常為了營造一種氛圍和感覺，展示出的數據信息一般不會特別繁雜，數據選用亮度較高的色彩，這樣數據信息容易從深色中跳出來。

「淺色底」

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

下面就以小米運動為例：我們對2個頁面的閱讀效率進行比較。在以數據分析為主、有大量數據的頁面中，淺色底的頁面可讀性更高，閱讀效率也更高。

「彩色底」

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

「圖片底」

圖片底：為了讓數據更有可信度和關聯度，在一些天氣類APP中經常會使用這種方式，圖片內容與數據信息產生關聯，提升可讀性。

3.各類圖表的使用場景

每種圖表都會對應它適合的數據類型。作為設計師一定要了解它們之間的對應關系，使得設計有理有據。

「折線圖」

顯示為一組由單個線條連接的點；用于表示在一段連續時間內發生的大量數據波動，有單折線圖和多折線圖之分。

「曲線圖」

顯示為光滑的曲線；如果數據是連貫的，且點與點之間的數據具有分析價值，用曲線圖比用折線圖合適。

「餅圖&環形圖」

環形圖可以理解為空心的餅狀圖。常用于顯示部分相對總體的百分比。還可用來顯示進度加載等。

「條形圖&柱狀圖」

條形圖可以理解為橫著的柱狀圖。常用于展示同屬性的數據、可以對比其數值。

「熱度圖 / 熱力圖」

常用于地理位置分布統計，進而可以分析景區、站點、高速等的人流分布狀況。另外APP界面的點擊熱力圖可以清晰展示哪個功能被點擊的次數最多，給我們帶來體驗優化的依據。

「雷達圖」

在比較多個類別程度和查看整體情況很適合，既可以查看自身整體情況，也可以對比多個方面的數據。這是一種展示效果不錯的數據表達方式，在展示整體綜合信息上很直觀。

「儀表盤」

儀表盤設計最初來源于工業設計的車輛控制臺，由于其專業、科技感的內核，現在多被一些強調科技、專業的產品所借鑒、例如網絡監控、金融信用等。

4.圖表運用到界面中去

了解基本的圖表類型后，接下來的重點是圖表的界面設計。移動設備的屏幕較之PC端小，用戶每次可接收的數據信息量小，所以如何有效運用圖表的設計是我們需要掌握的一項很重要的部分。

「單個數據」

頁面中就展示一個比較重要的數據，如何設計？圓形是一個不錯的選擇，因為它可以在頁面中形成視覺中心。不管是餅狀圖，還是環形圖，或是擁有視覺中心的雷達圖，都會讓頁面上呈現一個視覺重點。

上圖的案例，為了讓頁面更加豐富，采用重色將界面撐滿，求得視覺上的飽滿。

「多組數據」

手機屏幕空間有限，多組數據在展示的時候一定要盡量讓主次數據的圖表類型不一致。曲線圖、餅圖、環形圖、柱狀圖等基礎圖表，交替使用，這樣使得整個頁面層次清晰，內容豐富。最常見的錯誤就是設計師沒有對信息區分層級，所有的內容看起來都一樣重要。

當設計師面對幾大模塊展示大量的數據信息時，建議每個模塊單獨采用一種圖表類型，各個模塊的圖表類型均不同，這樣會減輕用戶對數據展示的疲勞度。

5.可視化數據的動效

動效可以提升產品趣味性，尤其在展示大量數據信息時，使用動效能緩解閱讀壓力。數據圖表中常見的動效有以下幾種：

「動態呈現數據」

「導航切換」

「功能動態切換（點擊按鈕切換形態）」

「屏幕橫縱向切換數據」

寫在最后：希望我們都能好好把握數據可視化，把握數據時代，真正讓數據驅動業務，驅動發展。不過我們也不要為了使自己的設計看起來炫酷而加上各種發光漸變，過分的動效導致加載無能，因為完美的方案不是沒什么可以加，而是沒什么可以減。

作者：一個辛普森

 轉載請注明：學UI網》用戶體驗大小事—數據可視化設計五點論

藍藍設計建立了UI設計分享群，每天會分享國內外的一些優秀設計，如果有興趣的話，可以進入一起成長學習，請加藍小助，微信號:ben_lanlan，報下信息，藍小助會請您入群。歡迎您加入噢~~希望得到建議咨詢、商務合作，也請與我們聯系01063334945。

分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。

藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務、UI設計公司、界面設計公司、UI設計服務公司、數據可視化設計公司、UI交互設計公司、高端網站設計公司、UI咨詢、用戶體驗公司、軟件界面設計公司

圖表的定義：可直觀展示統計信息的屬性，對知識挖掘和信息直觀生動感受起關鍵作用的圖形結構，是一種很好的將對象屬性數據直觀、形象地可視化的手段。

英文叫法：Chart。

用戶對圖形的敏感程度遠遠大于文字，所以產品就需要把數據信息可視化，用簡單的圖形表示出更多的信息量，而圖表是數據可視化中最常用的表現形式。

接下來我們來介紹圖表的具體構成及元素解析。

二  圖表的構成

圖表是由：標題、圖例、刻度軸、數據展示、網格線、提示信息、水位線、時間軸組成，每一個元素都有他存在的意義。在實際使用中不一定非得把元素全部展示出來，精簡化顯示想要展示的內容即可。

三  圖表元素解析

3.1  標題

顧名思義，標題就是圖表的名字，標題是必不可少的元素。標題的內容一定要言簡意賅，不要太長，能兩個字寫清楚絕對不用三個字。

標題的常用位置有 3 個：左上角、頂部居中、底部居中。

一般情況下，標題字號 / 色值要突出一些，用戶第一眼看到 chart 的時候，要清晰的看到這個圖表是做什么的。

特殊情況下，如果需要對標題有額外解釋的話，兩種展現形式：

• 增加提示圖標；
• 增加提示語。

3.2  圖例

3.2.1  圖例的組成

顏色、名稱、數值、單位。

3.2.2  圖例的展現形式

圓形、開關、矩形、鼓包線、實線、虛線。

3.2.3 圖例的位置

從左至右、從上至下。

3.2.4  圖例的作用

• 標識出每個顏色所代表的的類別；
• 開啟 / 隱藏數據顯示；
• 圖例顯示的數值一般為當前值。

3.2.5  圖例的顏色選擇

同一組圖例中，不要出現相近的顏色，否則在圖表顯示中分不清彼此。

產品使用中，要規范圖例顏色使用，一般分為兩種：

• 常用的圖例顏色（顏色本身代表著行業中的某種含義），此類顏色需要是固定色值，無論哪個 chart 中，都是這個顏色；
• 無特殊含義的圖例，可以規范出一個圖例顏色的使用順序表。那些無特殊含義的 chart 可以按順序使用圖例顏色，圖例整齊劃一。

3.2.6  圖例過多時如何展示

• 如果圖例可整合前提下，展示主要圖例 / top n 圖例，其他的圖例做整合，增加個詳情頁來展示完整的；
• 如果圖例不可整合/省略，則需要給出足夠的展示空間。

3.2.7  共用圖例

如果多個 chart 的圖例一樣，可進行合并，減少冗余圖例。

3.2.8  圖例省略

如果 chart 中只有一個圖例的話，可省略。

3.2.9  圖例名稱限制

根據不同使用場景，為了更好的展示效果，要給圖例名稱設置一個最大值，超過最大值后省略展示。

3.3  坐標軸

坐標軸分為 X 軸和 Y 軸，常規情況下為 1 個 X 軸+1 個 Y 軸。不過特殊情況下也會用到2X+Y 或 X+2Y。

3.3.1  刻度值代表的意義

• 時間點：12:00；
• 時間段：周一、周二。

3.3.2  坐標軸使用規則

是否帶單位：

• 如果刻度值的含義明確的情況下，可以不用帶單位，比如：2018、2019、2020…；
• 如果刻度值含義有歧義的情況下，必須加上單位（具體是統一一個位置加單位，還是每個刻度值上加單位，則需要根據場景來判斷）。

對齊方式（常用，但非必須）：

• X 軸：居中對齊；
• Y 軸：右對齊。

刻度值過多時如何顯示：

• 可選擇規律性省略刻度名稱；
• 傾斜文字以顯示更多的文案。

刻度值的選用一定要是同一個規律，禁止同距離的刻度值代表不同數據。

刻度點的樣式使用規則：刻度的線朝外。

3.4  數據展示

數據的展示是 chart 中最為明顯的地方，可以說如果只顯示一個元素的話，就是他了。

數據展示的使用規則：

• 邊界要清晰，不可虛化；
• 多個數據同時顯示的時候，要保證每個數據都能清晰的看到，可以采用透明度來保證所有數據的顯示。

3.5  網格線

3.5.1  網格線的作用

呼應坐標軸，美觀度。

3.5.2  網格線的使用規則

• 線的顏色要弱化，不要喧賓奪主；

• 網格線使用實線居多，盡量不用虛線。

3.5.3  使用場景

橫、縱、橫縱結合、無網格線。

3.6  提示信息

通常情況下，提示信息用來標識出 chart 中重要點的數據信息，需要注意的是：重要信息盡量簡化，信息量不要太大，言簡意賅就好。

3.7  水位線

根據不同產品的使用場景，有的時候會用到閾值，當達到某個閾值后，就會觸發某種聯動。這個時候就需要有個水位線了，它起到警示的作用。

形式有兩種，實線和虛線，顏色的選取則取決于產品的警告級別。

水位線可以是一個，也可以是多個，視情況而定。

3.8  時間軸

時間軸可以靈活地調節刻度值的上下限，從而更精確的看到自己想看的數據。

時間軸的功能及限制不是很復雜，所以就不過多解釋了，需要用的話就用。

四  圖表使用建議

4.1  折線圖 line

4.1.1  定義

折線圖可以顯示隨時間（根據常用比例設置）而變化的連續數據，因此非常適用于顯示在相等時間間隔下數據的趨勢。

折線圖是通過線條的波動來表示數據的波動，主要體現的是數據隨著時間的推移而變動的圖表。

4.1.2  使用場景

常用于觀察一段時間內數據波動的浮動變化，比如：一天內內存的使用情況。

4.1.3  使用建議

• Y 軸刻度值選擇要合理，當前顯示的數據波動要最大化的顯示；

• 重要節點可以單獨做重點標注；

• 數據拐點要平滑，不要太鋒利。

4.2  面積圖 area

4.2.1  定義

面積圖和折線圖比較類似，區別在于面積圖把數據區域做了個面積劃分，讓數據的顯示更加清晰。

4.2.2  使用場景

面積圖展示盡量不要超過 3 個圖例，否則數據多的情況下，數據的展示會特別亂，影響觀看。

4.2.3  使用建議

• 面積區域要和折線的顏色用統一色系，不要換色系；

• 面積區域一般要比折線顏色淺一些，這樣視覺上更加讓人舒適；

• 如果多條數據情況下也用面積圖的話，面積區域盡量使用透明度，否則有的數據會被遮擋看不到。

4.3  柱狀圖 bar

4.3.1  定義

柱形圖，又稱長條圖、柱狀統計圖。用來比較兩個或以上的價值（不同時間或者不同條件），只有一個變量，通常用于較小的數據集分析。

4.3.2  使用場景

• 柱狀圖分為橫向和縱向兩種展現形式。
• 用于在同一維度下不同數據的對比，用柱狀圖更能清晰的對比出數據的差異化。

4.3.3  使用建議

• 柱狀圖的厚度不要是固定值，要做成自適應來應對不同尺寸的分辨率顯示；

• 厚度與間距的對比要合理設計；

• 可使用小圓角，千萬不要用大圓角，太丑了……

• 如果想要強調某個柱子的話，可以進行顏色區分，但是柱子顏色不要超過 2 個（同一維度下）；

• 如果想要在柱子上顯示數值的話，使用建議（下面的順序為推薦順序）：
  • hover 的時候出現數值；
  • 數值默認在柱子上顯示；
  • 數值在柱子頂部 / 右側顯示。

4.4  餅圖 pie

4.4.1  定義

餅圖僅排列在工作表的一列或一行中的數據，它是有一個總和數據，方面查看每個類別分別占總數據的百分比的一種圖表。

4.4.2  使用場景

• 常用于做總結、年度匯報等；
• 所有數據相加必須是 100% 才可用。

4.4.3  使用建議

• 每個數據要使用單獨的顏色來表示，不要有相同顏色；
• 餅圖中不能有負值；
• 圖例數量沒有限制，但是如果遇到可以合并的圖例，可以進行合并；
• 餅圖的開始點為 0/12 點位置。

4.5  環形圖

4.5.1  定義

環形圖是由兩個不同大小的圓疊在一起，切割中心部分得到的一種圖形。

4.5.2  使用場景

• 環形圖有一個獨有的特點，就是可以在中心圓的位置突出某一項指標的數值。
• 它常用于做數據的監控，監控某一類指標是否正常。

4.5.3  使用建議

• 環形圖的開始點為 0/12 點位置；
• 環的粗細要合理，不要太粗和太細；

• 環形圖的兩個圓要從中心對齊。

4.6  堆疊面積圖

4.6.1  定義

堆疊面積圖是把數據面積按順序逐步堆疊起來的一種圖形。

4.6.2  使用場景

常用于不同資源中流量 / 容量的使用。

4.6.3  使用建議

• 不要有重復的顏色；
• 盡可能的把數據量按大小的順序，由下至上的堆疊。

4.7  堆疊柱狀圖

4.7.1  定義

堆疊柱狀圖是把數據柱狀圖按順序逐步堆疊起來的一種圖形。

4.7.2  使用場景

常用于不同維度下相同幾個指標的展示。

4.7.3  使用建議

• 不要有重復的顏色；
• 按重要等級由下至上排序。

4.8  非常用圖表

上面介紹了常用的圖表的使用建議，但是圖表類型遠遠不止于此，還有很多非常用的圖表類型，這次我先給大家列出來，如果大家感興趣的話，我后面再寫一期冷門圖表的使用建議：

雷達圖，散點圖，K線圖，盒須圖，熱力圖，旭日圖，?；鶊D，樹圖，漏斗圖，儀表盤。

五  常用的圖表開源網站

5.1  echartsecharts

https://echarts.apache.org/zh/index.html

5.2  highcharts

https://www.highcharts.com.cn/

5.3  antv

https://antv-g2.gitee.io/zh/examples/gallery

總結

Chart 是數據可視化必修課中最重要的模塊之一，不可忽略。只有了解每個 chart 的定義及使用場景，才能在產品中用到最合適的那一個。

作者：Luckgg

轉載請注明：學UI網》數據可視化必修課 – 圖表篇

藍藍設計建立了UI設計分享群，每天會分享國內外的一些優秀設計，如果有興趣的話，可以進入一起成長學習，請加藍小助，微信號:ben_lanlan，報下信息，藍小助會請您入群。歡迎您加入噢~~希望得到建議咨詢、商務合作，也請與我們聯系01063334945。

分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。

藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務、UI設計公司、界面設計公司、UI設計服務公司、數據可視化設計公司、UI交互設計公司、高端網站設計公司、UI咨詢、用戶體驗公司、軟件界面設計公司

表格是一種數據可視化的一種形式，可以查看和處理大量數據，它主要承載了數據的收集、整理、組織、展示、對比和歸納。

二  表格的設計原則

2.1  易讀性

表格的層級一定要劃分的非常清晰，層級分明。你要讓用戶更關注的是數據本身，而不是花里胡哨的樣式。

2.2  可尋性

列表以易于瀏覽的邏輯排序，提供合適的搜尋組件幫助用戶快速查找信息。

2.3  高效性

表格要用最短的時間告訴用戶想要得到的信息。

2.4  靈活性

可以讓用戶根據自己的習慣及興趣自定義自己的表格展示，比如排序、篩選、調整表頭順序等功能。

三  表格的構成

外部區域：標題、操作區、篩選區；

內部區域：表頭、表體、表尾。

介紹完表格的構成，我們再來把每一個元素拆解出來詳細介紹。

四  表格元素解析

4.1  標題

標題是整個表格內容概述的名稱，此名稱盡量簡潔明了，不要太長，能兩個字寫清楚絕對不用三個字。

如果標題名稱難以理解的話，可以加二級提示，有兩種常用樣式：tooltips（常用）、二級提示語。

標題的位置一般在左上角。

4.2  操作區

對表格內容的增刪改等操作的區域。

使用建議：

4.2.1  有且只有一個主操作

特殊情況下可以沒有主操作，但不能有兩個主操作。

4.2.2  樣式統一

同一個產品中，操作區樣式規范要保持一致。

4.2.3  操作的優先級

根據使用的優先級，把常用的操作放到一級展示，不常用的收到二級展示。

4.2.4  不同操作狀態區分要明確

不是所有的操作都是可以直接用的，比如有的操作在沒有選擇內容的時候是 Disable 狀態，那這時候就要和其他可操作的有明顯的樣式區別，否則容易讓用戶分不清可不可以操作。

4.2.5  刷新按鈕

有很多同學對這個操作是不是有些疑惑？有人覺得瀏覽器都有刷新功能啊，干嘛還要多此一舉再加個刷新。其實這個刷新功能還是很有必要的，這個刷新只針對于列表內的內容。

在有的后臺管理界面中，因為數據量很大，如果每次刷新都用瀏覽器自帶刷新的話，他會重新加載整個頁面的內容，很不好用。很多情況下，用戶只想重新加載一下列表的內容，那這個刷新就很好用啦。

同時刷新后要有即時反饋，告訴用你他點完操作后目前處于哪個階段中。

4.2.6  導出功能

此功能可以把列表內容導出為你想要的格式（一般為 word / pdf）。

數據量較大的列表中，導出功能可以很方便的把自己過濾的內容下載到本地進行其他需求的查看。

導出內容的范圍是哪些一定要事先想好，一般下載內容的范圍以下幾種：

• 當前頁所有列表內容（常用，而且實現難度很低）；
• 經過二次過濾后，導出所有頁上的列表內容；
• 所有頁的列表內容（不常用，而且實現及數據處理難度會非常大，慎重選擇）。

4.2.7  導入功能

既然可以導出，就有導入。導入報表對文檔會有要求，一般都是固定格式的文檔，而且文檔與列表中的字段都可以一一對應上，才可以完美導入。導入功能中 word 和 excel 是最常用的格式。需要注意的是，導入文檔后最好有二次確認提示，告訴用戶上傳了哪些內容，同時該內容是否與現有的列表字段有沖突。

4.2.8  自定義內容

自定義分兩種：

• 可以設置某列內容是否展示（需要注意的是：列內容展示數量可以不設置上限，但必須設置下限）；
• 可以設置每一列內容的左右排序。

如果表格內容比較多的情況下，這兩個功能是很有必要的，如果內容少，則可忽略這兩個功能。

那怎么區分內容的多與少呢？

我的理解：常用分辨率下，一屏可顯示完整內容的話為內容少；反之則內容多。

4.3  Tab（標簽切換）

可以快速切換不同維度下的表格內容。

使用建議：

• 不同狀態區分要明顯；
• Tab 數量不宜過多，如果不可避免的數量過多的話，一般有兩種方案：
  • 最多顯示出 5 個 Tab，超過 5 個 Tab 放在“更多里面”；
  • 交互上支持左右滑動 / 切換 Tab。
• Tab 只放文本，最多可以放個 icon，盡量避免其他干擾信息；
• Tab 信息要精簡。

4.4  篩選區

篩選區是對表格數據的主觀再處理，用戶根據篩選功能可以得到更精準的信息。

4.4.1  搜索功能：

4.4.1.1  模糊搜索 or 精準搜索

搜索首先要確定哪幾個字段可以被搜索到，名稱？編號？等等…

模糊搜索使用的頻率居多，畢竟有時候用戶不一定可以精準的記住想要搜索的準確信息。不過也不是絕對的，兩者皆可選擇，根據產品選擇即可。

4.4.1.2  單字段搜索

輸入單字段進行搜索，比較常用的方式之一。

4.4.1.3  多字段組合搜索

可以輸入多個字段進行組合搜索（取并集），一般交互方式為回車完成書寫。此方式比單字段搜索更加精準，數據量過大的時候優勢就很明顯了。

4.4.1.4  切換類別搜索

可以設置幾個常用的類別來快速切換搜索的維度，方便用戶使用。

4.4.1.5  多類別組合搜索

多類別組合搜索適合更加復雜的列表內容，并且類別名稱會展示出來，可以比較清晰的看到用戶用的哪種類別名進行搜索的。

4.4.2  篩選的樣式

輸入框、下拉選擇、日期選擇器、單選、多選。

4.5  表頭

每一列列表的小標題，是對整列內容的描述。

表頭區域比較常用的幾個功能：排序、過濾、進一步解釋/說明、拖拽排序、拖拽增加 / 縮小列寬。

4.6  表體

表體承載了表格的主要內容，它的內容形式有很多：文本、icon、進度條、標簽等等。表體樣式分為兩種：斑馬線和線條分割。

使用建議：

• 內容決定表格的高度，一般設置 2~3 種行高就可以滿足大部分場景了；
• 把全局唯一且最重要的字段放在第一列，比如：名稱。同時可以把名稱固定在列表左側，就算列表橫向內容過多的時候，也可以第一時間看出區別；
• 要設置最大寬度和最大高度，避免特殊情況下的內容展示；
• 對齊方式：普通文本左對齊，數字類右對齊（記住就行，這是規范）；
• 最多支持二級列表，不可再多；
• 可以把一些常用的操作放出來，放在列表最后一列。

4.7  表尾

表尾主要是展示表格的統計信息、分頁、跳轉頁面等。每頁顯示條數常規情況下默認為 10/頁，最多 200/頁，再多的話加載速度會變慢，影響使用體驗。

五  列表詳情交互展現

5.1  彈窗

• 模態對話框：用戶在當前頁面彈出一個彈窗，除此彈窗內容外不可操作其他區域內容，產品的主觀意識較強。
• 非模態對話框：也是彈出個彈窗，但是與模態對話框不同的是它不打擾其他用戶操作，此彈窗存在的時候，用戶同時也可以操作其他區域，產品的主觀意識較弱。

5.2  抽屜

抽屜現在使用的頻率也是蠻高的，它的好處很明顯：在當前頁面彈出個抽屜，可展示的內容區域比彈窗多了很多，同時如果區域不夠用的話，還可以增加 Tab 來展示更多信息。而且不同資源的抽屜切換也比較方便。

缺點就是：并不能完全讓用戶的聚焦于某個信息的詳情，存在一定程度的信息干擾。

5.3  跳轉頁面

直接跳轉個新頁面作為詳情，好處就是可以展示更多的內容信息以及可以讓用戶更聚焦于當前內容。

缺點就是：新開頁面這種操作本身就比較重，如果在當前頁面可解決的事情，切記不要讓用戶新開頁面。

5.4  嵌套

嵌套就是上面提到的二級列表，它一般用于一級列表的內容補充，并且內容不宜過多。

在最后

在數據可視化中，表格是最常見的一種，它的知識點有很多，本篇文章只是到目前為止我的一些認知，如果有漏掉的知識點歡迎指教，我們都是學生，都要學習。

作者：Luckgg

轉載請注明：學UI網》數據可視化必修課 – 表格篇

藍藍設計建立了UI設計分享群，每天會分享國內外的一些優秀設計，如果有興趣的話，可以進入一起成長學習，請加藍小助，微信號:ben_lanlan，報下信息，藍小助會請您入群。歡迎您加入噢~~希望得到建議咨詢、商務合作，也請與我們聯系01063334945。

分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。

藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務、UI設計公司、界面設計公司、UI設計服務公司、數據可視化設計公司、UI交互設計公司、高端網站設計公司、UI咨詢、用戶體驗公司、軟件界面設計公司