[Design] Talk about several common methods of long layout.

Text |? I know. Figure? | Screenshots from the Internet and websites

Long drawing design is widely used in the era of screen reading. In addition to the websites and APP pages that come to mind most directly, there are long graphic packages of personal works, long posters, product details pages of e-commerce, long graphic advertisements of Weibo WeChat and so on. Therefore, not only interface designers need to know the composition method of long graphic design, but also ordinary designers can know some design skills of long graphic pages.

In order to keep readers interested and stay longer, our design should not only look good, but also provide some visual guidance, so that the content experience is consistent from beginning to end. In order to achieve this goal, we need targeted design.

I hope this article can give you some help. Then let's take a look at several common simple design methods of long page design.

Repetition is to unify the vision and remind users or readers that they are still stuck in the same content. Repetition can be repeated fonts, colors, sizes, spaces, tables, frames, etc. Instead of strictly copying the same elements, it produces continuous changes in the page according to certain rules. In other words, when using repeated elements, there should be regular and regular changes in the changes.

Repetition of numbers, words, English, typesetting forms and structures ▼

Repetitive typesetting form, structure, etc ▼

Repeat shapes, symbols, features, etc ▼

Repeat color, color block application, etc ▼

In addition to the repetition pointed out, it is not difficult to find that various methods of repetition do not exist independently, and often various methods are mixed. Of course, there are many ways to repeat.

F-layout is a very traditional but very scientific layout, which is a classic layout based on a large number of eye tracking experiments. In line with most people's browsing habits. When we look at a page, we usually look at the upper left corner (such as logo, navigation, title, etc. ), then give priority to horizontal content from left to right, and then browse the whole page from top to bottom, thus forming an F-shaped visual path.

NNGroup's eye tracking research map (red and orange represent the hot spots of attention, and blue represents the uninterested parts) ▼

From the F-shaped layout and eye tracking experiments, we can draw the following enlightenment:

1. The most important information (such as logo, company name, title, navigation, etc. ) you should try to put it on the top (even to the upper left corner), not on the right.

2. Generally, you can put some minor things on the right, such as feedback, consultation, advertisement, recommendation, etc.

3. When designing, you should pay more attention to the information on the left, which is the place where you pay attention, and the right is usually regarded as blank.

4. Multi-text and multi-content pages (such as news, community, event introduction pages, etc.). ) you can give priority to the f layout.

F-shaped layout of 36Kr web page ▼

F-shaped layout of envato tuts+ page ▼

F-shaped layout of game activity page ▼

F-shaped layout of active page ▼

Besides F-type layout, S-type (also called Z-type and Z-type) is also a very classic page layout. Similarly, it also conforms to the human browsing process, which is proved by eye tracking experiments.

When we browse a page, our eyes will move left and right to read, and the visual stopping point will change up and down, thus forming an "S"-shaped path that moves left and right. This layout is widely used in long pages, especially when introducing product pictures. Using S-shaped layout will form a visual orientation and read the whole page smoothly.

Eye tracking research map ▼

The initial application of S-shaped layout in web pages may have started from official website, and Apple used words on the left and words on the right to form reading coherence.

For example, in Folding Above, the details page of the iPad below falls on the picture of the iPad (the picture is more likely to become the visual center than the text), and then read the product name and introduction to the left. After reading, as the page scrolls down, the vision is attracted by the picture of the iPad on the second screen, and continue to read the introduction of the picture to the right ... Repeat this visual movement many times, and the whole page will read smoothly, forming an S-shaped visual browsing path, which is very obvious.

Product details introduction page of early Apple official website ▼

In addition to Apple, this arrangement is widely used in many website pages, long advertisements and combined packaging.

Similar to S-shaped layout product details introduction page ▼

Other S-shaped layout pages ▼

It can be seen that the S-shaped layout is very popular with long picture typesetting, which conforms to people's subconscious reading habits.

Card layout is a layout method derived from grid system, also known as container style design. It divides information elements such as words and pictures into a card, and forms a complete, concise and standardized page through the accumulation of cards, which is usually used in e-commerce (such as Taobao and JD.COM). COM), platform websites (such as Zhanku, behance, Pinterest, Youku) and other pages with large information. Of course, if we encounter complicated pictures and texts in the design, we can also consider using this layout to make our design more concise.

Card Layout Page ▼

Of course, the layout of the page is far more than the methods listed above, but these methods are classic and commonly used. At the same time, these methods do not exist alone, and they will also coexist with each other in the application, serving a complete and beautiful page. I believe that after fully understanding these typesetting methods, we will not be confused when designing long pages or packaging and displaying works, and we don't know how to start.

Let's share it here first, I hope it will help you.