Specification of website design page_Shang ping China focuses on high quality website construction - 上海1314龙凤鲜花坊_上海419贵族宝贝

Next, Shangpin China will share with you Website Design Page specification layout frame of:

1. Page Frame

Web page framework refers to the organizational structure that constitutes a complete page. It is usually composed of the following three parts: Head, Main and Foot. Sometimes, for layout purposes, "Menu" for page function navigation is added under "Head". As shown in the figure:

2. Layout principle

For Web applications, the page layout corresponds to the functional area of the web application, and the segmentation ratio between the various parts of the page also needs to comply with certain rules.
The design of page layout needs to first consider the user's requirements for visual flow when browsing web pages:

Layout principle

From the perspective of visual flow, the first thing users see is the left side of the "Head" part of the page, which is usually the logo identifying the WEB application; Then, "Menu", which displays the main functions of WEB applications, is used for page navigation; Next, the user will see the "sidebar" on the left side of the page, which is usually used for page function navigation, and corresponds to the choices listed in the "Menu". The content here can display more detailed functions in a tree like structure; Next is the content part in the center of the page. Finally, the user's vision falls on the bottom of the WEB page.

3. Page Split

Take the layout shown above as an example, and follow the usual method of web page design, combined with the golden ratio method:

First, divide the page by 3 * 3, as shown below:

In the height direction, the top 1/3 area is divided into the head and menu area according to the golden section method;
In the width direction, the left 1/3 area in the middle is divided into the sidebar area according to the golden section method, and the remaining space is reserved for the content area;
In the height direction, the foot area is divided from the lower 1/3 area according to the golden section method;

4. Page Structure

In the layout of the page, the size of each area is defined differently, as shown in the following figure:

In the page layout, the segmentation of each functional area is carried out in the way of "pixel" and "scale", with the resolution of 1024 * 768 as the benchmark, where:

The width of the Head area is set in a proportional manner, the width is set at 100%, and the height is determined by the fixed pixel value occupied. Generally, the width is set at 100%? Px. If there is a menu area, adjust it to "menu"? px；
The configuration requirements of the Menu area are the same as that of the "head". The width is set at 100%, and the height is determined by combining the height setting of the "head". Generally, the width is set at 100%? px；
The width of the sidebar area is determined according to the golden segmentation ratio between the sidebar area and the "content" area. The width is determined by the way of fixed pixels, generally accounting for? px； The height is set proportionally;
In the Content area, the layout of the height and width direction is set in proportion;
In the Foot area, the width is set at 100%, and the height is determined by the fixed pixel value occupied. Generally, the width is set at 100%? px;

5. Page presentation

For page layout, in addition to the above requirements, the following requirements should also be considered:

It can adapt to 1024 * 768 and 800 * 600 resolutions;
The interface layer shall not exceed 3 layers;
Under the default window setting, horizontal and vertical scroll bars should not appear;
When the interface content exceeds the display area, it is displayed as a floating layer;

Also, for the user's sense, the position where the diagonal lines of the screen intersect is the place where the user looks directly at, while the top quarter of the page is the place where the user's attention is easily attracted, so pay attention to using these two positions when placing the page.

requirement:
The center of the parent page or main page should be designed near the diagonal focus;
The location of the sub page should be close to the upper left corner or center of the main form;
When multiple sub pages need to pop up, they should be offset to the lower right in order to display the title of the form;
Place the user's logo, main function navigation and some system operation functions in the top quarter of the page;

6. Page beautification

The interface should be sized to fit the aesthetic point of view, feel harmonious and comfortable, and be able to attract users' attention within an effective range.

Suggestions and requirements:

The length width ratio is close to the golden point ratio, and the length width ratio must not be misadjusted, or the width exceeds the length;
The layout should be reasonable. It should not be too dense, nor too open, and the space should be used reasonably;
The size of buttons on the same page should be the same, and the size of buttons on different pages should be as similar as possible, and too long names should not be used on buttons;
The size of the button should be consistent with the size and space of the interface;
Avoid placing large buttons on the open interface;
After placing the control, there should be no large vacancy in the interface;
The font size should be consistent with the size ratio of the interface, and the commonly used font is 12px;
The foreground and background colors should be matched reasonably and harmoniously. The contrast should not be too large. The main color should be soft. It is better to use less dark colors, such as bright red and green. You can borrow the color of Windows interface;
The main colors commonly used by large systems are "# E1E1E1", "# EFEFEF", "# C0C0C0", etc;
The interface style should be consistent, and the size, color and font of the characters should be the same. It is recommended to use pictures where artistic treatment or special requirements are required;
If the form supports maximization or enlargement, the controls on the form should also be scaled with the form; Do not only enlarge the form but ignore the zoom of the control;
The system dialog box page should not support zooming, that is, the upper right corner only has the closing function;
Generally, when the parent form supports zooming, the child form does not need to be zoomed;
If the user can be provided with a custom interface style, the user can choose the color, font, etc;

6. Page font

The settings of page font attributes are defined in the corresponding CSS. The page text coding requirements are UTF-8. When specifying font attributes, you need to set: "Song typeface" for Chinese, "Arial" or "verdana" for English, and "Song typeface" must be guaranteed in the font family in the CSS file.

For setting the font size in page properties, different levels of content are required. Usually:

Header text in "Head", 20px;
Navigation text in "Menu", 14px;
Text in "Sidebar", 12px;
Body in "Content", 12px or 14px, title;
Text in "foot", 12px or 10px;

See the CSS example in the appendix for specific settings of page font attributes.

Specification of website design page

Date：2016-05-04 Source: Shangpin China Type: website encyclopedia
Word Size： small medium big

+86 10-60259772