logoAnt Design

⌘ K
  • Design
  • Development
  • Components
  • Blog
  • Resources
5.26.1
  • 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
The Contrast of major and minor relationship
Contrast of whole and part
Contrast of the state relation

Contrast

contributors
  • AlignmentRepetition

    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
    X
    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

    Contrast is one of the effective ways to add visual interest to your page, and to create an organizational hierarchy among different elements that aid user in finding the information quickly.

    Note: The important rule for contrast to be effective, it must be strong. Don't be wimp.


    The Contrast of major and minor relationship

    good example
    Preview
    good example
    bad example
    Preview
    bad example

    In order to help user make a quick operation (something like the form, modal), a more important operation or an operation with higher frequency would be emphasized.

    Notes: ways of emphasizing are not just to intensify the key item. It could also weaken the other items.


    Example of ignoring the primary and secondary sequence
    Preview
    Example of ignoring the primary and secondary sequence
    Accept and Reject should use default button, for UI should not affect user's decision.

    When there's something needs users to make decision prudently, the system should remain neutral. It shouldn't make the decision for users or lead them to make judgement.


    Contrast of whole and part

    Example of whole and part 1
    Preview
    Example of whole and part 1
    Example of whole and part 2
    Preview
    Example of whole and part 2

    Taking advantage of changing the typesetting, the typeface and the size, we highlight the different levels and differentiate the ensemble and the part, which would make the page be more flexible and rhythmic.


    Contrast of the state relation

    Example of static contrast
    Preview
    Example of static contrast
    Points with various colors would be used to show different states.
    Example of dynamic contrast
    Preview
    Example of dynamic contrast
    When the mouse doesn't be moved, this item and other items would show different visual effects obviously, which would influence the user's operation.

    Taking advantage of changing colors and adding assistant shapes, we realize the comparison of state relation, which could help users differentiate various information better

    The forms we usually see include 「static contrast」 and 「dynamic contrast」.