Android UI Design Tips notes

First, why should we care about the UI?

If an application has a good experience with it, then:

1. The better the quality of the software the user perceives
2. Will give you a higher rating
3. The software will have a better ranking
4. More people to buy or install your software

Next, we will discuss the following:

1. Design principles that should be followed and should not be followed
2. Design Concepts and considerations
3. The UI framework features you must use
4. New UI design pattern
5. Icons and guidelines

1. Design principles that should be followed and should not be followed the wrong design principle

1. Do not copy the UI design on other platforms.

It should make users feel like they're using a real Android software that balances your brand display with the overall perception of your platform.

2. Do not over-use modal progress bars and confirmation dialogs

(text: This means, do not often pop up those blocking the user all actions of the dialog box or Progress box.) ）。

3. Do not use a fixed absolute positioning layout.

(Text: Absolutlaout, if you use this layout in the software, that means, how many kinds of resolution mobile phone, you will write how many layout files)

4. Do not use PX units, use DP, or if it is text, use SP.

(text: Because of the numerous Android products, the respective resolution of the mobile phone flooding the market.) The use of resolution-related units (PX) is likely to result in other

Resolution on your phone to see your unexpected size effect. The DP (or DIP) and SP are related to the screen density (in fact, according to the 320x480 Standard))

5. Do not use fonts that are too small.

the right design principle

1. All resources are created for high-resolution screens

2. The element that needs to be clicked is big enough

3. Icon design to follow the Android guidelines

4. To use the appropriate spacing (margins, padding)

5. To support D-pad and trackball navigation

(Text: I guess is "touch screen" and "Trackball", "trackball" quite with the mouse on the PC, when the user sliding the trackball to point to the target thing, the object needs to respond. A good understanding of the point, the equivalent of when your mouse across a link or when your mouse hover over a link, the link will often be lit up. If the "touch screen" only needs to focus on the user's finger press action, then "Trackball" also focus on the "control" is selected action. ）

6. To properly manage activity stacks

(Text: The Lanchmode property of the activity can set activity in the stack, such as a single case in the stack or a single case on top of the stack, or always new.) Depends on whether you want the user to go back to the previous (or earlier) interface and see the "original" or "last" data. The former usually means discarding the user's last completed data, querying the updated data from the database, and so on. For example, in the XXX project, when the user presses the home key back to the desktop and then clicks on the status bar (top of the desktop) a "villain" icon will appear, the user clicks it will go back to the application, for the "main interface" or "graphical interface", is used to see the "last" way of data. Depending on the setting of their lanchmode).

7. To correctly handle screen orientation changes.

(text: Unless it is a last resort, it is recommended not to force horizontal or vertical screen.) The person who is lying on the bed to play the handset knows, the one hand lifts in the air long, the hand will ache, this time hoped to cross the screen to hand operation. Holding hands for a long time, just want to test the body to lie down and replace with one hand holding. In short, the human creature can never find a comfortable posture that will never be satisfied. Therefore, the insurance approach is to take any of his use poses into account.

But my sad discovery, even if we do support automatic horizontal, vertical screen, human still will not be satisfied. Because when you're on the side of a single hand using your phone, even if you hold your phone upright (for people who are sideways, the phone is upright). At this time people will want to display the content of vertical screen, but because the direction of the mobile phone for the Earth, has crossed over, therefore, the mobile phone content will become a horizontal screen. When I use an ebook software, this problem is annoying me (I have to read the head), until the use of "QQ Reader", the mood suddenly extremely happy, just because he supports "always horizontal screen or always vertical screen" setting. So I became a "QQ Reader" loyal users.
To fascinate a man, only a seductive wink of a woman's eye; to charm a user, sometimes it only takes a very intimate detail. ）

8. Use theme/style, size, and color resources to reduce interface redundancy.

(for example, your software (or even the same interface) has a lot of text boxes, and each text box has a similar style. So, do you have to set up a bunch of them each? Such as:

<EditTextAndroid:layout_width= "Fill_parent"Android:layout_height= "Wrap_content"Android:layout_margintop= "5.0dip"Android:layout_marginright= "5.0dip"Android:layout_marginbottom= "5.0px"Android:background= "@drawable/login_edit"Android:paddingleft= "35.0SP"Android:singleline= "true"android:saveenabled= "true"Android:inputtype= "text"/>

Or is it a little bit better (it will be modified into a style and let the style be reused):

< EditText   style = "@style/style_edit" />

If you have 20 such text boxes in your software, you can just copy this line of code 20 times.
Some people will hesitate to say, my 20 text box in addition to some details of the difference how half?

1. Write a style for each type of text box.

2. Abstract the common denominator of several

<parent= "@style/base_edit">... Differentiated content </style>

3. If the content of the difference is more and less common, there is a little trick. For example:

< EditText   style = "@style/style_edit" Android:inputtype = "Password" />

This way, the style is changed into a password box for the normal text box. The trick in parsing XML with Android is to use the pull parser, which is characterized by the fact that the property written in front will be parsed first (triggering the event first), so android:inputtype= "password" is written in the back, Will overwrite the contents of the style. This also completes the style differentiation. ）

2. Design Concepts and Considerations

Design concept

1. Clean and not too simple (text: Let me think of a word-aesthetics is a user experience of a form of expression, not for the sake of beauty and beauty. )

2. Focus on content rather than retouching

3. Consistent, appealing, small amount of concise changes

4. Enhance the user experience by using cloud services (simultaneously synchronizing user scenarios on PC desktops and phones)

3. Design guidelines for Excellent interface

1. Follow users

2. Display the correct content

3. Give the user appropriate feedback

4. Rule-based behavior patterns

5. Tolerance of Errors

Follow users

1. Know your users (age, skills, culture, whether there is a physical barrier, the need for the application, the equipment used, when and how to use the device)
2. "User first" design mentality (user is usually task-oriented)
3. Early, more frequent testing by real users

Display the correct content

1. The most commonly used operations user should immediately be able to see and use
2. Secondary functions can be placed in the menu

Give the user appropriate feedback

1. Interactive UI elements need to reflect at least 4 different states (default,disabled,focused,pressed) (text: Recommended Google home Google Music android client)
2. Ensure that the results of the operation are clearly visible. (text: This I recommend Excel)
3. Give the user progress hints, but do not interfere with their current operation.

(Text: Other common alternative ways:
1. In the notification bar, the current progress can be seen in the notification bar. Need to learn remoteview.
2. On the right side of the title, a small circular progress bar is displayed (always rotated that way). such as Gmail.
3. Like a thunderbolt download in Windows, a small icon is displayed on top. Recommended experience UC thunderbolt, feel good. WindowManager's AddView and removeview mechanisms for the entire screen can achieve this effect.
4. Like a UC browser, a horizontal progress bar is displayed at the top of the screen. ）

Rule-based behavior patterns

1. Behavioral patterns Follow the user's expectations (the right action stack, showing the information and actions the user expects to see)
2. Use the appropriate way to enhance the visibility of the function (clickable elements should appear to be clickable)
3. If a user completes a task that requires complex operations, rethink your design!!!

Tolerance Error

1. Only meaningful actions are allowed (some UI elements are disabled appropriately)
2. Minimize non-fallback operations
3. Allow fallback (undo) is better than using the OK dialog box (in fact, you should minimize the use of the OK dialog box, which is a distraction to the user)

4. Considerations in Design

1. Physical dimensions of the screen
2. Screen density
3. Orientation of the screen (vertical and horizontal)
4. Main UI interaction (touch screen or use D-pad/trackball)
5. Soft keyboard or physical keyboard
6. It is important to understand the differences between different devices.
7. Read the CDD (Compatibility definition Document) to learn about possible differences in the device
8. Understand screen size and density classification (click here to read)

If the error is likely to occur, it will certainly happen.
-Donald Norman, author of the Design of everyday Things (text: "Designing Psychology", details about Donald Norman here: http://www.techcn.com.cn/index.php? doc-view-134543.html)

Reproduced from

Http://blog.sina.com.cn/s/blog_8a97a8d50100u2gs.html

Android UI Design Tips notes