Design of Android tablet

Author: Zheng Meng,Hua Qing vision embedded training center lecturer.

There is no time for designers to create experiences for a wide variety of mobile devices. As the tablet computer is accepted, we have entered the "post-PC era", and the company will use the User Experience Quality of the tablet computer to compete for user attention. Successful Android tablet apps require a great concept to encourage users to download, use, and retain them, A user experience that allows Android users to intuitively discover and adapt to the use environment is also required.

Next, by understanding the differences between the design specifications and elements of the iPad IOS user interface and the android 3.x "honeycomb" user interface, we can help designers familiarize themselves with the Android tablet application design. We will also analyze the honeycomb design mode and layout strategy, and then view some very good Android tablet apps.

Note: Although Android 2. x applications on smartphones can run on tablets, the android 3.0 honeycomb system is designed and launched for tablets. Future updates promises to implant honeycomb features into smart phone devices and make it easier to design and build on a variety of screen sizes.

For most of us, the first time we came into contact with the tablet was through the iPad. For this reason, it was reasonable to start to compare the user interfaces of the two. Through comparison, we can organize and organize the knowledge of tablet computers we already know, and focus on the key differences between the two, so that we can meet the unique user interface requirements of Android users. Converting an application that already exists on the iPad to an Android tablet not only makes us faster, but also becomes very important.

Just do it like an iPad, right?

Although there are many similarities between the experience of Android tablets and iPad (Touch gestures, app startup icons, modal expressions, etc ), designers should be familiar with the differences between them before making assumptions and drawing screen streams.

Screen size and direction

The biggest difference between the two platforms is the shape size. The layout of the iPad is 768x1024 physical pixels, and the iPad uses the vertical display direction as its default viewing direction.
The Android tablet computer is a little complicated because it has many manufacturers of devices. In summary, there are 7 inch and 10 inch Android tablet screen sizes (diagonal lines from the upper left corner to the lower right corner) and sizes between them. However, most tablets are about 10 inch.

What does it mean to convert to pixels? A good layout baseline is 1280x752 pixels (excluding the system bar), based on the screen size of 10 inch and uses the horizontal (rather than vertical) as the default direction. Like on an iPad, content on Android can be viewed in both the horizontal and vertical directions, but the horizontal mode is often more popular.

However, for Android, the screen size is only half of the difference. Android tablets also have different "screen density" (number of pixels in a specific area of the screen. Do not pay attention to too much details. Designers can only prepare all production backup bitmaps for three different screen density types, and enlarge each bitmap to 1.5 or 2 times the original size. Therefore, bitmap with a size of 100x100 pixels should also have 150x150 and 200x200 copies. By making three scaled bitmaps, you can convert your bitmaps into a medium, high, and ultra-high-density tablet screen without compromising the image quality.

System bar

Although the iOS platform makes the system bar as small as possible, Android honeycomb expands the size of the system bar and contains notifications and soft navigation buttons. The buttons include the return button, Home button, and the latest application button.

Android honeycomb system bar

The system bar and button of Android honeycomb always exist at the bottom of the screen, No matter what application is enabled. You can use it as a permanent UI fixture. The only exception is the "turn off the light" mode, which is to darken the system bar to display immersive content, such as videos and games.

Return button

Although the heavy and permanent system bar of honeycomb may be a barrier for designers, it does free up a fixed position in iPad apps that are usually occupied by the Return key. The Return key in the honeycomb system bar exists in all applications in the world.

Operation bar

Most of the differences between the two platforms are the operation bar on the top. Android provides suggestions for the specific layout and visual form of the Operation bar elements, including the icon or logo position, navigation (such as drop-down menu or tag) and common operations. This is one of the most unified design patterns for Android honeycomb system applications. It is worthwhile to familiarize yourself with this operation bar before trying to use custom settings or something similar to iPad. More analysis will be made on the general operation bar.

Widget

What makes iPad users feel new will be Android controls. As the name suggests, a widget is mainly a small notification bar and a shortcut tool. You can set it to appear on the startup screen. Controls can be designed as stack views, grid views, and list views. In Android 3.1, they can now be resized.

Notification

The IOS notification system pushes simple notifications to the startup screen, while honeycomb pops up at the bottom right corner of the screen (we usually call them toast, very similar to growl in Mac OS X. the custom layout of a notification can be an icon, scroll text, or any form of an operable button.

Set

The settings in the iPad application are usually displayed in a pop-up window, triggered by clicking the "I" button, and the settings are broken down into many tables that are easy to visually recognize. The honeycomb system has different specifications. It looks more like the "general settings" Screen of IOS. You can type navigation on the left side and View Details on the right side. This is the preferred (more elegant) Way to present multiple settings on the honeycomb system.

UI elements
As everyone thinks, the android system tries its best to put everything in the opposite way as its competitors (this is called differentiation !). Honeycomb has its own UI specification, and now it has a new "holographic UI" visual language for routine operations such as selecting a time date, selecting an option, and setting the volume. Understanding this UI Language is critical to creating screen streams and designing la S.

Font

How many fonts can ipad4.3 be used? There are 57 answers.

How many Android types? There are only three types.

Yes, they are droid SANS, droid serif and droid sans mono. However, there is a positive aspect. Although the platform only has these three fonts, developers can freely bind other fonts to their applications.

What is the same?

The designers who are familiar with the iPad are lucky to have some similarities between the two platforms.

Touch gesture.

Click, double-click, slide, drag, shrink, rotate, and any scroll.

Ui split view and multi-pane user interface.

Split view is one of the most common la s on a tablet. It consists of two sides. Of course, you can add a pane for a more complex layout.

Embedded Multimedia

Both platforms allow embedding audio, video, and map.

Clipboard

Allows you to copy and paste internal and external information of an application.

Drag and Drop

Both platforms have the drag-and-drop function.

Design Mode

Honeycomb follows many design patterns introduced in Android 2.0 and expands them. If you are not familiar with the design patterns, as defined in Android, they are a general solution to repeated problems ". The design pattern is a key user interface specification designed by Android maintainers. It aims to help users experience consistency and provide designers and developers with a work template. They can be customized, so there is no need to worry.

As mentioned above, the Operation bar is the most prominent component of the android user interface, which is also the focus here.

Icon or icon

The icon or flag is on the leftmost side of the Operation bar. It is operable. After clicking it, the user is taken to the homepage of the application.

Navigation

Below, we have found several typical navigation formats, such as drop-down menus or label menus. Honeycomb uses a triangle image to indicate the drop-down menu and provides a series of underlines for the label. The underline usually occupies the space of most operation columns.

The left arrow may also appear on the left side of an icon, logo, or tag. It is used as the return navigation or to cancel the main operation.

Common Operations

Common Operations, as the name suggests, are similar to searching, sharing, and overflow menus for users. They are always placed on the right of the Operation bar, away from any labels.

Overflow menu

An overflow menu is part of a common operation group and is sometimes separated by a vertical line. Multiple menu items are placed in this location, such as settings, help, and feedback.

Search

Searching is also part of a common operation group. The uniqueness of search lies in its expansion and contraction. Click the search icon, and the search box is displayed. You can enter the search keyword. Click "X" to cancel the search. Then, the search box shrinks and becomes the status of a single button. This is a way to save the display space when many Operation Keys or icons need to be displayed.

Context operations

When a project is selected, context operations change the format of the Operation column. The displayed options are different from those of other projects. For example, the photo application is displaying thumbnails. Once an image is selected, the Operation bar may change to provide context operations for editing the image.

You can click "cancel" or "finish" in the Operation column to exit the context operation column.

Tablet layout policy

Use fragments and multi-pane views:

The building module of honeycomb is "fragment". fragment is a component of its own system layout. It can change its size and layout position based on the orientation and size of the screen. A further solution to this problem is to give designers and developers a way to make their screen layout components elastic and stacked, and depends on the device screen limit that runs the application. The screen components can be stretched, stacked, expanded, scaled, displayed, or hidden.

The fragmented architecture provides several options for designers and developers to maintain their layout across multiple screen sizes and directions.

What makes fragments so special? Through the compatibility library, developers can bring this feature to Android smartphones of version 1.6 or later so that they can use a policy that fits multiple devices to create applications. In short, it enables designers and developers to develop only one application and adapt to all types of devices.

Although fragment may be a term used by developers, designers should still have a basic understanding of how compressed content is stretched, stacked, expanded, and hidden.

The most common way to deploy fragments is to split the view. This layout is common in news applications and email clients. The list is usually displayed in a narrow column, and the details view is displayed in a wide column.

Another way to present a split view is to convert the direction on one side. In this case, the list fragments on the side are converted to carousel, and horizontal navigation is supported instead of vertical navigation.

Direction Policy

Fragment is a good way to apply the design to multiple screen sizes, and it is also very useful for setting the direction policy. Your screen design may look good in a horizontal view, but what do you do when a narrow vertical view contains three columns? You can stretch, stack, or hide the content again. You can think of fragments as a heap of stretching puzzles. You can move, shape, or delete fragments as needed.

About Animation

The honeycomb architecture allows designers and developers to use a variety of animation effects. Based on the android 3.0 highlights, "an animation can create a fade-out effect, exercise between different States, play a dynamic picture cyclically, exit the animation, change the color, and more ." Honeycomb also provides a high-performance mechanism for displaying 2D or 3D images.

For embedded and 3G related resources and learning, click: Embedded Development Video Android training 3G training QT Development Video Iot training IoT technology video embedded learning