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

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

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

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

請(qǐng)點(diǎn)擊——》》視頻1

請(qǐng)點(diǎn)擊——》》視頻2

 

作者：三魚先生

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

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

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

藍(lán)藍(lán)設(shè)計(jì)( m.yvirxh.cn )是一家專注而深入的界面設(shè)計(jì)公司，為期望卓越的國(guó)內(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ù)、UI設(shè)計(jì)公司、界面設(shè)計(jì)公司、UI設(shè)計(jì)服務(wù)公司、數(shù)據(jù)可視化設(shè)計(jì)公司、UI交互設(shè)計(jì)公司、高端網(wǎng)站設(shè)計(jì)公司、UI咨詢、用戶體驗(yàn)公司、軟件界面設(shè)計(jì)公司

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

所謂大屏，顧名思義就是一個(gè)

很大的屏 !!!

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

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

設(shè)計(jì)前的準(zhǔn)備

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

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

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

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

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

大屏制作一般只需四步：

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

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

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

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

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

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

需求分析

設(shè)計(jì)要求：

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

黑客組織信息舉例：

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

攻擊目標(biāo)：韓國(guó) 中國(guó) 朝鮮 德國(guó)

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

風(fēng)格要求：科技感 FUI

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

布局

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

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

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

風(fēng)格

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

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

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

顏色

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

字體

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

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

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

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

1、一個(gè)或者多個(gè)類別不同時(shí)間的的對(duì)比比較。

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

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

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

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

典型的圖表有有序條形圖、有序柱狀圖、平行坐標(biāo)圖等。

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

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

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

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

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

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

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

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

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

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

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

點(diǎn)擊自動(dòng)繪制之后，可能會(huì)等待一會(huì)，插件需要花時(shí)間去運(yùn)算生成地圖，等待一會(huì)之后就到了見證奇跡的時(shí)刻，如圖：

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

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

總結(jié)

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

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

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

作者：小六

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

首先介紹下使用場(chǎng)景：

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

第一類使用場(chǎng)景：

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

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

第二類使用場(chǎng)景：

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

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

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

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

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

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

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

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

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

優(yōu)化設(shè)計(jì)之前要注意幾點(diǎn)：

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

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

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

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

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

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

字體：

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

顏色：

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

作者：聶永真

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

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

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

藍(lán)藍(lán)設(shè)計(jì)( m.yvirxh.cn )是一家專注而深入的界面設(shè)計(jì)公司，為期望卓越的國(guó)內(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ù)、UI設(shè)計(jì)公司、界面設(shè)計(jì)公司、UI設(shè)計(jì)服務(wù)公司、數(shù)據(jù)可視化設(shè)計(jì)公司、UI交互設(shè)計(jì)公司、高端網(wǎng)站設(shè)計(jì)公司、UI咨詢、用戶體驗(yàn)公司、軟件界面設(shè)計(jì)公司

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

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

類型

數(shù)據(jù)可視化可以用不同的形式來傳達(dá)。圖表是一種常用的數(shù)據(jù)傳達(dá)方法，因?yàn)樗鼈儾粌H描述了不同的數(shù)據(jù)類型，還能進(jìn)行數(shù)據(jù)比較。

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

圖表類型

隨時(shí)間變化

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

使用情況包括：

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

隨時(shí)間變化的圖表包括

1. 折線圖
2. 柱狀圖
3. 堆積柱狀圖
4. 燭臺(tái)圖
5. 面積圖
6. 時(shí)間軸
7. 地平線圖
8. 瀑布流圖

類別比較

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

使用情況包括：

1. 不同國(guó)家間的收入對(duì)比
2. 熱門場(chǎng)次對(duì)比
3. 團(tuán)隊(duì)分配

類別比較圖包括：

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

排序

排序圖表示一個(gè)項(xiàng)目在有序列表中的位置。

使用情況包括：

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

排序圖包括：

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

部分-整體

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

使用情況包括：

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

部分-整體圖包括：

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

相關(guān)

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

使用情況包括：

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

相關(guān)圖包括：

1. 散點(diǎn)圖
2. 氣泡圖
3. 柱狀和折線圖
4. 熱力圖

分布

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

使用情況有：

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

分布圖包括：

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

流

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

使用情況包括：

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

流圖包括：

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

關(guān)系

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

使用情況有：

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

關(guān)系圖包括：

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

選擇圖表

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

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

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

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

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

條形圖和餅狀圖

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

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

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

面積圖

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

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

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

樣式

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

下列有益于圖表自定義：

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

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

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

這些圖形屬性包括：

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

表達(dá)不同屬性

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

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

形狀

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

形狀的精確程度

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

顏色

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

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

顏色區(qū)分類別

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

顏色表示數(shù)量

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

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

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

焦點(diǎn)區(qū)域

當(dāng)顏色被少量使用時(shí)，它可以突出焦點(diǎn)區(qū)域。不建議使用大量的高光顏色，因?yàn)樗鼈儠?huì)分散用戶的注意力。

顏色表示意義

無障礙

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

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

線條

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

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

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

排版

文本可以用于標(biāo)記不同的圖表元素，包括：

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

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

文本粗細(xì)

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

圖標(biāo)

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

圖標(biāo)可以被用于：

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

當(dāng)在圖表中使用圖標(biāo)時(shí)，建議使用普遍可識(shí)別的圖標(biāo)，尤其是在表示操作或狀態(tài)時(shí)，例如：保存，下載，完成，錯(cuò)誤和危險(xiǎn)。

在傳達(dá)意義時(shí)圖標(biāo)補(bǔ)充了顏色的意義。

有標(biāo)記的軸

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

條形圖基線

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

軸標(biāo)簽

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

文本方向

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

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

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

說明和注釋

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

1. 注釋
2. 說明

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

標(biāo)簽和說明

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

小型顯示器

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

行為

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

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

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

逐級(jí)展開

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

縮放和平移

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

縮放

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

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

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

平移

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

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

在移動(dòng)端，通常通過手勢(shì)進(jìn)行平移，例如單指滑動(dòng)。

分頁(yè)

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

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

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

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

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

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

動(dòng)效

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

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

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

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

空狀態(tài)

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

在適用的情況下，角色動(dòng)畫能夠帶來愉悅感和激勵(lì)。

角色動(dòng)畫豐富了空白圖片。

儀表盤

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

儀表盤設(shè)計(jì)

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

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

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

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

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

分析型儀表盤

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

使用情況包括：

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

分析型儀表盤的案例有：

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

操作型儀表盤

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

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

使用情況包括：

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

操作型儀表盤的案例有：

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

演示型儀表盤

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

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

使用情況包括：

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

展示型儀表盤的案例有：

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

譯者：杜雅黎

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

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

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

藍(lán)藍(lán)設(shè)計(jì)( m.yvirxh.cn )是一家專注而深入的界面設(shè)計(jì)公司，為期望卓越的國(guó)內(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ù)、UI設(shè)計(jì)公司、界面設(shè)計(jì)公司、UI設(shè)計(jì)服務(wù)公司、數(shù)據(jù)可視化設(shè)計(jì)公司、UI交互設(shè)計(jì)公司、高端網(wǎng)站設(shè)計(jì)公司、UI咨詢、用戶體驗(yàn)公司、軟件界面設(shè)計(jì)公司

作者：BYMD

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

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

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

藍(lán)藍(lán)設(shè)計(jì)( m.yvirxh.cn )是一家專注而深入的界面設(shè)計(jì)公司，為期望卓越的國(guó)內(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ù)、UI設(shè)計(jì)公司、界面設(shè)計(jì)公司、UI設(shè)計(jì)服務(wù)公司、數(shù)據(jù)可視化設(shè)計(jì)公司、UI交互設(shè)計(jì)公司、高端網(wǎng)站設(shè)計(jì)公司、UI咨詢、用戶體驗(yàn)公司、軟件界面設(shè)計(jì)公司

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

「天氣類」

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

「生理健康類」

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

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

「財(cái)務(wù)記賬類」

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

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

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

「運(yùn)動(dòng)健身類」

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

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

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

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

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

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

「深色底」

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

「淺色底」

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

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

「彩色底」

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

「圖片底」

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

3.各類圖表的使用場(chǎng)景

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

「折線圖」

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

「曲線圖」

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

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

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

「條形圖&柱狀圖」

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

「熱度圖 / 熱力圖」

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

「雷達(dá)圖」

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

「儀表盤」

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

4.圖表運(yùn)用到界面中去

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

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

頁(yè)面中就展示一個(gè)比較重要的數(shù)據(jù)，如何設(shè)計(jì)？圓形是一個(gè)不錯(cuò)的選擇，因?yàn)樗梢栽陧?yè)面中形成視覺中心。不管是餅狀圖，還是環(huán)形圖，或是擁有視覺中心的雷達(dá)圖，都會(huì)讓頁(yè)面上呈現(xiàn)一個(gè)視覺重點(diǎn)。

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

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

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

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

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

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

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

「導(dǎo)航切換」

「功能動(dòng)態(tài)切換（點(diǎn)擊按鈕切換形態(tài)）」

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

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

作者：一個(gè)辛普森

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

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

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

藍(lán)藍(lán)設(shè)計(jì)( m.yvirxh.cn )是一家專注而深入的界面設(shè)計(jì)公司，為期望卓越的國(guó)內(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ù)、UI設(shè)計(jì)公司、界面設(shè)計(jì)公司、UI設(shè)計(jì)服務(wù)公司、數(shù)據(jù)可視化設(shè)計(jì)公司、UI交互設(shè)計(jì)公司、高端網(wǎng)站設(shè)計(jì)公司、UI咨詢、用戶體驗(yàn)公司、軟件界面設(shè)計(jì)公司

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

英文叫法：Chart。

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

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

二  圖表的構(gòu)成

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

三  圖表元素解析

3.1  標(biāo)題

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

標(biāo)題的常用位置有 3 個(gè)：左上角、頂部居中、底部居中。

一般情況下，標(biāo)題字號(hào) / 色值要突出一些，用戶第一眼看到 chart 的時(shí)候，要清晰的看到這個(gè)圖表是做什么的。

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

• 增加提示圖標(biāo)；
• 增加提示語(yǔ)。

3.2  圖例

3.2.1  圖例的組成

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

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

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

3.2.3 圖例的位置

從左至右、從上至下。

3.2.4  圖例的作用

• 標(biāo)識(shí)出每個(gè)顏色所代表的的類別；
• 開啟 / 隱藏?cái)?shù)據(jù)顯示；
• 圖例顯示的數(shù)值一般為當(dāng)前值。

3.2.5  圖例的顏色選擇

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

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

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

3.2.6  圖例過多時(shí)如何展示

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

3.2.7  共用圖例

如果多個(gè) chart 的圖例一樣，可進(jìn)行合并，減少冗余圖例。

3.2.8  圖例省略

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

3.2.9  圖例名稱限制

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

3.3  坐標(biāo)軸

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

3.3.1  刻度值代表的意義

• 時(shí)間點(diǎn)：12:00；
• 時(shí)間段：周一、周二。

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

是否帶單位：

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

對(duì)齊方式（常用，但非必須）：

• X 軸：居中對(duì)齊；
• Y 軸：右對(duì)齊。

刻度值過多時(shí)如何顯示：

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

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

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

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

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

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

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

3.5  網(wǎng)格線

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

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

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

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

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

3.5.3  使用場(chǎng)景

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

3.6  提示信息

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

3.7  水位線

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

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

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

3.8  時(shí)間軸

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

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

四  圖表使用建議

4.1  折線圖 line

4.1.1  定義

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

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

4.1.2  使用場(chǎng)景

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

4.1.3  使用建議

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

• 重要節(jié)點(diǎn)可以單獨(dú)做重點(diǎn)標(biāo)注；

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

4.2  面積圖 area

4.2.1  定義

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

4.2.2  使用場(chǎng)景

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

4.2.3  使用建議

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

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

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

4.3  柱狀圖 bar

4.3.1  定義

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

4.3.2  使用場(chǎng)景

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

4.3.3  使用建議

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

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

• 可使用小圓角，千萬(wàn)不要用大圓角，太丑了……

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

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

4.4  餅圖 pie

4.4.1  定義

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

4.4.2  使用場(chǎng)景

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

4.4.3  使用建議

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

4.5  環(huán)形圖

4.5.1  定義

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

4.5.2  使用場(chǎng)景

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

4.5.3  使用建議

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

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

4.6  堆疊面積圖

4.6.1  定義

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

4.6.2  使用場(chǎng)景

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

4.6.3  使用建議

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

4.7  堆疊柱狀圖

4.7.1  定義

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

4.7.2  使用場(chǎng)景

常用于不同維度下相同幾個(gè)指標(biāo)的展示。

4.7.3  使用建議

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

4.8  非常用圖表

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

雷達(dá)圖，散點(diǎn)圖，K線圖，盒須圖，熱力圖，旭日?qǐng)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ù)可視化必修課中最重要的模塊之一，不可忽略。只有了解每個(gè) chart 的定義及使用場(chǎng)景，才能在產(chǎn)品中用到最合適的那一個(gè)。

作者：Luckgg

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

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

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

藍(lán)藍(lán)設(shè)計(jì)( m.yvirxh.cn )是一家專注而深入的界面設(shè)計(jì)公司，為期望卓越的國(guó)內(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ù)、UI設(shè)計(jì)公司、界面設(shè)計(jì)公司、UI設(shè)計(jì)服務(wù)公司、數(shù)據(jù)可視化設(shè)計(jì)公司、UI交互設(shè)計(jì)公司、高端網(wǎng)站設(shè)計(jì)公司、UI咨詢、用戶體驗(yàn)公司、軟件界面設(shè)計(jì)公司

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

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

2.1  易讀性

表格的層級(jí)一定要?jiǎng)澐值姆浅Ｇ逦?，層?jí)分明。你要讓用戶更關(guān)注的是數(shù)據(jù)本身，而不是花里胡哨的樣式。

2.2  可尋性

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

2.3  高效性

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

2.4  靈活性

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

三  表格的構(gòu)成

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

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

介紹完表格的構(gòu)成，我們?cè)賮戆衙恳粋€(gè)元素拆解出來詳細(xì)介紹。

四  表格元素解析

4.1  標(biāo)題

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

如果標(biāo)題名稱難以理解的話，可以加二級(jí)提示，有兩種常用樣式：tooltips（常用）、二級(jí)提示語(yǔ)。

標(biāo)題的位置一般在左上角。

4.2  操作區(qū)

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

使用建議：

4.2.1  有且只有一個(gè)主操作

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

4.2.2  樣式統(tǒng)一

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

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

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

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

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

4.2.5  刷新按鈕

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

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

同時(shí)刷新后要有即時(shí)反饋，告訴用你他點(diǎn)完操作后目前處于哪個(gè)階段中。

4.2.6  導(dǎo)出功能

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

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

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

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

4.2.7  導(dǎo)入功能

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

4.2.8  自定義內(nèi)容

自定義分兩種：

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

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

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

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

4.3  Tab（標(biāo)簽切換）

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

使用建議：

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

4.4  篩選區(qū)

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

4.4.1  搜索功能：

4.4.1.1  模糊搜索 or 精準(zhǔn)搜索

搜索首先要確定哪幾個(gè)字段可以被搜索到，名稱？編號(hào)？等等…

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

4.4.1.2  單字段搜索

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

4.4.1.3  多字段組合搜索

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

4.4.1.4  切換類別搜索

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

4.4.1.5  多類別組合搜索

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

4.4.2  篩選的樣式

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

4.5  表頭

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

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

4.6  表體

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

使用建議：

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

4.7  表尾

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

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

5.1  彈窗

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

5.2  抽屜

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

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

5.3  跳轉(zhuǎn)頁(yè)面

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

缺點(diǎn)就是：新開頁(yè)面這種操作本身就比較重，如果在當(dāng)前頁(yè)面可解決的事情，切記不要讓用戶新開頁(yè)面。

5.4  嵌套

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

在最后

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

作者：Luckgg

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

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

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

藍(lán)藍(lán)設(shè)計(jì)( m.yvirxh.cn )是一家專注而深入的界面設(shè)計(jì)公司，為期望卓越的國(guó)內(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ù)、UI設(shè)計(jì)公司、界面設(shè)計(jì)公司、UI設(shè)計(jì)服務(wù)公司、數(shù)據(jù)可視化設(shè)計(jì)公司、UI交互設(shè)計(jì)公司、高端網(wǎng)站設(shè)計(jì)公司、UI咨詢、用戶體驗(yàn)公司、軟件界面設(shè)計(jì)公司