preface
UI design consists of three elements, namely, color, graphics and text. The typesetting method of graphics and text is an important element to establish the visual level.
The medium of the combination of the two is spacing. A reasonable spacing can bring users an aesthetic and comfortable visual experience. In this issue, we will talk about the middle distance of UI design.
Text and spacing
Text is the most important information transmission element in UI design. The typesetting of text seems easy, but it is not simple, because there are many attributes of text, such as font size, word spacing, line height, paragraph, and so on.
Many designers have a good understanding of text attributes and can use them reasonably, but they will always get stuck in the development process and spend a long time checking and accepting, and ultimately they still can't get the desired effect.
Now let's understand the text from the root, analyze the attributes in the text that can affect the typesetting spacing one by one, understand the development logic, and connect with them correctly.
1. Text line height font designers usually set a certain line height for the font in order to meet the reasonable display of text line spacing.
Row height refers to the height of the upper and lower outer borders after selecting text in the design software. There is no standard for the row height of fonts. The default row height of different fonts is generally different. That is, because of the line height of the font, UI designers have different opinions on the spacing setting between the text and other elements.
The above figure shows the spacing of 30px, but because the font line height is different, the actual visual spacing of scheme a and B is different.
Designers who agree with scheme a are reasonable, because it is best to set a certain line height for the text, otherwise there is no line spacing visually when folding, which is very crowded, so they have to set the line height again, and there is still a gap at the final 30px spacing.
The designer who agrees with scheme B is very sensitive to the gap between several pixels in UI design. It is unreasonable that there is no visual unity.
Both statements are correct, but they do have certain drawbacks. Here are two solutions.
It is certain that in order to meet the reading experience after text folding, it is best to have a certain line height, which will also be conducive to docking with development.
First:
First, let's talk about a concept of spacing setting in UI design. Spacing setting generally requires setting a minimum grid base, such as 4, 5, 6, and 8 as the starting value of spacing setting.
Then in the page, all the next spacing settings must be multiples of this value. (this point will be explained in detail later)
In a design component with text, if the design idea is to present a visually unified spacing, you can calculate the gap between the font size and the line height, and then subtract the corresponding grid value to make it visually close to the unified spacing.
As shown in the figure below, if you want to present a uniform spacing of 30px in the design idea, you can subtract a minimum grid value.
If the minimum grid value is 6px, the final spacing is 24px, and the visual distance is close to 30px.
This method is also the one I have been using. The advantage is that it does not break the principle of spacing setting.
The design spacing and the spacing seen in the development are regular grid system spacing.
The only imperfection is that the actual distance sometimes has a little error, but in fact, it can be completely ignored visually.
Second:
The second way is to keep improving, regardless of the grid system principle of spacing, calculate the gap between font size and line height, and accurately subtract the spacing to ensure that there is no error at all.
I looked for such a product and found that there was a module in didi app on IOS side with such a design concept.
In the case above, the font size is 36px, the line height is 44px, and the gap between the top and bottom of the text is 4PX.
Therefore, set the distance of 26px, plus the upper height gap is exactly 30px, to get a unified spacing effect.
This method has a small drawback, that is, the development of rules that do not feel the spacing, and the final design acceptance may take more time.
exceptional case:
In another case, we can't deliberately pursue the visual alignment of words, except for graphic design, because the logic of development will not support this.
The wrong way in the above figure is because when developing and writing this card, it will be written into a volume commonly known as a box, and the content will be placed in the box. Even if there is too much content, it will be expanded and adapted downward.
2. Development docking - about line height (key content)
There is a solution to the gap between the font line height, and the next step is to connect with the development, which is also the most critical link. No matter how well the design is, it will not land well in the end, which is also useless.
UI designers may encounter such problems when designing and accepting IOS terminals. Both design and development use the same spacing parameters, but the final spacing is still different.
The reason is that for the same Apple font, the default font line height developed on IOS is different from that in the design software.
For example, in sketch software, the default line height of the apple font of 42 point is 59, but in IOS development software, the default is 52.
If the development does not manually adjust the line height of the word, there will be a deviation from the design.
According to my research, IOS development engineers will not change the default row height parameter unless it is a special case.
Let's enumerate the default line height of commonly used Apple font sizes in design, and compare it with the default line height of IOS development, so as to find the rule.
As can be seen from the above figure, the larger the font size, the greater the gap between the design default line height and the IOS development default line height.
Therefore, it is better to change the default row height into the same default row height as the development in design, so as to ensure that the development is consistent without manually adjusting the row height.
There is a certain rule for the default line height of IOS development font size. With the increase of font size, the line height will increase by an even number based on the font size, 4,6,8,10.
Although it is regular, it is not easy to form memory. I recommend a formula.
Divide the font size by 10, multiply by 2, and add the font size, which is the default line height of IOS development. The formula is as follows:
It may not be convenient to have a formula. I would like to recommend a sketch line height repair plug-in, auto fix IOS text line height for Mac.
This plug-in is specifically for IOS font line height repair, making it consistent with the development default line height. (the article can be downloaded in the attachment)
About Android
The font used in material design of Android system is Siyuan boldface in Chinese and robot in English.
Because Android system is open source, most of the different Android mobile phone manufacturers will change fonts.
For example, the MIUI system of Xiaomi mobile phone uses misans font in both Chinese and English, so there is no standard for the line height of Android text.
Another difference between Android development and IOS development is that the line height of the font used in Android development is the default line height of the font itself.
By default, the bold line height of Siyuan is the same as the font size, and the line height of robot is close to that of Apple font.
If the design draft is designed according to the Android specification, it is best to set the Siyuan bold font to the same line height as the apple font, and then the Android Engineer will manually adjust it, and the IOS Development Engineer will get what he sees.
Experience after font repair
About the use of the repaired font, share some experience. The frequency of using text in UI design is very high, including title, subtitle, text, auxiliary text, etc., and the font size is different.
When determining the font size of these words in the design, repair the line height once, and then create these words into character styles. Each time you use them, you can select them from the character style library.
Finally, there is no problem to define the line height of text in special cases combined with their own product style. The development can adjust the line height according to the design definition.
3. Text - paragraph
In a text with paragraphs, many designers directly give a paragraph spacing of the Enter key for convenience, which is absolutely undesirable.
The spacing of a enter key is the height of a line of words. Usually, this spacing is relatively large. Even if the design style requires such a large spacing, you must manually set the paragraph.
Generally, the setting of paragraph value should be greater than half of the height of the text line. For example, if the height of the text line is 42, the paragraph should be greater than 21. In this way, the overall distance between paragraphs plus the height of the text line is ≥ 1.5 times.
Why is it ≥ 1.5 times? The reason is that the line spacing of text is generally greater than 1.5 times, which is visually more comfortable. For example, the font size is 30, and the line height is set to 45, forming a 1.5 times spacing.
4. Text word spacing
Word spacing refers to the spacing between words. It is generally 0 by default and is not set, except for special design style.
In one case, when there are punctuation marks or numbers and English letters in a left aligned text, there may not be enough space at the end of one character, and the end will be left blank.
This uneven situation is indeed not so beautiful, but it is normal in UI design.
There is no need to deliberately set it to align left and right horizontally. Although it is neat, different word spacing will affect the reading experience.
5. Text - font size
There is a principle for setting the spacing between different font sizes. When the font size is larger, the spacing between the word and other elements needs to be relatively larger.
The larger the font size is, the higher the level is, and the higher the level is. From the perspective of information level, a larger space is required to present.
This is an objective principle. The larger the text, the more white space is needed to support it. Just like the line height of the text, the larger the font size, the greater the multiple of the line height increase of the text.
How to define spacing?
Spacing is an important way to establish information levels, improve reading experience, express the relationship between elements, and express important information in UI design.
Defining a reasonable spacing is actually very learned. When you open jd.com and Taobao, you will find that the spacing between elements is very tight. When you open aibiying and Weilai, you will find that the spacing between elements is relatively loose. Why?
In fact, their different design languages lead to different forms of display, and spacing is one of the ways to express the design language.
In UI design, the setting of spacing generally selects a minimum grid cardinality, such as 4, 5, 6, 8 and other values. Then, in the page, all spacing should be presented in multiples of the minimum grid cardinality.
The minimum cardinality of the grid system recommended by material design, a design language launched by Google, is 8dp, and all spacing and dimensions should be multiples of 8dp.
As far as I know, Taobao's design uses a cardinal number of 5 and abiying uses a cardinal number of 8. From this point of view, we can basically draw a conclusion that the smaller the numerical cardinal number is used, the more compact the design presentation will usually be.
There are many times of a minimum grid cardinality, but in fact, there are usually about 6 commonly used spacing, which can meet most scenes.
The minimum grid cardinality of the product I am currently responsible for is 6, and there are about 6 commonly used spacing in the design, which can fully meet the needs of most design scenarios.
In fact, there is no need to choose these spacing deliberately. When you use the minimum grid multiple value for a long time, you can naturally get several commonly used spacing, and the choice of font size basically applies to this logic.
In addition, there are many modules in a product, and it is inevitable that some special situations will occur, so it is certainly not possible to limit the number of spaces that can only be used.
In addition to the common spacing listed in the above figure, some spacing values such as 12, 36, 90 and 120 will also be used, but the frequency will not be very high.
Case analysis
Next, according to the design specification that the minimum grid cardinality is 6, through a commodity card case, analyze several principles of spacing setting.
In the above figure, we should first classify each element, for example, the main title and subtitle are one kind of content; Label is a kind of content; Price is a kind of content; The "find similar" button is another kind of content.
According to the principle of intimacy, the spacing of similar content should be closer, which is conducive to establishing information hierarchy and improving the readability of users.
How close is it? It can be analyzed and defined according to the outer margin of the commodity card in the page.
Judging from the outer margin of a product, we can basically judge whether it is loose typesetting or compact typesetting.
The outer margin of a product is defined according to the design language, product positioning, product content, etc. the common margins are 20, 24, 30, 36, 48, 60, etc. (probably within this range)
With a larger outer margin, the spacing of the content area should be smaller than the outer margin, which can be visually distinguished, so as to reflect the intimate relationship of the content in the page.
Use the regular outer margin. For example, in our case, using 30px is the regular outer margin, and the content area should be appropriately less than or equal to the outer margin, which visually reflects unity.
The main title and subtitle belong to the same category, and the spacing between them must be less than the inner margin of the card, so that the overall appearance can reflect the information level.
How small is the spacing? It's still the same idea. You can intuitively feel that it's smaller than the inner margin, but it can't be too small.
Generally speaking, the visual spacing is about half of the inner margin (the large spacing in the same module), which will perform well.
In the case, a grid unit of 6px is set. Plus the line gap of the text, the visual distance is about 15px, which is half of the inner margin.
Next, label the case. The label and text are not the same kind of information, so it should be properly separated from the main and sub headings.
Usually, the first choice is to ensure the unity of visual distance and inner margin of 30px.
In the case, 24px is set, and the line spacing of the text is very close to 30px.
Next is the price. For a commodity card design, the price needs to be highlighted.
Generally, there are three ways to highlight an element in the design: one is to change the color; Second, amplification; Third, increase the blank space; That is, increase the spacing.
In the case of commodity cards, the design style, price and color specification are black, so the color cannot be changed.
Only enlarge or enlarge the blank space, which must be within a reasonable range, otherwise it will damage the overall structure of the card.
The spacing is set at 30px with the label, plus the line height of the text and the visual spacing, which will become the largest spacing in the card, thus playing a prominent role.
This design method, in a design component, it is best to only appear one, otherwise the overall structure will be damaged to a certain extent.
In addition, it is important to emphasize that unity is important, but the core of design is to serve the demand goals. Therefore, at this time, the priority of unity is second to the demand goals.
Like the ceramic tile area on Taobao home page, the spacing is very compact, losing a certain sense of beauty, but doing so does show more content and meet the demand goal.
last
Finally, make a summary:
1. As for the spacing of words, the line height of words should be considered to maintain visual unity as far as possible;
2. IOS design draft, the default line height in the design software is inconsistent with the default line height in the development software. It is best to repair the line height and keep it consistent with the development;
3. Do not use the Enter key to define a text paragraph, but use paragraph parameters. The paragraph spacing is usually 1.5 times greater than the height of the text line;
4. In case of such uneven multi line text, do not set it as left-right horizontal alignment;
5. Generally, the larger the font size, the greater the space between the word and other elements;
6. UI design should be combined with product positioning to formulate the minimum grid base, and then any spacing should be presented as a multiple of the minimum grid base;
7. In a product, about 6 spacing values are usually set, which can meet most design scenarios;
8. Be good at using design principles such as intimacy, blank space concept and unity, and understand the requirements and objectives before design.
The article is beneficial to you. Please give a compliment before you leave!
Powered by Froala Editor
