1 Introduction
1.1 Writing
This specification gives an interaction design / user interface design guide for window programs under Windows Platform. Strictly speaking, the meaning of interactive design is much wide than the user interface design, but in this article, it will be simple to describe, the two are equivalent.
Refer to "Design Mode - Object-Oriented Software Based", this article also uses "Mode" to describe all kinds of content in the UI design.
Expected readers: interactive design / UI designers, testers, software maintenance personnel, and technical management personnel.
1.2 project background
product name
product name
English abbreviations
Product abbreviation
version number
Product number
Task proposal
Developer
user
Relationship with other systems
1.3 definition
■ Sequence number
Terminology / abbreviation
definition
1.
2.
1.4 Reference
■ Sequence number
Information name
File No
Dates
Publishing unit and author
1.
"Design mode - can be used for object-oriented software
Gang of four
2.
"Breaking through high-tech creative cage - software innovation road"
The father of Alan Cooper, VB
3.
2 overall requirements
2.1 consistency
For UI design, consistency is critical. The consistency has two meanings, the first meaning refers to the same TabSheet, or Form (window), even in the entire software system, emphasizes the overall style, including control color, font, size, spacing, etc.; Two meaning is emphasizing that software products should be consistent with the usage habits that people have developed in the interface style and in use. It should be consistent with the operating system and most popular software.
For example, the definition of button shortcuts, or all the way "Application (& A)" is used, or all use "Application [& A]". On a screen, even asking all the possible BEVEL lengths that appear. Also, all the fonts, colors, the margins, etc. of all control elements, should be consistent.
As shown in the figure below, in the same tabsheet, in order to make the interface more beautiful and the consistency of the overall style, the five edit box / drop-down selection box uses a consistent color and width:
2.2 resolution
Determine the size and relative position of the visible object (form) according to the display criteria of 1024 * 768.
2.3 fonts and colors
The general user interface should use the Song, 9 characters, and the color uses the default CLWindowText.
The color of the available controls uses the default settings (such as the background of the edit box, CLWindow, the color of the content is the background of the button, the background of the button, CLBTNFACE, the text is CLWINDEXT).
Read-only edit box control, which uses the color of CLBTNFACE.
When the control is unavailable, it is required to distinguish the color when the color can be distinguished, and the enable property is set to the FALSE, and the color is adjusted.
2.4 layout
2.4.1 size
Form: The ratio of width and height is required to have aesthetic. The recommended aspect ratio is 3: 2 or 4: 3.
Button: Height 21, the width is based on the text on it. Standard button (as shown "OK" or "Application (& A)") The width should be 75. In one form (or within a tabsheet of PageControl), the width of the required button is required.
Edit box (Edit): Using the default height; the width is based on the use of the use, the width of the container itself and the width of other controls in the container are flexible, and its essentials are neatly drawn. The edit box in the following figure, its width and the width of the tab in the TabSheet are consistent, and the right side of the control is aligned.
Another example is shown below, several editing boxes are consistent, and the buttons of the bottom is aligned.
2.4.2 Alignment for the layout of the control (arrangement), requires each column to align from the left, each line from the top. For the operating button at the bottom of the properties window, you are required to align from the right.
Do not encourage, nor recommendation to add spaces in the label text in order to alignment.
From the left align, as shown by the red line below; from the top, as shown in the green line below; from the right align, as shown in the blue line shown below.
2.4.3 spacing
The control distance from the parent control (container) is 8 pixels. As shown below:
which is
The distance between the peer control (ie controls in one container) is 6 pixels. The control distance from the container is 7 pixels from the right distance and the bottom edge distance. As shown below:
2.5 Patch Symbol
In order to maintain the style of the operating system, in general, the CAPTION of the control must use the punctuation of the English. As shown below:
Some of the messages in the program, if the message content is pure English, use English punctuation; if the message (sentence) is Chinese, the punctuation symbols should be used in Chinese.
The English-speaking punctuation, in addition to the style of better and operating system, it also helps to reduce the work burden on the software system to migrate the international version.
