Design "Good-looking" user interface (Wang Wei Gang, October 2003) 1 Problem introduced two weeks ago, one of my friends Xiao w came to chat, tell me a bothering thing: their company developed a set of industry software in bidding The time lost to the competitors; at that time, the reason why the user gave it was that the small W's software interface rough, simple, and it seems that it is not as good as the interface of competitors. Of course, small W and I understand that this reason is not sufficient - in the industry software market, most bidding failures have a deeper background reasons, such as the quality of customer relationships; but in public occasions In the software performance, after-sales service, user interface, etc., the reason why the crowning is always able to become the best trick to reject you. In order not to be easily seized by customers and competitors in the future bidding, the small W will determine their software interface. After research, small W and colleagues found that all the software developed by their company has almost all of the crude diseases that have been abdicated. The programmers often designed windows, placed controls, icons, fonts, and colors, and the software developed, the software developed, although it is very good, but the interface is mostly true. At a glance, it seems like a pottery pottery pottery pot pottery, which is a gentle, and it doesn't feel it. Once you have the first porcelain that is burned out in the official kiln, you will be in touch with it. . In order to change the status quo, small W The first reaction is to ask a professional art to host interface design. Xiao W said: "The problem that is unattended, is of course artistic. The programmer is an engineer, no half of the art must, and how to toss is also white. Therefore, we must ask a full-time graphic designer to design the interface, procedure As long as the designer's idea is programmed, it will be done. "This idea heard it, small W also did a flat designer from the advertising company. "Of course, the big advertising company like Macken, Ogili, we can't afford it. The person we invited is a flat design, the price is not high, but it is also a famous gas in the row - of course, than us. These foreign lines are strong. "" So later? "I didn't ask for coffee, and that case is like a movie" green tea "in Jiang Wen in the roots of Zhao Wei. "Later? If everything is OK, what do I have to do?" Xiao W poured a stomach in front of me. It turned out that after the company came to the small W company, the work was still working hard, and many beautiful interface descriptions were also drawn, but the programmers did not turn these design to reality: either design interface The interface of the game software is full of dynamic, which is unacceptable (the user's leadership will never tolerate the daily work of the game "); either design interface and software function , The necessary functions cannot be integrated into the interface (for example, in order to ensure the aesthetics, the designer limits the size of the child window, and several controls can not find the cone); or the interface design is too avant-garde Unable to achieve existing form or control technology .. The light is nothing, the most important thing is that designers often say that the programmers pointed, always say, "You don't understand, this is Artistic law. As a result, the art law lost to a harsh reality: When the plan given by the plane designer once again be vetoed by the programmer, most of the programmers began to negatively worker, almost everyone put down the work of the hand, while shaking the head Mutter: "The interface is fixed, what is the program?". "You said, what should I do?" Xiao W asked in pain. "What are you talking?" I am happy, a smile.
2 Some topics are like other software development links, and user interface design can also be used with some ready-made tools. Once, we have to prepare a product solution for our customers. Several software modules in the program have never really realized (this "empty gloves white wolf" is quite common in the industry software market). In order to make our scheme more convincing, the pre-sales engineers simply draw features in the user interface in the drawing software Visio, draw the software modules that have not yet been introduced, form, form, menu, buttons, toolbar, conversation Interface elements such as frames are also available. After integrating these interface images in the program, more than half of users will not doubt the authenticity of this system - no doubt, this is also an interface design, although some of them have hit the flavor. It should be said that the most intuitive way to describe and display the user interface design is to draw the appearance of the interface. In programmers, an interface diagram on whiteboard or draft paper often explains all issues. However, when we need to exchange design programs in different development environments, or when you want to manage and retrieve interface design documents, the image information is not as convenient as formatted text messages. To this end, people have set up a number of "user interface description languages". With these languages, we can "write" user interfaces as writing programs. For example, Delphi is used to describe the * .dfm file of the form characteristic, the text content is a quite good user interface description language. Similar to other descriptive languages is that the user interface description language also has standardized and XML tendency. So far, people have proposed AAIML, AUIML, XIML, XUL, UIML, etc., a series of XML standard-based user interface description languages based on XML standards. W3C is being developed XForms standard 2 is also a member of the XML family, it is likely to be one of the core technologies of future design and development of web user interfaces. The research and exploration of the user interface description language is indeed
The standardization of user interface design. If any user interface description language is really recognized by the industry, and further enabling all visualized development tools to use unified data formats when describing the user interface, then we can use Visual Basic .NET during the development process. The form design is directly pasted into Visualage, Kylix or C # Builder development environment - this is of course a thing that is dreaming of programmers who need to develop software in different environments. 3 Case Analysis In this case, my friend is a little bit of a little bit of unhealthy problems in the software interface. His choosing solution - hired a full-time graphic designer - it is not reasonable, but it is difficult to practice. I personally think that the most important reason this is: In addition to the software such as the game needs to show off the appearance, the interface design of most software is not equivalent to the usual flat design. For example, a flat designer without programming, and does not understand user needs, he can give a beautiful icon or color scheme, but he can't say the difference between the drop list box and the combination box, he also It is not necessarily known that the menu item and the toolbar button are arranged in line with the user's usage habits. As for the "Preview dialog, this choice is the mode dialog or" which controls need to use context menu "or" which controls need to use context menu ". The problem, he is afraid that it will be more harmonious. Most importantly, there are very few professional languages that can interwork between the film development experience and the ordinary programmers: designers are difficult to understand software engineering terms such as configuration management, spiral models, and the programmers are not large. Understand the contradictory space, asymmetric balance and other design professional nouns. It should be said that small W's company miles and designers are just caused by two categories of people lacking a common language. So, is there a "user interface designer" career, specializing in the research and development of software user interface? That's right, many large-scale software companies have a full-time user interface designer for the project team. Microsoft also explicitly indicates that the project team must set the user experience role in its Microsoft Solutions Framework (MSF) (User Experience Role ) To enhance software availability 3. Different companies have the same title and positioning of the position, but most companies require these full-time user interface designers to have three ways of software prototype development, user demand management, and graphical interface design. The truth is very simple: First, if the designer does not know about the software development, the programmer will take him in the project team in the morning and evening; secondly, if the designer can't understand the user's needs, then he and one know the ex-esteem The behavior artists have no difference; in the end, if the designer does not have a plane design, don't he don't even have the value of the last point? Here is the requirements of my recent acquisition from the Internet, the US software company recruits user interface designers to correspond to the level of employer: .. Bachelor degree in computer science or related major; .. Familiar with the basic principles of user interface design; .. Be good at converting business rules, user operation, and functional demand into software features; .. At least have excessive analysis and UML modeling in one project; .. Can use Java Swing design user interface; can use JSP Design Web The interface of the application; .. Can quickly develop software prototypes using scripting languages;. Work in the team; .. Excellent oral and written expression ability.
how about it? This requirement is quite high? This is more imageable, to design the three techniques of the most beautiful, best, most extracted user interface, software development, demand management and graphics design. "Ball, stop!" Small W burned in anger. "Are you not teasing me? How much is it to ask such an interface designer? Our company can don't have this strength!" Yes, most Small software companies have not been able to hire a full-time interface designer. But don't forget, I said it is ideal. Employing a full-time interface designer can develop the most beautiful software interface, but no interface designer's participation does not mean that can only break the tin. Our goal is to design the interface as possible, but "look" has multiple standards, different industries, different markets, and the requirements for "good-looking". If you want to develop a game software or an art site, you may probably only have the best artist to draw the user interface. However, if you want to develop just an ordinary industry software, you don't have to create the software interface as a colorful color like MSN Explorer. For small W's software, just guarantee that the user interface is simple, generous, easy to operate, and the popular software style is consistent, and the user will not have any opinions. "To do this," I said, "I don't need to use the interface design master, your company's ordinary programmer is completely competent. Of course, you have to master the basic guidelines for some user interface design." Live small W's soft grinding, I picked up the pen, search for shaping belly, so easy to write the following I think important and recommended interface design guidelines: Raine Dafa is good in the user interface, "Dong Shi Effect" The practice is usually more effective than "innovation". This is easy to understand, a programmer mimics Microsoft Windows at the window layout, color matching, font style, although rarely enjoy the pleasure of art innovation, but the software he has developed always has the same as Office or IE. "Good-looking" interface. Software has developed for so many years, and each type of software has its popular interface style and design practices. Since it is not an interface design master, don't be satisfied with your brain, you will never have a mistake. The main form layout main form (or called the main window) is the core of the graphical user interface. The main form has a variety of interface elements such as menus, toolbars, dialogs, client districts, and status bar. For ordinary programmers, there is only one rule to arrange these interface elements: if you are looking for popular commercial software (especially Microsoft software)
Don't hesitate to have you have to hesitate to deny your design. For example, I have seen such a software interface (see Figure 1): Figure 1 Simple stack of data views in Figure 1, programmers put three data views (two tables and one multi-line edit box) Aligned in the client area on the right side of the main window. The main forms and three data views have their respective scroll bars and visible areas. This simple stacking data view can only cause a consequence, that is, look at the scroll bar everywhere, each area can scroll. The newly played users don't want to use which scroll bar to use to find the data you need. From the implementation level, this approach requires programmers to carefully maintain the size and relative relationship of all views to avoid the chaos of the main form of the main form. In contrast, putting data views in different sub-forms or attribute pages will make the form layout more concise and orderly. The control is arranged neatly and must be neatly neatly, and any non-neat user interface is not a good interface. All controls in the window and dialogs must be neatly arranged. In fact, almost all modern visualization development environments provide us with tools for adjusting control sizes, alignment controls, and equal distances. I don't know why, many programmers are reluctant to use these features, they would rather believe that their eyes do not believe in the development environment. Of course, in addition to random placement, I have seen another extreme extreme in addition to the extreme practices of the control size. There is a very famous software company in order to standardize the interface design style of the project team, in its development system: each set of controls in the interface must surrounded by Groupbox. As a result, the software developed by the company has many interfaces like Figure 2: Figure 2 Abuse of the GrouPbox interface is said to make this company to make the arrangement of the control more tap. But I can know that I can know if the control is arranged neatly, and the nesting line box in the dialog will always leave messy feelings. Obviously, this is a typical case of self-proposition and drawing snake. Forms Leaves If there is a large amount of a region in a region in the form edge or in the form, you should reconsider the size of the form and the arrangement of the control. Many programmers like to leave a lot of gaps in the four sides of the form (especially dialog). This "wide side" form is in fact, I don't think about it. Take a closer look at the edge design of each dialog in business software, the edge is compact, and the line is simple is today's mainstream style. Some lazy programmers are accustomed to simply placing controls from top to or from left to right, and do not care about how much blank areas in the form will leave in the form. The dialog shown in Figure 3 simply arranges the control from top to bottom. As a result, a large amount of blank is left in the upper right corner, and it seems that the entire dialog is tilted toward the left (this left right light illusion is The planar design can be classified into the research category of visual psychology). Figure 3 The dialog box in the upper right corner rearrange the control, or adjusts the form of the form and the control of the control. For interfaces that cannot be adjusted when designing (such as some interfaces generated by the program), if there is no way to squeeze out the blank, then you may wish to neat all the blanks to the right or bottom side of the form. This can minimize the tidy of the form. The main menu combines the menu item by logical relationship. The number of layers of the menu should not exceed two layers. Rational arrangements are very important for the final user of the software. Many users (including me) use new software, they are familiar with each software feature without online help. In general, there is a standard or convention in the menu, if you have to put the "copy" and "paste" function in the "Tools" menu, then I can only say that you are invincible for users to set the obstacle. . In addition, the hierarchy of menus helps logically divide the software function, but the hierarchical menu will only make the user call.
Figure 4 Unique menu design style, for example, Figure 4 is a menu design I have ever seen. The programmer adds "[" and "]" symbols in the left and right sides of each menu item. It is said that this is to make the menu clearer and more eye-catching. I don't think there is anything wrong with this. The key is that the programmer forgot to give the menu item plus a mission character (with the loopline letter), the user can not use the "Alt" to select the keyboard combination of keyboard combinations to select the menu item. This is not good news for users who are used to a keyboard. Toolbar ensures that all buttons in the toolbar can correspond to a menu item in the main menu. The importance of this principle is that if the main menu does not find a feature provided in the toolbar, the user can only use the mouse to trigger the feature. In case the user's mouse out, or it encounters users who pursue operational speed and obsessed with keyboards (in some online games, only keyboards do not have to use the mouse, usually have been classified "key" one), you The software has to be awkward. By the way, I have seen someone to design the toolbar button as shown in Figure 5: Figure 5 "Chinese Characters" toolbar This "Chinese character" toolbar design is purely the name of the toolbar. If you can't find the right icon, then you don't use the toolbar; if you must use the Chinese characters to indicate the function of the button, why don't you use more standardive practices --Tooltip prompt? I can't draw icons yourself if I haven't learned art. As long as you don't infringe, use someone else's labor results can be effortless, and there will be no mistakes. Many elements in the user interface, such as menus, toolbars, tree diagrams, and list boxes can be equipped with icons. There are now many free icon libraries available on the Internet for download, where there is an ubiquitous old face (such as a disk, printer, telescope) will not cause any copyright dispute. Therefore, in the use of icons, the programmer should be extremely resolutely executed "To". However, using icons must have a unified style, don't mix different styles, different types of icons. For example, the toolbar in Figure 6 has only 10 icons, but there are three styles of line charts, stereo pictograms, cartoon drawings, and designing this "hodgepodge" interface. Programmer is indeed a professional spirit. Figure 6 Mixed Example of Different Style Icon Context menu The context menu here refers to the menu that pops up after the right mouse button. The content of the context menu is generally related to the object of the mouse click. Design Context Menu Note and Design Toolbar Similar to: Put the most commonly used, in the context menu, while ensuring that these operations can also be implemented through the main menu. For lazy or other reasons, many programmers love to make such errors: only provide operations related to specific objects in the context menu, the main menu and toolbar no longer reuse these features. The consequence of this is, if the user doesn't know the right mouse button, you can never find these features. Obviously, the context menu is only one of the user's operation mode. While opening up a green channel with the context menu, we should also use the main menu to provide convenience to the keyboard operation. The font only uses the most common or the font to use by the user. Perhaps because most development environments can easily adjust the fonts in the way they have come, in various interface elements, the font seems to be a field that the programmer is likely to play the imagination - I often flooded in some The primary and "color cloud", "amber", "amber", etc., full of eye is tilting, rotating, blinking the interface of the pattern text, and the dizziness. According to me, since it is not a professional graphic designer, our programmer is still not selling in this regard. The most stable method is: only common fonts such as "Song", "black body", only use the default font size of the Windows system. Try to be used as much as possible to decorate the means. Of course, the user decides everything. When users have special needs in the font (for example, in order to enhance some text, we should have not mistaken.
Another common error when using fonts is the size of the control and the control of the font. It is displayed like Figure 7, the size of the input box and the fidelity in the box are too large - this interface is obviously the programmer , Irresponsible products. Figure 7 The color matching color matching of the control and font does not match is a very profound. If you are not prepared to learn related theoretical knowledge, it is best not to use the color of the interface and the system color scheme. Win32 API defines macro definitions such as Color_BTNText to indicate each of the system default color schemes, and users can change these color combinations by changing the Windows appearance. These colors can be used in strict accordance with the requirements of the system color scheme, which ensures that the color combination in the interface is in line with the Windows style requirements, and keeps the color matching of other programs when the Windows appearance changes.
Consistent. If you must use bright colors (such as red) to remind users of something important thing, then remember, the less these colors are used, the better if they do not have professional techniques, large-area red, green, purple Or orange is easy to make people with visual fatigue, dizziness, nausea and other discomfort. Error message General or technical too strong error message will only make users deep into the quagmire. Most software users are not proficient in professionals. If the ordinary user sees this error message in Figure 8, what do he think? Figure 8 Technical excessive error message is in a normal user, no one knows where the DBCC is going to run, and some people know what is "allocate page", what is "segment ID". Reporting such an error message to the user is not as cleanliness of the implementation of the implementation. Of course, complete ignore technical information is not conducive to the diagnosis of system failures. Common practices are to record technical information in the system log, and only tell the user on the interface "system failure, please contact.". The practice of combining friendly warfare and professional technical information is also recommended: Figure 9 Improved error message resolution user's display may work at different resolutions, your software interface must be Adapt to the resolution change. I know that there are many programmers developed only to keep the interface in a particular resolution (such as 1024 × 768). Many programmers are in order to save things, simply use the resolution of users to place all controls in the form to the appropriate location. In most cases, the user interface of this software is very tidy, and once the user changes the resolution, the control in the form is immediately inverted, and some can't even have no trace. By the way, do you have a resolution experiment when testing the software? Your software interface (GUI or web page) can be superwidth on the SONY W series notebook (1280 × 768)? What do you transplanted to Lenovo Tianzhu computer's pocket display (320 × 240)? Technically, adapt to different resolutions, but to adjust the size of the relevant form when responding to the WM_SIZE message of each form. It should be said that this work is not very difficult, any smart and diligent programmers can do it. 4 Supplementary description This article is telling the user interface to see a problem. According to say, these things involving psychological feelings have no absolute pairs of pairs. These guidelines I wrote neither, not deep, and more tired, and people are tireless. You can say that I have a certain design of my criticism is very good, because it is an outstanding representative of a certain design style. But we don't forget that the software is not a decadent poem. It is not a deconsive text. It is not a customary guys who have entertain themselves. The software should meet the needs of users, cater to the user's taste, let the users are full of satisfaction , The gas is idle, don't move, I will blow the beard. - I'm saying that only the majority of users are the ultimate authority to evaluate the user interface. Because of this, Microsoft, IBM, HP, Apple, Oracle have to build a so-called usability laboratory, or use statistics to track, investigate, experiments, analyze users' operation habits and aesthetic orientation, simple Say this is to spend a big price to figure out how many high-ya-fashion or low grade fun, this practice is of course the most correct, most effective, and the scientific law, and it is also possible to solve the various problems we encountered in interface design.
