前不久，一年一度的數(shù)據(jù)可視化產(chǎn)品 AntV 品牌發(fā)布日又來到，今年我們給大家?guī)砹恕百N地飛行”的 AntV 設(shè)計(jì)。為什么稱之為“貼地飛行”？這一年中，AntV 設(shè)計(jì)從重心為統(tǒng)計(jì)圖表到現(xiàn)在關(guān)系圖、地圖都有涵蓋，從原來專注 PC 端到現(xiàn)在移動(dòng)端、響應(yīng)式、多端適配都有涉獵，從原來的骨架到現(xiàn)在慢慢的血肉豐滿。這一年 AntV 設(shè)計(jì)與工程密切結(jié)合，從業(yè)務(wù)中慢慢汲取養(yǎng)分、貼地飛行。2020，獻(xiàn)給你們迄今為止為業(yè)務(wù)上最好用的 AntV 設(shè)計(jì)。

更全面的設(shè)計(jì)指引

統(tǒng)計(jì)圖表Chart

迷你圖表 Minichart：業(yè)務(wù)圖表中，除了高頻使用的折柱餅，還有迷你圖表 Minichart ，它通常在空間有限的情況下作為全尺寸圖表的降級(jí)縮略展示。今年 AntV 新增了迷你圖表 Minichart 的 demo 和設(shè)計(jì)指引。

色板：基于業(yè)務(wù)實(shí)踐，AntV 對(duì)分類色板、順序色板、發(fā)散色板進(jìn)行了優(yōu)化。

主題：AntV 在默認(rèn)分類色板的基礎(chǔ)上，新增三類分類色板主題，分別是秋日橙主題、馬卡龍主題、強(qiáng)對(duì)比主題。這些主題色板各有不同的使用場(chǎng)景。新主題色現(xiàn)已上線 AntV 官網(wǎng)，可一鍵下載或復(fù)制。

圖Graph

圖數(shù)據(jù)(Graph Data)反映現(xiàn)實(shí)世界人與人、人與物、物與物的關(guān)系，甚至關(guān)聯(lián)地理維度與時(shí)間維度。今年，基于大量如知識(shí)圖譜、金融風(fēng)控、圖數(shù)據(jù)庫(kù)相關(guān)產(chǎn)品的設(shè)計(jì)實(shí)踐，AntV 設(shè)計(jì)小組精心沉淀總結(jié)出適用于圖可視化領(lǐng)域的設(shè)計(jì)指引。該指引用經(jīng)典的 ETCG 設(shè)計(jì)框架來組織內(nèi)容，系統(tǒng)性介紹圖可視化設(shè)計(jì)以及最佳實(shí)踐和背后的思考。希望給廣大的關(guān)系圖設(shè)計(jì)師帶來更深入的思考。

地圖Map

地理空間數(shù)據(jù)可視化永遠(yuǎn)都充滿著魅力，通過點(diǎn)的疏密變化、飛線的長(zhǎng)短、顏色的深淺、氣泡的大小，我們感知這些高維數(shù)據(jù)在地理上的時(shí)空分布、分析趨勢(shì)彎化。

目前設(shè)計(jì)的地圖主要包括氣泡地圖、亮點(diǎn)地圖、符號(hào)地圖、散點(diǎn)地圖、路徑圖等 9 類，我們將其抽象成通用的三層框架：地圖層、圖形層、控件層，每層給予設(shè)計(jì)建議，并把一些約定成俗的規(guī)范分享出來，感興趣的同學(xué)可以查看地圖可視化指引全文。

儀表板Dashboard

一張圖或者一個(gè)卡片很難看清一個(gè)業(yè)務(wù)問題，因此有了商業(yè)智能儀表盤 Business Intelligence Dashboard，簡(jiǎn)稱為 BI Dashboard。AntV 經(jīng)過多年的業(yè)務(wù)打磨，總結(jié)出一套儀表板的設(shè)計(jì)指引，借助它。我們能快速搭建出貼合業(yè)務(wù)需求的專業(yè)儀表板。
拋開業(yè)務(wù)屬性，Dashboard 按內(nèi)容組織以及交互形態(tài)，可以分為“指標(biāo)大盤”、“多維分析”、“數(shù)據(jù)明細(xì)” 3 種類型。

除了通用的 Dashboard，AntV 基于業(yè)務(wù)實(shí)踐，我們還給出了監(jiān)控 Dashboard 的設(shè)計(jì)指引。

更完備的可視化組件

時(shí)間軸TimeBar

數(shù)據(jù)很少是靜態(tài)的，某件事在某個(gè)時(shí)間點(diǎn)爆發(fā)或者持續(xù)間發(fā)生，關(guān)聯(lián)的因子有多個(gè)，時(shí)間軸工具可以有效展示動(dòng)態(tài)時(shí)序數(shù)據(jù)、分析圖數(shù)據(jù)關(guān)聯(lián)因子。可以讓用戶快速、直觀地觀察事件序列以及它們之間的聯(lián)系。我們可以通過播放時(shí)間來發(fā)現(xiàn)異常和探尋模式，推動(dòng)調(diào)查并揭示數(shù)據(jù)中隱藏的故事。

AntV 在業(yè)務(wù)的呼聲中，在原有縮略軸的基礎(chǔ)上，提供了一個(gè)更強(qiáng)大時(shí)間軸組件，借助它你可以做出很多出色的動(dòng)態(tài)可視化作品。時(shí)時(shí)間軸可模塊化拼裝出三種常見類型：趨勢(shì)時(shí)間軸、簡(jiǎn)版時(shí)間軸、時(shí)間刻度時(shí)間軸。

視圖控制欄View?ToolBar

視圖控制欄是用戶與數(shù)據(jù)進(jìn)行交互的載體，當(dāng)用戶操作視圖工具欄時(shí)，可對(duì)視圖可視區(qū)間縮放、平移、對(duì)數(shù)據(jù)進(jìn)行檢索、過濾等。如果數(shù)據(jù)繪制區(qū)域超過屏幕可視區(qū)域，為方便用戶能以全局視角觀察數(shù)據(jù)，建議開啟視圖控制欄(例：地圖上的視圖控制欄)。或者用戶需要頻繁與視圖上的數(shù)據(jù)進(jìn)行交互，比如放大、縮小視圖空間，快速定位檢索數(shù)據(jù)點(diǎn)等，也建議開啟視圖控制欄。

圖表信息組件Info?Component

為了更好地讓讀者理解圖形背后的數(shù)據(jù)信息，圖表設(shè)計(jì)者常常需要添加圖例 Legend、指標(biāo)卡或者 Tooltip，作為信息補(bǔ)充。何時(shí)需要使用圖例？如何設(shè)計(jì) Tooltip？在空間有限的移動(dòng)端應(yīng)當(dāng)如何合適地展現(xiàn)數(shù)據(jù)信息？

為此我們提出了信息組件(Info Component)的概念，從“信息-數(shù)據(jù)-表現(xiàn)”的角度囊括了傳統(tǒng)的圖例、指標(biāo)卡和 Tooltip組件。并且給出設(shè)計(jì)規(guī)范，統(tǒng)一了前三者的用法，讓圖表在不同設(shè)備和尺寸下展現(xiàn)相同的信息，期望實(shí)現(xiàn)設(shè)計(jì)工程的提效和不同設(shè)備下閱讀的體驗(yàn)一致。

更好的場(chǎng)景案例

圖表不僅承載著傳達(dá)數(shù)據(jù)故事的功能，還需能滿足不同場(chǎng)景下用戶查看、分析數(shù)據(jù)的需求。AntV 在業(yè)務(wù)實(shí)踐中不斷打磨細(xì)節(jié)，以下給出一些業(yè)務(wù)場(chǎng)景中的真實(shí)案例，希望能給你帶來一些啟發(fā)。

高信息密度監(jiān)控圖表

在監(jiān)控場(chǎng)景中，由于真實(shí)數(shù)據(jù)的不可控性與實(shí)時(shí)性，往往存在著數(shù)據(jù)信息過于密集難辨認(rèn)，或者在某一時(shí)間點(diǎn)突然出現(xiàn)極值(數(shù)值徒增)，而導(dǎo)致整個(gè)圖表難以閱讀的情況；也會(huì)出現(xiàn)因篩選時(shí)間過長(zhǎng)，X 軸標(biāo)簽過于密集的狀況。這些易常情況降低了數(shù)據(jù)分析的效率和準(zhǔn)確性。AntV 通過以下方式規(guī)避圖表中可能出現(xiàn)的問題，并對(duì)需要聚焦關(guān)注的異常時(shí)刻進(jìn)行突出處理。

Y 軸縮略軸：監(jiān)控場(chǎng)景中由于監(jiān)控值的不確定性較大，容易出現(xiàn)個(gè)別極值/其他數(shù)個(gè)指標(biāo)值域相近擁擠在一起的情況。Y 軸縮略軸組件的設(shè)計(jì)可以靈活設(shè)置y軸范圍，規(guī)避各類異常情況。

列表式圖例：錨定圖表中某一時(shí)刻，可以在列表式圖例中輕松查看到該時(shí)刻下的排序，或切換選擇指標(biāo)最大值等其他排序信息；點(diǎn)擊列表中的圖例可正反選指標(biāo)，進(jìn)行高亮或隱藏。

復(fù)雜多變的指標(biāo)卡

在數(shù)據(jù)分析場(chǎng)景中，用戶往往需要對(duì)某一指標(biāo)進(jìn)行多維監(jiān)控。環(huán)繞關(guān)鍵指標(biāo)查看衍生指標(biāo)、拆分維度、觀察時(shí)序趨勢(shì)、作進(jìn)度跟進(jìn)，這些都可以通過指標(biāo)卡來完成。AntV 基于業(yè)務(wù)場(chǎng)景提煉出一套靈活多變的指標(biāo)卡，它可以演示成各種不同的指標(biāo)卡類型。

以信息為導(dǎo)向的布局：指標(biāo)卡的元素構(gòu)成上始終遵循?主指標(biāo) > 拆分維度 > 衍生指標(biāo) > 趨勢(shì)圖 > 進(jìn)度條?的信息優(yōu)先級(jí)原則。對(duì)于重要的信息，采用更突出的視覺樣式標(biāo)記；對(duì)于次要信息，在有限的空間內(nèi)優(yōu)先展示突出特征，其余進(jìn)行適當(dāng)省略。

排版推薦：默認(rèn)樣式-趨勢(shì)圖在下方，用戶不配置進(jìn)度條/趨勢(shì)圖，也可以按照此樣式做自適應(yīng)，通用性較強(qiáng)；趨勢(shì)圖在右側(cè)-適用于卡片數(shù)目較少，橫向空間寬裕，或是縱向空間緊湊的情況。趨勢(shì)圖在右上角-適用于移動(dòng)端，或趨勢(shì)圖重要性較低，希望指標(biāo)卡整體緊湊布局的情況。

更佳的文檔查閱讀體驗(yàn)

AntV 是體驗(yàn)驅(qū)動(dòng)產(chǎn)品，我們既注重閱讀者的瀏覽體驗(yàn)，同時(shí)也在不斷改善研發(fā)者的開發(fā)體驗(yàn)，讓圖找到使用場(chǎng)景，讓開發(fā)者找到 API。

官網(wǎng)首頁(yè)

為此，我們重構(gòu)了 AntV 主頁(yè)首屏的信息框架，讓設(shè)計(jì)者能通過縮略圖快速明晰 AntV 各子產(chǎn)品的定位與使用場(chǎng)景，點(diǎn)擊縮略圖就能直達(dá)產(chǎn)品 Demo，讓可視化先人一步。立即體驗(yàn)官網(wǎng)。

交互式文檔

除著頁(yè)面，我們一并升級(jí)了產(chǎn)品在線研發(fā)體驗(yàn)，通過圖文合一的方式，讓開發(fā)體驗(yàn)更流暢，立即體驗(yàn)。

• 布局更靈活：三種布局隨心換，更高屏的經(jīng)典布局、更沉浸的兩欄布局，更全面的三欄布局；
• 查找更方便：一鍵搜索、導(dǎo)航收起；
• 色板更豐富：即看即用(設(shè)計(jì)師下載、開發(fā)復(fù)制使用)。

-?END?-

總結(jié)

以上是生活随笔為你收集整理的antv图例出现分页_2020，贴地飞行的 AntV 设计的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。