MENU service case
Website construction website design Beijing website construction high-end website production company Shangpin China
We create by embracing change
360 ° brand value__
simplified Chinese character
Simplified Chinese English

Shangpin China Joins Hands with Beisheng Internet to Create a New Chapter in Website Construction

Type: Shangpin Dynamic Learn more

Specification of website design page

Source: Shangpin China | Type: website encyclopedia | Time: 2016-05-04
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:

Page Frame


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:

Page Structure

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.
Source Statement: This article is original or edited by Shangpin China's editors. If it needs to be reproduced, please indicate that it is from Shangpin China. The above contents (including pictures and words) are from the Internet. If there is any infringement, please contact us in time (010-60259772).
TAG label:

What if your website can increase the number of conversions and improve customer satisfaction?

Make an appointment with a professional consultant to communicate!

* Shangpin professional consultant will contact you as soon as possible

Disclaimer

Thank you very much for visiting our website. Please read all the terms of this statement carefully before you use this website.

1. Part of the content of this site comes from the network, and the copyright of some articles and pictures involved belongs to the original author. The reprint of this site is for everyone to learn and exchange, and should not be used for any commercial activities.

2. This website does not assume any form of loss or injury caused by users to themselves and others due to the use of these resources.

3. For issues not covered in this statement, please refer to relevant national laws and regulations. In case of conflict between this statement and national laws and regulations, the national laws and regulations shall prevail.

4. If it infringes your legitimate rights and interests, please contact us in time, and we will delete the relevant content at the first time!

Contact: 010-60259772
E-mail: [email protected]

Communicate with professional consultants now!

  • National Service Hotline

    400-700-4979

  • Beijing Service Hotline

    010-60259772

Please be assured to fill in the information protection
Online consultation

Disclaimer

Thank you very much for visiting our website. Please read all the terms of this statement carefully before you use this website.

1. Part of the content of this site comes from the network, and the copyright of some articles and pictures involved belongs to the original author. The reprint of this site is for everyone to learn and exchange, and should not be used for any commercial activities.

2. This website does not assume any form of loss or injury caused by users to themselves and others due to the use of these resources.

3. For issues not covered in this statement, please refer to relevant national laws and regulations. In case of conflict between this statement and national laws and regulations, the national laws and regulations shall prevail.

4. If it infringes your legitimate rights and interests, please contact us in time, and we will delete the relevant content at the first time!

Contact: 010-60259772
E-mail: [email protected]