User Interface Design Style description

Source: Internet
Author: User
From: http://hi.baidu.com/yuanzb/blog/item/1a573538b6eda821b9998f26.html
1 Introduction
1.1 Design Description
This document describes the design style of the system interface. Design Design and interpretation in the manual.

1.2 Concepts and Definitions
User Interface: Also known as man-machine interface, enables communication between users and computers to control computers or transmit data between users and computers to obtain system components.
Gui: graphical user interface (GUI), a visual user interface that uses a graphical interface instead of a text interface.

1.3 user assumptions
Users who use this system are defined as: For applications ProgramOr the general usage of computers. Hope The interface conforms to the Windows 9x, especially the office97 style, and has high requirements on ease-of-use and simplicity. It does not require fast interface interaction (that is, it does not require fast interface interaction through commands ).

2 User Interface Design Specifications
2.1 User Interface Design Principles
The system adheres to the graphic user interface (GUI) design principles, and the interface is intuitive and transparent to users: User contact Software Then, you can easily use the corresponding functions on the interface without any training.
The interface designer should understand that the user in the software is the core of all processing, and there should be no application to decide the processing process. Therefore, the user interface should be controlled by the user to control how the application works and how to respond, instead of imposing the operation process on the user as needed by the developer.
The interface design can be completed only after confirmation.

2.2 UI consistency
In the interface design, the interface consistency should be maintained. Consistency includes both the use of standard controls and the presentation of the same information, such as the font, label style, color, term, and Display Error information.
1) display information consistency Standard
(1) label prompt: font is not aggravated, ,, black, gray or transparent, no border, right alignment, no colon, generally number 5 (10 );
(2) Date: normal font,,, and 3-D lowered;
(3) Alignment Method:
L left alignment: common text, single number, date, etc.
L right alignment: Numbers, time, and date plus time.
(4) The resolution is 800*600, and the Enhancement color is 16 colors.
(5) The default font is,, and black.
(6) the background color is gray by default.
The layout and display style of the information are for reference. In the same application, the information is displayed in different ways, which will distract users and affect the use of the software, therefore, developers should pay attention to the consistency of expressions in the same software.
2) rational layout principle
Pay attention to the layout of all controls in a window and the artistic nature of information organization, making the user interface beautiful.
In a window, press the tab key. The order of moving focus cannot be disordered. The order of tabs is from top to bottom, and then from left to right. The control that should be input and important information in a screen should be in front of the tab order, and the position should also be placed in a prominent position on the window. The layout is concise, orderly, and easy to operate.
3) mouse and keyboard principles
The principle that the mouse is not needed should be followed: Function Only the keyboard can be used, that is, some necessary buttons and menu items should be added to the design application.
However, many mouse operations, such as double-clicking and dragging objects, cannot be simply simulated by the keyboard. For example, double-click one of the items in a list box to select the item. To enable this function with a keyboard, you must define a button in the window to represent the selected button, as an alternative to the double-click function (or other methods ). For example, if there are two data windows in a window, you can drag one item out of the data window with the mouse and put it in another. If you only use the keyboard, you should set the copy or move menu items in the menu.
4) shortcut keys
Using shortcut keys in menu items allows users who use the keyboard to perform operations faster. In Western windows and Its Application Software, the shortcut keys are mostly used in the same way. The shortcut keys used in the system must be semantically consistent in each configuration item.
Transaction-oriented:
Lctrl-D Delete
Lctrl-F search
Lctrl-I insert
Lctrl-n New Record
Lctrl-s save
Query/List:
Lctrl-o
Lctrl-R
Others:
Lctrl-C copy
Lctrl-H help
Lctrl-P print
Lctrl-V Paste
Lctrl-W disable
Lctrl-x cut
MS windows retention key:
Lctrl-tab next window
Lctrl-ESC task list
LCtrl-F4 Close Window
LAlt-F4 end application
Lalt-tab next application
Lenter default button/confirm operation
Lesc cancel button/cancel Operation
LShift-F1 context-related help
Other shortcuts
Other Shortcut Keys start with a letter in Chinese pinyin.
2.3 wizard usage principles
The processing process of some parts of the application is fixed. You must enter the operation information in the specified order. In order to make the user's Operation Get necessary reference, use the wizard, this makes it easy and clear to use features, but the wizard must be used in a fixed processing process, and the processing process should be no less than three processing steps.

2.4 system response time
The system response time includes two aspects: time length and time variability. The user response time should be moderate. If the system response time is too long, the user will feel uneasy and frustrated. If the response time is too short, the user may increase the operation speed and lead to errors. The variability of the system response time refers to the deviation from the average response time. Even if the response time is long and the response time is variable, it helps you build a stable pace. The following principles are applied to the system response time:
Response time length Interface Design
0-10 seconds
The processing progress is displayed by the help in 10 to 18 seconds.
Display the processing window or progress bar in 18 seconds
A warning should be given when a long period of processing is completed

Interface Design for variable response time
The user does not feel ignored
The user slightly feels that the help provides a variable description
High accessibility and large absolute time difference show high variability tips

2.5 user help facilities
There are two commonly used help facilities: Integrated and attached. The integrated help facilities are designed in the software at the beginning. They are related to the context, and users can directly choose the theme related to the operation they want to perform. By integrating the help facilities, You can shorten the time for users to get help and increase the friendliness of the interface. Additional help facilities are added after the system is built. It is usually an online help with weak query capabilities.
The system provides these two types of help facilities, which are designed and implemented in accordance with the following principles:
1) Some help functions are provided during system interaction, that is, the help of the main operations
2) You can access help through the Help menu, F1 key, and help button (if any)
3) three methods are provided for help as needed: another form, microhelp, and reference to a document.
4) There are two options for a user to return to the normal interaction mode: The Return key and the function key.
5) structure of help information: hierarchical help
6) micro-help: Provided by the status bar or prompt text on the Control

2.6 error messages and warnings
Error messages and warnings refer to the bad information given by the system when a problem occurs. Message The system should follow the following principles for error messages and Warnings:
1) information is described in terms that users can understand;
2) information should provide constructive suggestions on how to recover from errors;
3) information should indicate the potential consequences of errors, so that the user can check whether these situations have occurred or help the user to correct them;
4) Information should be accompanied by visual prompts, such as special images, colors, or flashes of information.
5) the information cannot be judged, that is, the user cannot be accused under any circumstances.

2.7 command Interaction
Because the user of the system is a Windows user, the system does not provide command interaction.

2.8 general interaction principles
The system generally follows the following principles for interaction:
1) Consistency: the menu selection, data display, and other functions should be in the same format.
2) provide meaningful feedback
3) confirm before performing a destructive action
4) cancel most operations on Data Entry
5) Reduce the amount of information that must be remembered between actions
6) in dialog, moving, and thinking Improve Efficiency
7) allow users to make non-malicious mistakes. The system should protect themselves from the destruction of critical crops.
8) sort the actions by function and arrange the screen layout accordingly. The designer should improve the cohesion of commands and action organizations.
9) provides context-related help mechanisms

2.9 information display principles
The system information display follows the following principles:
1) only information related to the current user context is displayed;
2) do not use data to enclose users, so that users can quickly learn information;
3) when consistent tags, standard abbreviations, and predictable colors are used, the meaning of the displayed information should be very clear, and users no longer need to refer to other information sources;
4) generate meaningful error information, as shown in Figure 2.6;
5) Enable indentation and text to assist in understanding;
6) Use Window separation controls to separate different types of information;
7) use the display space of the monitor efficiently.

2.10 data input principles
The system data input follows the following principles:
1) Minimize the number of user input actions;
2) maintain information display and data input consistency;
3) interaction should be flexible to support the flexibility of keyboard and mouse input;
4) Disable inappropriate commands in the context of the current action;
5) allow the user to control the interaction flow. The user can skip unnecessary actions, change the sequence of required actions (if allowed), and recover from the error state without exiting the system;
6) to help all input actions, see section 2.5;
7) eliminate redundant input. If possible, provide the default value and do not allow the user to automatically obtain or calculate the information in the provider.

3. User Interface Design changes and additional instructions
3.1 change description
The user interface design should be changed with the consent of all developers. All developers should modify and design the user interface according to the correct principle.

3.2 additional description
The append user interface design should be released to all developers. All developers should modify and design the user interface based on the append principle.

4 others
None.

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.