After analyzing dozens of apps from major manufacturers, I summarized the layout secrets of this picture list.

Humans are emotional creatures, and our eyes are often more interested in capturing images than text. It is precisely because of the ubiquitous images in applications that I often get used to the way images are displayed. But when I calm down and think about the reasons behind the layout and display, I can still summarize some principles.

There are many scenarios where pictures appear, but in this article I will mainly summarize the ways to arrange pictures in lists. The following is my summary and analysis of dozens of apps, hoping to help you display and layout pictures more easily in the future.

The proportion of the image

The most popular ratios for online images are 1:1, 4:3, and 16:9. However, if you just remember these ratios that designers like to talk about without understanding the reasons behind them, it may be difficult for you to use them.

These ratios are all related to the evolution of the size of sensors from early film photography to modern cameras. Due to space constraints, I will not go into more detail. Friends who are interested can look up information on this topic.

I mainly want to analyze how mobile designers should determine the display ratio of pictures in the early stage of product design. I think the most critical factors are the application scenarios of list pictures and who the source users are.

1. 1:1

1:1 images are square in shape, which allows the subject to be highlighted to the greatest extent. It is also the easiest to adapt to non-1:1 images, and a universal adaptation solution can be found to maximize the retention of key subject information (I think this is one of the reasons why avatars are often cropped to squares).

The 1:1 image display often hopes that the information displayed in the image in the horizontal and vertical directions is as complete as possible, and the layout is as regular as possible, so we can see that most e-commerce platforms display product pictures in a 1:1 ratio.

2. 4:3

When it comes to 4:3, many people will immediately think of the 3:2 image ratio, because the original 135 film output photo ratio was 3:2. However, as mobile phone photography becomes popular among the public, 4:3 images are gradually becoming popular. And the photo size of mainstream mobile phone photography on the market is generally 4:3.

So when the list displays UGC content and the main source of images is platform users, the most likely source of images for users is mobile photography. At this time, it is more reasonable to set the image ratio to 4:3.

A similar case is that 58.com allows landlords to upload pictures of rental information by themselves. It is impossible for every landlord to have professional photography equipment, and most of the images may be taken by mobile phones. Therefore, setting the image display to 4:3 at this time will minimize the loss of user image adaptation and cropping.

But does this mean that the 3:2 image ratio no longer exists on mobile devices? No, this depends on product positioning and user scenarios.

Mafengwo and Airbnb are two products that focus on travel derivative businesses. Most users who produce content may have dabbled in photography during their travels. Therefore, the source of UGC images is likely to be the camera. For images output by camera devices, the 3:2 ratio is used to minimize the loss of user image adaptation and cropping.

3. 16:9

There is no need to elaborate on 16:9. This is a very typical video ratio size. Generally, the image size of video lists is more commonly used. For example, video products such as iQiyi and Youku basically use 16:9 size to display images.

It doesn't mean that the image ratio must follow the above ones, but it can be said that these ratios cover most image scenarios. When using these ratios to display images, when images with unconventional ratios need to be cropped, the loss of pixels can be minimized.

Of course, when the list displays PGC content and the image sources are mainly operated by the team internally, the image ratio can be relatively free, because the uploaded images can often be controlled internally.

Arrangement of picture lists

I have consulted many applications and found that the arrangement of mainstream images can basically be summarized by "column structure + row structure". Let me explain it to you.

1. Single column + text = list layout

List layout is the most common arrangement method. In list layout, the pictures are displayed smaller and users generally do not pay attention to the details of the pictures, so list layout often focuses more on the display of text content.

I once saw a question: In what cases should a list have images on the left and text on the right? In what cases should it have images on the right and text on the left?

First of all, you should understand that the list layout is consistent with people's browsing habits (from left to right, from top to bottom), which is a typical F-shaped browsing layout. So most people browse left-right structure lists and follow this browsing trajectory. So you can place more important content on the left.

For example, many news and information products use a left-text-right-image layout because the image is not closely related to the title content and the image is only used to increase the reading interest. According to the user's browsing habits, placing the title on the left can better highlight the content without being disturbed by the image.

When image content takes precedence over text content, you can also use the user's browsing habits to display the image on the left, so that the image can convey the content more intuitively and let the user's eyes quickly browse down along the left image. Many e-commerce apps use the format of left-image and right-text.

(I have also seen a point of view shared by a netizen before: because most users use their right hand to operate, when sliding the page, the finger blocks the secondary picture content, while the important text content can also be read without obstacles during the sliding process. I think this is also a good idea.)

2. Single column = large image layout

The large picture layout only displays one picture in a row. This arrangement consumes a lot of vertical space on the mobile screen, but it can also help users filter out cumbersome information and focus on only 1-2 contents on one screen.

Because of the large size of the image layout, the image details can be fully displayed to users, so the image quality requirements are often very high (the image quality here is not only the pixel quality, but also the image content quality). I found that products that use this type of image layout will more or less set up dedicated operation staff to edit, or use an audit mechanism to complete the control of the image visual performance.

3. Two columns + side by side = grid layout

Compared with the single-column large-image layout, the two-column grid layout can display more image content on one screen and can deliver content to users more quickly. Compared with the list layout, the grid layout hopes to use images to hit users with unclear targets while making high use of screen space.

Since it is all for the purpose of saving screen space, the text configuration under this layout will basically not exceed two lines and will generally be omitted.

4. Two columns + offset = waterfall layout

In order to increase the interest of the grid layout and avoid user visual fatigue, a staggered display form, namely the waterfall flow, was derived from the single side-by-side form.

The waterfall flow allows the vertical display space of a single content to be dislocated, which increases the visual jump, but also easily leads to confusion in the user's visual flow. It makes the content with higher height easier to see and the content with lower height easier to be ignored. Therefore, the waterfall flow is more suitable for list scenes where the image height can be balanced.

5. Multiple columns + puzzle = puzzle layout

The puzzle layout also adds interest to the image layout, and according to the puzzle form, it can be composed of more columns. Compared with using waterfall flow to increase interest, the puzzle can appear more regular.

The size of a single puzzle piece is relatively free. High-quality images can occupy a large layout, while low-quality images can be appropriately reduced. How to define it depends on the designer's early planning control.