logoAnt Design

⌘ K
  • Design
  • Development
  • Components
  • Blog
  • Resources
5.25.4
  • Ant Design
    • Introduction
    • Design Values
    • Cases
  • Global Styles
    • Colors
    • Layout
    • Font
    • Icons
    • Dark Mode
    • Shadow
  • Design Patterns
    • Overview
    • Global Rules
      • Feedback
      • Navigation
      • Data Entry
      • Data Display
      • Copywriting
      • Data format
      • Button
      • Data List
    • Principles
      • Proximity
      • Alignment
      • Contrast
      • Repetition
      • Make it Direct
      • Stay on the Page
      • Keep it Lightweight
      • Provide an Invitation
      • Use Transition
      • React Immediately
    • Template Document
      • Visualization Page
      • Detail Page
  • Design Patterns (Research)
    • Overview
    • Template Document
      • Form Page
      • Workbench
      • List Page
      • Result Page
      • Exception Page
    • Global Rules
      • Navigation
      • Message and Feedback
      • Empty Status
  • Visualization
  • Motion
  • Illustrations
Design Goals
Design Principles
Do’s & Don’ts
Typical Templates
Presentation Dashboards
Analytics Dashboards
Detail Templates
Design Suggestions
Read more
Relative Rules
Relative Modules or Components

Visualization Page

contributors
  • React ImmediatelyDetail Page

    Resources

    Ant Design X
    Ant Design Charts
    Ant Design Pro
    Pro Components
    Ant Design Mobile
    Ant Design Mini
    Ant Design Web3
    Ant Design Landing-Landing Templates
    Scaffolds-Scaffold Market
    Umi-React Application Framework
    dumi-Component doc generator
    qiankun-Micro-Frontends Framework
    Ant Motion-Motion Solution
    China Mirror 🇨🇳

    Community

    Awesome Ant Design
    Medium
    Twitter
    yuque logoAnt Design in YuQue
    Ant Design in Zhihu
    Experience Cloud Blog
    seeconf logoSEE Conf-Experience Tech Conference

    Help

    GitHub
    Change Log
    FAQ
    Bug Report
    Issues
    Discussions
    StackOverflow
    SegmentFault

    Ant XTech logoMore Products

    yuque logoYuQue-Document Collaboration Platform
    AntV logoAntV-Data Visualization
    Egg logoEgg-Enterprise Node.js Framework
    Kitchen logoKitchen-Sketch Toolkit
    Galacean logoGalacean-Interactive Graphics Solution
    xtech logoAnt Financial Experience Tech
    Theme Editor
    Made with ❤ by
    Ant Group and Ant Design Community

    Data visualization templates depict information and assist users to understand the data, by displaying a series of multiple charts. By viewing and interacting with the charts, users can analyze the data and eventually create data-driven strategies.

    Design Goals

    To help users quickly and clearly understand the meaning of data, analyze trends and make decisions.


    Design Principles

    Organized

    Define the layout logically, sort the content by priority. In most cases, in order to emphasize the common-used analysis thoughts, you should organize the information from top to bottom and from left to right, or use progressive interactions. To sum up, put the summary first, then focus on filters, and finally provide details whenever the user needs.

    Focused

    Put the most important charts and the key scorecards on the top or upper part the page.

    Accurate

    Keep data accurate, clear and complete.
    1. Use the correct chart type.
    2. Provide explanations where necessary.

    Do’s & Don’ts

    Do
    Preview
    Do
    Don't
    Preview
    Don't

    When the data is highly aggregated, add details to your chart.


    Do
    Preview
    Do

    Try to highlight the primary information by placing it first on a screen. Limit the sum of modules to 5-9 to avoid information overload.


    Do
    Preview
    Do

    Make good use of filtering capability. Let users observe the overview and check the detailed data at the same time. This way users can explore data quickly whenever they have questions. text

    Typical Templates

    Presentation Dashboards

    Preview

    In order to help users make decisions, tile the most critical data from the overall perspective on the whole page. When all of the indicators share similar importance, choose the layout on the left; to emphasize one of them, select the one on the right.

    Indicator Dashboards

    Preview

    When to use

    When decision-makers need an overview and the option to gain further insights via drill-down.

    Related capabilities

    Key indicator, scorecard, filter, chart.

    Monitor Dashboards

    Preview

    When to use

    This type of dashboard provides an overview of the data for decision making. Usually there is a central topic, around which presents multi-dimension indicators, helping the users find out abnormal immediately.

    Related capabilities

    Key indicator, scorecard, chart, map.

    Analytics Dashboards

    Preview

    Analytics dashboards separate the data-analysis interface into several parts. Usually their layouts are "summary and description" structure, showing overviews of the whole information with different aspects. These dashboards can assist the users to discover the current problems.

    Multi-dimension Analytics Dashboards

    Preview

    When to use

    To analyze multiple dimension of data, surround the same topic.

    Related capabilities

    Key indicator, scorecard, filter, chart.

    Detail Templates

    Preview

    Detail templates display the overview and detailed information of a report or a unique indicator. Users can set texts, lists and charts according to their business needs.

    Data Details

    Preview

    When to use

    To show the details of the reports.

    Related capabilities

    Filter, chart, table.

    Design Suggestions

    Connect Analysis Steps

    • Figure out users’ roles and aims, and choose the categories of template accordingly. Different business roles pay attention to different key data. There are two common-used types of indicators: high-level dashboard data, and detailed information.
      • Decision-makers can select templates which describe the results;
      • Operators can choose templates which provide more analysis capabilities and detailed information.
    • Confirm the priority of the key indicators, and then define the page layouts accordingly. Put the most important data on the most outstanding positions.
    • Please remember, you can connect the user interfaces through interactive modes, telling your own stories.

    Combination Methods of Cards

    Preview
    1. One card, one topic.

    Preview
    1. Place closely-related datasets on one card, and use split lines to break it into different areas.

    Use Suitable Charts

    Preview

    After designing the draft layout, select related visualization charts based on how summarized or detailed the data is. Usually scorecards and ranking lists are used for information summaries, tables and texts express details, and charts are between the two categories.

    Color Palette

    Preview

    Read more

    Relative Rules

    • AntV Visualizatio Design Principles
    • AntV Visualization Color Palette
    • AntV Visualization Interaction Design Guidelines

    Relative Modules or Components

    • AntV Chart Samples