What specifications should be followed for UI interface design

One: Follow consistent guidelines, establish standards and follow

Whether the control is used, prompts the wording of the message, or color, window layout style, follow the unified standards, to achieve true consistency.

Design

The benefits of this are:

1: So that users can build up a precise heart model, using a skilled interface, switch to another interface can easily speculate on a variety of functions, the statement understanding and do not need to bother to understand

2: Reduce training, support costs, support staff will not be laborious to guide each.

3: Give users a unified feeling, do not feel confused, happy mood, support increased

Practice:

The project team has experienced people to establish UI specifications:

• The artist provides a tonal color scheme that provides an overall color table

• Interface control program staff, user experience personnel to make reasonable uniform use of the controls library. Reference standard interface Usage specification:

Control features follow industry standards, Windows platform see Microsoft User Experience (MSDN, Chinese has been translated and published, project team must have one)

Control styles can be uniformly modified in the allowed range of styles, tones

Refer to other software advanced operation, extract useful functions for this project, in order to use, absolutely can not blindly follow, diffuse no purpose.

According to the need, design the special operation control, the criterion is: simplifies the operation, achieves certain function goal

• Interface implementers and artwork the control can be implemented, (if this step is not implemented, it will result in dissatisfaction with each other's work, and will create inconsistent confusion). Iterate over the above work.

• The creation of a rationalized document, UI standards, describing the above specifications,

• Force the interface designer to understand, and as a development guideline,

· SQA personnel to monitor whether the developers follow, timely warning developers.

Two: (color) Use appropriate color, follow the principle of contrast:

1: Unified tone, select the appropriate hue for the type of software and the user's working environment:

such as: Security software, according to industry standards, can choose yellow, green embodiment of environmental protection, blue performance fashion, purple performance romantic and so on, light can make people comfortable, dark background make people do not feel tired and so on

2: If you do not have their own series of interfaces, the use of standard interface can be considered less than this aspect, to be unified with the operating system, read the System standard color table

3: Color-blind, blindness users, even if the use of special colors to express the focus or special things, you should also use special indicators,? quot;!, accent marks, and icons, etc.

4: The color scheme also needs to test, often due to the display, graphics card problems, color performance of each machine is not the same, should undergo rigorous testing, different machines for color testing

5: Follow the principle of contrast: the use of dark text on a light background, light text on a dark background, blue text is easy to identify with a white background, and on the red background is not easy to distinguish, because red and blue is not enough contrast, and blue and white contrast is very large. Unless special occasions, to eliminate the use of strong contrast, so that people have a sense of disgust color. 6: The whole interface color as little as possible using different colors of the category

Itop Color Table

The specific standards refer to the statistical academic standards of fine arts. The construction of color table plays a standard role in graphic design and packaging design, and it is a rule-based function to design control and form palette for program Interface designers.

Three: (Resource) resources

A colorful human-computer interaction interface, without the beautiful mouse cursor, icons and indicator pictures, basemaps and so on.

1: Also need to follow the uniform rules, including the establishment of the above color table, the establishment of the icon steps should be as far as possible to form the standard, reference itop outlookbar icon Design standards

2: Standard icon style design, with a unified composition layout, there is a unified tone, contrast, color scale, and picture style

3: The basemap should be in the basemap, using light, low contrast, as little as possible to use color.

4: Icons, images should be very clear expression of meaning, follow the common standards, or the user machine easily associative to the object, absolutely not allowed to draw the default wonderful pattern.

5: The mouse cursor style is unified, try to use the system standards, to eliminate duplication, such as some software in the shape of a hand has a different appearance of 4 minutes.

such as: "How to create XP icon" http://www.microsoft.com/china/msdn/library/dnwxp/html/winxpicons.asp

Accessories: Itopoutlookhowto.doc Description itop project, Outlookxp style icon making method

Four: (font) fonts

With unified fonts, the choice of font standards depends on the operating system type.

Chinese adopt standard font, "song Body", English use standard microsoftsansserif do not consider special font (script, cursive, etc., special circumstances can use picture to replace), to ensure that each user display is normal.

The font size is based on system standard fonts, such as MSS font 8 lbs, Arial small fifth word (9 lb) fifth (10.5 lb).

All controls use the same size font attributes as possible, except for special informational, enhanced display, and other exceptions

Itop with BCB, all controls use Parentfont by default and do not allow modification, which facilitates uniform adjustment.

• System size Font property changed processing.

Windows system has a desktop settings, set the large font properties, many interface designers often annoyed with this, if the design to follow the standards of Microsoft, all using relative size as the size of the control set, when switching the size of the font, relatively no special problem.

However, because it is often convenient to use the lattice as a window design unit, resulting in the change of large fonts, the layout of the problem of confusion.

In this case, the corresponding treatment should be done:

1: Write the program automatically adjust the size, the lattice value multiplied by a corresponding proportion

2: All using the dot matrix as a unit, ignoring the system font adjustment, this can reduce the difficulty of adjusting the large font. This method is used in Bcb/delphi, but the inevitable result is not unified with the system.

V: (text) text expression

The following guidelines are followed for prompt information, help document text expression:

1: Colloquial, polite, more use you, please, do not use or less use of professional terminology, to eliminate typos

2: Segmentation comma period comma the use of semicolons, the information is more informative, should be segmented,

3: Warning, information, error using the corresponding representation method

4: Use a unified language description, such as a close function button, can be described as exit, return, close, you should unify the provisions.

5: According to the user different use the corresponding words tone and intonation, such as special software, can appear a lot of professional belong to the user for children: This can tone kind, elderly users should be mature and stable. Set standards to follow.

VI: (style) control style, do not use the error control, control function to be specificity

Have a design of the same style of control, if you do not have the ability to design a set of controls, the use of standard controls, absolutely not nondescript, disorganized

• Do not use controls incorrectly, for example:

Use button style to do ttable function, take the main menu to display the copyright information,

• Uniform types of controls operate the same way, for example a control double-click can perform certain actions, while the same control, double-click without any reflection

• One control is only a single function, no longer used

Many people in order to write the program convenient, like to put a control in different situations to do different functions, these to the user's initial understanding to increase the difficulty, only the user can understand. For example

Change the red option, the left side of the parameter represents a different setting, perhaps because in order to save the control or programming amount, but only the skilled user back to use, in this case the workaround:

1: Grouping, using a double-part control.

2: Use the table page to give the user a noticeable visual change

Seven: (ALIGN) control layout, Windows not crowded, grouped by function control

1: The screen is not crowded

The crowded screens are hard to understand and difficult to use. Test results (mayhew,1992 year) the overall screen coverage should not exceed 40%, and the packet clock coverage should not exceed 62%.

It's not too crowded or too loose to look at.

The entire project, with uniform control spacing, adjusts the size of the form to match, even if the size of the form is unchanged, rather than breaking the spacing between the controls.

2: Area arrangement

A row of controls, aligned vertically, with a basic consistency of control spacing

The spacing between rows and rows is the same, border distance from the form should be greater than the spacing between lines (spacing plus edge is left blank).

When the screen has multiple editing areas, you want to organize these areas visually and efficiently.

3: Data alignment to the appropriate

For descriptive text, the Chinese version should use the Chinese full-width colon, when aligned vertically, and press the colon right against it. Keep the width of the vertical control as connected as possible. And align to the left.

For example, the amount of characters worn should be aligned according to the decimal point, or right-justified

4: Effective Combination

Logically associated controls should be combined to indicate their relevance, whereas any items that do not want to be light should be styled, grouped by interval between project collections, or divided into areas using boxes.

For example: The following interface, select the search method to determine whether the range of numbers is called the calling number range or the number range, and the method is not

It should be modified to: the search method and the billing method swap location. In order to prevent users from misunderstanding.

5: Control position, layout when window is scaled:

In order to make the interface does not appear running version or ugly situation, the solution:

1: Fixed window size, not allowed to change size,

2: Change the size of the window, in the OnSize when the control position, the size of the corresponding changes.

In Bcb/delphi VCL, most controls have layout properties:

Some controls have alignment properties that can be used to make layout adjustments: Tcustompanel,tmemo, and so on, left-to-right up and down and full (Client) attributes, used to automatically adjust according to the layout.

Most controls have property anchors, which is true if the distance between the upper and lower left and right akleft,aktop, or not, indicates whether the distances relative to each edge change. This can be further designed for typesetting work.

Eight: (TabOrder) tab order

Idioms, reading order, from left to right, top to bottom

The tab activation order of the controls in the form, TabOrder,. Bcb/delphi Use the form design right-click menu to select TabOrder Settings, VC in the form Res edit area using Ctrl+d

Nine: (shortcutkey&accelerator&popmenu) shortcuts, accelerators, and pop-up menus

• Shortcut keys:

1: The global shortcut menu is described in the CTRL+XXX incorporation help list.

2: Shortcut keys write help, special instructions, and emphasize use when using training

• Accelerator key:

1: Use the non-Destructive default button, enter, ESC the correct use of a form, there is a default accelerator key, such as a carriage return to activate the current window is set to Default button action, ESC means to close the window.

When you call the default button action and close the action, you should not do a destructive action, to avoid the user error operation of the degree of harm, such as the deletion of data and other functions of the button as the default button. When a user submits a lot of data, they should block ESC, or leave a prompt to warn the user whether to save the submission.

2: Can receive action control must have accelerator key, unified accelerator key description (&A)

For the use of keyboard, operable controls should have accelerator keys, accelerator key definition criteria for the first letter of the English word, if the same form is repeated with a second letter, and so on, then the acceleration is ALT + This accelerator, using a uniform method identified in the interface, such as XXX (A) or WPS's a.xxx English can be directly under the letter to mark the underline cancel,

For controls such as an edit that cannot display a shortcut key like a button, the shortcut key is displayed in the label of the edit description.

• Popup Menu

The secondary menu must have a corresponding button or menu option on the visual interface.

As the secondary menu by the user click the left mouse button or other actions can be recalled to display to the user. Can not be clearly displayed to the user, so the corresponding options should be available in other ways, such as the interface has a corresponding control or popup Right-click menu button.

10: (ACTION) User interaction

1:disable, not notvisible.

For a feature to sometimes allow users to not be allowed to use, then this control can not be easily hidden, should use the Disable property to be represented, so as to prevent users from discovering the control disappeared after try no policy

2: Window pop-up position to be obvious

Click on a control, pop-up window or menu, should give a clear hint, the minimum requirement is to overwrite the location just clicked, let the user easily jump to the new interface.

3: Perform action to prompt

To give users a visual feeling at the same time, write a program should pay attention to the user's interactive feelings, UI as a man-machine dialogue tool, the user did any action, should give users a visual or auditory, tactile cues. And this hint should be obvious, but should not prompt too long, you can have the following methods:

When a user clicks a button to do a job:

1: Pop-up interactive dialog box lets the user click on Confirm.

2: Change the UI control parameter hint: (Processing without user confirmation of the prompt, there is a certain delay, or after the user keys automatically clear.) )

Such as: Change the title bar string, display "message: Submit Success", or specifically set a status bar, tlable, etc. to be used to prompt.

3: Auditory cues:

Make a special sound prompt when you are sure that a sound card is available for the user to hear. Generally as an aid to important hints. Sound should not be too long, emergency error should be short, high frequency, successful tips should be soothing, easy. Wait a minute......

11: (Help) Online assistance:

When to help, when not to help

1: System default, Industry-standard control operations do not need to describe each, only the special control needs to be described 2: special operation, special function interface, in the interface with the control directly connected to the corresponding Help file

3: Special settings in detail, should be in the interface with simple and concise statement, or good tiptool, and by the second step to help

Help Documentation:

Structured, divided by functional modules

It is important to describe how the function can be implemented in the software

Help file is to help users better use of software, the wording should be appropriate, simple, easy to understand, each sentence should have a purpose, to help users solve the problem

Help files are not ads, commercial software is not allowed to advertise. The purpose of describing company information is to facilitate users to find after-sales support without means, URL connection, mailbox address, phone number is not allowed to be invalid.

12: Clarification of rules at release

The unification of things to be elaborated, and a typical description, into the Help and user manual, plus a glossary

Appendix:

When the artist participates in:

Art as an interface to beautify the main personnel, not only has the artistic design, packaging design talent, but also should be interspersed throughout the project, to the interface program designers to put forward a systematic reference opinion.

1: Early software design, art participation needs to understand, analysis of similar software interface has shortcomings, proposed the main color, typical interface style, as well as the idea of the entire art packaging.

2: In the interface prototype design process, with the developer to modify, discuss the final presentation style, and establish UI standards.

3: In the process of program development, provide standard style resource files (icon,cur,bmp etc.), and summarize the design process of the unified style resources, form the normative document *.

4: Product-related, to assist in the production of Help files, website style and participation in production, production with promotional pictures, animation, product packaging, posters and so on.

What specifications should be followed for UI interface design