[Theory] General Interface Guide
-------------------------------------------------- ------------------------------ □ author: Bruce 2003-1-7 11:00:07 one: follow the same guidelines Establish standards and follow the use of controls, prompt information, or color, window layout style, follow the unified standards, to achieve true consistent. This is the benefit of this:
1: User uses to build a precise heart model, after using the interface, switch to another interface can easily speculate various functions, statement understanding does not need to understand
2: Reduce training, support costs, and support personnel will guide the cost.
3: Give the user unified, don't feel confusing, happy, and increase
practice:
The project group has an experience, establishing a UI specification:
· The art provides color-conditioning color scheme to provide an overall color matching
· Interface control programmer, user experience personnel propose reasonable unified control libraries. Reference standard interface usage specification:
The control function follows the industry standard, the Windows platform see "Microsoft User Experience" (there is MSDN, Chinese has translated issuance, the project group must have a)
The control style can be unified in the allowable range to modify its style, hue
Refer to other software advanced operations, extract the functions useful to this project to use, absolutely unproven, with no purpose.
Design Special Operation Controls as needed, the guidelines are: simplified operation, reach a certain functional purpose
· Interface implementation personnel with the purpose of US trade, (if this step is not implemented, it will lead to unsatisfactory work for each other, and will also generate inconsistent confusion). Repeat the above work.
· Establish a rational document "UI standard" describing the above specifications,
· Forced interface designers understand, and as development guidelines,
· SQA staff conduct monitoring developers to follow, and promptly warn developers.
2: (color) Color uses appropriate, compared principles: 1: Unified color adjustment, for software type and user working environment to choose the right tones:
Such as: Safety software, according to industry standards, you can choose yellow, green, green, blue performance, romantic, pastel, color, dark color, make people don't feel tired, etc.
2: If there is no company's series interface, you can consider this aspect, you can consider this aspect, do unity, read system standard color tables with the operating system.
3: Color blind, weak users, even if special colors expressed their focus or special things, should also use special indicators,? Quot ;!, heavy number, and icon, etc.
4: Color scheme also needs to be tested, often due to the displays, graphics card issues, color performance is different for each machine, should be strictly tested, different machines are colored
5: Follow the comparison principle: use dark text on light background, dark background, blue text is easy to identify in white background, and it is not easy to distinguish on red background, because red and blue are not enough The contrary, and the blue and white contrast is very large. Unless special occasions, eliminate the use of contrast to make people have a colorful color. 6: Colors of the entire interface to use different colors
ITOP color table
Specific Standards Reference Artistic Statistics Academic Standards. The construction of the color table is a standard reference for the art in the pattern design, packaging design. For the program interface designer design control, the form coloring plays a chapter. Three: (resource) A variety of people interacting interfaces, less beautiful mouse cursors, icons, and indicative pictures, basemaps, etc.
1: There is also a need to follow the unified rules, including the establishment of the above color table, the establishment step of the icon should also form a standard as much as possible, refer to ITOP OutlookBar icon design standard
2: There is a standard icon style design, unified composition layout, unified tones, contrast, color step, and picture style
3: The basemap should be integrated into the bottom chart, use light, low comparison, and use less color.
4: Icon, the image should be clearly expressed, follow the common standards, or the user machine is easy to associate into the object, absolutely not allowing the default wonderful pattern.
5: The mouse cursor style is unified, try to use system standards, eliminate repetition, such as one of some software in some software is different.
Such as: "How to create XP icons" http://www.microsoft.com/china/msdn/library/dnwxp/html/winxpicons.asp
Attachment: ITOP Outlook HOWTO.DOC Description ITOP project, OutlookXP style icon manufacturing method
Fourth: (font) The font uses a unified font, and the selection of the font standard is determined according to the operating system type.
Chinese uses standard fonts, "Song", in English, using standard Microsoft Sans Serif without considering special fonts (Lishu, grassbooks, etc., special circumstances can be used to use pictures), ensuring that each user is using it is normal.
The font size is based on the system standard font, such as 8 pounds of the MSS font, the small five words (9 lbs) of the Song (10.5 lbs).
All controls use the size unified font attribute, except for special tips, strengthen the extrail of display
ITOP uses BCB, all controls use Parent Font by default, which is not allowed to be unified.
· Processing of system size font attributes.
The Windows system has a desktop settings, setting large-character properties, many interface designers often have this annoying, follow Microsoft standards, all use relative sizes as the size settings of the control, when switching the size font, relatively no What special problems.
However, since it is often convenient to use the dot matrix as the window design unit, the problem of chaos occurred after changing the big font.
In this case, it should be handled accordingly:
1: The write program is automatically adjusted, and the dot matrix is multiplied by a corresponding ratio.
2: All of the dot matrix is used as a unit, which ignores the adjustment of the system font, which can reduce the trouble of adjusting the big font. This method is used in BCB / DELPHI, but the inevitable result is that the system is not unified.
5: (Text) Text Expressions Information, help document text expressions follow the following guidelines:
1: Mogan, polite, more, please do not use or use less professional terminology, to eliminate the wrong word
2: Fair to trade the usage of the number of semicolons, the prompt information should be segmented,
3: Warning, information, error use of corresponding representation
4: Use a unified language description, such as a shutdown function button, can be described as exiting, returning, closing, should be unified.
5: According to the user's different terms, such as dedicated software, there can be many professional belongings, users are children: This can be intimate and kind, older users should be mature. The standard will be submitted. Six: (Style) control style, do not use the error control, the control function is required to design a design of the same style, if there is no ability to design a set of controls, use standard controls, absolutely can't hurt, messy
· Do not use controls, for example:
Use the Button style to do TTABLE function, take the main menu section to display copyright information,
· Uniform type of control operation mode, such as one control, double-click, can perform some actions, and the same control, double click, but there is no reflection
· One control only does a single function, no reuse
Many people have convenient to write procedures, I like to use a control to do different functions in different situations. These to understand the difficulty of increasing the user, only user familiarity can be understood. E.g
Change the red option, the parameters on the left represent different settings, which may be used in order to save controls or programming, but only skilled users will be used back, this situation is solved:
1: Group, use dual controls.
2: Use the table to give the user a significant visual change
7: (align) control layout, window is not crowded, press function combination control 1: screen can't be crowded
The crowded screen makes it difficult to understand, so it is difficult to use. Test Results (Mayhew, 1992) The overall coverage of the screen should not exceed 40%, and the packet clock coverage should not exceed 62%.
People can't be too crowded, and it can't be too loose.
The entire project uses a unified control spacing, which is consistent by adjusting the form size.
2: Regional arrangement
One line control, the vertical direction, the control spacing is basically consistent
The distance between the lines is the same, and the distance of the form Border should be larger than the line spacing (the spacing is left blank).
When the screen has multiple editing areas, these areas should be organized with visual effects and efficiency.
3: Data alignment should be appropriate
Description text, Chinese version should use Chinese full-corner colon, longitudinally aligned, and right on the colon, as shown. The width of the longitudinal control is as close as possible. And left align.
For example, characters such as the amount should be aligned according to the decimal point, or right.
4: Effective combination
The logically associated control should be combined to indicate its correlation, but in turn, any unwanted item should be in style, between the project collection, groups, or use the box divided into the respective regions.
For example: the following interface, select the search mode to determine the number range to indicate the scope of the calling number or the scope of the called number, and the accounting method is independent.
Then you should modify: Search and accounting mode. To prevent the user to misunderstand.
5: When the window is zoomed, the control position, the layout:
In order to make the interface do not have a run version or a ugly situation, the solution:
1: The fixed window size is not allowed to change the size, 2: Change the size of the window, do the control position when OnSize, the corresponding changes in the size.
In the VCL of BCB / DELPHI, most of the controls have layout properties:
Some controls have an Alignment property that can be used to make layout adjustments: TCUSTompanel, TMEMO, etc. Most of the controls are attribute ANCHORS, with left and right Akleft, Aktop, etc. if True, indicating whether the distance relative to each edge is changed. This can be further designed.
8: (Tab Order) Tab sequence habitual usage, reading order, from left to right, from top to bottom
The TAB button activation order in the form is activated, Taborder ,. BCB / DELPHI Using Form Design Right-click Menu Select Taborder Settings, VCs RES Edit Area Using Ctrl D
Nine: (Shortcutkey & Accelerator & Popmenu) Shortcut, Accelerator and Popup Menu · Shortcut:
1: The global shortcut menu describes the Ctrl XXX into the help list.
2: Shortcuts write help, special instructions, and emphasize the use during training
· Accelerator:
1: Use a non-destructive default button, enter the correct use of a form, with a default accelerator, if the carriageway is activated to the DEFAULT, if the carriageway is activated, and the ESC represents the closing window.
When calling the DEFAULT button action and closing actions, there should be no destructive operations, avoiding user error operations to generate a hazard, such as a button that deletes data such as deletions as the default button. When the user wants to submit a lot of data, it should block the ESC, or do an exit prompt to warn whether the user saves the submission.
2: Received action controls must have acceleration keys, unified acceleration key description (& A)
To use the keyboard, the operational control should have acceleration keys, accelerate the key to define guidelines, the first letter for English words, if the same form is repeated, use the second letter, so on, the acceleration method is Alt this acceleration Key, use unified methods to identify in the interface, such as XXX (a) or WPS A.XXX English can identify Underline Cancel directly under the letter,
The shortcuts are displayed in the Label described in the Edit to display the EDIT, which cannot display shortcut keys like Button.
· Popup menu
The auxiliary menu must have a corresponding button or menu option on the visual interface.
Since the auxiliary menu is displayed by the user or other actions can be displayed to the user. The corresponding option should be available, so the corresponding option should be obtained, such as a button, such as the corresponding control or the corresponding control or the button that pops up on the interface or the like.
Ten: (Action) User Interaction 1: Disable not Not visible
To make a function sometimes allow the user to be used, the control cannot be hidden, and the disable property should be used to use the disable property to prevent the user to discover the control of the control.
2: The window pop-up position should be obvious
Click on a control, pop up the window or menu, you should make a clear prompt, the minimum requirement is to cover the position just click, so that the user easily jumps to the new interface.
3: Execute action to prompt
While writing a visual feeling, when writing a program, you should pay attention to the user's interaction, UI as a tool for human-computer dialogue, users do any action, should give the user a visual or auditory, tactile tips. And this prompt should be obvious, but it should not be prompted too long, and there can be the following methods:
When the user clicks the button and other actions:
1: Pop up the interactive dialog to let the user click confirmation.
2: Change the Control Parameter Tip in the UI: (Processing the prompts that do not have users confirmed, there is a certain delay, or automatic clearance after the user button.), Change the title bar string, display "Information: Submit success", or set one specifically The status bar, TLABLE, etc. are used to prompt.
3: Hearing Tips:
When it is determined that there is a sound card, the user can send a special sound prompt when he hears the sound. Generally, it is an aid for important tips. The sound should not be too long, the emergency error prompt should be short, the frequency is high, the success prompt should be soothing and easy. and many more……
11: (HELP) online help: When is it to help, when do you want to help?
1: System default, industry standard control operations do not need to be described one by one, just need to describe 2: Special operations, special function interfaces, directly connected to the corresponding HELP files directly on the interface
3: Special settings detail, should be explained in the interface, or use Tiptool, and by the second step
Help documentation:
Structured, divided according to function module
What method must be explained in software
Help files are helping users better use software, wording should be proper, simple, and easy to understand, every sentence should be purposeful, help users solve problems
Help files are not advertisements, business software is not allowed to advertise. Description Company Information The purpose is to facilitate users to find after-sales support, URL connection, mailbox address, and telephone numbers in the case of no way.
12: Time to clarify the rules to explain the unified things, and is typically described, put it in the HELP and User Manual, and add a glossary
Appendix: When will the universities participate in:
The beauty work is the main personnel of the world, not only has artistic design, packaging design talents, but also wear the entire project, and puts forward system reference for interface program designers.
1: Software design, artists participate in demand, analyze the disadvantages of similar software interfaces, propose the main tone, typical interface style, and ideas throughout the art pack.
2: In the interface prototype design, the developer is revised, discusses the final performance style, and establishs the UI standard.
3: During the development process, provide standard style resource files (icon, Cur, BMP, etc.), and summarize the design process of unified style resources, forming a standard document *.
4: In terms of productization, assist in making help documents, website style, and participating in production, making attached propaganda pictures, animations, product packaging, posters, etc. Interface design test specification
============================================================================================================================================================================================================= ============================================================================================================================================================================================================= ============ interface design test specifications interface test interface test (Hongzong Broncos) author: flowingice
I have summarized some specifications for interface design and testing in their work, sharing with you. The interface design and test rule interface is the most direct layer interacting with the software, 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. And the design is designed to be rejected due to the talent of art. At present, there are three ways in the popular interface: multi-form, single-window, and resource manager style, no matter that style, the following rules should be valued.
1: Easy to use: Button name should be easy to understand, accurately use the word, discard no two-can - the word eyes, to easily distinguish between other buttons on the same interface, and the best of the energy. Ideally, the user can know the functionality of the interface without having to check the help and perform the relevant correct *.
Easy to use the rules: 1): Complete the same or similar function with the Frame box, the common button is required to 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 shortcut switching between pages, common combination shortcut ctrl tab8): The default button is supported, ie, press ENTER to automate the default button to correspond to the corresponding 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 specification of the Windows interface, that is, the standard format containing the "menu bar, toolbar, toolbar, status bar, scroll bar, right-click", can be said: Interface follows standardized The higher the degree, the better it is, the better it is. Small software generally does not provide a toolbaux. Normative Rules: 1): The common menu must have a shortcut to command. 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 toolbars. 12): The toolboy must be increased, and the user is customized by the user. 13): The default total width of the toolboy should not exceed the screen width 1 / 5.14): Status bars to display users' practical information, commonly used: current operation, system status, user location, user information, prompt Information, error message, etc. If a certain operation takes longer, 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: 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 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): Illegal input or * 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 views, feel coordinated and comfortable, can attract the user's attention within a valid range.
Beautiful and coordinated rules: 1): Long width approach the gold medal ratio, avoid 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 Settings Quarantine: 1): Menu usually use "common-primary-secondary-tool-help" location, 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.9 for the commonly used menu, the combination principle is 8.9): The menu that is not related to the operation is related to the manifest to handle it, if the dynamic loading method is used - only the menu needs Display - 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. In the case of the framework, it is especially important to design your own unique-style interface. Especially in the circulation of commercial software, there is a good way of migration.
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: The combination of shortcuts is used in the menu and buttons to let users who like to use the keyboard * work faster some of the use of shortcut keys in Western Windows and their application. It is consistent. Menu: 1): The combination of transactions is: Ctrl-D deletion; Ctrl-f looks; Ctrl -h replacement; Ctrl-i insertion; Ctrl-N new record; Ctrl-S Save Ctrl-o open. 2): List: Ctrl-r, Ctrl-g positioning; Ctrl-Tab Next Page window or inward browsing the same page control; 3): Edit: Ctrl-a allocation; CTRL-C copy; Ctrl-V paste; Ctrl-x shear; Ctrl-z revoked * work; Ctrl-Y recovery * work. 4) Document *: Ctrl-P printing; Ctrl-W is 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 ends; Alt-Tab Next Application; Enter Default Button / Confirmation * Work; ESC Cancel Button / Cancel * SHIFT-F1 context-related help. In the button: can be adjusted according to the needs of the system, the following is just a commonly used combination. ALT-Y determined (yes); alt-c cancel; Alt-N No; ALT-D deletion; ALT-Q exit; Alt-a added; Alt-E editing; Alt-r; alt- W Write. These shortcuts can also be used as a standard for developing Chinese applications, but can also use Chinese pinyin beginners. 9: Safety Consideration: In the interface, the error rate is controlled by the following method, which greatly reduces the damage caused by the user's error due to the user. 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 * is not lost due to the no storage disk.
Safety Rules: 1): Most importantly, exclusion may make an error that is aborted normal. 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 * as possible for a longer waiting time. 14): Special characters often have ;; '"> <,`': "[" {, / |}] =) - (_ * && ^% $ # @! ~, ..? / Also has spaces. 15): Restrictions on the need to reserve the conflict with the system. 16): When reading the information entered into the user, select whether to remove the front and rear spaces as needed. 17): Some fields that read the database do not support the middle space However, users do need to enter intermediate spaces, then handle it in the program. 10: Multi-window Application & System Resources: Design Good software not only has a complete function, but also takes up the minimum number of resources .1): In a multi-window system, some interface requirements must be held at the top, avoiding the user when the user is open, and the non-stop switching even minimizes 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.
August 28, 2004 11:31
============================================================================================================================================================================================================= ============================================================================================================================================================================================================= ============
User Interface
Glory 2002 Winter
Most of our software we have written has a user interface, and human-operated interaction is achieved. The interface design is a university.
There is a popular statement that the master is not necessarily the interface master, I don't agree. So far, I know the code master, and it is also an interface master. As for the so-called code masters that claim "I only want to write core code, no interest in the interface", I suspect that this kind of eight nine-nine writes are not good or not, I can't write the "cow" code. I have never met the interface to do very in place but the code is very poor. In general, a programmer's code level is consistent with his interface level. If the code level and interface level under the same look, I suggest you enhance your weakness. The code is well written, the interface is poor, not doing better than the interface, the code is poor, where is it going.
You believe that an interface looks like a mess, the internal code is very striking, exquisite, strong and efficient?
If you develop in a Windows environment, Microsoft defines a reference specification called "User Experience" (of course, "user experience" content has exceeded the narrow "user interface"). This specification gives a suggestion for the design of interface elements such as menus, buttons, icons, forms, shortcuts, messages, and text. If you are not writing something such as a game, there is no reason not to refer to this specification.
Here are some bad user interface that I have ever seen:
Overwhelming use a variety of strange strange, colorful controls. These interfaces often come from a new hand with passion and ideas. It is easy to remember the past in the countryside, a little daughter-in-law, green pants, or today's city street painted a big fora.
Interface element ratio disorders. I have seen the button huge, and the dimensions even exceed the interface of the text box showing important content.
Interface elements are messy. For example, the button and text box are placed at the place, which is equivalent to the living room as the bedroom, the bathroom as a kitchen.
Violation of usage habits. You press F1, it does not pop up help, but it has implemented a one absolutely unexpected.
The message box information is embarrassing and confusing. Here is a message box that is popped up. Change "OK" and "Cancel" to "Yes" and "No" will not be clearer? If you do things, if you simply do FORM, change it to "I want to" and "don't want to", it is better.
There is also a bad user interface, at first glance, it is actually the result of lack of planning.
This software itself does provide a more complex function, but what is a common function, which is rarely used for advanced features, lack of evaluation. What functions are cut on the interface, accounting for the place, and the user will be bored, and it is not good to be scared.
For this software, the default interface should only display the most common functions of the target user, as for the uncommon-usable advanced features, "hide", such as, put it in the menu, don't make a button to put the interface on. If you need these advanced features, users will naturally go to the menu.
In this regard, Microsoft Office software is a model. For example, Word, from the "Dog Pallet" on the pole of "Acting Diploma", the long-term masterpiece of the typography is a long time. For low-level users, it is easy to use. For advanced users, the features must have. This software interface is very leveling.
Like those advanced digital cameras, the operation is simple and comparable to the "fool" camera. Press a button to make you think about it, just explain it.
In a word, you are willing to use the interface full of dazzling stuff, don't know where to start the right?
- End - =============================================== ============================================================================================================================================================================================================= =============== Software interface design related introduction interface design is to beautify the use interface of software to beautify the design branch of software in order to meet the needs of software professional standardization. Specifically, software launch cover design, software frame design, buttons design, panel design, menu design, label design, icon design, scroll bar and status bar design, installation process design, packaging and commercialization.
There are more attention to the key issues in the process of design, and below:
(1) Software start-opening cover design should make the software start the cover of the sealing surface, such as software start-up cover needs to be used on different platforms, and the operating system will consider conversion different formats, and the color of the selected color should not exceed 256 colors. It is preferably 216 color safety. Software start-up cover is more than 1/6 of the mainstream display resolution. If the series of software will consider the unity and continuation of the overall design. The company logo, product trademark, software name, version number, URL, product trademark, software name, version number, URL, copyright statement, serial number, etc. should be set to establish software image, so that the user or purchaser is prompted when the software is started. . The illustration should use a graphic with independent copyright, high symbolic, visual communication effect, and use photography should also be used to form a personalized feature of the software.
(2) The frame design of the software frame design software is much more complicated. Because the function of the software should be understood, the program should be understood, which requires a designer to have some software to follow up experience and can quickly Learn software products and communicate together with software products developers and program use objects to design a software framework for friendly, unique, compliant with procedures. Software frame design should be concise and clear, try to use unnecessary decorations, should consider saving screen space, various resolutions, status and principles, and for future design buttons, menus, labels, scroll bars and status bar Placeholder. The overall color combination is reasonably matched, and the software trademark is placed in a prominent position. The main menu should be placed on the left or on the upper side, the scroll bar is placed on the right, and the status bar is placed under the side to meet the visual processes and users.
(3) Software button design software button design should have interactivity, that is, there should be 3 to 6 state effects: click when it is status; the mouse is placed on the top but not clicked; Click on the state of the mouse before the mouse; click The state of the mouse is not placed on top; the state cannot be clicked; independently automatically changes. The button should have a concise graphic effect, which should be able to generate a functionally associated reaction, and the button within the group should be unified, and the button that is large and the function is different. (4) The software panel design software panel design should have a zoom function, the panel should be clearly divided, and should match the dialog box, pop-up box, etc., so as to save space, easy to switch.
(5) Menu Design Menu Design Generally there is a status and unselected state, the left should be named, right should be shortcuts, if there is a lower menu, there should be subordinate arrow symbols, and different functional intervals should be divided by linear.
(6) Label design label design should pay attention to changes in the corner portion, and the status can be referred to the button.
(7) Icon design icon design color should not exceed 64 colors, the size is 16X16, 32X32, the icon design is the square art, and it should be highlighted to consider the visual impact. It needs to show the content of the software in a small range, so many Icon designers use simple colors when designing icons, using eyes to mix the space for color and outlets, make a lot of wonderful icons.
(8) The scroll bar and status bar design The scroll bar is mainly designed to design the contents of the contents of the regions and spaces, and there should be up and down arrows, rolling standards, etc., and some will be turned on. The status bar is to display and prompt for the current state of the software.
(9) Installation process design installation process is mainly to beautify the process of software installation, including the software functionality.
(10) Packaging and commodity final software products should consider protecting software products, promotional integration of functions, can print some product introductions, product interface design.
============================================================================================================================================================================================================= ============================================================================================================================================================================================================= ============
Icon design specification
Digital design introduces a new icon design style. The following is a specific specification for designing and creating a style icon. Icon style should be fun, rich and full of vitality, because the current system support icon is a 32-bit icon, and the edge is very smooth. After drawing each icon in the vector program, you can use Adobe Photoshop to make the image more perfect. This specification is designed for designers. When you create an image, it is recommended that you work with a high level graphic designer, especially graphic designers with rich vectors and 3D software experience.
The purpose of the icon design overview is to make you familiar with the new style of WindowsXP and prepare for creating icons.
Icon style characteristics (1) color is rich, is a supplement to the WindowsXP look. (2) Different angles and perspective characteristics add dynamic vitality to the image. (3) The corner of the element is very soft and slightly smooth. (4) The light source is located on the upper left corner of the icon, and there is a partial portion surrounded by light illuminating the icon. (5) The gradient effect makes the icon stereoscopic, which in turn makes the icon more plump. (6) Projection makes icons more contrast and three-dimensional. (7) Adding the contour makes the image clearer. (8) Daily objects (such as computers and equipment) have more modern personal appearance. The icon size Windows XP icon has four sizes. It is recommended to use the following four sizes: (1) 48 × 48 pixels (2) 32 × 32 pixels (3) 24 × 24 pixels (4) 16 × 16 pixels
Icon Color depth supports WindowsXP support 32-bit icons. The 32-bit icon is a 24-bit image plus 8 ALPHA channels. The edges are very smooth and fused with the background. Each WindowsXP icon should contain the following three color depths to support different display settings: 24-bit images plus 8-bit Alpha channel (32-bit) 8-bit image (256 colors), plus 1 bit transparent color 4-bit image (16 colors), plus 1 transparent color
The main colors used in the palette icon.
The perspective of the object and the packet Windowsxp style icon uses a perspective grid: not all objects can achieve better results with 16 × 16 complex images. Some objects are usually displayed in an intuitive image: document icon, symbol icon (such as warning or information icon), single object icon (such as magnifying glass)
Unless you create overlapping assist objects, you should use intuitive images in terms of readability and integrity. Also consider how to view icons in groups to determine how to group objects.
After projection, the WindowsXP icon will be clearer and more stereoscopic. This effect can be implemented in Photoshop, which will be described later in this guide. To add a projection for an image, double-click the image of the image in Photoshop and select Drop Shadow. Then change Angle to 135, and Distance is changed to 2, and SIZE is changed to 2. At this time, it was projected to 75% opaque black.
When the contour draws the XP style icon, add the contour to the image to make it clearer, and ensure that the image has a better effect on different background colors.
Conceptual design icons, consider the following factors: Use the existing concept to ensure true expression of the user. Consider what forms in the user interface environment and how to use it as part of the icon set. Cultural background considering graphics. Avoid using letters, words, hands or faces in the icon. You must use the icon to represented a person or user, please use it as much as possible. If the image in the icon consists of multiple objects, it should be considered how to make the image size smaller. It is recommended that the objects used in the icon do not exceed three. For 16 × 16 size sizes, it is also possible to consider deleting certain objects or simplifying images making it easier to identify.
Transparency Tools GIF Movie Gear (GMG) a dialog box displays your icon. Use the straw tool to click the background color of the icon. This color will be changed to dark yellow green (or selected as a color of a transparent background color) in GMG). Repeat all 4 bits and 8-bit frames. To save the icon, select File-> Save icon as ....
Creating a toolbar Windows toolbar icon is not used outside the projection, the style used is the same as other icons. Since the toolbar icon is very small, it is recommended that you use a simple image. If you can clearly express the meaning of the icon in an intuitive manner, you don't have to use other complicated ways.
Create AviWindowsXP Use 8-bit AVI. The process of creation .avi file is the same as the process of creating the icon - prepare the image in Photoshop and drag it into the GMG. Please create an 8-bit icon as follows. To save AVI using GMG, go to file-> export as-> avi file. When you create a .avi file, consider the following factors: Use the product red (R255 G0 B255) as a background transparent color. In Photoshop, it is important to have a pixel pixel. Set the fill capability to 0 and confirm unchecked tooth. Software people interface ============================================== ============================================================================================================================================================================================================= ================
UI is the referlication of User Interface. The UI design refers to the overall design of human-computer interaction, operational logic, and appearance of the software. A good UI design is not only to make the software have a taste, but also make the software operate comfort, simple, free, fully reflecting the positioning and characteristics of software.
Beautiful things often make people can't resist. That's why the product excellent design is a reason for the sales and promotion of almost all goods such as computers, automobiles, daily necessities, furniture, food, clothing, etc..
The same reason, for software companies, software products are their goods, and the software interface is the appearance of their products, the beauty or not of the interface, directly related to the success or failure of the marketing of software products.
We can clearly see that Microsoft has attached importance to software interface design. Recall the scene when you see Win2000 in the first time, is it stunned with NT4.0? The aesthetic and ease of use of his interface? And if you use an XP system, it will be shocked by its magical senses! Jinshan's Jinshan word tyrannies is an example of successful domestic software. From Jinshan Word 3.0 to Jinshan Virgin 2001, it is classic. The famous web animation production software Flash from 3.0 to 4.0, only modify the icon and form, immediately increase color ...
The successful software company in the world today attaches great importance to the beautification design of the software interface, because they are deeply known that in the fierce market competition, only a powerful function is far less, not enough to overcome strong opponents. We can be as follows, when you pick your mobile phone, if there are two mobile phones, the performance is the same, and the first model is much beautiful than the second model, which one will you choose? Of course, it is a beautiful one. Imagine your customers, you will have such comparisons with your competitors' software.
Nowadays, software companies know how important, advertising and market sales activities are how important to market marketing, and they have helped advertisements, do activities, and promote. But we know that the ultimate goal of these activities is to let users buy and use software products, and users ultimately use are your products, then why not do more work in the beautiful view of the software interface? In the mature market such as household appliances, cars, computers, use very beautiful advertising to promote a function of powerful and ugly products, is a joke. However, such jokes are not uncommon in the software industry. This is also like Chinese football, and the Chinese software industry has a big gap between China's software industry. Practice has proved that all merchants will have a lot of output as long as they have a small investment in the beautiful design. It puts an output ratio, it is much more than the investment in functional leadership.
After the user bought the software, they contacted your business, or your corporate image in the eyes of the customer, a large part is conveyed by the interface of your software, so aesthetically friendly user interface is to promote your business. Culture, which will be very beneficial for customers' business philosophy, which will be very beneficial for your company's publicity and operation. Especially if your company is doing the business of the project contract, then, whether it is bidding, the beautiful interface will give you a confidence and good impression after the project is delivered.
To become a competitive software, it is not only a powerful function, and there is also a friendly interface design. Throughout the IT industry today, the development trend of its software interface design is generally the following technologies:
1. Command language user interface development. According to the characteristics of its language, and the form of human-computer interaction
a. Form language B. Natural language. c. Class natural language.
2. The extensive application of graphical user interfaces and human-computer interactions have greatly rely on visual and manual control, so there is a strong direct operation feature.
3. Directly manipulate the maturity of user interface technology. The user is ultimately cared about the object he wants to control and operate, he only cares about the task semantic, and does not have to be distracted to computer semantics and syntax. For a large number of physical, geometric spaces, and image tasks, the direct manipulation has exhibited huge advantages.
4. The development of multimedia user interface and multi-channel user interface has greatly enriched the expression of computer information.
5. The application of virtual reality technology provides users with immerse and multi-sensory experience, as a new human-machine interaction, virtual reality technology is more than any human machine interaction Have hope to completely achieve harmony, with "people as a center" man-machine interface.
