20 small details not to be overlooked in app design

Source: Internet
Author: User

1, consistent, consistent, or consistent
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.
Refinement: Consistency is embodied in color collocation and application, the use of fonts, the same interactive effect.
Generally, we use no more than 3 colors. There are no more than 3 interactive effects.
2. Establish standards and follow them
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.
Designed strictly according to mobile app specifications, such as font size, spacing, icon size and so on.
3. Clarify design Rules
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.
You can develop some of the working methods and design specifications that belong to you.
4. Support both novices and skilled
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.

5, the UI interface between the switch is very important, but also must pay attention to
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.
6, the layout of the interface is very important
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.
7. Message and label wording should be appropriate
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.
For example, which of the following messages is more appealing: "Do you enter an error message" or "account number should be 8 digits"? In addition, the message is worded in the same way that it appears 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.
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.

8. Understand Widget Tools
Using the right widgets for the right task first helps to enhance the consistency of the application and may make the application easy to construct. The only way to learn how to use widgets correctly is to read and understand the user interface standards and guidelines you have adopted.
9, not blindly follow the other software
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.
10, color use to use the appropriate color to be cautious.
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." ”
11. Follow the principle of contrast
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.
12, the use of fonts should be appropriate
Old-fashioned English fonts may look right on the cover of Shakespeare's script, but they are 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 that each time you change the font size, style (bold, italic, underline, ...), style, or color, you are using a different font.
13. Ash and not remove
At some point, users often only have access to certain features of the application software. Before deleting an object, select it to deepen the user's mental model, and the software should use the Delete button and/or menu item to do something. Should the button be removed or gray? Drop it and never move it! When the user is not supposed to use it, it can be used to establish a precise psychological model of how to use the application software. If you just move a widget or menu item, rather than ash it, it's hard for users to build a precise mental model because the user knows only what's currently available and doesn't know what's not available.
14. Use non-destructive default buttons
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).

15. Regional arrangement
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.
16, the data alignment should be appropriate
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.
17, the screen can not be crowded
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.

18. Effective combination

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.
19. Open the window at the operating focus
When the user double-clicks on an object to display its edit/detail screen, the user's attention is also focused on this. So it makes sense to open a window here instead of somewhere else.
20. Pop-up menus should not be the only source of functionality
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.
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.
Finally, old Tam classmate to share with you a few app design knowledge points:
1, Ai Line frame, PS vision is more commonly used, here is the recommended FW, Wireframe vision can be, also more convenient. Is the use of people are not many, but this software to get started quickly, can be recommended to use.
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.
3, Icon: Desktop icon 114*114, tab bar icon <=60, navigation bar icon 40*40,appstore icon 1024*1024
Control: Status bar 40 title bar 88 tab bar 98 navigation bar button 60 List height 〉=88
Font: Large 40 medium 34 small 24 (if too small to see clearly)

20 small details not to be overlooked in app design

Contact Us

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

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.