Zhuge liang: Details determine success or failure! 20 details not to be overlooked in app design
Source: Internet
Author: User
<span id="Label3"></p><p style="margin-top:0px;margin-bottom:0px;padding:7px 0px 0px;border:0px;font-size:14px;vertical-align:baseline;text-indent:22px;color:rgb(95,95,95);font-family:‘Microsoft YaHei‘;line-height:22px;white-space:normal;background-color:rgb(255,255,255);"><p style="margin-top:0px;margin-bottom:0px;padding:7px 0px 0px;border:0px;font-size:14px;vertical-align:baseline;text-indent:22px;color:rgb(95,95,95);font-family:‘Microsoft YaHei‘;line-height:22px;white-space:normal;background-color:rgb(255,255,255);">Why the development of the app is to see the light dead, survival period is generally not long, because your product does not meet the needs of customers, so most become "zombie" software! In addition to strong technical support, details are also important standards for good app. GE today to everyone analysis, in the design of the app can not be overlooked in the details!</p></p><p style="margin-top:0px;margin-bottom:0px;padding:7px 0px 0px;border:0px;font-size:14px;vertical-align:baseline;text-indent:22px;color:rgb(95,95,95);font-family:‘Microsoft YaHei‘;line-height:22px;white-space:normal;background-color:rgb(255,255,255);"><p style="margin-top:0px;margin-bottom:0px;padding:7px 0px 0px;border:0px;font-size:14px;vertical-align:baseline;text-indent:22px;color:rgb(95,95,95);font-family:‘Microsoft YaHei‘;line-height:22px;white-space:normal;background-color:rgb(255,255,255);"><strong style="margin:0px;padding:0px;border:0px;vertical-align:baseline;">first, consistent, consistent, or consistent</strong></p></p><p style="margin-top:0px;margin-bottom:0px;padding:7px 0px 0px;border:0px;font-size:14px;vertical-align:baseline;text-indent:22px;color:rgb(95,95,95);font-family:‘Microsoft YaHei‘;line-height:22px;white-space:normal;background-color:rgb(255,255,255);"><p style="margin-top:0px;margin-bottom:0px;padding:7px 0px 0px;border:0px;font-size:14px;vertical-align:baseline;text-indent:22px;color:rgb(95,95,95);font-family:‘Microsoft YaHei‘;line-height:22px;white-space:normal;background-color:rgb(255,255,255);">The most important thing you can do is to ensure the consistency of user interface Operation. For a list box, if you double-click one of the items to make certain events happen, double-clicking an item in any other list box should have the same occurrence. The position of all the window buttons should be consistent, the wording of the label and message should be consistent, the color scheme should be Consistent. User interface-induced to create a precise psychological model of user interface operation, thus reducing training and support costs.</p></p><p style="margin-top:0px;margin-bottom:0px;padding:7px 0px 0px;border:0px;font-size:14px;vertical-align:baseline;text-indent:22px;color:rgb(95,95,95);font-family:‘Microsoft YaHei‘;line-height:22px;white-space:normal;background-color:rgb(255,255,255);"><p style="margin-top:0px;margin-bottom:0px;padding:7px 0px 0px;border:0px;font-size:14px;vertical-align:baseline;text-indent:22px;color:rgb(95,95,95);font-family:‘Microsoft YaHei‘;line-height:22px;white-space:normal;background-color:rgb(255,255,255);">Refinement: consistency is embodied in color collocation and application, the use of fonts, the same interactive effect.</p></p><p style="margin-top:0px;margin-bottom:0px;padding:7px 0px 0px;border:0px;font-size:14px;vertical-align:baseline;text-indent:22px;color:rgb(95,95,95);font-family:‘Microsoft YaHei‘;line-height:22px;white-space:normal;background-color:rgb(255,255,255);"><p style="margin-top:0px;margin-bottom:0px;padding:7px 0px 0px;border:0px;font-size:14px;vertical-align:baseline;text-indent:22px;color:rgb(95,95,95);font-family:‘Microsoft YaHei‘;line-height:22px;white-space:normal;background-color:rgb(255,255,255);">generally, we use no more than 3 Colors. There are no more than 3 interactive Effects.</p></p><p style="margin-top:0px;margin-bottom:0px;padding:7px 0px 0px;border:0px;font-size:14px;vertical-align:baseline;text-indent:22px;color:rgb(95,95,95);font-family:‘Microsoft YaHei‘;line-height:22px;white-space:normal;background-color:rgb(255,255,255);"><p style="margin-top:0px;margin-bottom:0px;padding:7px 0px 0px;border:0px;font-size:14px;vertical-align:baseline;text-indent:22px;color:rgb(95,95,95);font-family:‘Microsoft YaHei‘;line-height:22px;white-space:normal;background-color:rgb(255,255,255);"><strong style="margin:0px;padding:0px;border:0px;vertical-align:baseline;">second, establish standards and follow them</strong></p></p><p style="margin-top:0px;margin-bottom:0px;padding:7px 0px 0px;border:0px;font-size:14px;vertical-align:baseline;text-indent:22px;color:rgb(95,95,95);font-family:‘Microsoft YaHei‘;line-height:22px;white-space:normal;background-color:rgb(255,255,255);"><p style="margin-top:0px;margin-bottom:0px;padding:7px 0px 0px;border:0px;font-size:14px;vertical-align:baseline;text-indent:22px;color:rgb(95,95,95);font-family:‘Microsoft YaHei‘;line-height:22px;white-space:normal;background-color:rgb(255,255,255);">The only way to stay consistent in your application is to set up design standards and follow Them. The best approach is to adopt a set of industry standards that complement their own special NEEDS. Existing industry standards, such as IBM Standard (1993) and Microsoft standard (1995), typically meet the needs of 95% to 99%. With industry standards, just take advantage of the results you have and make your application look or feel more like other applications that the user has purchased or Built. User interface design criteria should be established during the definition of the basic construction phase.</p></p><p style="margin-top:0px;margin-bottom:0px;padding:7px 0px 0px;border:0px;font-size:14px;vertical-align:baseline;text-indent:22px;color:rgb(95,95,95);font-family:‘Microsoft YaHei‘;line-height:22px;white-space:normal;background-color:rgb(255,255,255);"><p style="margin-top:0px;margin-bottom:0px;padding:7px 0px 0px;border:0px;font-size:14px;vertical-align:baseline;text-indent:22px;color:rgb(95,95,95);font-family:‘Microsoft YaHei‘;line-height:22px;white-space:normal;background-color:rgb(255,255,255);"><strong style="margin:0px;padding:0px;border:0px;vertical-align:baseline;">third, clarify the design rules</strong><br style="margin:0px;padding:0px;">Users need to know how to use the software you developed for Them. The consistency of the software operation shows that the rules you just need to explain again. This is much easier than a step-by-step walkthrough of how to use each feature of the application Software.</p></p><p style="margin-top:0px;margin-bottom:0px;padding:7px 0px 0px;border:0px;font-size:14px;vertical-align:baseline;text-indent:22px;color:rgb(95,95,95);font-family:‘Microsoft YaHei‘;line-height:22px;white-space:normal;background-color:rgb(255,255,255);"><p style="margin-top:0px;margin-bottom:0px;padding:7px 0px 0px;border:0px;font-size:14px;vertical-align:baseline;text-indent:22px;color:rgb(95,95,95);font-family:‘Microsoft YaHei‘;line-height:22px;white-space:normal;background-color:rgb(255,255,255);">You can develop some of the working methods and design specifications that belong to You.</p></p><p style="margin-top:0px;margin-bottom:0px;padding:7px 0px 0px;border:0px;font-size:14px;vertical-align:baseline;text-indent:22px;color:rgb(95,95,95);font-family:‘Microsoft YaHei‘;line-height:22px;white-space:normal;background-color:rgb(255,255,255);"><p style="margin-top:0px;margin-bottom:0px;padding:7px 0px 0px;border:0px;font-size:14px;vertical-align:baseline;text-indent:22px;color:rgb(95,95,95);font-family:‘Microsoft YaHei‘;line-height:22px;white-space:normal;background-color:rgb(255,255,255);"><strong style="margin:0px;padding:0px;border:0px;vertical-align:baseline;">Iv. supporting both novices and skilled</strong><br style="margin:0px;padding:0px;">Library directory symbols for the general users of the library system, perhaps enough, but for skilled users, book managers, it is likely not so Effective. Librarians are specially trained to use complex query systems to find information, so consider setting up a query interface to meet their unique NEEDS.</p></p><p style="margin-top:0px;margin-bottom:0px;padding:7px 0px 0px;border:0px;font-size:14px;vertical-align:baseline;text-indent:22px;color:rgb(95,95,95);font-family:‘Microsoft YaHei‘;line-height:22px;white-space:normal;background-color:rgb(255,255,255);"><p style="margin-top:0px;margin-bottom:0px;padding:7px 0px 0px;border:0px;font-size:14px;vertical-align:baseline;text-indent:22px;color:rgb(95,95,95);font-family:‘Microsoft YaHei‘;line-height:22px;white-space:normal;background-color:rgb(255,255,255);"><strong style="margin:0px;padding:0px;border:0px;vertical-align:baseline;">The switch between UI interface is very important, also must pay attention to</strong><br style="margin:0px;padding:0px;">If it's difficult to switch from one screen to another, the user will quickly lose heart and give up. This software is meaningful to the user when the screen process conforms to the workflow that the user wants to Complete. Because different users work in different ways, application software needs to be flexible enough to support their different ways. During the modeling phase, the interface flowchart can be used to simulate the process between screens.</p></p><p style="margin-top:0px;margin-bottom:0px;padding:7px 0px 0px;border:0px;font-size:14px;vertical-align:baseline;text-indent:22px;color:rgb(95,95,95);font-family:‘Microsoft YaHei‘;line-height:22px;white-space:normal;background-color:rgb(255,255,255);"><p style="margin-top:0px;margin-bottom:0px;padding:7px 0px 0px;border:0px;font-size:14px;vertical-align:baseline;text-indent:22px;color:rgb(95,95,95);font-family:‘Microsoft YaHei‘;line-height:22px;white-space:normal;background-color:rgb(255,255,255);"><strong style="margin:0px;padding:0px;border:0px;vertical-align:baseline;">six, the layout of the interface is very important</strong><br style="margin:0px;padding:0px;">In the west, people are from the left and right, reading from the top, based on People's habits, the screen of the Organization should also be from the left and right, from the top down. The layout of the screen widget should also be done in a way that is familiar to the User.</p></p><p style="margin-top:0px;margin-bottom:0px;padding:7px 0px 0px;border:0px;font-size:14px;vertical-align:baseline;text-indent:22px;color:rgb(95,95,95);font-family:‘Microsoft YaHei‘;line-height:22px;white-space:normal;background-color:rgb(255,255,255);"><p style="margin-top:0px;margin-bottom:0px;padding:7px 0px 0px;border:0px;font-size:14px;vertical-align:baseline;text-indent:22px;color:rgb(95,95,95);font-family:‘Microsoft YaHei‘;line-height:22px;white-space:normal;background-color:rgb(255,255,255);"><strong style="margin:0px;padding:0px;border:0px;vertical-align:baseline;">seven, message and label wording to be appropriate</strong></p></p><p style="margin-top:0px;margin-bottom:0px;padding:7px 0px 0px;border:0px;font-size:14px;vertical-align:baseline;text-indent:22px;color:rgb(95,95,95);font-family:‘Microsoft YaHei‘;line-height:22px;white-space:normal;background-color:rgb(255,255,255);"><p style="margin-top:0px;margin-bottom:0px;padding:7px 0px 0px;border:0px;font-size:14px;vertical-align:baseline;text-indent:22px;color:rgb(95,95,95);font-family:‘Microsoft YaHei‘;line-height:22px;white-space:normal;background-color:rgb(255,255,255);">The text displayed on the screen is the main source of information for the User. If the text is poorly worded, the User's understanding will be Bad. Use complete wording and sentences rather than abbreviations and code to make the text easy to Understand. The message is worded aggressively, showing that the user is in control and suggesting how to use the software correctly.</p></p><p style="margin-top:0px;margin-bottom:0px;padding:7px 0px 0px;border:0px;font-size:14px;vertical-align:baseline;text-indent:22px;color:rgb(95,95,95);font-family:‘Microsoft YaHei‘;line-height:22px;white-space:normal;background-color:rgb(255,255,255);"><p style="margin-top:0px;margin-bottom:0px;padding:7px 0px 0px;border:0px;font-size:14px;vertical-align:baseline;text-indent:22px;color:rgb(95,95,95);font-family:‘Microsoft YaHei‘;line-height:22px;white-space:normal;background-color:rgb(255,255,255);">For example, which of the following messages is more appealing: "did you enter the error message" or "the account number should be 8 digits"? In addition, the message is worded in a consistent and consistent position on the Screen. Although the message "must be entered first name" and "should enter the account number" respectively, the wording is not a problem, put together is Inconsistent.</p></p><p style="margin-top:0px;margin-bottom:0px;padding:7px 0px 0px;border:0px;font-size:14px;vertical-align:baseline;text-indent:22px;color:rgb(95,95,95);font-family:‘Microsoft YaHei‘;line-height:22px;white-space:normal;background-color:rgb(255,255,255);"><p style="margin-top:0px;margin-bottom:0px;padding:7px 0px 0px;border:0px;font-size:14px;vertical-align:baseline;text-indent:22px;color:rgb(95,95,95);font-family:‘Microsoft YaHei‘;line-height:22px;white-space:normal;background-color:rgb(255,255,255);">According to the wording of the first message, the better wording of the second message should be "to enter an account number", which would make the wording of the two messages Consistent.</p></p><p style="margin-top:0px;margin-bottom:0px;padding:7px 0px 0px;border:0px;font-size:14px;vertical-align:baseline;text-indent:22px;color:rgb(95,95,95);font-family:‘Microsoft YaHei‘;line-height:22px;white-space:normal;background-color:rgb(255,255,255);"><p style="margin-top:0px;margin-bottom:0px;padding:7px 0px 0px;border:0px;font-size:14px;vertical-align:baseline; Text-indent:22px;color:rgb (95,95,95); font-family: ' Microsoft yahei '; line-height:22px;white-space:normal; Background-color:rgb (255,255,255); "><strong style="margin:0px;padding:0px;border:0px;vertical-align:baseline;"> eighth, Understanding Widget Tools </strong> <br style=" margin:0px;padding:0px; " The use of the right widgets for task first helps to enhance consistency application and may make very easy Construct. only way learn how correctly is read understand user interface standards guidelines you have Adopted. < p></p></p><p style="margin-top:0px;margin-bottom:0px;padding:7px 0px 0px;border:0px;font-size:14px;vertical-align:baseline;text-indent:22px;color:rgb(95,95,95);font-family:‘Microsoft YaHei‘;line-height:22px;white-space:normal;background-color:rgb(255,255,255);"><p style="margin-top:0px;margin-bottom:0px;padding:7px 0px 0px;border:0px;font-size:14px;vertical-align:baseline;text-indent:22px;color:rgb(95,95,95);font-family:‘Microsoft YaHei‘;line-height:22px;white-space:normal;background-color:rgb(255,255,255);"><strong style="margin:0px;padding:0px;border:0px;vertical-align:baseline;">ninth, do not blindly follow the other software</strong><br style="margin:0px;padding:0px;">Unless you know that an application is following your user interface standards and guidelines, you should never assume that it is doing the right thing. Although it's a good idea to look at what people are doing and get some ideas from them, you need to be careful before you know how to differentiate the user interface Design. Too many developers mistakenly imitate the user interface of other applications, and those interfaces are poorly designed, and it is best to outsource the design of the interface to a professional design outsourcing company.</p></p><p style="margin-top:0px;margin-bottom:0px;padding:7px 0px 0px;border:0px;font-size:14px;vertical-align:baseline;text-indent:22px;color:rgb(95,95,95);font-family:‘Microsoft YaHei‘;line-height:22px;white-space:normal;background-color:rgb(255,255,255);"><p style="margin-top:0px;margin-bottom:0px;padding:7px 0px 0px;border:0px;font-size:14px;vertical-align:baseline;text-indent:22px;color:rgb(95,95,95);font-family:‘Microsoft YaHei‘;line-height:22px;white-space:normal;background-color:rgb(255,255,255);"><strong style="margin:0px;padding:0px;border:0px;vertical-align:baseline;">tenth, color use to appropriate use of color to be cautious</strong></p></p><p style="margin-top:0px;margin-bottom:0px;padding:7px 0px 0px;border:0px;font-size:14px;vertical-align:baseline;text-indent:22px;color:rgb(95,95,95);font-family:‘Microsoft YaHei‘;line-height:22px;white-space:normal;background-color:rgb(255,255,255);"><p style="margin-top:0px;margin-bottom:0px;padding:7px 0px 0px;border:0px;font-size:14px;vertical-align:baseline;text-indent:22px;color:rgb(95,95,95);font-family:‘Microsoft YaHei‘;line-height:22px;white-space:normal;background-color:rgb(255,255,255);">If used, also use an Indicator. The problem is that some users might be color blind. one by one if you use color on the screen to highlight something, if you want to make it noticeable to color-blind users, you need to do something else to highlight it, such as displaying a symbol next to it. The use of colors is also consistent so that the entire application has the same impression. In addition, on different platforms, the performance of color disappointments on one system looks good and often looks bad on another system. At the show, we often hear the performers say, "it looks good on the machine in my house." ”</p></p><p style="margin-top:0px;margin-bottom:0px;padding:7px 0px 0px;border:0px;font-size:14px;vertical-align:baseline;text-indent:22px;color:rgb(95,95,95);font-family:‘Microsoft YaHei‘;line-height:22px;white-space:normal;background-color:rgb(255,255,255);"><p style="margin-top:0px;margin-bottom:0px;padding:7px 0px 0px;border:0px;font-size:14px;vertical-align:baseline;text-indent:22px;color:rgb(95,95,95);font-family:‘Microsoft YaHei‘;line-height:22px;white-space:normal;background-color:rgb(255,255,255);"><strong style="margin:0px;padding:0px;border:0px;vertical-align:baseline;">11th, Follow the principle of contrast</strong><br style="margin:0px;padding:0px;">To use colors in your application, make sure your screen is Readable. The best way to do this is to follow the contrast principle: use dark text on a light background and light text on a dark background. The blue text is easy to read with a white background, but it is difficult to identify with a red background. The problem is that there is not enough contrast between blue and red, and there is a big contrast between blue and White.</p></p><p style="margin-top:0px;margin-bottom:0px;padding:7px 0px 0px;border:0px;font-size:14px;vertical-align:baseline;text-indent:22px;color:rgb(95,95,95);font-family:‘Microsoft YaHei‘;line-height:22px;white-space:normal;background-color:rgb(255,255,255);"><p style="margin-top:0px;margin-bottom:0px;padding:7px 0px 0px;border:0px;font-size:14px;vertical-align:baseline; Text-indent:22px;color:rgb (95,95,95); font-family: ' Microsoft yahei '; line-height:22px;white-space:normal; Background-color:rgb (255,255,255); "><strong style="margin:0px;padding:0px;border:0px;vertical-align:baseline;"> 12th, font use appropriate </strong> <br style=" margin:0px;padding:0px; "> Old English fonts may look good on the cover of Shakespeare's script, but it's hard to recognize on the Screen. Use fonts that are readable, such as serif or times Roman. In addition, the use of fonts should be Consistent. A frugal, efficient screen that uses two or three fonts looks much better than a screen that uses five or six fonts. Remember to change the font size, style (bold, italic, underline, ...) every Time. ), style, or color, are used in different fonts. <br style="margin:0px;padding:0px;"><strong style="margin:0px;padding:0px;border:0px;vertical-align:baseline;"> 13th, Gray instead of removing </strong> <br style="margin:0px;padding:0px;" at some point, users often have access to only certain features of the application Software. Before deleting an object, select it deepen User's mental model, and software should use Delete button or menu item do Something. Should be removed grayed out? Drop never remove it! When user not used gray it, can enable establish a precise psychological model. If you just move widget item, rather than ash it's hard for build model because knows what's currently available doesn't know available. < p></p></p><p style="margin-top:0px;margin-bottom:0px;padding:7px 0px 0px;border:0px;font-size:14px;vertical-align:baseline;text-indent:22px;color:rgb(95,95,95);font-family:‘Microsoft YaHei‘;line-height:22px;white-space:normal;background-color:rgb(255,255,255);"><p style="margin-top:0px;margin-bottom:0px;padding:7px 0px 0px;border:0px;font-size:14px;vertical-align:baseline; Text-indent:22px;color:rgb (95,95,95); font-family: ' Microsoft yahei '; line-height:22px;white-space:normal; Background-color:rgb (255,255,255); "><strong style="margin:0px;padding:0px;border:0px;vertical-align:baseline;"> 14th, Use the Non-destructive default button </strong> <br style="margin:0px;padding:0px;"> Usually each screen defines a default button if the user presses the ENTER key to invoke this Button. The problem is that sometimes the user accidentally strikes the Enter key, and the result activates the default Button. The default button must never be potentially destructive, such as deleting or saving (perhaps the user doesn't want to save at all). </p></p><p style="margin-top:0px;margin-bottom:0px;padding:7px 0px 0px;border:0px;font-size:14px;vertical-align:baseline;text-indent:22px;color:rgb(95,95,95);font-family:‘Microsoft YaHei‘;line-height:22px;white-space:normal;background-color:rgb(255,255,255);"><p style="margin-top:0px;margin-bottom:0px;padding:7px 0px 0px;border:0px;font-size:14px;vertical-align:baseline;text-indent:22px;color:rgb(95,95,95);font-family:‘Microsoft YaHei‘;line-height:22px;white-space:normal;background-color:rgb(255,255,255);"><strong style="margin:0px;padding:0px;border:0px;vertical-align:baseline;">15th, Regional Arrangement</strong><br style="margin:0px;padding:0px;">When the screen has multiple editing areas, you want to organize these areas visually and efficiently. As shown in 1, the best way to edit area left is to ALIGN. In other words, the left border of the edit area is arranged in a straight line and up and Down. The corresponding label should be right-aligned and placed next to the editing Area. This is a neat and effective way to organize areas on the Screen.</p></p><p style="margin-top:0px;margin-bottom:0px;padding:7px 0px 0px;border:0px;font-size:14px;vertical-align:baseline;text-indent:22px;color:rgb(95,95,95);font-family:‘Microsoft YaHei‘;line-height:22px;white-space:normal;background-color:rgb(255,255,255);"><p style="margin-top:0px;margin-bottom:0px;padding:7px 0px 0px;border:0px;font-size:14px;vertical-align:baseline;text-indent:22px;color:rgb(95,95,95);font-family:‘Microsoft YaHei‘;line-height:22px;white-space:normal;background-color:rgb(255,255,255);"><strong style="margin:0px;padding:0px;border:0px;vertical-align:baseline;">16th, The data alignment should be appropriate</strong><br style="margin:0px;padding:0px;">For data on a column of columns, the usual practice is to right-align the entire floating-point number and align the string to the Left.</p></p><p style="margin-top:0px;margin-bottom:0px;padding:7px 0px 0px;border:0px;font-size:14px;vertical-align:baseline;text-indent:22px;color:rgb(95,95,95);font-family:‘Microsoft YaHei‘;line-height:22px;white-space:normal;background-color:rgb(255,255,255);"><p style="margin-top:0px;margin-bottom:0px;padding:7px 0px 0px;border:0px;font-size:14px;vertical-align:baseline;text-indent:22px;color:rgb(95,95,95);font-family:‘Microsoft YaHei‘;line-height:22px;white-space:normal;background-color:rgb(255,255,255);"><strong style="margin:0px;padding:0px;border:0px;vertical-align:baseline;">17th, the screen can not be crowded</strong><br style="margin:0px;padding:0px;">The crowded screens are hard to understand and difficult to use. Experimental results show that the overall screen coverage should not exceed 40%, and the screen cover should not exceed 62% in the GROUP.</p></p><p style="margin-top:0px;margin-bottom:0px;padding:7px 0px 0px;border:0px;font-size:14px;vertical-align:baseline;text-indent:22px;color:rgb(95,95,95);font-family:‘Microsoft YaHei‘;line-height:22px;white-space:normal;background-color:rgb(255,255,255);"><p style="margin-top:0px;margin-bottom:0px;padding:7px 0px 0px;border:0px;font-size:14px;vertical-align:baseline;text-indent:22px;color:rgb(95,95,95);font-family:‘Microsoft YaHei‘;line-height:22px;white-space:normal;background-color:rgb(255,255,255);"><strong style="margin:0px;padding:0px;border:0px;vertical-align:baseline;">18th, Effective Combination</strong><br style="margin:0px;padding:0px;">Logically associated items should be combined on the screen to show their relevance. conversely, any items that are unrelated to each other should be separated. This can also be done by grouping/or using boxes between the project collections with Intervals.</p></p><p style="margin-top:0px;margin-bottom:0px;padding:7px 0px 0px;border:0px;font-size:14px;vertical-align:baseline;text-indent:22px;color:rgb(95,95,95);font-family:‘Microsoft YaHei‘;line-height:22px;white-space:normal;background-color:rgb(255,255,255);"><p style="margin-top:0px;margin-bottom:0px;padding:7px 0px 0px;border:0px;font-size:14px;vertical-align:baseline; Text-indent:22px;color:rgb (95,95,95); font-family: ' Microsoft yahei '; line-height:22px;white-space:normal; Background-color:rgb (255,255,255); "><strong style="margin:0px;padding:0px;border:0px;vertical-align:baseline;"> 19th, Open the window in the action Focus </strong> <br style="margin:0px;padding:0px;" when the user double-clicks on an object to display its Edit detail screen, User's attention is also focused This. So it makes sense open a window here instead of somewhere else. < p></p></p><p style="margin-top:0px;margin-bottom:0px;padding:7px 0px 0px;border:0px;font-size:14px;vertical-align:baseline;text-indent:22px;color:rgb(95,95,95);font-family:‘Microsoft YaHei‘;line-height:22px;white-space:normal;background-color:rgb(255,255,255);"><p style="margin-top:0px;margin-bottom:0px;padding:7px 0px 0px;border:0px;font-size:14px;vertical-align:baseline;text-indent:22px;color:rgb(95,95,95);font-family:‘Microsoft YaHei‘;line-height:22px;white-space:normal;background-color:rgb(255,255,255);"><strong style="margin:0px;padding:0px;border:0px;vertical-align:baseline;">12th, pop-up menus should not be the only source of functionality</strong><br style="margin:0px;padding:0px;">If the main function is hidden, users will not be able to learn how to use the Software. The most frustrating thing for developers is to abuse pop-up menus, also known as context-sensitive Menus. A typical way to use a mouse is to display a hidden pop-up menu that provides access to specific features of the screen area of the current Work.</p></p><p style="margin-top:0px;margin-bottom:0px;padding:7px 0px 0px;border:0px;font-size:14px;vertical-align:baseline;text-indent:22px;color:rgb(95,95,95);font-family:‘Microsoft YaHei‘;line-height:22px;white-space:normal;background-color:rgb(255,255,255);"><p style="margin-top:0px;margin-bottom:0px;padding:7px 0px 0px;border:0px;font-size:14px;vertical-align:baseline;text-indent:22px;color:rgb(95,95,95);font-family:‘Microsoft YaHei‘;line-height:22px;white-space:normal;background-color:rgb(255,255,255);">These 20 small details that cannot be overlooked in the app design are for your reference only. After all, everyone has their own views and understanding.<br style="margin:0px;padding:0px;">Share a few app design knowledge points with You:</p></p><p style="margin-top:0px;margin-bottom:0px;padding:7px 0px 0px;border:0px;font-size:14px;vertical-align:baseline;text-indent:22px;color:rgb(95,95,95);font-family:‘Microsoft YaHei‘;line-height:22px;white-space:normal;background-color:rgb(255,255,255);"><p style="margin-top:0px;margin-bottom:0px;padding:7px 0px 0px;border:0px;font-size:14px;vertical-align:baseline;text-indent:22px;color:rgb(95,95,95);font-family:‘Microsoft YaHei‘;line-height:22px;white-space:normal;background-color:rgb(255,255,255);">1, AI Line frame, PS vision is more commonly used, here is the recommended fw, wireframe vision can be, also more Convenient. It's not much of a person to Use. But this software is quick to use and can be Recommended.</p></p><p style="margin-top:0px;margin-bottom:0px;padding:7px 0px 0px;border:0px;font-size:14px;vertical-align:baseline;text-indent:22px;color:rgb(95,95,95);font-family:‘Microsoft YaHei‘;line-height:22px;white-space:normal;background-color:rgb(255,255,255);"><p style="margin-top:0px;margin-bottom:0px;padding:7px 0px 0px;border:0px;font-size:14px;vertical-align:baseline;text-indent:22px;color:rgb(95,95,95);font-family:‘Microsoft YaHei‘;line-height:22px;white-space:normal;background-color:rgb(255,255,255);">2, icon of course, according to the appropriate size to do, but you want to play out, the resolution is in 300, and the resolution of the UI is generally 72, the resolution or to change it, otherwise typed can not see, no matter how, save Good source Files. iOS system interface, the size of toolbars and icons, suggested the main topic to find the design specifications, there is no special fixed value, but not too far.</p></p><p style="margin-top:0px;margin-bottom:0px;padding:7px 0px 0px;border:0px;font-size:14px;vertical-align:baseline;text-indent:22px;color:rgb(95,95,95);font-family:‘Microsoft YaHei‘;line-height:22px;white-space:normal;background-color:rgb(255,255,255);"><p style="margin-top:0px;margin-bottom:0px;padding:7px 0px 0px;border:0px;font-size:14px;vertical-align:baseline;text-indent:22px;color:rgb(95,95,95);font-family:‘Microsoft YaHei‘;line-height:22px;white-space:normal;background-color:rgb(255,255,255);">3, icon: Desktop Icon 114*114, tab bar icon <=60, navigation bar icon 40*40,appstore icon 1024*1024,</p></p><p style="margin-top:0px;margin-bottom:0px;padding:7px 0px 0px;border:0px;font-size:14px;vertical-align:baseline;text-indent:22px;color:rgb(95,95,95);font-family:‘Microsoft YaHei‘;line-height:22px;white-space:normal;background-color:rgb(255,255,255);"><p style="margin-top:0px;margin-bottom:0px;padding:7px 0px 0px;border:0px;font-size:14px;vertical-align:baseline;text-indent:22px;color:rgb(95,95,95);font-family:‘Microsoft YaHei‘;line-height:22px;white-space:normal;background-color:rgb(255,255,255);">Control: status bar 40 title bar 88 tab bar 98 navigation bar button 60 List height 〉=88</p></p><p style="margin-top:0px;margin-bottom:0px;padding:7px 0px 0px;border:0px;font-size:14px;vertical-align:baseline;text-indent:22px;color:rgb(95,95,95);font-family:‘Microsoft YaHei‘;line-height:22px;white-space:normal;background-color:rgb(255,255,255);"><p style="margin-top:0px;margin-bottom:0px;padding:7px 0px 0px;border:0px;font-size:14px;vertical-align:baseline;text-indent:22px;color:rgb(95,95,95);font-family:‘Microsoft YaHei‘;line-height:22px;white-space:normal;background-color:rgb(255,255,255);">Font: Big 40 Medium 34 small 24 (if too small to See) app operation</p></p><p style="margin-top:0px;margin-bottom:0px;padding:7px 0px 0px;border:0px;font-size:14px;vertical-align:baseline;text-indent:22px;color:rgb(95,95,95);font-family:‘Microsoft YaHei‘;line-height:22px;white-space:normal;background-color:rgb(255,255,255);"><p style="margin-top:0px;margin-bottom:0px;padding:7px 0px 0px;border:0px;font-size:14px;vertical-align:baseline;text-indent:22px;color:rgb(95,95,95);font-family:‘Microsoft YaHei‘;line-height:22px;white-space:normal;background-color:rgb(255,255,255);"><br></p></p><p style="margin-top:0px;margin-bottom:0px;padding:7px 0px 0px;border:0px;font-size:14px;vertical-align:baseline;text-indent:22px;color:rgb(95,95,95);font-family:‘Microsoft YaHei‘;line-height:22px;white-space:normal;background-color:rgb(255,255,255);"><p style="margin-top:0px;margin-bottom:0px;padding:7px 0px 0px;border:0px;font-size:14px;vertical-align:baseline;text-indent:22px;color:rgb(95,95,95);font-family:‘Microsoft YaHei‘;line-height:22px;white-space:normal;background-color:rgb(255,255,255);"><br></p></p><p style="margin-top:0px;margin-bottom:0px;padding:7px 0px 0px;border:0px;font-size:14px;vertical-align:baseline;text-indent:22px;color:rgb(95,95,95);font-family:‘Microsoft YaHei‘;line-height:22px;white-space:normal;background-color:rgb(255,255,255);"><p style="margin-top:0px;margin-bottom:0px;padding:7px 0px 0px;border:0px;font-size:14px;vertical-align:baseline;text-indent:22px;color:rgb(95,95,95);font-family:‘Microsoft YaHei‘;line-height:22px;white-space:normal;background-color:rgb(255,255,255);">Zhuge http://zhugeio.com/news/?p=196</p></p><p style="margin-top:0px;margin-bottom:0px;padding:7px 0px 0px;border:0px;font-size:14px;vertical-align:baseline;text-indent:22px;color:rgb(95,95,95);font-family:‘Microsoft YaHei‘;line-height:22px;white-space:normal;background-color:rgb(255,255,255);"><p style="margin-top:0px;margin-bottom:0px;padding:7px 0px 0px;border:0px;font-size:14px;vertical-align:baseline;text-indent:22px;color:rgb(95,95,95);font-family:‘Microsoft YaHei‘;line-height:22px;white-space:normal;background-color:rgb(255,255,255);">http://zhugeio.com/news/?p=196</p></p><p style="margin-top:0px;margin-bottom:0px;padding:7px 0px 0px;border:0px;font-size:14px;vertical-align:baseline;text-indent:22px;color:rgb(95,95,95);font-family:‘Microsoft YaHei‘;line-height:22px;white-space:normal;background-color:rgb(255,255,255);"><p style="margin-top:0px;margin-bottom:0px;padding:7px 0px 0px;border:0px;font-size:14px;vertical-align:baseline;text-indent:22px;color:rgb(95,95,95);font-family:‘Microsoft YaHei‘;line-height:22px;white-space:normal;background-color:rgb(255,255,255);">http://zhugeio.com/news/?p=196</p></p><p><p><br></p></p><p><p>Zhuge liang: Details determine success or failure! 20 details not to be overlooked in app design</p></p></span>
The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion;
products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the
content of the page makes you feel confusing, please write us an email, we will handle the problem
within 5 days after receiving your email.
If you find any instances of plagiarism from the community, please send an email to:
info-contact@alibabacloud.com
and provide relevant evidence. A staff member will contact you within 5 working days.
A Free Trial That Lets You Build Big!
Start building with 50+ products and up to 12 months usage for Elastic Compute Service