Alignment criteria between page elements in business-to-business industry sites

The horizontal alignment of various elements in the Web page is mainly: left alignment, right, center, and justified 4 ways, commonly used for left-aligned, center-aligned, right alignment and justification is rarely used, especially at both ends of the alignment, the author of this article Li Xuejiang that generally only when the graphic design will be used.

1, the basic knowledge of various elements of the page alignment

A, left alignment is the most common alignment in the site layout: It's neat and secure, because everyone is familiar with this alignment and willing to accept it, so left alignment is the safest alignment for any design.

B, in high quality web design, good alignment takes a big part: When items are in line, they usually look better. Therefore, it is difficult and more prudent to use different alignment methods to establish comparisons, but it is very effective if done well. For example: In the article, we often mix left-aligned text paragraphs with center-aligned headings, which is the best example of using different alignments to create comparisons.

C, from the user's line of sight behavior to analyze alignment: The user's line of sight is often from top to bottom, from left to right, then the best between the frame will be right and left, up and down, so that the line of sight smoother. Navigation page Content link, when the user read a link, will continue to look at the next link, left alignment is still the best way.

2, the alignment between the frame and the frame

The first part of the talk, the user's vision is often from top to bottom, from left to right, then the best between the frame will be right and left, up and down, so that the line of sight smoother. But sometimes the left frame of the content is higher, the right to put 2 modules to the left as much as possible, this time we have to make sure that the right 2 modules or more than one module to the left of the alignment, so that looks more unified.

3, content and small icons of the alignment between

The small icon on the title bar and the name of the title bar, the small icon on the left side of the content link, are all in the middle of the alignment, left-aligned way, the general content link to the left of a small icon, small icon to the right of the title to the left to align. And the whole station up and down the different frame, also want to align up and down.

4, the product picture, the person picture and so on and the content alignment way

This approach is divided into two types, horizontal alignment and center alignment.

A text in the bottom of the picture: this way is generally centered, because if the left alignment, text if less, will show more ugly, especially the figure, only a person's name.

B text put the picture to the right: text horizontal direction to the left, because the user looked at the picture, it is necessary to see the text around the picture, if the right alignment or center alignment, will make the line of sight is inconsistent. Vertical orientation to both ends, looks more regular, generally the title and guide content with the picture at both ends of the alignment.

More alignment in the "Business-to-business Industry portal design and development of the actual combat research Report," chapter fourth, the fourth section of the detailed elaboration.

5, Information Entry Submission Form page

In the form page to align the operation area, will greatly enhance the user to complete the task efficiency, so the input box left alignment is necessary, when the user entered a box, and then down a box, you can save the user's time. But as prompted to enter the content of the text, it is best to right, because the hint language is more or less, will cause the prompt language and input boxes to create a blank area, aggravating the user's cognitive burden, users must spend a considerable amount of time in the label and the input box to move the line of sight.

During the operation, the user is more concerned about the input box itself than the label. User eye attention point of the transfer speed is very fast, and even if not read the label can also understand its meaning, for the user's behavior analysis, the author of the "Business-to-business Industry portal site Planning Combat Research Report" made a detailed exposition.