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
Text Alignment
Form Alignment
Numbers Alignment

Alignment

contributors
  • ProximityContrast

    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

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

    good example
    Preview
    good example
    Align the title and text to the left; use one visual starting point.
    bad example
    Preview
    bad example
    The tile and the text start in different visual point. This is not recommended except the differences between title and text are emphasized.

    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

    example of colon alignment
    Preview
    example of colon alignment

    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

    good example
    Preview
    good example
    bad example
    Preview
    bad example

    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.