Interface design and test rules [Repost]

xiaoxiao2021-03-06  17

The interface is the most direct layer interacting with the user, and the quality of the interface determines the user's first impression of the software. Moreover, the design of a good interface can guide the user to complete the corresponding operation, and play a guide. At the same time, the interface is like a person's face, has a direct advantage of attracting users. The design reasonable interface can bring easy feelings and success. On the contrary, due to the failure of interface design, it is possible to make the user's fear and abandonment in the user's fear. The current interface design causing the extent to which software designers' attention is still not enough, until the rise of the recent web production is favored by experts.

The current popular interface style has three basic methods: multi-form, single-window, and resource manager style, regardless of the style, the following rules should be valued.

1: Easy to use:

The name of the button should be easy to understand, accurately, and discard the two-visible words, and easy to distinguish between other buttons on the same interface, the best of the energy. Ideally, the user can know the functionality of the interface without consulting the help and performs the correct operation.

Easy to use the rules:

1): Complete the same or similar functions use the Frame box, and the common button will support shortcuts.

2): Complete the element of the same function or task is placed in a centralized position, reducing the distance of the mouse movement.

3): Press the function to divide the domain block, enclose the Frame Frame, and have a functional description or title.

4): The interface must support the keyboard automatic browsing button, that is, press the automatic switching function of the Tab key.

5): The first control of the input and important information should be entered on the TAB sequence, and the position should also be placed on the window.

6): The number of controls on the same interface is preferably not more than 10, more than 10, can consider using the paging interface display.

7): Page interface to support fast switching between pages, common combination shortcut Ctrl Tab

8): The default button to support Enter and the option, that is, press Enter to automatically perform the default button corresponding to the operation.

9): The writable should be given after the illegal input should be given and the focus can be automatically obtained.

10): The order of Tab keys and the sequence of sequences of the control are always, and the popularity is currently from top to bottom, while the line is from left to right.

11): The check boxes and options boxes are arranged in the highlights of the selection.

12): The check box and option box must have the default option and support TAB selection.

13): Options The same time Multi-use option box without the drop-down list box.

14): Use the drop-down box when the interface space is small without the option box.

15): The number of options is less than the option box, reverse the drop-down list box.

16): Professionalism Software To use the relevant professional terms, the versatile interface will advocate the use of versatility.

2: Normative:

Usually the interface design is designed according to the specifications of the Windows interface, which contains the standard format of the "Menu Bar, Toolbar, Toolbox, State Bar, Strike, Right-click Shortcut Menu", which can be said: The higher the interface, the higher the standardization, then The better, the better, the better. Small software generally does not provide a toolbox.

Normative rules:

1): Common menus must have a command shortcut.

2): The menu that completes the same or similar functions is open to the same position with the horizontal line.

3): The icon can be intuitive representatives before the menu.

4): The menu depth general requires up to three levels.

5): Toolbar requirements can be customized according to user requirements.

6): The toolbar of the same or similar function is placed together.

7): Each button in the toolbar must have timely prompt information.

8): The length of a toolbar cannot exceed the screen width.

9): The toolbar can be intuitive representative to complete the operation.

10): The system-wide toolbar settings the default placement position.

11): Toolbars can consider using the toolbox too much.

12): The toolbox has an increased reduction, and the user is customized according to the requirements.

13): The default total width of the toolbox should not exceed 1/5 of the screen width.

14): Status must be able to display the information that users do need, often use:

Current operation, system status, user location, user information, prompt information, error message, etc.

If a certain operation takes a long time, the progress bar and process tips should be displayed. 15): The length of the scroll bar should be transformed in time according to the length or width of the display information, so that the user understands the location and percentage of display information.

16): The height of the status bar is appropriate to place the five good words, and the width of the scroll bar is slightly narrow than the status bar.

17): The menu and toolbar must have a clear boundary; the menu requires convex display so that there is still a three-dimensional sensation when the tool strip is removed.

18): 5 fonts are usually used in menus and status bars. The toolbar is generally wider than the menu, but not too many, otherwise it seems uncoordinated.

19): Right-click the shortcut menu with the same criteria as menu.

3: Help facilities:

The system should provide detailed and reliable help documentation, you can seek a solution when you use it when you use it.

Help facilities are:

1): Help the performance introduction in the documentation and instructions are consistent with the system performance. (Our system helps documentation is the instructions of the ancestors of the system, which is confused).

2): When packaging a new system, a modified place to make a corresponding modification in helping documents.

3): Provide the function of timely calling the system. Commonly used F1.

4): You should be able to locate the help location relative to this operation when calling your help on the interface. That is to say, help have immediate targeted.

5): It is best to provide the current popular online help format or HTML help format.

6): Users can use keywords in helping to search for the help index, of course, should also provide help topic.

7): If you do not provide a written help document, it is best to have the function of printing help.

8): In the help, we should provide our technical support. Once the user is difficult to solve the new help method.

4: Rationality:

The position of the screen diagonal intersection is where the user's direct view is, and in the top quarter, it is easy to attract the user's attention. When placing the form, pay attention to the use of these two locations.

Rationality rules:

1): The center position of the parent form or the main form should be near the diagonal focus.

2): The sub-form position should be in the upper left corner or in the main form.

3): When multiple subforms pop-up, it should be shifted in the lower right to display the title of the form.

4): Important command buttons are placed on the interface on the interface with a more frequent button.

5): Error Use the button that is easy to cause the interface to exit or close should not be placed in the easy point position. The opening or final with the vertical roll is the easy position.

6): The buttons that are not related to the ongoing operation should be masked (using gray display in Windows, which cannot be used).

7): The operation that may cause data that cannot be restored must provide confirmation information to give the user to give up the chance of choice.

8): The illegal input or operation should have sufficient prompts.

9): If there is a problem in the operation, there must be prompted to make the user understand the error to avoid the formation of indefinitely.

10): Tips, warnings, or wrong descriptions should be clear, clear, appropriate.

5: Beautiful and coordination:

The interface should be suitable for aesthetic perspective, feel coordinated and comfortable, can attract users' attention within a valid range.

Beautiful and coordinated rules:

1): Long width is close to the proportion of gold points, avoiding the long-width ratio disorder, or the width exceeds the length.

2): The layout should be reasonable, should not be too intensive, and cannot be too empty and reasonable.

3): The button is basically similar, avoiding too long names, lests from excessive interface.

4): The size of the button should be coordinated with the size and space of the interface.

5): Avoid placing a large button on the open interface.

6): The rear interface of the placed control should not have a large vacancy location.

7): The size of the font should be coordinated with the size ratio of the interface, and the Song's 9-12 is more beautiful in the font used, rarely uses the font of the 12th.

8): Prospects and background color matching reasonable coordination, the contrast is not too big, it is best to use dark, such as Dahong, Green, etc. Common color considers using Windows interface hue.

9): If you use other colors, the main color is gentle, with affinity and magnetic force, and resolutely put the color of your eye.

10): The main color commonly used in large systems has "# E1e1e1", "# Efefef", "# c0c0c0", etc. 11): The interface style should be consistent, the size, color, and font must be the same, unless there is a place where art processing or special requirements are required.

12): If the form supports minimizes and maximizes or enlarges, the controls on the form should also zoom with the form; avoid only the form of the form and ignore the zoom of the control.

13): For interfaces containing buttons, it is generally not supported, that is, only the upper right corner is only closed.

14): When the parent form supports zooming, the sub-form is not necessary to zoom.

15): If you can provide users with custom interface style, it is better, and you choose color, font, and so on yourself.

6: Menu location:

The menu is the most important element on the interface, and the menu location is organized according to the feature.

Menu location rules:

1): Menu usually use "common-primary-secondary-tool-help" position arrangement, in line with popular Windows style.

2): Commonly used "File", "Edit", "View", etc., almost every system has these options, of course, according to different systems.

3): The drop-down menu is to be packet according to the meaning of the menu option, and cut in accordance with certain rules, separated by horizontal line.

4): The use of a group of menus has a successful request or a wizard, should be arranged in the order.

5): The menu item without the order is arranged according to the frequency and importance, which is commonly placed, is not commonly placed; it is important to start, the secondary is placed behind.

6): If there are more menu options, the length of the long-length menu should be used to reduce the principles of depth.

7): Menu depth general requires up to three levels.

8): See 8 in a fast command method for a commonly used menu.

9): The menu that is not related to the operation is handled by a mask, if the dynamic load mode is used - that is, only the menu is displayed - the best.

10): The icon before the menu is not too big, and the word high is always the best.

11): The width of the main menu is close, and the number of words should not be more than four, and the number of words per menu can be the same.

12): The number of main menu should not be too much, preferably a single row arrangement.

7: Uniqueness:

If you follow the industry's interface criteria, you will lose your own personality. It is especially important to design your own unique-style interface in the framework for the above specifications. Especially in the circulation of commercial software, there is a good way of migration.

Unique rules:

1): There should be a unit introduction or product introduction on the installation interface, and have its own icon.

2): The main interface, it is best to have a company icon on most interfaces.

3): There is a logo of this product on the login interface, including the company icon.

4): The "About" of the Help menu should be copyrighted and product information.

5): The company's series of products should keep a continuous interface style, such as background colors, fonts, menu arrangements, icons, installation processes, buttons, etc. should be substantially consistent.

8: Combination of shortcuts

Using shortcuts in the menu and buttons allows users who like to use the keyboard to operate faster. Most of the use of shortcut keys in Westein Windows and its application is consistent.

Menu:

1): The combination of transactions is:

Ctrl-D Delete

Ctrl-f looks for

Ctrl-h replacement

Ctrl-i insertion

Ctrl-N new record

Ctrl-s preserved

Ctrl-o opens

2): List:

Ctrl-r refresh

Ctrl-G positioning

Ctrl-tab Next Page or Netter Section Browse the same page control

3): Edit:

Ctrl-a all choice

Ctrl-C copy

Ctrl-V paste

Ctrl-x cut

Ctrl-z revoked operation

CTRL-Y recovery operation

4): File operation:

Ctrl-p printing

Ctrl-w closed

5): System menu

ALT-A file

ALT-E editing

Alt-T Tool

Alt-w window

Alt-h Help

6): MS Windows Reserved Key: CTRL-ESC Task List

CTRL-F4 Close window

ALT-F4 end application

Alt-tab Next application

ENTER default button / confirmation operation

ESC cancel button / cancel operation

SHIFT-F1 context-related help

In the button:

It can be adjusted according to the needs of the system, and the following is only a commonly used combination.

ALT-Y is determined (yes)

Alt-c cancellation

ALT-N No

ALT-D Delete

ALT-Q exits

ALT-A Add

ALT-E editing

Alt-B browsing

ALT-R Read

ALT-W

These shortcuts can also be used as a standard for developing Chinese applications, but can also use the beginning of Chinese pinyin (not recommended).

9: Safety considerations:

In the interface, the error rate is controlled by the following manner, which greatly reduces the damage caused by the user's human error. Developers should try to take into account various possible problems, so that the error can be minimized.

If you use a protective error, you exit the system, this error is easier to make users lose confidence in the software. Because this means that the user wants to interrupt the idea and re-logs in, and the operation has been lost because there is no storage disk.

Safety rules:

1): Most importantly, exclude errors that may make applications aborted.

2): Be careful to avoid invalidity of invalidity as much as possible.

3): Use the related control to limit the type of user input value.

4): When only two likelihoods have been made, only two boxes can be used.

5): When the choice may be more, you can use the check box, each selection is valid, and the user is not possible to enter any of the invalid options.

6): When elect, you can use a list box, drop-down list box.

7): In an application system, developers should avoid the user to make unauthorized or meaningless operations.

8): Plus or mask for input characters or motions that may cause fatal errors or system error.

9): There must be remedies for the operation that may have serious consequences. Users can return to the original correct state by remedial users.

10): Judging the input of some special symbols, characters conflicting with the symbols used by the system and prevents the user from entering the character.

11): It is best to support the error operation, such as canceling a series of operations.

12): You should prevent the user from performing only the input only after entering the valid character.

13): The cancel function should be provided for a longer operation that may cause a wait time.

14): Special characters often have ;; '"> <,`': "[" {, / |}] =) - (_ * && ^% $ # @!, .. / also has spaces. In addition, pay attention to the distinction between all corners and half-width symbols)

15): Restrictions on the conflict with the system use of the system.

16): When reading the information entered by the user, select whether to remove the front and rear spaces as needed.

17): Some fields that read into the database do not support the middle spaces, but users need to enter intermediate spaces, which is handled in the program.

10: Multi-window Application & System Resources:

Good design is not only fully capable, but also takes up the minimum resources as much as possible.

Application details:

1): In multi-window systems, some interface requirements must be kept at the top, avoiding the user when the user is open, and even minimizing other windows to display the window.

2): Automatically unload memory after the main interface is loaded, allowing the Windows system resources occupied.

3): Turn off all forms and systematically exit all system resources, unless it is required to run in the background.

4): Try to prevent exclusive use of the system.

转载请注明原文地址:https://www.9cbs.com/read-42228.html

New Post(0)