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

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

統(tǒng)計圖表Chart

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

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

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

圖Graph

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

地圖Map

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

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

儀表板Dashboard

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

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

更完備的可視化組件

時間軸TimeBar

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

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

視圖控制欄View?ToolBar

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

圖表信息組件Info?Component

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

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

更好的場景案例

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

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

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

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

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

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

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

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

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

更佳的文檔查閱讀體驗

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

官網(wǎng)首頁

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

交互式文檔

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

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

-?END?-

總結(jié)

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

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