Android Tablet PC Design

There is no longer a need for designers to create experiences for a variety of mobile devices than they do now. As tablets are being accepted, we are in the post-PC era, and the company will take advantage of the quality of the tablet's user experience to capture the user's attention. Successful Android tablet applications require a great idea to encourage users to download, use, and retain, as well as a user experience that makes it intuitive for Android users to find and adapt to the use of the environment.

The next step is to understand the difference between the ipad iOS user interface and the Android 3.x "Honeycomb user interface design specification and elements to help designers become familiar with the Android tablet application program." We will also analyze honeycomb design patterns and layout strategies, and then look at some of the very good Android tablet applications.

Note that while Android 2.x apps on smartphones can also run on tablets, the Android 3.0 Honeycomb system is designed and launched specifically for Tablet PCs. Future updates promises to embed honeycomb features into smartphone devices and make it easier to design and build on a wide variety of screen sizes.

For most of us, the first time we touch a tablet is through the ipad. For this reason, it is reasonable to start comparing the user interface between the two. By comparison, we can organize the knowledge of the tablet we already know and focus on the key differences, so that we can meet the unique user interface requirements of the Android user. This will not only make us faster, but also become very important when converting apps that already exist on the ipad onto the Android tablet.

Just do it like an ipad, right?

While there are many similarities between the Android tablet and ipad experience (Touch gestures, app launch icons, modal expressions, etc.), designers should be familiar with the differences before making assumptions and drawing screen streams.

Screen size and orientation

The biggest difference between these two platforms is the overall size. The size of the ipad's layout is 768x1024 physical pixels, and the ipad has the vertical display orientation as its default viewing direction.

The Android tablet, with its many equipment makers, is slightly more complex. Broadly speaking, there are 7-inch and 10-inch Android tablet screen sizes (the diagonal lengths from the top left to the lower right), and the size between the two. However, most tablet PCs are about 10 inches.

Convert to pixels, what does that mean? A nice layout baseline is a 1280x752 pixel (excluding the system bar), based on a 10-inch screen size, and landscape (not portrait) as the default orientation. Like on the ipad, content on Android can be accessed in two directions, horizontally and vertically, but the landscape pattern is often more popular.

The left image is a vertical view on a typical 10-inch Android tablet, with the right image on the ipad.

The left image is a horizontal view on a typical 10-inch Android tablet, with the right image on the ipad.

However, for Android, the screen size is only half the difference. The Android tablet also differs in "screen density" (the number of pixels in a particular area of the screen). Instead of paying attention to the details, the designer can only prepare all production-ready alternate bitmaps for three different screen densities, magnifying each bitmap to 1.5 times times or twice times the original size. Therefore, bitmaps that are set to 100x100 pixel size should also have copies of 150x150 and 200x200 sizes. By making three of bitmaps with scaled dimensions, you can convert your bitmap into a medium, high, ultra-high-density tablet screen without compromising the quality of the image.

For more information on screen density and image preparation for Android devices, please refer to my previous article "Designing for Android"

System Bar

Although the iOS platform makes the system tray as small as possible, the Android Honeycomb expands the system tray size and includes notification and soft navigation buttons. These include the return button, the Home Page button, and the latest application button.

Android Honeycomb System Bar

The Android honeycomb system bar and buttons always exist at the bottom of the screen, regardless of what application is turned on. You can think of it as a permanent UI fixture. The only exception is the turn off mode, which darkens the system bar to show immersive content, such as video and games.

Back button

Although Honeycomb's cumbersome, permanent system bar may be a hindrance to designers, it does liberate the fixed position that is typically used in the ipad application to be returned to the key. The return key in the Honeycomb system bar exists in all applications in the world.

The return key in the system bar

Action Bar

The difference in most user interfaces between two platforms lies in the action bar at the top. Android offers suggestions for the specifics of the action bar elements and specific visual forms, including the location of icon or logo, navigation (such as pull-down menus or tags), and common operations. This is one of the most unified design patterns for Android honeycomb system applications, so it is worthwhile to familiarize yourself with this action bar before attempting to use a custom setting or something like an ipad. This will be followed by more analysis of this ubiquitous action bar.

Action Bar

Control

What makes ipad users feel new is the Android controls. As the name suggests, controls are primarily small notification bars and shortcut tools that users can use to display their settings in the splash screen. Controls can be designed as stack view, grid view, and List view, and they can now be resized in Android 3.1.

Several controls in the startup screen

Notice

The IOS notification system pushes simple reminders to the splash screen, and honeycomb is a rich notification that pops up in the lower-right corner of the screen (which we usually call toast), much like the growl in Mac OS x. The custom layout for notifications can be icons, Any form of scrolling text or an operable button.

Notice on Android

Set up

The settings in the ipad application are usually presented as pop-ups, triggered by clicking the "I" button, and the settings are broken down into many forms that are easily recognizable. Honeycomb systems have different specifications. It looks more like the "General settings" screen for iOS, where users can navigate on the left and view details on the right. This is the preferred (and more elegant) way of rendering multiple settings on the honeycomb system.

Setting design Patterns in Calendar applications

UI elements

As you can imagine, the Android system is doing everything in the opposite way to its competitors (this 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? There are only 3 species.

Yes, they are droid Sans, Droid Serif and Droid Sans Mono. There are positive aspects, however. 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 app with embedded video player.

Clipboard

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

Drag and drop

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 are customizable, so there is 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

Overflow menus are 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 the search icon to expand the search box 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

Layout strategy of tablet computer

Using fragmentation and multiple pane views

The building blocks of the honeycomb design are "fragments". Fragmentation is a self-contained layout component that can change its size and placement depending on the direction and size of the screen. A further solution to design this problem for a variety of size skins is to give designers and developers a way to make their screen layout components flexible and stacked, depending on the device screen restrictions that run the application. Screen components can be stretched, stacked, expanded, or shrunk, displayed, or hidden.

The fragmentation architecture gives designers and developers several options to maintain their layouts across multiple screen sizes and orientations.

What makes the pieces so special? With the compatibility library, developers can bring this functionality to Android smartphones above 1.6, enabling them to create applications using a strategy that is sized to fit multiple devices. In short, it enables designers and developers to develop only one application and fit all specifications.

While fragmentation may be a more term used by developers, designers should still have a basic understanding of how compressed content can be stretched, stacked, expanded, and hidden.

The most common form of fragmentation is split view. This layout is common in news applications and e-mail clients, where the list is usually rendered in a narrower column, and the details view is presented in a wider column.

Split view used by USA today

Another way to render a split view is to change the direction on its side. In this case, the side list fragment becomes a carousel, supporting horizontal navigation instead of vertically.

Direction strategy

Fragmentation is a good way to apply a design to multiple screen sizes and is also useful for setting direction strategies. Your screen design may look good in a landscape view, but what do you do when you're faced with a narrow vertical view that contains three columns? You can choose to stretch, stack, or hide the content again. You can think of fragments as a bunch of stretching puzzles that you can move around, shape or delete as needed.

About animations

The honeycomb architecture allows designers and developers to use colorful animation effects. Based on the Android 3.0 Essentials page, "Animations can create fade effects, move between different states, loop through a dynamic picture, or exit animations, change colors, and more." "Honeycomb also has a high-performance mechanism for displaying 2D or 3D images. For a better understanding of the overall performance of honeycomb, look at this video.

Learn from examples

Android tablets are still a relatively new area, with some brands just beginning to test water. Here is a series of applications that are collected to inspire inspiration. You can download any of these from Android harsh or Amazon.

YouTube

Of course, Google's YouTube app on the Honeycomb platform is exemplary, showcasing all the design styles and user interface elements discussed above. To better experience honeycomb, download the app and run it.

CNN

CNN Apps use Touch gestures (including sliding to browse for more), split views, and fonts! A custom font (Rockwell) applies to news headlines.

CNBC

CNBC (NBC financial channel) is another excellent news application, including animation (stock ticker) as well as rich charts and gradients. CNBC is one of the most fascinating applications.

Plume

With its three-column layout, plume a good example of how the layout needs to change dramatically when the landscape becomes a portrait view.

Flighttrack

An elegantly designed application with a huge amount of information. Includes exquisite maps, subtle animations, and standard honeycomb user interface elements.

Pulse

You can also say: pulse is for Android tablet computer! But compared to Android and ipad versions, they are almost identical in every way; it's still interesting anyway.

WeatherBug

It was one of the earliest honeycomb applications in the Android harsh. It utilizes maps and holographic user interfaces to showcase pictures from weather cams.

Kindle

The Kindle insists on using both design patterns and honeycomb user interface elements. The result is elegant and the best practice for sticking to Android.

Masterpiece

Imdbnews360usa Todayaccuweatherustreamgoogle Earththink Space

Online resources

Video

Android phone and Tablet PC user interface design and implementation, Google I/o 2011

Android 3.0 Honeycomb Animation Demo

Demo Document

Android phone and Tablet PC user interface design and implementation, Google I/O (PDF)

Blog

Tablet PC user interface mode

Android Developer

Multi-screen support

Icon Design

Android 3.0 Platform Essentials

Finish

[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! ]

Source Address: Http://thinkingrain.lofte......st/3f64_349ce