Two of the most common web layout design patterns

What is the role of Web layout? How do I design a Web page layout? Today @ Flying House Rui Uidesign to students in this area of knowledge, choose Excellent case analysis, the summary of the characteristics summarized, easy to understand, easy to use, the urgent feeling

@ Flying House Rui Uidesign: From today onwards, we also talk about UI design. When we talk about UI design, in fact, my knowledge can only contribute to the web side, of course, the web side and the software side is very similar. But whether it's designing a Web interface or a software interface, as a designer, there's no denying it: the balance between the delicate elements of proportion, color, size, and so on is not an easy task.

Web page UI design is the same, a site like other traditional artistic creations follow the same rules, and ultimately achieve visual artistic effect. This is the category of aesthetics and implies the law of modern commerce. An excellent web design must be easy and attractive enough.

　　Creative Combination of vision

Let's talk first about the three features of the Web interface.

　　Bootstrap user

Site to the user's guidance, like an invisible hand in the dark, will guide users to click and other action buttons to browse the site, to understand the information, and will not bring users a sense of oppression. For example, square this site, when you continue to pull down, there will be a corresponding text prompts you to continue to where.

　　Squareup

　　The relationship between rendering content

According to a certain layout to show the priority of the primary and secondary content of the site, such as Abduzeedo this site, will be the main push content on the largest top three card display, the other common content is shown in the form of a list, the bottom is a number of tag classification links.

　　Abduzeedo

　　Establish an emotional connection

People go to a restaurant to eat, in fact, not only the restaurant as a solution to the appetite of the place. They will pay attention to the restaurant's venues, atmosphere, dishes and even some of the special mood, they are here to talk, trade. In the same way, a user can accept a small flaw in the Web interface or interaction because of the emotional connection it has with your site's content.

　　Browse Mode: human eye focus prediction

It's like your eyes are quicker to focus on moving objects quickly, or when you're attracted by a cool, beautiful model on the side of the street. The human eye will automatically inspire a special attention to an object in the horizon in the act of seeing it, which we can call the focus. Most people will be attracted to the focus of the page.

For example, the presentation of an article will follow the same browsing mode. 99Designs's design author Alex mentions two main browsing modes.

　　F mode

This is mainly in some text-oriented web sites, such as blogs. F mode means that the user usually goes vertically along the left side to find the point of interest at the beginning of each paragraph in the article, and then if the user finds out what he likes, he will start reading the horizontal line from here. The final result is that the user's view is F-type or e-type to browse.

The Nielsen Norman organization has observed the browsing habits of 232 of thousands of web sites and summed up the features of the F model:

Users rarely read words verbatim.

The first two words in each paragraph are most important, which determines whether the content will retain the user.

Initial paragraphs, subheadings and points should be kept in focus.

As you can see from the page below, the important content is clearly displayed and will not allow users to spend a lot of time browsing, and the secondary content will be quick. F mode is also very useful for those websites that embed ads, even if there is an advertisement, it will not affect the content. Just remember, the content is king, navigation can let the user go deeper to browse.

In all browsing modes, F mode is a guide roadmap, not just a page. Because, the F-mode of the site in addition to the top of the display area, other content will appear more insipid. As shown in the following illustration, after 1000 pixels at the top, the site adds a few card-type content components to the page in a horizontal direction, making the content more interesting.

　　Z Mode

The browse mode of Z mode is that the content of the Web page is not a text page. Whether or not it's a menu bar, or just a top-down reading habit from left to right, the user first focuses on the content in the horizontal direction of the page header. When the line of sight arrives at the bottom, follow the custom pattern from left to right, repeat and scan the bottom of the page.

Z mode can be applied to almost any web interaction, and the advantage of Z mode is simplicity. If your site is a lot of content and complex, then use this mode, the effect will be slightly worse. Of course, none of this is absolute. When Z mode simplifies the layout, you can increase the conversion rate, which is where you can simplify:

background-use a separate background to lock the user's line of sight into your frame content.

Essentials 1--Your Logo placement in the first place.

Important 2--Add a bright, complementary operation instruction to help users follow the z-route browsing mode.

Page Center-the Center of the page is independent of the page header and the end of the page, and guides the user Z route through the view.

Important 3--Increase the icon that you can move from the location you are browsing to to the bottom, which means you can always reach your final goal.

Important 4--z the bottom horizontal line of the pattern, which is the best place to provide the user with the primary action.

Predicting the user's view will have a great advantage. Before you can lay out your page elements, you will know where to place the priority. Once you know what you want the user to see first, you can put your focus on the user's "hotspot" by the rules of the line of sight.

You can repeat the pattern of z patterns throughout the page, as you can see in the image below, there is a registration button at the beginning of the page, and by browsing horizontally, the user has learned the information, and the drop-pull will produce the selling point of the product, which is to follow the best example of the repeated z-mode. The lowest payment option arrives at the bottom of the z-mode.

　　Postscript:

In design, we are always thinking more than we present. In any case, these two models are only a summary, the actual creation process is full of tricks, not two models can be easily completed. But, in front of the law, the more the better is not wrong. The key is to use the law flexibly.