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

Standardization of website design pages and naming conventions of labels

Source: Shangpin China | Type: website encyclopedia | Time: 2016-05-06
Page normalization

usually Website Design They are designed according to the specifications of the Windows interface, that is, the standard format including "menu bar, toolbar, toolbar, status bar, scroll bar, right-click shortcut menu". It can be said that the more standardized the interface is, the better the usability is. Small software generally does not provide a tool box.
 
Page normalization

Specification requirements:
  • Common menus should have command shortcuts.
  • Menus that complete the same or similar functions are opened at the same position separated by horizontal lines.
  • The icon in front of the menu can visually represent the operation to be completed.
  • The menu depth is generally required to be controlled within three layers at most.
  • Toolbar requirements can be customized according to user requirements.
  • Place toolbars with the same or similar functions together.
  • Each button in the toolbar should have prompt information in time.
  • The maximum length of a toolbar cannot exceed the screen width.
  • The icon of the toolbar can visually represent the operation to be completed.
  • The default placement position is set for commonly used toolbars.
  • If there are too many toolbars, you can consider using the tool box.
  • The tool box should be scalable and customized by users according to their needs.
  • The default total width of the tool box should not exceed 1/5 of the screen width.
  • The status bar should be able to display the information that the user really needs. The common ones are:
  • For the current operation, system status, user location, user information, prompt information, error information, etc., if an operation takes a long time, a progress bar and process prompt should also be displayed.
  • The length of the scroll bar should be able to change in time according to the length or width of the displayed information, so that the user can understand the position and percentage of the displayed information.
  • The height of the status bar is appropriate to place five good characters, and the width of the scroll bar is slightly narrower than the status bar.
  • The menu and toolbar should have clear boundaries; The menu requires a highlight display, so that when the toolbar is removed, it still has a three-dimensional sense.
  • 5 point font is usually used in menus and status bars. The toolbar is generally wider than the menu, but it should not be too wide, or it will look incongruous.
  • Right click shortcut menus follow the same guidelines as menus.

System ease of use

Ease of use means that the functions on the page follow the conventions, for example, the button name is easy to understand, the words are accurate, and it is easy to distinguish from other buttons on the same interface. In this way, users can know the functions on the page and perform relevant correct operations without consulting the help.

requirement:
  • Open a new interface, and the cursor will stay in the first text box to be entered by default;
  • Place the buttons that complete the same or similar functions together to reduce the distance of mouse movement. Common buttons should support shortcuts;
  • Divide the interface into local blocks by function, and enclose them with Frame, with function descriptions or titles;
  • The interface should support the function of keyboard automatic browsing button, that is, press the Tab key to automatically switch;
  • Controls with important information that should be entered first on the interface should be placed first in the tab order, and the position should also be placed in a more striking position on the window;
  • The number of controls on the same interface should not exceed 10. If there are more than 10 controls, pagination interface display can be considered;
  • The paging interface should support quick switching between pages. The shortcut key Ctrl+Tab is commonly used;
  • The default button should support the Enter operation, that is, the corresponding operation of the default button will be executed automatically after pressing Enter;
  • When a writable control detects an illegal input, it should give a description and automatically get the focus;
  • The order of button keys should be consistent with that of controls. At present, it is popular to go from top to bottom and from left to right between rows;
  • Check boxes and option boxes are arranged according to the high and low selection probability;
  • The check box and option box should have default options and support tab selection;
  • When the number of options is the same, use the option box instead of the drop-down list box;
  • When the interface space is small, use the drop-down box instead of the option box;
  • When the number of options is small, use the option box instead of the drop-down list box;
  • Professional software should use relevant professional terms, and generic interfaces should advocate the use of generic words;

Input security requirements

Some rules need to be established on the interface to control the probability of input errors, which will greatly reduce the damage to the system caused by the user's artificial errors. Developers should try to fully consider all possible problems to minimize the possibility of errors. For example, when the program exits the system due to a protective error, users will lose confidence in the software, This means that the user will stop thinking and log in again with time and effort, and all the operations that have been done will be lost because there is no save. Therefore, the input should be verified according to the rules during page design.

requirement:
  • Eliminate errors that may cause abnormal program termination;
  • The invalid data entered by the user should be checked;
  • Use related controls to limit the types of values entered by users;
  • When the user is faced with two or more choices, please use the radio box, and when there may be more choices, you can use the check box;
  • When there are too many options, you can use a list box or a drop-down list box;
  • Ensure that unauthorized or meaningless operations cannot be carried out;
  • Limit or shield the input characters or actions that may cause fatal errors or system errors;
  • Remedial measures shall be taken for operations that may have serious consequences. Users can return to the original correct state through remedial measures;
  • Judge the input of some special symbols, characters that conflict with the symbols used by the system, prevent users from entering the characters, and give input prompts in advance;
  • It is better to support reversible processing for error operations, such as canceling serial operations;
  • Before entering valid characters, users should be prevented from performing operations that can only be performed after input;
  • Cancel function shall be provided for operations that may cause long waiting time;
  • Special characters are common;; ' "><, '':" ["{, |}]+=) - (_ *&^% $# @!~,.?/There are still spaces;
  • When reading the information entered by the user, you should choose whether to remove the front and rear spaces as needed. For example, some fields read into the database do not support spaces in the middle, but the user really needs to input spaces in the middle, which should be handled in the program;
Uniqueness requirements

If you blindly follow the interface standards of the industry, you will lose your individuality. When the framework meets the above specifications, it is particularly important to design an interface with your own unique style. Especially in the circulation of commercial software, it has a very good migration and implicit advertising effect

requirement:
  • The installation interface shall be provided with company introduction or product introduction and its own icon;
  • The main interface, preferably most interfaces should have company icons;
  • The login interface should have the logo of the product and the company icon;
  • There should be copyright and product information in "About" of the help menu;
  • The company's series of products should maintain consistent interface style, such as background color, font, menu arrangement, icon, installation process, button wording, etc. should be generally consistent;

Multi window application and system resources

Well designed software should not only have complete functions, but also take up the minimum resources as far as possible. Therefore, in the case of multiple windows, the following situations should be avoided.

requirement:
  • In a multi window system, some interfaces must be kept at the top level to prevent users from constantly switching or even minimizing other windows to display the window when opening multiple windows;
  • After the main interface is loaded, the memory is automatically unloaded to make the occupied Windows system resources available;
  • Close all forms, and release all system resources occupied after the system exits, unless it is a system that needs to run in the background;
  • Try to prevent exclusive use of the system;
Page element naming
Page element naming

When using javascript for page dynamic control programming, it is necessary to agree on the name reference of page elements and function operations in the program:
Header
Jacket: wrap
Footer: foot

Content: content
Page body: main
Container: container
Title: title
Current: current

Main navigation: mainnav
Top navigation: topnav
Subnavigation: subnav
Side navigation: sidebar
Left navigation: leftsidebar
Right navigation: rightsidebar
Column
Breadcrumb

Menu
Submenu: subminu
Menu content: menu content
Menu capacity: menucontainer
Buttons: button
Form: form
Tab: tab
Article list: list
Scrolling: scroll
Prompt message: msg
Summary
Tag: tag
Label text: tagTitle
Label content: tagContent
Current tag: tagCurrent/currentTag
Search scope: range
Icon: icon
Current location: currentPath
Column definition: column1of3 (the first of the three columns)
Column2of3 (the second of three columns)
Column3of3 (the third of three columns)

Trademark: label
Flag: logo
Banner: banner
Note
Search: search
Search keyword: keyword
Login: Login
Registration: regsiter
Hotspot: hot
News: news
Download: download
Printing: print
Copyright
Service: service
Friendly link: friendlink
Copyright
Tips
Column title: title
Join: joinus
Guide: guide
Service: service
Status: status
Vote: vote
Partner: partner

Other relevant precautions

1. All in figures;
2. Try to use English;
3. No middle bar and underline;
4. Try not to abbreviate unless you can see the words clearly

DHTMLx Control

Naming of controls
Appearance properties of control
Control Usage Rules

Flex Controls

Naming of controls
Appearance properties of control
Control Usage Rules
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]