mirror of
https://github.com/ant-design/ant-design.git
synced 2024-12-19 03:54:28 +08:00
51 lines
2.7 KiB
Markdown
51 lines
2.7 KiB
Markdown
---
|
||
category: Principles
|
||
order: 3
|
||
title: Contrast
|
||
---
|
||
|
||
Contrast is one of the effective ways to add visual interest to your page, and to create an organizational hierarchy among different element 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
|
||
|
||
<img class="preview-img good" align="right" alt="good example" src="https://os.alipayobjects.com/rmsportal/RruKZUSYEwauGdF.png">
|
||
<img class="preview-img bad" align="right" alt="bad example" src="https://os.alipayobjects.com/rmsportal/TOupLSPNQkBTmYw.png">
|
||
|
||
In order to help user make a quick operation (something like the form，modal), a more important operation or a 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.
|
||
|
||
|
||
<br>
|
||
|
||
<img class="preview-img" align="right" alt="Example of ignoring the primary and secondary sequence" description="Accept and Reject should use default button, for UI should not affect user's decision." src="https://os.alipayobjects.com/rmsportal/xskurfmyKPumFSv.png">
|
||
|
||
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
|
||
|
||
<img class="preview-img" align="right" alt="Example of whole and part 1" src="https://os.alipayobjects.com/rmsportal/HEDJpTyufnfXUOP.png">
|
||
|
||
<img class="preview-img" align="right" alt="Example of whole and part 2" src="https://os.alipayobjects.com/rmsportal/bafqoUWFgXjsuSG.png">
|
||
|
||
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
|
||
|
||
<img class="preview-img" align="right" alt="Example of static contrast" description="Points with various colors would be used to show different states. " src="https://os.alipayobjects.com/rmsportal/UHjarNwxrXndznP.png">
|
||
|
||
<img class="preview-img" align="right" alt="Example of dynamic contrast" description="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." src="https://os.alipayobjects.com/rmsportal/DCAtXAEaFnAXEmG.png">
|
||
|
||
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』.
|