Preface
The Android platform does not provide specific documentation on how to design and work the Android Application. From the very beginning, Google showed that they had no intention of specifying what Android applications could accept and what they could not. Android also provides some column UI guidance documents, but most of these documents focus on some small aspects, such as icons, widgets, and forms ).
From the creation of the Android platform to the present, there are thousands of ideas about how the app UI and program should look like, which is far from uniform. However, as the platform matures, more and more applications gradually begin to unify the UI. Some UI functions have been developed into libraries, and some have been defined in the android SDK library. In the near future, users will increasingly want applications to work in the same way. Some controls and interaction modes will become an important part of enhancing the android user experience. In this article, I want to summarize how Android UIS works at a higher level. I used to write a lot of things about UI patterns in the past. Now I want to integrate them together to illustrate what I think "android applications should be ".
Ice cream sandwich (ice cream sandwich)
The previous Android 4.0 version has greatly improved the user experience of the platform. These changes naturally affect the future of Android applications. Some upgrades can be transplanted to earlier versions, but not all of them. In this article, I mainly talk about how the Android Application should be. After Android is developed to version 4.0, the UI has been greatly developed, but in fact we have more than 200.000.000android devices in version 2.1 ~ Run on Android 2.3.
APP landing screen)
Many applications use the | dashboard UI | mode as the view opened at the beginning of the application-app landing screen. If your application has more than one main function, | dashboard UI | mode will be a good choice. A dashboard displays the most important functions of an application and provides quick links to these functions on a single screen.
Dashboard is relatively familiar to Android mobile users. If your application uses the | dashboard UI | mode on the first screen, the user will be familiar with it and the user experience will be greatly improved. An example of an application using | dashboard UI | is as follows.
General application Screen)
In general, different (activity) screens use different forms to display few and single functions, and the user recognizes and expects this. Using an action bar at the top of the screen is very common and easy to accept.
- There is an application icon or home page icon on the far left of the Operation bar. You can click this icon to return to the home page of the application.
- In the middle of the Operation bar is the screen title bar, the background color is better to cater to your trademark color or be consistent with the whole application.
- On the rightmost side of the Operation bar, there are some icons that specify some important operations. These operations are only related to the screen content. The search function seems to be quite common here.
Common application cases are as follows:
The implementation of action bar can be used to study the actions barsherlock Library Project of Jake Wharton's.
List Screen)
Lists is a very common component in the android UI. It is also very useful when displaying data, especially in displaying data that you cannot determine the quantity. Lists also has disadvantages. In order to better display the list containers, each item in the list has fewer contents. On the other hand, congestion of a large amount of information in the list container in a small area will make it difficult for users to use the list, it is difficult to interact with options in the list.
If you have guidance on how to use lists in Android, it will improve the user experience. Android users have the following usage experiences in the list (elements and functions). If your list (lists) is followed by the following similar methods, then your users will be more likely to use your applications.
- Action bar on list Screen)
On the list screen, you can use the operation bar to display operations related to the entire list, such as selecting all. Note that the operation on the Operation bar should not be an operation on a list item.
- List items and check boxes (list items and checkboxes)
Each list item usually contains text information and image elements. You can use a check box to select one or more options for each list item. Using the check box on the far left of a list item has the following benefits:
1. This is consistent with the usage habits of desktop applications on the Web and other mobile phones.
2. You can create a check box with a larger click area on the edge of each list option, which makes it easier for you to use a list option and a list option in tapping.
3. Use an image component on the far left of the List Option to create a virtual start and end notification for the user, so that the user can view the list information more quickly.
Some list items require more interactive operations than simple selection (checkbox) and navigation (Tapping. The most common use case is to comment on starring or bookmarking list items. Secondary item control is the rightmost part of the list item. Any other location may conflict with the click area.
Common Use Cases are aldiko and Google Mail:
- Never end the list (never ending list)
Many list items are from the Web. In this case, loading data takes time. Therefore, the speed at which list items are displayed in the list is not as fast as that at which the list is rolled up or down. In this case, the user scrolls to the bottom of the list, then the application should automatically obtain more data from the server. Indicator tells users that more data will be displayed at the bottom of the list, including loading effects, such as image loading.
Case study: Android Market and Twitter
- Single Row action-long press-quick actions)
It provides users with a shortcut to the single-row list option without entering the list option screen, which can improve the user experience. Because mobile phones and tablets do not have mouse buttons, it is necessary to specify an operation similar to "right click, however, you can play the "right click" role for a long time based on a certain option.
There is a UI pattern called quick actions to display quick operations for list options. The original graphical method has almost disappeared, but the principle remains the same. The overlay menu format is used to display a simple operation list. Generally, there are 3-5 operations. No matter how quick actions is implemented, note the following important points:
1. Do not overwrite the selected list option in over menu. Especially when performing the delete operation, if you see the selected list options, it is more conducive to user operations.
2. Only some simple operations are displayed. Operations that require interaction with users are best handled on a single item screen.
Use Cases:
If the list contains the check boxes mentioned above, you can select multiple list options at the same time. By selecting several options, you can perform the same operation on all selected items. You can usually add buttons at the bottom of the UI panel to process multiple options. The button panel automatically disappears after the operation.
Use Cases:
- More information about the list will be translated in subsequent tutorials.
By styling Android's mark ALLISON: listview-Part 1 listview-Part 2 listview-Part 3 listview-Part 4 and androiddevblog's Cyril mottier:
Listview Tips & tricks #1: handle emptiness listview Tips & tricks #2: Section your listview
Listview Tips & tricks #3: Create fancy listviews
Listview Tips & tricks #4: add several clickable Areas
Tag screen (tabs)
Many applications use tabs to help users switch between different pages. Android 3.0 and later versions have changed the way tabs works, and it looks cool. In my opinion, we should try to apply this change to our application, regardless of the version of Android mobile phone that runs the program.
Simply put, the switch mode on the tab page has changed, and the user expects your application to change as well.
The specific case is as follows:
The tutorials to be introduced later are as follows:
Ice cream sandwich UI feature-Tabs
Viewpager-Part 1
Viewpager-Part 2
Viewpager-Part 3
References
Http://www.androiduipatterns.com/2011/12/how-should-android-apps-look-like_16.htmlhttps://github.com/JakeWharton/Android-ViewPagerIndicator
If reprinted please indicate the source http://www.cnblogs.com/youngC/archive/2012/10/31/2747907.html
QQ: 1321518080