Android Tablet design: screen stream creation and design cloth

UI elements

As you can imagine, the Android system is doing everything in the opposite of its competitors (which is called differentiation!). Honeycomb has its own UI specification, and it now has a new "holographic UI" visual language for day-to-day operations such as choosing a time date, selecting an option, setting the volume, and so on. Understanding this UI language is critical to creating screen flow and design layouts.

Sample UI elements, one-page slide from Google I/o 2011 presentation

Font

How many fonts can iPad4.3 use? The answer is 57 kinds.

How many kinds of Android? only 3.

Yes, they are the droid Sans, the droid Serif and the droid Sans Mono. But there is a positive aspect. Although the platform only has these three fonts, developers are free to bind other fonts to their applications.

What's the same?

Luckily for the designers already familiar with the ipad, these two platforms have some similarities.

Touch gestures

Tap, double-click, slide, drag, shrink, rotate, and scroll arbitrarily.

Split view and multi-pane user interface

Split view is one of the most common layouts in a tablet computer. It consists of two side panes. Of course, you can add panes for more complex layouts.

Ustream Split view, Category option on left, content on right.

Embedded Multimedia

Two platforms are allowed to embed audio, video and maps.

Youtube apps, with embedded video players.

Clip Board

supports the copying and pasting of information inside and outside the application.

Drag and drop

All two platforms have drag-and-drop capabilities.

Drag-and-drop features in Gmail applications

Design Patterns

Honeycomb uses many of the design patterns introduced in Android 2.0 and expands them. If you are unfamiliar with design patterns, as defined in Android, they are a "general solution to recurring problems". Design patterns are a key user interface specification designed by the Android defender, intended to help the user experience consistency, and to give designers and developers a working template. They can be customized, so there's no need to worry.

As mentioned earlier, the action Bar is the most prominent part of the Android user interface and is the focus here.

Action Bar highlighted in Calendar application

Icon or flag

The icon or flag is at the far left of the action bar. It is operable; When clicked, the user is brought to the application's home screen.

Icon for calendar application

Navigation

Below, we find several typical navigation forms, drop-down menu form or Label menu form. Honeycomb uses a triangular graphic to indicate a Drop-down menu and provides a series of underscores for the label; underscores usually occupy the space of most action bars.

The left arrow may also appear on the left side of the icon or flag or label, as a return navigation or cancel the primary action.

Three different types of action bar navigation

Common operations

Commonly used operations, as the name suggests, is to give users similar search, share and overflow menu things. They are always placed on the right side of the action Bar, away from any label.

Common actions in Calendar applications

Overflow menu

An overflow menu is part of a common action group, sometimes separated by a vertical line. This position places multiple menu items, such as settings, help, and feedback.

An overflow menu

Search

Search is also part of the common Operations Group. The uniqueness of the search lies in its expansion and contraction action. Click on the search icon after the search box to expand to let you enter the query keyword. Click "X" to cancel the search, at which point the search box shrinks and becomes the state of a single button. This is a way to save the display space when there are many action keys or icons to show.

Search function Shrink state (above figure) and expand state (bottom diagram). Click on the magnifying glass to expand the search box and click "X" to close the search box.

Contextual manipulation

When an item is selected, contextual actions change the format of the action Bar and show different options than other items. For example, a photo application is showing thumbnails, and once a picture is selected, the action Bar may change to provide contextual action for editing this image.

Users can click "Cancel" or "Finish" in the action Bar to exit the contextual action Bar.

In Gmail apps, clicking and selecting Messages triggers the contextual action Bar

[Translator Note: My English level is really limited, and the article professional vocabulary is too much, please correct me if the translation is inaccurate. Thank you!]

This article compiles from a leaf rain, the original address.

Series of articles:

Android Tablet design: Do it like an ipad?

Source of translation: thinkingrain.lofter.com