Making the mobile APP interface more elaborate – picture control and selection specification

It’s a great honor to see a blog published by the WeChat public of the black horse young people on how to make your APP design more elaborate. The anatomy is in place. Therefore, the 25 schools make a few tidying and examples to show you how to make the mobile APP interface designed by us now more beautiful, refined and atmospheric.

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

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

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

3. 8 common basic layout schemes in Mobile App Design

Eshop-mobile-app interface design

In the final analysis, let our mobile APP design more elaborate, not only from the picture, text, color matching, layout, icons and other five major aspects.


Today’s mobile APP interface design more sophisticated pictures to control and select the 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 form of the picture and the quality of the picture all affect the user’s sensory experience of the mobile APP product. That is, the feeling of the first eye, will also affect the properties or labels of our mobile APP products.

Now let’s take a look at the key points that should be paid attention to in the design of APP, which will be analyzed from the aspects of picture proportion, consistency, picture quality and authenticity.


1.1, what is the proportion of pictures?

Different proportions of pictures convey different information subjects. According to the attributes of products, we will choose the proportion of pictures that correspond with them to make the overall frame 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. It is commonly used in product display, head image, feature display and so on, especially in APP.

App design picture selection specification 33


4:3 compact and easy image composition

The picture ratio of 4:3 can make the image more compact and easier to make the composition, which is convenient for the designer to play. As the screen capacity of the mobile phone is small, as a full screen display, the proportion of the App design layout is more space. As a designer, this proportion is always in touch, and this proportion is used for cool, UI Chinese works cover, and Dribbble display.

App design picture selection specification 22


16:9 movie scene like effect

The picture proportion of 16:9 can present the effect of movie scene. It’s mostly used for horizontal composition. It’s one of the widely used scale proportions, which can give users a kind of experience with wide vision. It is widely used in many APP design, such as Tencent video, NetEase cloud music and so on.

App design picture selection specification 3


16:10 embrace the golden ratio

The gold ratio is like the Pearl on Pyramid. The closer she gets to her, the more charming it is, and vice versa, the 16:10 picture is the closest. There is no absolute standard in design. We can follow some excellent rules of experience, but we should also dare to break through the rules and try more possibilities.

App design picture selection specification 2


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.

App design picture selection specification


The above list is only part of the analysis and explanation of commonly used proportion, and there are more proportion. Here is not a demonstration. The purpose of sharing is to let everyone form the habit of analysis, select the appropriate proportion of pictures according to their own product characteristics.


Picture ratio selection method:

A.According to the effect of commodity display, we choose the picture display ratio that can fully show the characteristics of the goods.

B.Take the product temperament as the criterion, choose the picture display proportion which conforms to the product content temperament;

C.Select the appropriate proportion of the product in combination with the characteristics of the product.

D.Customize the special proportions according to the layout of the layout.

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



1.2. The consistency of picture ratio

When we determine the appropriate proportion of picture display according to the characteristics of products, we need to standardize the layout of the overall layout and picture distribution, and we can use the same picture proportion. In the case of ensuring visual effects and interaction forms, the same subjects should be presented in the same proportion on different pages. Such benefits can not only maintain consistency of visual expression, but also bring convenience to later operation and maintenance.

App design picture selection


1.3, improve the quality of the picture

More and more products begin to attach importance to the quality of pictures. For example, strict selection of NetEase has strict specifications for the shooting and processing of product pictures, the purpose is to improve product temperament and impression in users’ minds. When we design, we need to use the best picture to help our design draft. The quality of the picture affects the tone of the whole interface.

App design picture selection specification 222


Many partners will feel that the pictures are all uploaded in the later period, and the exquisite design of my manuscript is useless at last. My point of view on this question is so:

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

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

C.By making operational visual standards to control the quality of the picture, you can strictly control your visual pursuit of the picture.

D.Your attitude will bring you good luck.




1.4. 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 the design of some local products, the use of foreign picture material needs to be treated carefully. For example, in the case of model image, the transmission of copy information is more biased towards the domestic scene. If we use a foreign model material, maybe we will force the grid higher, but it can not really restore the product scenario, it will give the decision-maker a wrong cognition.

App design picture selection specification 52





Leave a Reply