Li: How do I design an effective Web page layout?

Intermediary transaction http://www.aliyun.com/zixun/aggregation/6858.html ">seo diagnose Taobao guest cloud host technology Hall

What is a layout?

Layout refers to the size, spacing, and location of the page's content. Effective layouts are essential to help users quickly find what they want, and can make the user feel comfortable in a structured look.

How do I design an effective layout?

1. Have a clear visual level. The layout should make the relationship and importance of the elements of the page clear at a glance. You can implement the visual hierarchy by appropriately using the following attributes:

Focus: The area that the user first focuses on. UI elements that are formally assigned the focus attribute must express important content.

Visual flow: Refers to the order in which users focus on areas. The appropriate visual flow can be designed based on task logic and user browsing habits. Good visual flow should be clear, reasonable, smooth and natural.

Association: Logically related UI elements should have a clear visual relationship.

Error：

Logically related UI elements are spatially delimited and have no visible visual association.

Alignment: Make the page neat, the information is orderly, easy to scan users.

Error：

No alignment affects the page effect and is not easy for the user to scan. Do not easily sacrifice the visual presentation of a page because of functional needs and concerns about limits.

Emphasis: Can be emphasized based on the relative importance of the UI elements.

2. Design the layout for the user's reading mode.

Most people's reading habits are left-to-right and top-down.

Reading is divided into immersed reading (immersive reading) and scanning (scanning), the former aims to understand, the latter lies in positioning.

When browsing the Web, users are not immersed in the UI itself, but immersed in their target tasks, so scanning is the most commonly used reading mode. Users carefully read a large amount of text only when they are convinced of the need.

The layout design for a peek can emphasize the main UI elements appropriately, weakening the secondary. Including：

1 Place the main UI element on the scanning path.

2 Avoid placing important information in the lower-left corner or at the bottom of the page or on a control that needs scrolling.

3 Consider using progressive expansion to hide minor UI elements.

4 The important information related to the task should be shown directly on the control. Users tend to focus on the labels on the interactive controls rather than the static text of the auxiliary type.

Error：

The user must read the auxiliary text before they can be clear about the role of the "OK" button.

That's right:

Directly describe the role of the button as a control label, easy to understand the user.

5 do not show large pieces of text, remove unnecessary text. Dovenben format display.

Note: There are exceptions to the general pattern. The eye motion experiment pointed out that the behavior of the real user is very irregular. The purpose of this pattern is to help you make better decisions, not to describe user behavior accurately.

3. Reasonable use of page space.

Maintain the visual balance of the page. Avoid crowding and wasting space.

Ensure that critical data is not truncated unless the data is exceptionally long.

Error：

Logically related UI elements are spatially delimited and have no visible visual association.

The control is sized and spaced properly, and there is no unnecessary scrolling. A task as far as possible in a screen to complete.

In fact, our user's page space is less than the screen resolution, it will be compressed for a variety of factors, such as: Not Full-screen operation (pop-up window and contrast browsing), the browser itself and a variety of auxiliary bar screen occupancy, etc., the design to consider these situations.

4. Do not let the layout itself become a prominent UI element, keeping the visual simplicity (visual simplicity).

Reduce the nesting level on content and presentation.

Reduce the number of different dimensions of the control, for example, using only one or two button widths on the interface.

With lightweight grouping and segmentation, you can use the layout itself and delimiters instead of group boxes.

Use as few snaplines as possible.

5. Select the layout that matches the page type. At the beginning of the design, you should take full account of the content, features and properties of the page, and then choose the layout that fits the page. The unsuitable layout will cause the user to read the trouble, reduces the task the completion efficiency.

Standards and Specifications:

1. Grid:

What we call raster is the establishment and application of grid system in web design work. The Web grid system originates from the planar grid system, which directs and regulates the layout and information distribution in the Web page with regular grid arrays.

Grid can make the information appear neat and concise, beautiful and easy to read, reduce the page development and operational costs. It has a relatively flexible structure and strong expansibility.

2.8px as transverse grid unit:

With 8px as the horizontal grid unit, all element widths of the page can be multiples of 2, including pictures and plate widths, which can speed up the rendering speed of the page (especially for J-peg Pictures) (based on the computer's internal binary computing mechanism). It also has some advantages in expansion and compatibility.

In Alibaba Chinese station, the minimum unit of the layout spacing is 8px, the layout block adopts 32px (8px*4) and 8px*3 two granularity units, which comprise the following two kinds of grid systems that can be implemented respectively:

32PX: Applicable to market, community and other related pages

24PX: Suitable for Wang Pu related pages

3. Page Set Width:

Adaptive can automatically adjust the width of the page according to the browser display, but because the user's horizontal direction of the focus range is limited, so when the page is too wide, the user's browsing and operating costs will increase, and when the page is too narrow (if the user opened two browser contrast to view the product search results) Self-adaptation can lead to layout distortion and confusion of content. You can avoid these problems by providing a width to the page.

We think 960px is a relatively more reasonable page width after considering the main resolution, the appearance of browser, the occupancy of the display space, the requirement of horizontal angle of view and focus range in ergonomics and 8px units. In Alibaba Chinese website, the recommendation uses the fixed width 960px the page, removes the left and right each 4px margin, the middle visual width is 952px.

Author Alibaba (Chinese station) User Experience Design Department Li (Li Xiao)