mirror of
https://github.com/ant-design/ant-design.git
synced 2024-12-05 01:19:45 +08:00
2b947d0480
* feat: site previewImage * feat: site previewImage * feat: use image * feat: update doc * feat: delete align="right" * feat: update doc * feat: delete css * feat: update doc * feat: delete align="right" * feat: update doc
43 lines
2.3 KiB
Markdown
43 lines
2.3 KiB
Markdown
---
|
||
group: Design Patterns
|
||
type: Principles
|
||
order: 2
|
||
title: Alignment
|
||
---
|
||
|
||
As is described in the Law of Continuity of Gestalt psychology, in the perceptual process, people usually tend to understand the object in the way that it is firstly perceived, to let the straight lines be straight and let the curve lines be curve. In the design of interface, aligning the elements meets users' perception, also delivers the information to users in a more smooth way.
|
||
|
||
> **Gestalt psychology or gestaltism (German：Gestalttheorie)**: Gestalttheorie is an important genre of psychology. It rose in the beginning of the 20 century in Germany.The central principle of gestalt psychology is that the mind forms a global whole with self-organizing tendencies.「The whole is other than the sum of the parts.」--Quote from Wikipedia
|
||
|
||
---
|
||
|
||
## Text Alignment
|
||
|
||
<ImagePreview>
|
||
<img class="preview-img good" alt="good example" description="Align the title and text to the left; use one visual starting point." src="https://gw.alipayobjects.com/zos/rmsportal/lVDlIgxvuXSMQvJJVMnu.png">
|
||
<img class="preview-img bad" alt="bad example" description="The tile and the text start in different visual point. This is not recommended except the differences between title and text are emphasized. " src="https://gw.alipayobjects.com/zos/rmsportal/DAhkAEIoXYdljmxsJTjl.png">
|
||
</ImagePreview>
|
||
|
||
If the paragraphs or the length of the words are too short or too loose, then a unified visual starting point is needed.
|
||
|
||
---
|
||
|
||
## Form Alignment
|
||
|
||
<ImagePreview>
|
||
<img class="preview-img" alt="example of colon alignment" src="https://gw.alipayobjects.com/zos/rmsportal/OaTkwGfGxRSFsvAlzZMq.png">
|
||
</ImagePreview>
|
||
|
||
Colon alignment(right-align) can encircle the content into a certain range. Users can infer where the chart is through the regular arranged colon so that the speed of filling in the chart can be speeded up.
|
||
|
||
---
|
||
|
||
## Numbers Alignment
|
||
|
||
<ImagePreview>
|
||
<img class="preview-img good" alt="good example" src="https://gw.alipayobjects.com/zos/rmsportal/bIJAZcUmaRxJeFxZJwUp.png">
|
||
<img class="preview-img bad" alt="bad example" src="https://gw.alipayobjects.com/zos/rmsportal/zUmANVIhBanDnlyOhvaH.png">
|
||
</ImagePreview>
|
||
|
||
To compare the numbers faster, we suggest that all numbers should keep the same digit numbers after decimal point; meanwhile all numbers should be right-aligned.
|