Standard one: Follow consistent guidelines, establish standards and follow
whether the control is used, prompt message wording, or color, window layout style, follow the uniform standards, achieve true consistency.
the benefits of this:
1: Enable users to use up to build a precise heart model, using a skilled interface, switch to another interface can easily infer a variety of functions, sentence understanding does not need to bother to understand
2: Reduce training, support costs, support staff will not be laborious to guide one by one.
3: To the user to unify the feeling, does not feel the confusion, the mood is joyful, the support degree increases
procedure:
Project team has experienced people to establish UI specifications:
Art offers a tonal color scheme that provides an overall color list
Interface Control program personnel, user experience personnel to put forward a reasonable unified use of the 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)
The
control style allows you to modify its style, Hue
reference other software advanced operation, extraction of the project useful functions to use, absolutely can not blindly follow, aimless.
According to the need, the design special operation control, the criterion is: simplifies the operation, achieves certain function goal
interface Implementation personnel and the art of discussion control can be implemented, (if not implemented this step, will lead to each other's work is not satisfied with the confusion will also produce inconsistent). Repeat the above work.
Establish a rationalization document "UI standards" describe the above specification,
forced interface designers to understand, and as a development guideline,
· SQA personnel to monitor whether the development personnel to follow, timely warning to developers.
II: (color) Use appropriate color, follow the principle of contrast:
1: Unified tone, choosing the right hue for the type of software and the user's working environment:
such as: security software, according to industry standards, you 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
2: If you do not have your own series of interfaces, using the standard interface can be less to consider this aspect, and the operating system, to read the standard color table
3: Color blindness, anomalous trichromatism users, even if the use of special colors to indicate the focus or special things, you should use special indicators,? quot;!,? Emphasis number, and icon, etc.
4: Color scheme also needs testing, often because of display, graphics card problems, color performance of each machine is different, should undergo rigorous testing, different machines for color testing
5: Follow the principle of contrast: Use dark text on a light-colored background, light text on a dark background, blue text that is easy to identify with a white background, and difficult to distinguish on a red background, because there is not enough contrast between red and blue, and the contrast between blue and white is great. Unless special occasions, to eliminate the use of strong contrast, people have a sense of disgust color. 6: The entire interface color as little as possible using categories of different colors
itop Color Table
specific standards refer to fine arts statistics academic standards. The construction of the color table, for graphic design, packaging design plays a standard reference role for the program interface designers design controls, form color to play a rule-based role.
III: (Resource) Resource
a colorful human-computer interaction interface, without the exquisite mouse cursor, icons and instructions to the picture, the bottom of the map and so on.
1: Also need to follow the uniform rules, including the above color table, the creation of steps should be as far as possible to form the standard, reference itop OutlookBar icon Design Standard
2: There is a standard icon style design, there is a unified composition layout, there is a unified tone, contrast, color levels, as well as Picture style
3: The bottom of the map should be melted into the bottom, using light, low contrast, as little as possible to use color.
4: Icons, images should be clearly expressed meaning, follow the common standards, or the user machine easily associated with the object, absolutely not allowed to draw the default wonderful patterns.
5: The mouse cursor style unified, try to use system standards, to eliminate duplication of the situation, such as some software in the shape of a hand is 4 minutes different look.
: "How to create the XP icon" http://www.microsoft.com/china/msdn/library/dnwxp/html/winxpicons.asp
attachment: Itop Outlook howto.doc Description Itop project, OUTLOOKXP style icon production method
Four: (font) Font
use a unified font, the choice of font standard depends on the operating system type.
Chinese standard font, "XXFarEastFont-Arial", the English standard Microsoft Sans Serif does not consider the special font (official script, cursive, etc., special cases can be replaced with pictures), to ensure that each user to use the display is very normal.
The
font size is based on system-standard fonts, such as MSS Font 8 points, the small fifth word (9 lb) fifth (10.5 lb) of the song body.
all controls try to use uniform font properties, except for special prompts, enhanced display, and so on
Itop uses BCB, all controls default to use parent font, do not allow modification, which is conducive to uniform adjustment.
the processing of system size font property changes.
Windows system has a desktop settings, set large font properties, many interface designers are often annoyed with this, if the design to follow Microsoft's standards, all use relative size as the size of the control settings, when switching the size of the font, the relative does not have any special problems.
However, because it is often convenient to use the lattice as a window design unit, resulting in changes in the large font, layout confusion.
in this case, it should be handled accordingly:
1: Write the program automatically adjusts the size, the lattice value multiplies a corresponding proportion
2: All uses the dot matrix as the unit, ignores the system font adjustment, this can reduce the adjustment big font to bring the trouble. This method is more used in Bcb/delphi, but the inevitable result is that the system is not unified.
Five: (text) text expression
prompt information, help document text expression follow the following guidelines:
1: Colloquial, polite, use you more, please, do not use or use professional terminology, eliminate typos
2: Punctuation comma period comma the use of semicolons, suggesting more information, should be segmented,
3: Warning, information, error using the corresponding representation method
4: Use a unified language description, such as a close function button, which can be described as exit, return, or close, should be uniform.
5: According to the user different use of the words tone intonation, such as special software, can appear a lot of professional belong to the user for children: This can be cordial and amiable, elderly users should be mature and stable. Set standards to follow.
Six: (style) control style, do not use error controls, control features are specific
has a design of the same style of control, if you do not have the ability to design a set of controls, then use the standard control, absolutely not nondescript, disorderly
do not use controls incorrectly, for example:
use button style to do ttable function, take the main Menu a single display copyright information,
A unified type of control operates the same way, such as a control double-click to perform some action, and the same control, double-click without any reflection
• A control that only does a single function and no longer uses
many people in order to write procedures convenient, like a control in different situations to do different functions, these users to understand the initial increase in difficulty, only the user can understand. such as
Change the red option, the parameters on the left represent different settings, perhaps because the control or programming is saved, but only skilled users are used, in this case the solution is:
1: Grouping, using double controls.
2: Use the table page to give the user a noticeable visual change
Seven: (ALIGN) control layout, windows are not crowded, combined controls by function
1: The screen can't be crowded
crowded screens are hard to understand and therefore difficult to use. Test results (mayhew,1992 year) screen overall coverage should not exceed 40%, and the packet clock coverage should not exceed 62%.
make people look, not too crowded, not too loose.
the entire project, with uniform control spacing, and by resizing the form, even if the form is the same size, leave some areas blank, and do not break the line spacing between controls.
2: Area arrangement
a row of controls, aligned vertically, and the control spacing is basically consistent
rows and rows are the same spacing, and the form border distance should be greater than the spacing between lines (spacing plus edge is left blank).
when there are multiple editing areas on the screen, you want to organize these areas visually and efficiently.
3: Data alignment should be appropriate
description text, Chinese version should use Chinese full-width colon, vertical alignment, and press the colon right to it, as shown. The width of the vertical control is as consistent as possible. and left-aligned.
For example, the amount of characters to wear should be aligned according to the decimal point, or right align
4: Effective combination
logically associated controls should be grouped to indicate their relevance, whereas any items that do not want to light should be styled, grouped in intervals between project collections, or use boxes to divide the respective areas.
For example: The following interface, select the search method to determine whether the number range is to indicate the range of the main call number or called number range, and the way to account,
should be modified to: the search method and the way to exchange the account. Lest the user be misunderstood.
5: When window scaling, control position, layout:
in order to make the interface does not appear run 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 the vcl of
Bcb/delphi, most controls have layout properties:
Some controls have alignment properties that can be used to make layout adjustments: Tcustompanel,tmemo, and so on, to the left by the upper right and the full (Client) attributes, used to automatically adjust according to the layout.
Most controls have attribute anchors, inside and out Akleft, Aktop, etc. if true, indicates whether the distance relative to each edge changes. This can be further designed for typesetting work.
Eight: (tab order) tab
idioms, reading order, from left to right, from top to bottom
the tab-key activation order of the controls in the form, TabOrder,. Bcb/delphi use form Design right-click menu to select TabOrder Settings
