Basics: Spacing systems & scales in UI design
Use the baseline grid and the Gestalt principle of proximity to define a consistent & effective spacing system
Pro tip: Define a spacing system to take the guesswork out of designing layouts.
What is a spacing system/scale?
A spacing system or scale is, simply put, a set of spacing values you use across your design as part of a design system. As we've seen before in the box model, by spacing, we refer to the margin between design objects or the padding within them.
Setting up a spacing system
How do I come up with a spacing scale?
If you are using a 4px or 8px grid system, coming up with a spacing scale should be no trouble at all. Simply ensure all your spacing (padding & margin) variables are multiples of your baseline.
💡 Example: If you are using a 4px baseline grid, your spacing values should be 4, 8, 12, 16, 20, 24, 28, 32 and so on.
How do I use a spacing scale?
Once you have your spacing system/scale set up, you will want to define a set of rules and patterns for where you use each spacing value.
🧠 Theory: Remember the Gestalt principle of proximity: two objects that are close to each other will be perceived as belonging to the same group. On the contrary, two objects that aren't close to each other will be perceived as belonging to different groups.
The Gestalt Principles of Perception, by Wertheimer, Köhler, Koffka, Metzger.
Applying the law of proximity means that you should use smaller spacing values for objects that are related, and bigger spacing values for objects that are unrelated or belong to different sections.
For example:
4px between icons and text
8px between elements within a component
16px as the default padding value for card or list components
24px for margins between sections
How do I adapt spacing in mobile vs. desktop layouts?
Remember, spacing is relative. For example, in mobile layouts, 24px might be used for separating different sections, whereas on desktop layouts you might want to use 24px for objects within the same container, and a much bigger value like 48px for separating different sections.
Pro tip: Avoid similar spacing values
Avoid spacing tokens that are too similar to one another especially in bigger sizes.
Spacing tokens & design systems
What are spacing tokens?
In most cases, you will want to define some spacing tokens to reflect each spacing value in your scale so that instead of referencing the actual spacing number, e.g. 8px, 16px, 24px, you can refer to them as spacing-x2, spacing-x4, spacing-x6 and so on.
Naming your spacing tokens isn't necessary, especially if you aren't using a design system, but it's highly recommended. If you want to update your baseline grid or spacing scale in the future, being able to keep the same naming and only updating the spacing values can be very time-effective.
There are several naming conventions for spacing tokens:
Numeric: Each token is given a numeric value, e.g. 1, 2, 3, 4, 5, 6, 7, 8, 9, 10 or 100, 200, 300, 400, 500, 600, 700, 800, 900, 1000 (popularised by Material Design)
Multiplier: Each token reflects the multiple of the baseline, e.g. x1, x2, x3, x4, x5, x6 and so on.
Size (also known as T-shirt sizes): Each token is given a size e.g. xxs, xs, s, m, l, xl, xxl. We prefer to avoid t-shirt sizing for spacing as it can get quite clunky when you have a large number of tokens.
What are some examples of spacing systems?
In most popular apps and websites you will notice consistent spacing values throughout the product: that's the result of a spacing scale that is defined as part of a design system! You may also want to take a look at some publicly available design systems to see how these spacing scales are documented.
💡 Example: In Uber's homescreen, sections are consistently spaced out at 24px, whereas objects within each section use either 16px or 12px.
Uber
Summary
Use a baseline grid to define a set of spacing values and come up with a spacing scale.
Define a set of rules on when to use each value, based on the Gestalt principle of proximity.
Adapt these values for different screen sizes, e.g. mobile vs. desktop.
Avoid spacing values that are too similar.
Name these values using design tokens to ensure scalability in the future.
学习了，不错