Why do you UI look so messy? Maybe there's something wrong with the space system.
In UI Designed like Spacing, it's like a beat in a music. Without a single rhythm, fine icons and fonts can be confusing. The spacing calculator helps designers to build a rigorous and predictable space system through mathematical scales, thereby enhancing the “respiratory sense” and consistency of the interface.
1. Addressing arbitrariness in design
Many of the new designers often feel when setting space: here, 13px, there. 17px。 This random number leads to a lack of visual relevance of the interface and confusion among front-end engineers when working on multiple pages.
Solutions: Use grid system (e.g. 8pt grid). Set the baseline for this tool at 8px, you get a set of 8, 16, 24, 32... . All the spacing follows the same number, and the interface naturally presents a kind of order and beauty.
2. Using mathematical scales to create a sense of motion
Besides linear grid systems, you can try to be geometrical (e.g., gold ratio) based. 1.618) Growth patterns. This ratio is often used to create a rhythm-sensitive layout system that makes small space more sophisticated and wide space more open.
Application scene: A small proportion (e.g. 1.2 or 1.25) suitable for a compact backstage management interface; Large scale (e.g. 1.5 or 1.618) is more suitable for a design-sensored presentation page or Hero area.
3. Gospel for Responsive Design: Rem Unit
In front-end realization, the use of rem units instead of px is best practice. This tool automatically calculates rem based on 16px root characters value.
By defining variables in CSS (e. g.
--space-md: 1.5rem;
) If you need a whole zoom space at the moving end, you just have to adjust the root elements Fort-size, the space system for the entire page is scaled down, significantly reducing maintenance costs.
4. Four recommendations for establishing a space norm
- Limit selection: Do not provide too many spacing options, usually 7-9 values are enough to cover all scenes.
- Semantic Naming: Use names like xs, sm, md, lg in code, not Space-8px, so that no changes to business logic codes are required in the design specifications.
- There are differences: The inner margin of the container (Padding) should normally be slightly larger than the spacing of the elements (Margin) to create a sense of encirclement.
- Vertical rhythm: Ensures that the distance in the vertical direction guides the user ' s reading stream, and that the space above the title should normally be greater than the space below.