Ui design specifications

Ui design specifications

I have been working on the UI design for some time, so I have gained a new understanding of the UI and user experience. Now I can sum up the information I have queried and my feelings!

1: ease of use:

The button name should be easy to understand, use accurate words, and discard ambiguous words. It should be easy to distinguish from other buttons on the same interface, so it is best to understand the text. The ideal situation is that you can know the functions of the interface and perform relevant operations without looking at help.

Easy-to-use Details:

1): buttons that complete the same or similar functions are enclosed in a Frame. Common buttons must support shortcuts.

2): place the elements that complete the same function or task in a centralized position to reduce the distance between the mouse movement.

3): divide the local block by function, enclose it in a Frame, and provide a function description or title.

4): the interface must support the keyboard automatic Browse button function, that is, the automatic switch function by pressing the Tab key.

5): the control that should be input and important information on the interface should be in front of the Tab order, and the position should also be placed in a prominent position on the window.

6): the number of controls on the same interface should not exceed 10. If there are more than 10 controls, you can use pagination interface display.

7): The paging interface must support shortcut switching between pages. Commonly Used combination Shortcut Keys Ctrl + Tab.

8): the default button must support the Enter operation, that is, automatically execute the corresponding operation of the default button after pressing Enter.

9): After the writable control detects illegal input, it should provide instructions and automatically obtain the focus.

10): the order of the Tab key must be the same as that of the control. Currently, the top-to-bottom mode is popular, and the lines are left to right at the same time.

11): check boxes and option boxes are arranged based on the high probability of selection.

12): check boxes and option boxes must have default options, and Tab selection is supported.

13): Multiple option boxes are used at the same time without the drop-down list box.

14): the page control uses a drop-down box rather than an option box.

15): if the number of options is small, use the option box. Instead, use the drop-down list box.

16): Professional Software should use related terminology, while the universal interface should advocate the use of universal word eye.

2: Normative:

Generally, the interface design is based on the specifications of the Windows interface, that is, the standard format of "menu bar, toolbar, toolbox, status bar, scroll bar, right-click shortcut menu" can be said: the higher the degree of standardization of the interface, the better the usability. A toolbox is generally not provided for small software.

Regulatory rules:

1): Common menus must have command shortcuts.

2): menus with the same or similar functions are separated by a horizontal line and placed in the same position.

3): The icon in front of the menu can intuitively represent the operation to be completed.

4): Generally, the menu depth must be limited to three layers at most.

5): You can customize the toolbar according to your requirements.

6): place the toolbar with the same or similar functions together.

7) prompt information should be provided for each button in the toolbar.

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

9): the toolbar icons can intuitively represent the operations to be completed.

10): Set the default placement position in the commonly used toolbar.

11) when there are too many toolbar tools, you can consider using the toolbox.

12): The Toolbox must be changeable and can be customized by the user as needed.

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

14): the status bar must display the information that the user actually needs. Commonly used:

The current operation, system status, user location, user information, prompt information, error information, etc. If an operation takes a long time, the progress bar and process prompt should also be displayed.

15): the length of the scroll bar must be changed in time based on the length or width of the display information to help you understand the position and percentage of the display information.

16): the height of the status bar should be set to 5 characters, and the width of the scroll bar is slightly narrower than that of the status bar.

17): the menu and toolbar must have a clear line; the menu must be highlighted so that there is still a stereoscopic effect when the toolbar is removed.

18): The menu and status bar usually use the 5th font. The toolbar is generally wider than the menu, but not too wide. Otherwise, it looks very uncoordinated.

19): the shortcut menu adopts the same principle as the menu.

3: help facilities:

The system should provide detailed and reliable help documents, so that users can seek a solution if they are confused.

Help facility details:

1): The Performance description and description in the help document should be consistent with the system performance. (Our system help documentation is a description of the system's ancestor period, confusing ).

2): When packaging a new system, modify the changes in the help document.

3): promptly call the system help function during operations. F1 is commonly used.

4): when calling help on the interface, you should be able to locate the help location corresponding to this * in time. That is to say, the Help needs to be targeted in real time.

5): it is best to provide popular online help formats or HTML Help formats.

6): You can use keywords to search for the expected help in the Help Index. Of course, you should also provide the help keywords.

7): If you do not provide any written help documentation, it is best to print the help function.

8): Our technical support methods should be provided in the help. Once the user is difficult to solve the problem by themselves, they can easily seek new help methods.

4: Rationality:

The intersection of the diagonal lines of the screen is where the user looks directly. The top 1/4 is a location that is easy to attract the user's attention. Pay attention to the two locations when placing the form.

Detailed rules on Rationality:

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

2): The position of the subform should be in the upper left corner or center of the main form.

3): when multiple subforms are displayed, they should be shifted to the lower right to show the title of the form.

4): Important Command buttons and frequently used buttons should be placed on the interface for attention.

5): buttons that are easy to exit or close due to incorrect use should not be placed in easy points. The start or end of the horizontal column and the end of the vertical column are easy points.

6): buttons irrelevant to ongoing operations should be blocked (highlighted in gray in Windows and cannot be used ).

7): You must provide confirmation information for operations that may result in data recovery failure and give the user the opportunity to give up their selection.

8): Illegal input or operation should be prompted.

9): a prompt should be prompted for errors that occur during the running process, so that users can understand the error source and avoid waiting for an indefinite period of time.

10): the prompt, warning, or error description should be clear, clear, and appropriate.

5: appearance and coordination:

The interface size should be suitable for aesthetic points of view. It feels coordinated and comfortable, and can attract the user's attention within the effective scope.

Detailed rules on appearance and coordination:

1): the length and width ratio is close to the Golden Point. Do not adjust the length and width ratio, or the width exceeds the length.

2): The layout should be reasonable, should not be too dense, should not be too empty, and reasonable use of space.

3): The button size is similar. Do not use too long names to avoid occupying too many interface positions.

4): the button size should be consistent with the page size and space.

5): avoid placing large buttons on open interfaces.

6): After the control is placed, the interface should not be very vacant.

7): the font size should be consistent with the size ratio of the interface. The commonly used font contains a beautiful font ranging from 9 to 12, and rarely contains a font larger than 12.

8): the foreground and background colors should be properly matched, and the contrast should not be too large. It is best to use less dark colors, such as red and green colors. For common colors, use Windows interface tones.

9): If you use other colors, the main color should be soft, with affinity and magnetic force, and resolutely put an end to the color of the thorn.

10): Major colors commonly used in large systems include "# E1E1E1", "# EFEFEF", and "# C0C0C0.

11): the UI style should be consistent, and the word size, color, and font should be the same unless it is art processing or has special requirements.

12): If the form can be minimized or maximized, the controls on the form also need to be scaled with the form. Do not zoom in the form only and ignore the zoom of the control.

13): interfaces with buttons generally do not support scaling, that is, only the function is disabled in the upper right corner.

14): when the parent form supports scaling, there is no need to scale the child form.

15): it is better to provide users with custom interface styles. You can select colors and fonts by yourself.

6: menu position:

Menus are the most important elements on the interface. Menu positions are organized by function.

Menu settings test rules:

1): Menus are usually arranged in the "commonly-used-Main-secondary-tool-help" location, in line with the popular Windows style.

2): common options include "file", "edit", and "View". These options are available in almost every system. Of course, you must choose between different systems.

3): the drop-down menu should be grouped according to the meaning of the menu options and arranged according to certain rules, separated by a horizontal line.

4): when the use of a group of menus requires a sequence or has a wizard function, they should be arranged in sequence.

5): menu items without sequence requirements are arranged according to the frequency and importance of use. Commonly Used menu items are placed at the beginning rather than the back. Important menu items are placed at the beginning and secondary menu items are placed at the back.

6): if there are many menu options, extend the menu length and reduce the depth.

7): Generally, the menu depth must be limited to three layers at most.

8): Quick commands must be provided for commonly used menus. For the combination principles, see 8.

9): the operation-independent menus should be blocked. If the dynamic loading mode is used, that is, only the required menus are displayed.

10): the icon in front of the menu should not be too big, and keep it best with the word height.

11): the width of the main menu should be close, and the number of words should not exceed four. The words in each menu can be the same and the best.

12): The number of main menus should not be too large. It is best to arrange the menus in a single row.

7: uniqueness:

If you follow the industrial interface standards blindly, you will lose your personality. In the case that the framework complies with the above specifications, it is particularly important to design an interface with its own unique style. Especially in the circulation of commercial software, there is a good advertisement utility for the migration pipeline.

1): the installation interface should contain organization introduction or product introduction with its own icons.

2): the main interface, preferably a company icon on most interfaces.

3): the logon interface must contain the logo of this product and the company icon.

4): the "about" in the Help menu should contain copyright and product information.

5): The company's series of products should maintain a consistent interface style, such as the background color, Font, menu arrangement, icons, installation process, button terms, and so on.

8: Combination of shortcuts

Using shortcut keys in menus and buttons allows users who prefer to use the keyboard to perform operations faster. Most of the shortcut keys used in western Windows and their applications are consistent.

Menu:

1): transaction-oriented combinations include:

Ctrl-D Delete; Ctrl-F find; Ctrl-H replace; Ctrl-I insert; Ctrl-N new record; Ctrl-S save Ctrl-O open.

2): List:

Ctrl-R, Ctrl-G, and Ctrl-Tab to navigate to the same page control in the next page or in reverse order.

3): Edit:

Ctrl-A select all; Ctrl-C copy; Ctrl-V paste; Ctrl-X cut; Ctrl-Z undo; Ctrl-Y restore.

4): file operations:

Ctrl-P print; Ctrl-W close.

5): System Menu

Alt-A file; Alt-E edit; 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/OK; Esc cancel button/cancel; Shift-F1 context-related help.

Button:

It can be adjusted according to system requirements. The following are only common combinations.

Alt-y OK (yes); Alt-C canceled; Alt-N No; Alt-D deleted; Alt-Q exited; Alt-A added; Alt-E edited; alt-B browsing; Alt-R reading; Alt-W writing.

These shortcut keys can also be used as the standard for developing Chinese application software, but can also start with a letter in Chinese pinyin.

9. security considerations:

You can control the error probability in the following ways on the interface to greatly reduce the damage caused by user-caused errors. Developers should take into account all possible problems as much as possible to minimize the possibility of errors. If the application exits from the system due to a protective error, the user may lose confidence in the software. This means that the user has to interrupt his mind and log on again with time and effort, and all the operations that have been performed will be lost because there is no disk.

Security rules:

1): the most important thing is to eliminate errors that may cause the application to stop abnormally.

2): avoid unintentional data input by users as much as possible.

3): use related controls to restrict the types of user input values.

4): when there are only two possibilities for a user to make a choice, you can use a single region.

5): when there may be more options, you can use the check box. Each option is valid and you cannot enter any invalid options.

6): when there are many options, you can use the list box and drop-down list box.

7): In an application system, developers should avoid unauthorized or meaningless operations by users.

8): restrict or block input characters or actions that may cause fatal errors or system errors.

9): actions that may have serious consequences must be remedied. The user can return to the correct status through remedial measures.

10): determines the input of some special symbols and the characters that conflict with the symbols used by the system, and prevents users from entering this character.

11): it is best to support reversible handling of right and wrong operations, such as canceling series operations.

12): users should be prevented from performing operations only after they enter valid characters.

13): the cancellation function should be provided for operations that may have a long wait time.

14): special characters are often; '"> <, comment':" ["{, \ |}] + =)-(_ * & ^ % $ #@! ~,..? /There are spaces.

15): conflicts with reserved characters used by the system must be restricted.

16): when reading the information entered by the user, select whether to remove the leading and trailing spaces as needed.

17): Some Fields read into the database do not support spaces in the middle, but you must enter spaces in the middle. In this case, you must process the fields in the program.

10: Multi-Window applications and system resources:

Well-designed software should not only have complete functions, but also occupy the minimum resources as much as possible.

1): In a multi-window system, some interfaces must be kept at the top level, so that you do not need to switch or even minimize other windows to display them when opening multiple windows.

2): After loading on the main interface, the memory is automatically detached to allow the occupied WINDOWS system resources.

3): Close all forms. After the system exits, it will release all the system resources it occupies, unless it is a system that needs to run in the background.

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

11: consistent page style:

A: Enter the following error message in the input box:

1): an error message is displayed. The "error prompt" should be used for the title of the prompt box. The content of the prompt box should be the same as the warning icon, followed by the prompt content. When you click OK, this input box gets the focus and the content is cleared;

2): When the input box gets the focus, the limit of the input box is automatically displayed. When the input does not meet the limit, the input box is highlighted;

3): When the input box gets the focus, the restriction of the input box is automatically displayed. When the input does not meet the restriction, a prompt like "*" is displayed. When it is moved to the logo, an error message is displayed.

B: Query Information prompt method:

1): When the query content does not meet the query conditions, the query list is not displayed and the prompt message "sorry, no data is found." is displayed.

2): When the query content does not meet the query conditions, only the header is displayed in the query list.

C: Time Control Input Method:

1): When the query data has a start date and end date, the display methods on each page are the same: start Date input box "-" End Date input box or start date input box "to" End Date input box;

2): There is a date format problem. Try to avoid entering the Date input box;

3): when adding and modifying an operation, the end date should be later than the start date.

Copyright Disclaimer: This article is an original article by the blogger and cannot be reproduced without the permission of the blogger.