Android Tablet design: Do it like an ipad?

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.

Next, by understanding the difference between the ipad iOS user interface and the Android 3.x "Honeycomb user interface design specification and elements, you can 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. It is for this reason that it is reasonable to begin to compare 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 can not only make us faster, but also become very important when converting applications that already exist on the ipad onto the Android tablet computer.

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 1280x752 pixels (excluding system columns), based on a 10-inch screen size, and landscape (instead of 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, a bitmap that is set to 100x100 pixel size should also have a copy of 150x150 and 200x200 size. 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. The honeycomb system has 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 to render multiple settings on a honeycomb system.

Setting design Patterns in Calendar applications

[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.

Source of translation: thinkingrain.lofter.com