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

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

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

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

請點擊——》》視頻1

請點擊——》》視頻2

 

作者：三魚先生

轉(zhuǎn)載請注明：學(xué)UI網(wǎng)》數(shù)據(jù)之美：地理空間數(shù)據(jù)可視化

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

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

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

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

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

很大的屏 !!!

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

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

設(shè)計前的準備

基礎(chǔ)大屏制作準備：

1、確認需求：確認展示的主題，具體展示的內(nèi)容，各部分內(nèi)容數(shù)據(jù)用到的圖表類型。

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

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

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

大屏制作一般只需四步：

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

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

3、細節(jié)：對標題、圖表細節(jié)的調(diào)整。

4、動態(tài)：添加動態(tài)效果，提升大屏展示效果。

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

設(shè)計思路案例實操

需求分析

設(shè)計要求：

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

黑客組織信息舉例：

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

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

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

風格要求：科技感 FUI

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

布局

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

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

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

風格

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

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

圖片來自網(wǎng)絡(luò)，如侵權(quán)刪

顏色

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

字體

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

數(shù)據(jù)圖表

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

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

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

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

2、不同類別數(shù)據(jù)的對比

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

3、排名 主要展示項目數(shù)據(jù)的一個排名情況。

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

4、不同數(shù)據(jù)對于整體的占比情況

典型的圖表有堆疊條形圖、餅狀圖、環(huán)形圖、堆疊區(qū)域圖、樹形圖、玫瑰圖等。

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

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

圖片來自網(wǎng)絡(luò)，如侵權(quán)刪

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

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

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

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

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

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

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

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

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

總結(jié)

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

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

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

作者：小六

數(shù)據(jù)可視化是數(shù)據(jù)內(nèi)在價值的最終呈現(xiàn)手段，它利用各類圖表及圖形化的設(shè)計手段將復(fù)雜不直觀的數(shù)據(jù)有邏輯的展現(xiàn)出來，使用戶找到內(nèi)在規(guī)律，發(fā)現(xiàn)問題，從而指導(dǎo)經(jīng)營決策，挖掘數(shù)據(jù)背后的商業(yè)價值。

首先介紹下使用場景：

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

第一類使用場景：

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

（圖片來源于網(wǎng)絡(luò)）

第二類使用場景：

這類是以觀看為主，并以快速傳達核心數(shù)據(jù)信息的應(yīng)用場景。此類場景多應(yīng)用于指揮大廳、科技展館、數(shù)字展廳等，他的特點是多屏幕拼接，展示面積大、數(shù)據(jù)類型多，展現(xiàn)形式多元化，業(yè)內(nèi)也稱之為數(shù)據(jù)可視化大屏。總之其主要就是核心數(shù)據(jù)通過視覺及動畫的表現(xiàn)手法直觀的輸出給用戶，增加用戶的記憶達到過目不忘的效果，同時這對于數(shù)據(jù)信息的視覺傳達要求比較高。此應(yīng)用場景也是問題疑問比較多的，會關(guān)系到效果定位、數(shù)據(jù)信息傳達、表現(xiàn)方式、軟硬件結(jié)合等諸多情況。針對此應(yīng)用場景展開分析，其他可視化設(shè)計也是相通的。

（圖片來源于網(wǎng)絡(luò)）

1、精準把握業(yè)務(wù)需求

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

2、數(shù)據(jù)圖形化的選擇方法

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

（圖片來源于網(wǎng)絡(luò)）

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

首先根據(jù)業(yè)務(wù)目標結(jié)合數(shù)據(jù)維度確定大的關(guān)系（比較、分部、構(gòu)成、聯(lián)系），隨后選擇合適的圖表，填充數(shù)據(jù)設(shè)計排版即可。到這一步圖表基本成型，但是比較基礎(chǔ)，為了視覺效果和數(shù)據(jù)的傳達，也會在此基礎(chǔ)上進行優(yōu)化設(shè)計。

優(yōu)化設(shè)計之前要注意幾點：

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

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

（圖片來源于網(wǎng)絡(luò)）

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

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

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

字體：

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

顏色：

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

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

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

通過對數(shù)據(jù)圖表的選擇，屏幕布局及風格設(shè)計，一張初步作品已經(jīng)完成。

此時最好結(jié)合業(yè)務(wù)目標及數(shù)據(jù)，設(shè)計內(nèi)部先自檢：

1、現(xiàn)在的設(shè)計布局是否合理

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

3、整體設(shè)計是否符合之初的業(yè)務(wù)目標

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

接下來就是各個相關(guān)人員及領(lǐng)導(dǎo)確認階段。

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

（圖片來源于網(wǎng)絡(luò)）

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

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

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

開發(fā)結(jié)束后，要拿到演示文件去現(xiàn)場測試，測試輸出是否有問題，有無拉伸問題，測試有無卡頓現(xiàn)象，拼接縫與內(nèi)容有無穿插，如有控制端（控制屏）需聯(lián)調(diào)測試。確定整體無誤后，才是設(shè)計的最后交接棒。

作者：聶永真

轉(zhuǎn)載請注明：學(xué)UI網(wǎng)》初學(xué)者如何快速上手數(shù)據(jù)可視化設(shè)計

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

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

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

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

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

類型

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

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

圖表類型

隨時間變化

隨時間變化的圖表顯示一段時間內(nèi)的數(shù)據(jù)，如多個類別的變化趨勢及其對比。

使用情況包括：

1. 股票價格表現(xiàn)
2. 健康統(tǒng)計
3. 年度報表

隨時間變化的圖表包括

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

類別比較

類別比較圖比較多個不同類別之間的數(shù)據(jù)。

使用情況包括：

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

類別比較圖包括：

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

排序

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

使用情況包括：

1. 選舉結(jié)果
2. 表現(xiàn)統(tǒng)計

排序圖包括：

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

部分-整體

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

使用情況包括：

1. 產(chǎn)品類別綜合收益
2. 預(yù)算

部分-整體圖包括：

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

相關(guān)

相關(guān)圖展示兩個或多個變量之間的相關(guān)性。

使用情況包括：

1. 收入和預(yù)期壽命

相關(guān)圖包括：

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

分布

分布圖展示每個值在數(shù)據(jù)集中出現(xiàn)的頻率。

使用情況有：

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

分布圖包括：

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

流

流圖顯示數(shù)據(jù)在多種狀態(tài)之間的流動。

使用情況包括：

1. 資金轉(zhuǎn)移
2. 投票統(tǒng)計和選舉結(jié)果

流圖包括：

1. ?；鶊D
2. 甘特圖
3. 和弦圖
4. 網(wǎng)狀圖

關(guān)系

關(guān)系圖顯示多個項目之間是如何彼此關(guān)聯(lián)的。

使用情況有：

1. 社交網(wǎng)絡(luò)
2. 文字圖

關(guān)系圖包括：

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

選擇圖表

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

顯示隨時間產(chǎn)生的變化

隨時間產(chǎn)生的變化可以用時間序列圖來表示，這是一種按照時間順序來表示數(shù)據(jù)點的圖表。

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

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

條形圖和餅狀圖

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

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

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

面積圖

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

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

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

樣式

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

下列有益于圖表自定義：

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

設(shè)置不同類型數(shù)據(jù)的樣式

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

這些圖形屬性包括：

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

表達不同屬性

多種視覺處理方式可以應(yīng)用于數(shù)據(jù)點的多個方面。例如，條柱的色彩可以表示一個類別，與此同時條柱的長度可以表示一個值（如人口大?。?。

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

形狀

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

形狀的精確程度

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

顏色

顏色有四種主要的區(qū)分數(shù)據(jù)的方式：

1. 區(qū)分不同的類別
2. 表示數(shù)量
3. 突出特定數(shù)據(jù)
4. 表達意義

顏色區(qū)分類別

在環(huán)形圖中顏色被用于定義類別。

顏色表示數(shù)量

在地圖中顏色被用于表示數(shù)據(jù)值。

顏色突出數(shù)據(jù)

在散點圖中顏色被用于突出特殊數(shù)據(jù)。

焦點區(qū)域

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

顏色表示意義

無障礙

為了適應(yīng)無法區(qū)別色彩差異的用戶，可以使用其他的方法來強調(diào)數(shù)據(jù)，例如高對比度著色、形狀或紋理。

將文本標簽應(yīng)用于數(shù)據(jù)也有助于澄清其含義，同時消除了對說明的需要。

線條

圖表中的線條可以傳達數(shù)據(jù)的質(zhì)量，例如層次結(jié)構(gòu)、突出強調(diào)和對比。線條的樣式可以采用不同方式，如使用虛線或不同的不透明度。

線條可以應(yīng)用于特定的元素中，包括：

1. 注釋
2. 預(yù)測元素
3. 比較工具
4. 置信區(qū)間
5. 異常

排版

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

1. 圖表標題
2. 數(shù)據(jù)標簽
3. 軸標簽
4. 說明

層次結(jié)構(gòu)中級別最高的文本通常是圖表標題，最低的是軸標簽和說明。

文本粗細

標題和不同的字體粗細在層次結(jié)構(gòu)中可以傳達哪些內(nèi)容比另一些更重要（或更不重要）。然而這種處理方式應(yīng)該有節(jié)制地使用，即采用數(shù)量有限的字體樣式。

圖標

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

圖標可以被用于：

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

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

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

有標記的軸

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

條形圖基線

條形圖應(yīng)該從基線（y軸上的起始值）上的0開始。從不為0的基線開始可能會導(dǎo)致數(shù)據(jù)被錯誤地感知。

軸標簽

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

文本方向

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

文本標簽不應(yīng)該：

1. 被旋轉(zhuǎn)
2. 垂直堆疊

說明和注釋

說明和注釋描述圖表的信息。注釋應(yīng)該突出顯示數(shù)據(jù)點、數(shù)據(jù)異常值和任何值得注意的內(nèi)容。

1. 注釋
2. 說明

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

標簽和說明

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

小型顯示器

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

行為

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

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

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

逐級展開

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

縮放和平移

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

縮放

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

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

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

平移

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

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

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

分頁

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

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

數(shù)據(jù)控件

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

當用戶調(diào)整控件時，這些控件也可以顯示度量。

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

動效

動效可以加強并鞏固數(shù)據(jù)間的關(guān)系以及用戶和數(shù)據(jù)的交互方式。動效應(yīng)該有目的地（而不是裝飾性地）被使用，以表達不同狀態(tài)和空間之間的關(guān)系。

動效應(yīng)該合乎邏輯，平穩(wěn)且能夠快速響應(yīng)，不妨礙用戶的體驗旅程。

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

此處的動效顯示了兩張不同圖表之間的聯(lián)系。

空狀態(tài)

空白的圖片和表格可以顯示一些表明在數(shù)據(jù)可用時期望發(fā)生的內(nèi)容。

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

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

儀表盤

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

儀表盤設(shè)計

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

一個儀表盤應(yīng)該：

1. （通過布局）優(yōu)先考慮最重要的信息
2. 顯示根據(jù)層次結(jié)構(gòu)（使用顏色、位置、大小和視覺權(quán)重）排序的信息焦點

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

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

分析型儀表盤

分析型儀表盤能夠讓用戶探索多個數(shù)據(jù)集并發(fā)現(xiàn)趨勢。通常這些儀表盤包括復(fù)雜的圖表，這些圖表能夠發(fā)現(xiàn)數(shù)據(jù)細節(jié)。

使用情況包括：

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

分析型儀表盤的案例有：

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

操作型儀表盤

操作型儀表板旨在回答一組預(yù)定義的問題。它們通常用于完成與監(jiān)視相關(guān)的任務(wù)。

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

使用情況包括：

1. 根據(jù)目標跟蹤當前進度
2. 實時跟蹤系統(tǒng)表現(xiàn)

操作型儀表盤的案例有：

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

演示型儀表盤

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

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

使用情況包括：

1. 提供關(guān)鍵績效的指標概述
2. 創(chuàng)建高級執(zhí)行摘要

展示型儀表盤的案例有：

1. 提供投資帳戶表現(xiàn)的概述
2. 提供產(chǎn)品銷售和市場份額數(shù)據(jù)摘要

譯者：杜雅黎

轉(zhuǎn)載請注明：學(xué)UI網(wǎng)》Material Design Data Visualization 數(shù)據(jù)可視化

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

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

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

作者：BYMD

轉(zhuǎn)載請注明：學(xué)UI網(wǎng)》基于地理位置的美食數(shù)據(jù)可視化設(shè)計

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

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

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

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

「天氣類」

「墨跡天氣」和「天氣通」根據(jù)城市實景和當下天氣對實時景觀圖進行模糊處理，增強產(chǎn)品的關(guān)聯(lián)性和代入感。

「生理健康類」

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

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

「財務(wù)記賬類」

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

「專業(yè)數(shù)據(jù)分析類」

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

「運動健身類」

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

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

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

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

2.可視化數(shù)據(jù)圖的配色

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

「深色底」

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

「淺色底」

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

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

「彩色底」

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

「圖片底」

圖片底：為了讓數(shù)據(jù)更有可信度和關(guān)聯(lián)度，在一些天氣類APP中經(jīng)常會使用這種方式，圖片內(nèi)容與數(shù)據(jù)信息產(chǎn)生關(guān)聯(lián)，提升可讀性。

3.各類圖表的使用場景

每種圖表都會對應(yīng)它適合的數(shù)據(jù)類型。作為設(shè)計師一定要了解它們之間的對應(yīng)關(guān)系，使得設(shè)計有理有據(jù)。

「折線圖」

顯示為一組由單個線條連接的點；用于表示在一段連續(xù)時間內(nèi)發(fā)生的大量數(shù)據(jù)波動，有單折線圖和多折線圖之分。

「曲線圖」

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

「餅圖&環(huán)形圖」

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

「條形圖&柱狀圖」

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

「熱度圖 / 熱力圖」

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

「雷達圖」

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

「儀表盤」

儀表盤設(shè)計最初來源于工業(yè)設(shè)計的車輛控制臺，由于其專業(yè)、科技感的內(nèi)核，現(xiàn)在多被一些強調(diào)科技、專業(yè)的產(chǎn)品所借鑒、例如網(wǎng)絡(luò)監(jiān)控、金融信用等。

4.圖表運用到界面中去

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

「單個數(shù)據(jù)」

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

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

「多組數(shù)據(jù)」

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

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

5.可視化數(shù)據(jù)的動效

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

「動態(tài)呈現(xiàn)數(shù)據(jù)」

「導(dǎo)航切換」

「功能動態(tài)切換（點擊按鈕切換形態(tài)）」

「屏幕橫縱向切換數(shù)據(jù)」

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

作者：一個辛普森

 轉(zhuǎn)載請注明：學(xué)UI網(wǎng)》用戶體驗大小事—數(shù)據(jù)可視化設(shè)計五點論

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

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

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

圖表的定義：可直觀展示統(tǒng)計信息的屬性，對知識挖掘和信息直觀生動感受起關(guān)鍵作用的圖形結(jié)構(gòu)，是一種很好的將對象屬性數(shù)據(jù)直觀、形象地可視化的手段。

英文叫法：Chart。

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

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

二  圖表的構(gòu)成

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

三  圖表元素解析

3.1  標題

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

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

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

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

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

3.2  圖例

3.2.1  圖例的組成

顏色、名稱、數(shù)值、單位。

3.2.2  圖例的展現(xiàn)形式

圓形、開關(guān)、矩形、鼓包線、實線、虛線。

3.2.3 圖例的位置

從左至右、從上至下。

3.2.4  圖例的作用

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

3.2.5  圖例的顏色選擇

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

產(chǎn)品使用中，要規(guī)范圖例顏色使用，一般分為兩種：

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

3.2.6  圖例過多時如何展示

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

3.2.7  共用圖例

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

3.2.8  圖例省略

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

3.2.9  圖例名稱限制

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

3.3  坐標軸

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

3.3.1  刻度值代表的意義

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

3.3.2  坐標軸使用規(guī)則

是否帶單位：

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

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

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

刻度值過多時如何顯示：

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

刻度值的選用一定要是同一個規(guī)律，禁止同距離的刻度值代表不同數(shù)據(jù)。

刻度點的樣式使用規(guī)則：刻度的線朝外。

3.4  數(shù)據(jù)展示

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

數(shù)據(jù)展示的使用規(guī)則：

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

3.5  網(wǎng)格線

3.5.1  網(wǎng)格線的作用

呼應(yīng)坐標軸，美觀度。

3.5.2  網(wǎng)格線的使用規(guī)則

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

• 網(wǎng)格線使用實線居多，盡量不用虛線。

3.5.3  使用場景

橫、縱、橫縱結(jié)合、無網(wǎng)格線。

3.6  提示信息

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

3.7  水位線

根據(jù)不同產(chǎn)品的使用場景，有的時候會用到閾值，當達到某個閾值后，就會觸發(fā)某種聯(lián)動。這個時候就需要有個水位線了，它起到警示的作用。

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

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

3.8  時間軸

時間軸可以靈活地調(diào)節(jié)刻度值的上下限，從而更精確的看到自己想看的數(shù)據(jù)。

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

四  圖表使用建議

4.1  折線圖 line

4.1.1  定義

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

折線圖是通過線條的波動來表示數(shù)據(jù)的波動，主要體現(xiàn)的是數(shù)據(jù)隨著時間的推移而變動的圖表。

4.1.2  使用場景

常用于觀察一段時間內(nèi)數(shù)據(jù)波動的浮動變化，比如：一天內(nèi)內(nèi)存的使用情況。

4.1.3  使用建議

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

• 重要節(jié)點可以單獨做重點標注；

• 數(shù)據(jù)拐點要平滑，不要太鋒利。

4.2  面積圖 area

4.2.1  定義

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

4.2.2  使用場景

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

4.2.3  使用建議

• 面積區(qū)域要和折線的顏色用統(tǒng)一色系，不要換色系；

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

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

4.3  柱狀圖 bar

4.3.1  定義

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

4.3.2  使用場景

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

4.3.3  使用建議

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

• 厚度與間距的對比要合理設(shè)計；

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

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

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

4.4  餅圖 pie

4.4.1  定義

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

4.4.2  使用場景

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

4.4.3  使用建議

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

4.5  環(huán)形圖

4.5.1  定義

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

4.5.2  使用場景

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

4.5.3  使用建議

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

• 環(huán)形圖的兩個圓要從中心對齊。

4.6  堆疊面積圖

4.6.1  定義

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

4.6.2  使用場景

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

4.6.3  使用建議

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

4.7  堆疊柱狀圖

4.7.1  定義

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

4.7.2  使用場景

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

4.7.3  使用建議

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

4.8  非常用圖表

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

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

五  常用的圖表開源網(wǎng)站

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

總結(jié)

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

作者：Luckgg

轉(zhuǎn)載請注明：學(xué)UI網(wǎng)》數(shù)據(jù)可視化必修課 – 圖表篇

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

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

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

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

二  表格的設(shè)計原則

2.1  易讀性

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

2.2  可尋性

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

2.3  高效性

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

2.4  靈活性

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

三  表格的構(gòu)成

外部區(qū)域：標題、操作區(qū)、篩選區(qū)；

內(nèi)部區(qū)域：表頭、表體、表尾。

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

四  表格元素解析

4.1  標題

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

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

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

4.2  操作區(qū)

對表格內(nèi)容的增刪改等操作的區(qū)域。

使用建議：

4.2.1  有且只有一個主操作

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

4.2.2  樣式統(tǒng)一

同一個產(chǎn)品中，操作區(qū)樣式規(guī)范要保持一致。

4.2.3  操作的優(yōu)先級

根據(jù)使用的優(yōu)先級，把常用的操作放到一級展示，不常用的收到二級展示。

4.2.4  不同操作狀態(tài)區(qū)分要明確

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

4.2.5  刷新按鈕

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

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

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

4.2.6  導(dǎo)出功能

此功能可以把列表內(nèi)容導(dǎo)出為你想要的格式（一般為 word / pdf）。

數(shù)據(jù)量較大的列表中，導(dǎo)出功能可以很方便的把自己過濾的內(nèi)容下載到本地進行其他需求的查看。

導(dǎo)出內(nèi)容的范圍是哪些一定要事先想好，一般下載內(nèi)容的范圍以下幾種：

• 當前頁所有列表內(nèi)容（常用，而且實現(xiàn)難度很低）；
• 經(jīng)過二次過濾后，導(dǎo)出所有頁上的列表內(nèi)容；
• 所有頁的列表內(nèi)容（不常用，而且實現(xiàn)及數(shù)據(jù)處理難度會非常大，慎重選擇）。

4.2.7  導(dǎo)入功能

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

4.2.8  自定義內(nèi)容

自定義分兩種：

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

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

那怎么區(qū)分內(nèi)容的多與少呢？

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

4.3  Tab（標簽切換）

可以快速切換不同維度下的表格內(nèi)容。

使用建議：

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

4.4  篩選區(qū)

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

4.4.1  搜索功能：

4.4.1.1  模糊搜索 or 精準搜索

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

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

4.4.1.2  單字段搜索

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

4.4.1.3  多字段組合搜索

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

4.4.1.4  切換類別搜索

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

4.4.1.5  多類別組合搜索

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

4.4.2  篩選的樣式

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

4.5  表頭

每一列列表的小標題，是對整列內(nèi)容的描述。

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

4.6  表體

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

使用建議：

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

4.7  表尾

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

五  列表詳情交互展現(xiàn)

5.1  彈窗

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

5.2  抽屜

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

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

5.3  跳轉(zhuǎn)頁面

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

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

5.4  嵌套

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

在最后

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

作者：Luckgg

轉(zhuǎn)載請注明：學(xué)UI網(wǎng)》數(shù)據(jù)可視化必修課 – 表格篇

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

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

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