we often see a lot of good mobile UI designs . So how did these designs come about? I've summed up some deep-seated techniques.
similarThe parts that are close together tend to form the whole. when we need to organize and divide the information, we can comb the information layout well by using Gestalt psychology. As the information repeats itself in a list, we can use the same color, size, shape, or text as much as possible in a repeating form. "similar" Applicationssimilardifferent elements when their distances are similar, the user visually tends to attribute them to a whole. "Close" Applicationswhen the line spacing is large, it can be used as a way to split the content. Continuoussome parts of a graph can be thought of as being connected together, and these parts will be perceived as a whole. This allows us to guide the user's visual flow in the case of limited interface space. "Continuous" applications
textusually in the Chinese app , a Chinese font is generally used as the default font, so there is no discussion about the effects of different font combinations on The visual effects in the app. Text Sizein a certain area, the different functions of the text size will directly affect the user to browse the extent of information received. Usually choose The font size between 28px~34px more appropriate reading. Relatively speaking, the smaller the text, the less it is received. Text of the same size in similar areas, user browsing is easier to understand as the same function. text colorContrast of lightness: the shades of color in an app are influenced by the color of the background, but also by the contrast of other text around it. When the text with different information priority level is unified color, it is easy for the browser to increase its relevance in understanding, which can lead to confusing information comprehension. hue comparison: In the color area of black and white gray, if there is a local color is relatively easier to attract users attention. text and backgroundtext and background only in high contrast in order to be friendly to users to read, in the application of different colors of text and background matching, it is recommended to refer to the following evaluation conclusions : spacinggraphics and screen margins are consistent with product requirements. in general, keeping a certain pixel margin between the picture and the screen margin can better guide the user to read under vertical longing. the picture is "pea pod at a Glance"and when the picture and screen margin is 0 , the user is more likely to focus on each text content itself, its visual streamline in the downward browsing, because there is no white guide, the image is directly fragmented, resulting in the picture of longer stay. In contrast, when the picture does not leave the margin, the user is more focused on the text itself, rather than being left to scroll down the guidewhether line spacing is appropriate for users to readIn content-based text, text lines are too narrow to cause difficulty reading. The usual experience, the line spacing is about 1.2~1.5 times the spacing between the fonts , the overall reading will be more comfortable. Compare line spacing 1.5 times VS. Line Spacing 1 Times
Source: Mobile informatization
How mobile app design can be nicely formatted
