logoAnt Design

⌘ K
  • 디자인
  • 개발
  • 컴포넌트
  • 블로그
  • 자료
5.21.3
  • Ant Design
    • 소개
    • 设计价值观
    • 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

Contrast

Resources

Ant Design Charts
Ant Design Pro
Ant Design Pro Components
Ant Design Mobile
Ant Design Mini
Ant Design Landing-Landing Templates
Scaffolds-Scaffold Market
Umi-React Application Framework
dumi-Component doc generator
qiankun-Micro-Frontends Framework
ahooks-React Hooks Library
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
Work with Us

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
loading

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
미리보기
good example
bad example
미리보기
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
미리보기
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
미리보기
Example of whole and part 1
Example of whole and part 2
미리보기
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
미리보기
Example of static contrast
Points with various colors would be used to show different states.
Example of dynamic contrast
미리보기
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」.