Some designs on Android

When it comes to application programming, Android is like an elephant in a room for a designer. Many designers would prefer this to be iOS, where all anyone cares about is the iphone, the ipad and the app Store. And no one can ignore Android, which now has the biggest market share in smartphones and has been widely used in a variety of products ranging from tablets to e-readers. In short, Google's Android platform is rapidly growing everywhere, brand manufacturers are hard to not notice.

Let's face it together. Android's many models of devices and shapes make it feel like a tough fight. Its arcane documents make design and production difficult at the outset. Find online resources for Android design on the web and you'll find little help.

If it makes you feel frustrated (and if that's why you don't design apps for Android), you're not alone. Fortunately, Android is now starting to solve problems with a variety of devices and screen sizes, and device manufacturers are slowly reaching standards and ultimately reducing their complexity.

This article will help designers familiarize themselves with the knowledge needed to start using Android and provide the right resources for the Open team. The topics we will discuss include:

decrypts Android screen density, learns the basics of Android design through design patterns, designs the assets that developers need, how to get screenshots, what is Android 3? What's the future?

Android Smartphone and display size

Before starting any digital design project, you must first understand the hardware. For iOS apps, it's the iphone and ipod Touch. And Android involves dozens of of devices and manufacturers. Where do we start?

The benchmark supported by the Android smartphone is the first available device on the T–mobile G1--android platform, equipped with a 320x480 pixel HVGA screen.

HVGA represents a "Half size image array" (or half the size of VGA), the current standard display size for smartphones. IPhone 3gs,3g and 2G Use this same configuration.

T G1 is the first Android device to be unveiled and the first mobile phone to support the Android benchmark screen.

For simplicity, Android divides the screen size (the diagonal length of the screen from the upper-left corner to the lower-right corner) at four levels: small, normal, large, and oversized.

Two typical Android smartphone sizes (images from Google I/o 2010)

320x480 is considered the "normal" size of the Android screen. As for "super big", imagine a tablet computer. However, today's most popular Android smartphone is equipped with a WVGA (ie, wide VGA) 800+x480 pixel high-definition display. So, what makes "normal" change quickly.

A variety of screen configurations obtained from the emulator prototype in the Android SDK. (Photo: Android developer website)

For easy testing, I used the Motorola Droid X, whose screen is WVGA. Again, it seems to be "big" from the Android standard.

The size of the monitor is very challenging for designers who want to create a single size for all layouts. I have found that the best way is to design a set of layouts for 320x480 (datum) and another for 320x533 (which can be considered "large" size screens).

While this creates an additional burden on the work of designers and developers, such as the larger size screen required for a slightly larger handset such as the Motorola droid and the HTC EVO, it may be necessary to make some changes in the datum layout to make better use of the extra space.

About dot Density (screen densities), you should know something about

Screen size is just part of the problem! Developers generally do not consider the resolution of the screen, but its density. The following is the Android definition of the content mentioned in the Developer's Guide (developers Guide):

resolution (denotes)

The total of the physical pixels on the screen.

dot Density

The number of pixels contained within the physical area of the screen is measured by the dpi (dots per inch).

density-independent pixels (density-independent pixel, DP)

This is a virtual pixel unit that defines the layout of the UI, which is used when defining the layout for a density-independent (density-independent) representation of the dimensions and location of the layout. Density-independent pixels are equivalent to a physical pixel on the 160 dpi screen, which is a benchmark density for a "medium" density screen system. At run time, the system handles any necessary DP unit conversions according to the screen density actually in use. The conversion formula for DP units and screen pixels is simple: pixel = dp* (dpi/160). For example, for a dpi-like screen, 1 DP equals 1.5 physical pixels. When you define an application's UI, you typically use DP units to ensure that the UI is displayed correctly on different densities of screens.

It seems a bit confusing, but here are some things you must know. In terms of screen size, Android divides the screen density into four basic densities: ldpi (Low), MDPI (Medium), hdpi (High), and xhdpi (especially high). This is important because you have to output all graphics content (such as bitmaps) in ldpi,mdpi and hdpi densities. Now, let's assume that xhdpi only applies to tablets.

This means that all graphics that are not drawn (such as graphics that cannot be scaled automatically by Android at run time) need to be converted through a "medium" (i.e., 320x480) datum screen layout.

Bitmap requirements and the preparation of Web page printing graphics almost. If you have the experience of printing, you will know that a 72PPI image in the enlarged printing will appear very pixel and fuzzy. Instead, you need to redo the image or use high-resolution photos based on the vector graph, and then set the resolution of the file to approximately 300PPI, so that you can print without sacrificing the quality of the image. The same goes for Android's screen density, unless we want to change the size of the image without changing the resolution of the file (such as standard PPI).

For example, you get a 100x100 pixel bitmap icon from a baseline-designed screen (remember that the baseline layout is set to 320x480). The same 100x100 icon is configured on the ldpi screen, and the icon appears very large and fuzzy. Similarly, configuring it on the hdpi screen will appear too small (because the device has more points per inch than the MDPI screen).

To adjust the screen density of different devices, we need to scale by 3:4:6:8 in four density sizes. (For the iphone, it's easy: just switch between iphone 4 and 3GS with a 2:1 ratio.) Using these ratios, with simple calculations, we can create four different versions of bitmaps for development production:

75x75 correspond to low-density screens (such as x0.75), 100x100 corresponding to medium density screens (datum), 150x150 corresponding to high-density screens (x1.5), and 200x200 corresponding to ultra-high density display (x2.0). (We only consider ldpi, MDPI, and hdpi on Android smartphone apps.) ）

Using four different dot density, the final picture will be as shown above.

After you have finished all the images, you can categorize the pictures in the following ways:

Recommended methods for classifying and naming folders and files. When you prepare a star picture, you can name all the unfinished pictures as Ic_star, and you do not need a corresponding density to change the name.

You may be confused about how to set the PPI (pixel per inch). Just keep it in the standard 72PPI and adjust the image accordingly.

Design template with Android

Customers often ask if they can apply their iphone application design template to Android. If you're looking for shortcuts, using an app like WebKit and HTML5 to create a mobile web browser might be a better choice. and to develop native Android apps, the answer is no. And why? Because the Android interface is very different from the iphone.

The biggest difference is the "back" key used to turn to the previous pages. The return key on the Android device is fixed and is used by any application. This may be a physical part, or it may be a virtual fixed key that is independent of any application at the bottom of the screen, as in the recently released Android3.0 tablet computer.

Physical "Back" key on Android 2.0 smartphone

The "Back" key, which is independent of the application itself, can leave more space on top of the screen for other elements such as logos, captions, or menus. This browsing setup is very different from iOS, and there are many other differences that Android calls "design templates." According to Android, design templates are "a general solution to recurring problems." "Here is the main design model for Android 2.0.

Control Panel (Dashboard)

This template solves the problem of multi-level browsing in the application. It provides flat-panel solutions for a variety of applications such as Facebook,linkedin and Evernote.

The control Panel design model used by Facebook and Likedin

Active box (action Bar)

The active box is the most important design template and differentiator for Android. It works very much like the banner of a traditional website, with a logo or caption on the left and a navigation item on the right. The active box is designed to be flexible, allowing you to hover and enlarge the search box in the menu. It is generally used as a global function, not as a single program.

The active box design model used by Twitter

Search Bar

This provides a simple way for users to search by category and provides search advice.

The active box design model used by Google seach program

Fast Activity Bar (quick actions)

This design style is somewhat similar to the iOS pop-up action, providing additional text action for the user. For example, clicking on an application's photo may trigger the quick activity bar, allowing users to share the photo.

The Quick Action Bar design model used by Twitter

Accompanying Widget (companion widget)

Widget allows applications to display notifications on the user's home screen. Unlike the temporary modal dialog box push notifications on iOS, the accompanying artifacts remain on the main screen. (Hint: If you want to choose your Android device widget, just click and hold on to any blank area on the screen.) ）

Engadget, the New York times and the accompanying widget used by Pandora

The use of established design templates is essential to maintaining a user's intuitive and familiar experience. No users want to experience the iphone on Android devices, nor do Mac users want to experience Microsoft in their Mac OS environment. Understanding the design template is the first step in learning the Android language and designing the best experience for the user. Your developers will also thank you!

Essential Materials for Android design

OK, now that you've started to design Android apps and are ready to make it happen. What else can be provided to developers? Here's a quick delivery checklist:

A annotated User experience description table based on the "medium" size of the benchmark 320x480 dpi. Include additional screens, such as when the "big" size screen needs to be changed, or when a picture layout is needed. Two sets of visual design simulators for medium hvga320x480 screens and large sized 320x533 screens (based on the wvga800x480 hdpi physical pixel screen). Specification files on spacing, font size and color, and any bitmap instructions. A bitmap graphics library containing all the ldpi,mdpi and hdpi versions saved as a transparent PNG file. If you also want to develop other versions of your applications for small devices and other large devices, you will need to prepare a ldpi and MDPI atlas for the "medium" benchmark design, as well as a hdpi atlas for the "big" size version. An application icon that is saved as a specific density for a transparent PNG file, including the application's startup icon. Android has already provided a lot of fine images to developers on this issue, and it can be downloaded separately, including a graphic PSD template.

How to Screen

If your product manager wants a screenshot of the developer's architecture. The developers are busy and can't give it to you until tomorrow. What are you going to do? Until now, Android has not provided a built-in screenshot (rogue?). Way。 The only way to do that is to deal with it, which means pretending to be a developer for a while and downloading some scary software. Let's get started!

The following software must be downloaded in a Windows environment (I use Windows via the Parallels Desktop on my Mac).

All USB drivers for Android devices; Android software Development kit (SDK); Java SE SDK

And then on the computer:

the USB driver to a folder on the desktop, unzip the Android SDK to a folder on the desktop, and install the Java SE SDK

On Android devices:

Open "Settings" (Program menu) Click "Application"; click "Development"; View "USB debugging"

Okay, here's the funny thing:

connects the Android device to the computer via a USB interface and allows all drivers installed by Windows. One of the drivers may not be found, and you may need to go to the Windows Device Manager in Control Panel. There, locate the device (with a yellow warning icon next to it) and right-click. Select the "Update/install" Driver for the device. Turn back to the desktop. Open the Android SDK folder and select Setup.exe in the SDK. Allows it to automatically refresh the list of SDK operating systems and choose to install all packages. Once completed, exit the application. Return to the Open Android SDK folder on your desktop and open the Tools folder. Click the "DDMS" file to open Dalvik Debug Monitor. Select the device from the Name dialog box. In the top menu of the application, open the Device menu, select Screen Capture ..., and a Device Screen capture window will open, and you should be able to see the Android device's splash screen.

The Dalvik debut Monitor.

Browse:

Open the Android device and browse any page. Go back to your computer and click "Refresh" on "Device screen capture". The current image of the Android device should appear. If you are using a Mac, you can follow SHIFT + COMMAND+4 's old recruit screenshot. In Windows, you can copy and paste into Windows Media applications.

About Android Tablet PC

Android tablets are a lot different from smartphones in size and screen density. In terms of screen density, we usually assume that all tablets are of a xdpi size with high clarity and bitmap graphics.

At CES, manufacturers are rolling out Android tablets, and the screen sizes are different. However, after a quick look at some of the most popular models, we can see that the screen is mainly focused on two important dimensions of the physical pixel 1280x800 and 800x480.

With the launch of the Android 3.0 honeycomb, Google gives device manufacturers the Android UI for tablets. The past physical "back" button, which is replaced by a software-generated fixed navigation key and system status bar located at the bottom of the screen.

Android 3.0 Fixed navigation buttons and system status bar

While integrating all of the design templates in version 2.0, Android 3.0 has a visual sense of freshness. The only difference is that the activity bar has been updated to include tags, and the drop down menu has other little things. When a user chooses to display a single or multiple element on the screen, the active bar can also change its appearance.

Android 3.0 activity bar with various menus

Another new feature added to the Android 3.0 framework is a "fragment" (fragments) mechanism. A fragment is a self-contained component that adjusts the size and position of a layout based on the direction and size of the screen. This can be in the limits of the size of the screen, through to designers and developers to adjust the flexibility of the layout, to solve a variety of shape design problems. Screen components can be stretched, stacked, expanded and folded, displayed and hidden.

The legend shows the purpose of the fragment

The future Android version, called the ice Cream sandwich, promises to put this feature into Android smartphones, allowing designers and developers to use an All-in-one strategy to open development programs. This may be a paradigm shift for designers and developers who want to learn to design applications by drawing on puzzles that can be stretched, stacked, enlarged, or hidden. In short, this will allow the Android operating system to run anywhere (unlimited possibilities!). ）。

A word of Proverbs

Play with Android phones and tablets, spend some time downloading apps and browsing through their interfaces. To be based on the Android design, you must immerse yourself in the environment and understand it in depth. That sounds like nonsense, but when you hear that even product managers don't have Android devices, you know what I mean.

This article is compiled from Lei Feng network from Smashingmagazine