なあ兄弟、 余白の意味を考えてから UI実装してくれ！

2025.11.26 Mobile Fusion Study @KTC

Transcript

1. Hey bro, think about the meaning of margins before you implement the UI!
2. I'm Ryomm. I'm developing my route for iOS.
3. If you have a screen design like this, how would you implement it?
4. This is the kind of code I used to see quite often before.
5. "Hey, seriously!? Do you even fucking understand the meaning of margins!?" Even Ryommcat was so surprised. All I can do is give a wry smile.*
6. Here’s what I want to share today. *Margins are not just empty spaces—they are intentionally used blank areas!* To understand the meaning of margins, you first need some basic knowledge of cognitive psychology, so I’ll explain briefly.
7. One of the core concepts in cognitive psychology is Gestalt psychology. Gestalt psychology is based on the fundamental idea that "when people perceive things, they tend to see them not as individual parts, but as a unified whole (a "Gestalt")."
8. For example, if there is a picture of an apple, recognizing it as an "apple" rather than just a collection of dots and lines is what this refers to.
10. And in Gestalt psychology, there is a principle called the "the law of Prägnanz" which describes a phenomenon in human perception grouping. Let me introduce the four main factors. First, there is the "Law of proximity". Objects that are close to each other tend to be perceived as a group.
11. Second, the "Law of symmetry" Elements that are visually enclosed tend to be perceived as a group.
12. These brackets are evenly spaced, but the law of symmetry has a stronger effect than the law of proximity.
13. Brackets that are closed together are perceived as a group, while those that are not closed are harder to perceive as a group.
14. Thirdly, there is the "Law of similarity". Elements with similar attributes tend to be grouped together.
15. It's easy to perceive the items as alternating pairs of black-and-white and colored ones, but seeing them as alternating pairs of color and black-and-white, or black-and-white and color, feels a bit unnatural.
16. Fourth, "Law of closure" Elements that form a smooth, continuous curve tend to be perceived as a group. For example, in this illustration, people are likely to recognize it as "two circles," rather than as "two incomplete circles and one rugby ball shape."
18. The law of Prägnanz, which allows us to perceive these groupings, is also applied in UI design to organize information into chunks and make it easier to recognize.
19. Let's take a look at this screen from my route as an example.
20. The factors related to proximity seem to be around here. You can see that items placed close to each other represent related information.
22. Next, the factors that seem to be the factors related to symmetry . By enclosing the elements in a rectangle, the items inside appear to be grouped together as one.
24. Next, these seem to be the factors related to similarity. Because they have the same shape, you can perceive them as a single group.
26. Now that you all know about the law of prägnanz, you should be able to see groups like these in this screen. So, what do you think is important in UI design that makes information easy to recognize?
28. Yes, that's margin!
29. Margins serve to separate elements and create groups, making information easier to recognize.
30. *Margins are not just empty space; they are intentionally used blank areas.* You understand the meaning of the statement at the beginning now, right? When a wide margin is given, it indicates that the items belong to different groups, and when margins are evenly distributed, it means those elements are of equal importance or information.
31. By the way, there are three ways to specify margins in SwiftUI: spacing in elements like VStack, padding, and Spacer. Let's consider how to use each of these based on the meaning of margins.
32. For example, if these elements have a title-content relationship, the two pieces of information are related and should be grouped together.
33. With that in mind, you can see that they should be treated as a single unit by enclosing them in a VStack.
34. The same applies even if the number of elements increases. Title A and Content A form one group, and Title B and Content B form another group. If these two groups have the same level of information granularity, you should wrap them in a VStack and give them uniform spacing.
35. Let’s consider what happens when there are even more content elements. Can you see that the size of the margins represents the grouping of each set of elements? - The margin between the title and the content is always 8pt, so if you see an 8pt margin, you can recognize that it’s between a title and its content. - The outer VStack consistently applies a 20pt margin, so if there’s a 20pt margin, you can recognize that it indicates a change of section. - Each content element is given a uniform 4pt margin. No matter how many content elements are added, if they are separated by 4pt, you can recognize that they belong to the content of Title B. In this way, you should use the spacing property of VStack or HStack to create whitespace that expresses the grouping of information, and group information appropriately.
36. Now, let's look at another approach. The bottom margin on this screen is just empty space that doesn't have any meaning related to information recognition. For this kind of true empty space, it's a good idea to use Spacer().
37. Finally, regarding padding: padding refers to the "space set inside an element." Since borders are also considered elements, the proximity between the border and the text can make it harder to read. To prevent this, adding space inside the element (padding) makes it easier to recognize and read.
38. So, padding should be used to prevent interference between the border and the elements.
39. By the way, in the first example, the highlighted area is treated as the range of element A. Before you implement it, please consider whether this way of adding padding is actually appropriate and whether it aligns with the design intent.
40. Now, up to this point, can you see that implementing with SwiftUI involves laying out groups and hierarchies of information? You can think of a SwiftUI file as a document that represents a collection of related information.
41. However, some people might think, “Wrapping everything in a VStack and nesting the code so deeply makes it hard to read!
42. It's an engineer's responsibility to understand the intent behind UI design and translate it into implementation.
43. Let's do our best.
44. See? Bro, from now on, make sure you understand the purpose of margins before implementing the UI.