Let mobile APP interface design more delicate – picture control and selection specification

Mr. Chen is honored to see a blog posted by the dark horse young WeChat public on how to make your APP design more elaborate. Very anatomical in place, so 25 schools a little bit of collation and examples to tell you focus on how to let us now design mobile APP interface is more beautiful, delicate, atmospheric.

Of course, the 25 school has shared a lot of practical APP design dry goods, for example

1, the history of the most sophisticated mobile terminal APP design specification learning, decisive collection

2, the most practical app detail design experience, through your UI design meridian

3, mobile app design common 8 basic layout scheme

Eshop-mobile-app interface design

In the final analysis, let our mobile APP design more delicate, but from the picture, text, color, layout, icons and other five aspects of start.


Today, mobile APP interface design more delicate picture, control and selection specification

The young horse design master design of the APP UI pictures compared to a person’s taste in clothes; Xiaobian feel very appropriate.

Because the image display form and the quality of the picture affect the user’s sensory experience of mobile APP products. That is, the first glance also affects the properties or labels of our mobile APP products.

Here we take a look at the picture in the APP design need to pay attention to the key points, will be from the picture of the proportion, consistency, image quality and authenticity and other aspects of analysis.


1.1, what is the proportion of pictures?

Different proportions of pictures convey different information subjects. According to the attributes of the product, we will choose the proportion of pictures to match the overall framework layout.


Through the experience of some mainstream APP, we will find some of the more commonly used image ratio, such as 1:1, 4:3, 16:9, 16:10 and so on; will also find some proportion of the design we need to analysis and break the normal procedure, their character, combined with the characteristics of their products, APP can design their own reasonable use.


1:1 emphasizes the sense of existence

1:1 image scale is a relatively common design proportion, the length and width of simple more easily than the composition was the main highlight of warping, sense of existence. Often used in product display, avatar, close-up display and other scenes, particularly in the electricity class APP.

Image title


4:3 compact and easy image composition

The 4:3 image ratio makes the image more compact, easier to compose, and convenient for designers to play. Because of the small screen capacity of the mobile phone, as a full screen display, this ratio occupies more space in the App design layout. As designers, this proportion is often touched, cool, UI Chinese works cover, Dribbble show, etc. use this proportion.

Image title


16:9 movie scene like effect

The picture ratio of 16:9 can present the scene effect of the movie, and it is used for horizontal composition. It is one of the widely used dimension ratio, which can give the user a wide vision experience. In many movies and entertainment APP design widely used, such as Tencent video, NetEase cloud music, etc..

Image title


16:10 embrace the golden ratio

The golden ratio is like a pearl on the Pyramid. The closer she is, the more attractive she is, and vice versa, and the closest picture is at 16:10. Design does not have absolute standards, we can follow some good experience rules, but also dare to break the rules, try more possibilities.

Image title


X: = Y waterfall flow design

X: Y represents a fixed width, height at the maximum value between the custom waterfall flow design, no clear purpose in for some users, just love to get as much information as possible under the condition of using this kind of design method. X: = Y the proportion of pictures should pay attention to the height of the control, do not exceed the screen display area of the network, as the petals of a flower in the design of 750x1334px height maximum: 848 px.

Image title


The above list is only part of the commonly used proportion of analysis and explanation, there are more proportion, here is not a demo, the purpose of sharing is to let everyone develop the habit of analysis, combined with their own product characteristics, select the appropriate picture ratio.


Picture proportion selection method:

A.According to the effect of commodity display, choose the picture display proportion that can fully display the characteristics of the goods;

B.With the product temperament as the standard, select the content of the product in line with the quality of the image display ratio;

C.Selection of suitable common proportion combined with product characteristics;

D.Custom special scale values based on flexible layout;

E.Analysis, break, innovation, and create a proportional value that conforms to a certain law or aesthetic concept.



1.2, the picture of the consistency of the proportion

When we combine the characteristics of the product to determine the appropriate image display ratio, we need to focus on the overall layout and image distribution, specification of those layouts can use the same picture display ratio. Under the condition of ensuring visual effects and interactive forms, the same subject should be presented in the same proportion in different pages, which can not only keep the consistency of visual expression, but also bring convenience to the later operation and maintenance.

App design picture selection


1.3, improve the quality of the picture

More and more products began to pay attention to the quality of pictures, such as NetEase strict selection of product pictures shooting and processing have strict norms, the purpose is to enhance the product temperament and the impression in the minds of users. When we design, we should use the best pictures to foil our design draft. The quality of picture affects the style of the whole interface.

Image title


Many partners will feel that the pictures are uploaded later, and my design is beautifully finished and ultimately useless. My view on this issue is this:

A.The best design output is the embodiment of the designer’s major;

B.Give the best effect to the decision maker and increase his impression of your design ability;

C.By setting up operational visual standards to control picture quality, you can strictly control your visual pursuit of pictures;

D.Your attitude will bring you good luck.

Image title



1.4, the real restoration of pictures

Although the aforementioned picture of the importance of quality, but we cannot choose to visual effects of some irrelevant pictures, it will also give policymakers a misleading. We can improve the image quality, but the need to ensure that the true picture, so as to make your design more reasonable.


In some local product design, the use of foreign picture materials, we need to be cautious. If the image of the model in the case, copywriting information is more biased in favor of the domestic scene, if the use of a foreign model material may be more powerful, but can not really restore the product scene, will give the decision-makers to convey a wrong cognition.

Image title





Leave a Reply