The horizontal alignment of various elements in the webpage mainly includes four alignment modes: left alignment, right alignment, center alignment, and two alignment, right alignment and two-end alignment are rarely used, especially the two-end alignment.
The horizontal alignment of various elements in the webpage mainly includes four alignment modes: left alignment, right alignment, center alignment, and two alignment, the right alignment and the two ends of alignment are rarely used, especially the two ends alignment. The author of this article, Li Xuejiang, thinks that this is generally only used in graphic design.
1. basic knowledge of alignment of various elements on the page
A. left alignment is the most common alignment in website layout: it is neat, consistent, and secure, because you are familiar with and willing to accept this alignment, so for any design, left alignment is the safest alignment.
B. in high-quality webpage design, good alignment occupies a large proportion: when items are arranged in a row, they usually look better. Therefore, using different alignment methods to establish a comparison is more difficult and more cautious, but it is very effective if it is done well. For example, in an article, we often mix the left-aligned text section with the center-aligned Title. this is the best example of establishing a comparison using different alignment methods.
C. alignment analysis based on users' line of sight behaviors: users' line of sight is usually from top to bottom, from left to right, so the best between frames is to align left and right, and align up and down, smooth sight. The content link of the navigation page. after reading a link, the user looks at the next link. the left alignment is still the best way.
2. alignment between the framework and the framework
In the first part, the user's line of sight is often from top to bottom, from left to right, so the best between frames is to align left and right, and align up and down to make the line of sight smoother. However, sometimes the content of the framework on the left is higher, so that two modules on the right can be as many as those on the left, at this time, we must ensure that the two or more modules on the right are aligned with the frame on the left so that they look more unified.
3. alignment between content and small icons
The small icons on the title bar are aligned with the title bar name and the small icons on the left of the content link in the upper and lower center and left alignment mode. Generally, there is a small icon on the left of the content link, the title on the right of the small icon must be left aligned. In addition, the entire site must be aligned between different frames.
4. alignment between product images, character images, and content
This method can be divided into two types: horizontal alignment and center alignment.
Put A text below the image: This method is generally centered and aligned, because if the left alignment is left and the text is missing, it will be ugly, especially for the character image, with only one person's name.
B. put the text on the right side of the image: the horizontal direction of the text should be left aligned, because the user needs to see the text around the image. if the right-aligned or center-aligned, the line of sight will be inconsistent. The vertical direction must be aligned at both ends, which looks more regular. Generally, the title and guide content are aligned with the two ends of the image.
More alignment methods are described in chapter 4 of "B2B industry portal website design and development practice Research Report.
5. information entry submission form page
Alignment of the operation area on the form page greatly improves the efficiency of the user's task completion. Therefore, the left alignment of the input box is required. after the user enters a box, the user goes to the next box, it can save user time. However, it is best to align the text as the prompt input content to the right, because there are few prompt languages, leading to a blank area between the prompt language and the input box, increasing the user's cognitive burden, the user must spend a considerable amount of time to move the line of sight between the tag and the input box.
During the operation, the user pays more attention to the input box, rather than the label. The user's eyes focus on the transfer speed is very fast, and even if you do not read the label from the beginning, you can understand what it means, for user behavior analysis, the author elaborated in detail in the B2B industry portal website planning practice research report.