前不久，一年一度的數據可視化產品 AntV 品牌發布日又來到，今年我們給大家帶來了“貼地飛行”的 AntV 設計。為什么稱之為“貼地飛行”？這一年中，AntV 設計從重心為統計圖表到現在關系圖、地圖都有涵蓋，從原來專注 PC 端到現在移動端、響應式、多端適配都有涉獵，從原來的骨架到現在慢慢的血肉豐滿。這一年 AntV 設計與工程密切結合，從業務中慢慢汲取養分、貼地飛行。2020，獻給你們迄今為止為業務上最好用的 AntV 設計。

更全面的設計指引

統計圖表Chart

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

色板：基于業務實踐，AntV 對分類色板、順序色板、發散色板進行了優化。

主題：AntV 在默認分類色板的基礎上，新增三類分類色板主題，分別是秋日橙主題、馬卡龍主題、強對比主題。這些主題色板各有不同的使用場景。新主題色現已上線 AntV 官網，可一鍵下載或復制。

圖Graph

圖數據(Graph Data)反映現實世界人與人、人與物、物與物的關系，甚至關聯地理維度與時間維度。今年，基于大量如知識圖譜、金融風控、圖數據庫相關產品的設計實踐，AntV 設計小組精心沉淀總結出適用于圖可視化領域的設計指引。該指引用經典的 ETCG 設計框架來組織內容，系統性介紹圖可視化設計以及最佳實踐和背后的思考。希望給廣大的關系圖設計師帶來更深入的思考。

地圖Map

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

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

儀表板Dashboard

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

除了通用的 Dashboard，AntV 基于業務實踐，我們還給出了監控 Dashboard 的設計指引。

更完備的可視化組件

時間軸TimeBar

數據很少是靜態的，某件事在某個時間點爆發或者持續間發生，關聯的因子有多個，時間軸工具可以有效展示動態時序數據、分析圖數據關聯因子。可以讓用戶快速、直觀地觀察事件序列以及它們之間的聯系。我們可以通過播放時間來發現異常和探尋模式，推動調查并揭示數據中隱藏的故事。

AntV 在業務的呼聲中，在原有縮略軸的基礎上，提供了一個更強大時間軸組件，借助它你可以做出很多出色的動態可視化作品。時時間軸可模塊化拼裝出三種常見類型：趨勢時間軸、簡版時間軸、時間刻度時間軸。

視圖控制欄View?ToolBar

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

圖表信息組件Info?Component

為了更好地讓讀者理解圖形背后的數據信息，圖表設計者常常需要添加圖例 Legend、指標卡或者 Tooltip，作為信息補充。何時需要使用圖例？如何設計 Tooltip？在空間有限的移動端應當如何合適地展現數據信息？

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

更好的場景案例

圖表不僅承載著傳達數據故事的功能，還需能滿足不同場景下用戶查看、分析數據的需求。AntV 在業務實踐中不斷打磨細節，以下給出一些業務場景中的真實案例，希望能給你帶來一些啟發。

高信息密度監控圖表

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

Y 軸縮略軸：監控場景中由于監控值的不確定性較大，容易出現個別極值/其他數個指標值域相近擁擠在一起的情況。Y 軸縮略軸組件的設計可以靈活設置y軸范圍，規避各類異常情況。

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

復雜多變的指標卡

在數據分析場景中，用戶往往需要對某一指標進行多維監控。環繞關鍵指標查看衍生指標、拆分維度、觀察時序趨勢、作進度跟進，這些都可以通過指標卡來完成。AntV 基于業務場景提煉出一套靈活多變的指標卡，它可以演示成各種不同的指標卡類型。

以信息為導向的布局：指標卡的元素構成上始終遵循?主指標 > 拆分維度 > 衍生指標 > 趨勢圖 > 進度條?的信息優先級原則。對于重要的信息，采用更突出的視覺樣式標記；對于次要信息，在有限的空間內優先展示突出特征，其余進行適當省略。

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

更佳的文檔查閱讀體驗

AntV 是體驗驅動產品，我們既注重閱讀者的瀏覽體驗，同時也在不斷改善研發者的開發體驗，讓圖找到使用場景，讓開發者找到 API。

官網首頁

為此，我們重構了 AntV 主頁首屏的信息框架，讓設計者能通過縮略圖快速明晰 AntV 各子產品的定位與使用場景，點擊縮略圖就能直達產品 Demo，讓可視化先人一步。立即體驗官網。

交互式文檔

除著頁面，我們一并升級了產品在線研發體驗，通過圖文合一的方式，讓開發體驗更流暢，立即體驗。

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

-?END?-

總結

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

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。