Google's official Design guide for Android (top)

Android Design Specifications

• Time 2015.3.2
• Version V1.0
• Translation Yang Peng
• Finishing Zhakai

This article is my company a Daniel before the company colleague translation of the Android Google official design guidance, after I have been organized, to share to everyone, welcome reprint, but please retain the source and translation of the author. This guidance is detailed and normative, whether it is a junior developer or a senior developer, or even the company's product design and art, should be studied, hereby recommended! Because of the content of the article more than a few, so I divided into several releases, convenient for everyone to read and learn. If it is helpful to you, please comment or top the representative support, thank you!

Or people more powerful ah, some classmates told me already have such information, and tidy up very good! So you can go directly to the official Android guide Chinese version for follow-up reading, so this article is no longer published! This is also a lesson, wasted time to do no work, later to do similar jobs, will learn from the first to see if anyone else has done, mutual encouragement!

1. Design principles

This page has 3 goals to keep in mind about Android design:

• Enchant Me (make Me happy)
• Simplify my life (simplifying my lives)
• Make Me amazing (surprise me)

The connotation of it is expounded in detail.

1.1 Enchant Me

• Make people happy in surprising ways-beautiful interfaces, carefully arranged animations or sound effects
• Real objects are more interesting than menus and buttons
• Users like to personalize the imprint, so that they have a sense of belonging, feel everything in control. In addition to providing a reasonable and beautiful default setting, you should also leave room for optional personalization without disturbing the main task.
• Mobile phone to the user's operation has self-learning ability, to input Method Automatic association for example, do not give the same option every time, should let the user first select the last input.

1.2 Simplify my life

• Stay concise-use simple phrases. If the sentences are long, people will always ignore them.
• Pictures are easier to understand than words-try to use pictures to explain ideas. Pictures can draw attention and make them easier to understand.
• Help me make the decision, but let me decide. First try to guess the user's choice and go straight to the point instead of asking the user. Too many choices and decisions make people uncomfortable. But in case of a wrong guess, allow "undo" action.
• Just show me what I need when I need it. People are at a loss when they see many choices at the same time. Split tasks and information into small, easy-to-understand steps. Hide the options that are not currently necessary and let people learn slowly.
• Let me know where it is now. In places where it should be obvious (such as a return key icon), a transition screen is used to indicate the relationship between screen pages. Provide task progress feedback (such as a progress bar).
• Don't lose my things. Save what people take time to do and get it anytime, anywhere. Remember settings, personal style, user-created things, syncing between phones, tablets, and computers. Make the upgrade the easiest thing on earth.
• If the interface looks the same, the behavior will be the same. Help people identify functional differences through unique, not subtle, visual design. Do not make the same page look the same as the same input and get different results.
• Interrupts customer action only when it is important. A good application is like a good personal assistant that helps people get rid of trifles. Users want to stay focused, unless it's urgent or timely, to interrupt them. Interrupting the user's normal operation is very energy-intensive and frustrating.

1.3 Make me Amazing

• Support for common tips. It feels good when the user understands something themselves. Make your app easier to use by using the existing visual patterns and common methods of other Android apps. For example, a swipe gesture is a good page navigation shortcut.
• The user is not the wrong person. Be kind and patient when you remind people to make corrections. When using your app, users want to feel smart about themselves, not an idiot. If something goes wrong, prompt a clear recovery method, but don't let them deal with technical details. If the application can quietly solve the problem, it is best.
• Give encouragement. It is easy to break down complex tasks into small steps that can be done easily. Give feedback on the operation, even if it's just a tiny halo.
• Help me to do complicated things. By completing a task that you would otherwise not be able to accomplish, let the novice feel like an expert. For example, by adding several photo effects in a few simple steps, you can make the photo of a novice photographer excellent.
• Creating priorities-to be able to do important things quickly (with greater optimization value) not all operations are as important. Decide in advance what is most important in your application, make it easy to find, and use it handy, such as the shutter of the camera and the pause button of the music player.

2.UI Overview

The Android system UI provides the framework for building your own applications. Mainly includes home screen, global device navigation and notification system (notifications). Your app will play an important role in maintaining a unified and aesthetically pleasing Android experience. At the end of this chapter, we'll cover the basic elements that you should have in your app. By reading this chapter, you will have a general understanding of the most important parts of the Android user interface.

2.1 Home screen, all apps, recent apps

• Home screen (home) is a place where you can customize the placement of app icons, directories, and widgets (widgets). Toggle between the different home screen panels by swiping left and right. Favorites Bar at the bottom of the screen, no matter how you switch the panel, it will always show you the most important icons and directories. Open all apps and gadget display screens by clicking the "All Apps" button in the middle of the favorites bar.
• The All Apps interface lets you browse all the apps and gadgets that are installed on your device. The user can drag an icon to place an app or gadget in an empty area of the home screen in all apps.
• Recent apps provides an efficient way to switch to recently used apps. It provides clear navigation for tasks that are running. The recently applied button is placed on the right side of the navigation bar, and the app that was recently used is displayed when you click. They are arranged in chronological order and are most recently placed at the bottom. Click to switch to the app and swipe left or right to remove it.

2.2 System Bar

The UI bar is an area on the screen that is designed to display notifications, device communication status, and device navigation. Normally the UI bar will always be displayed with your app. You can temporarily hide the UI bar from unwanted distractions when the app needs to be displayed in full screen, such as when playing a movie and browsing a picture.

1. Status bar: The left side shows notifications of wait actions, time on the right, power, and signal strength. Slide the status bar down to display the details of the notification.
2. Navigation bar: Android 4.0 a new navigation bar for mobile phones that appears when the device doesn't have a traditional physical key. The return, home screen, and recent app buttons are displayed here, and the menu buttons are also displayed when you run an app designed for Android 2.3 or earlier systems.
3. Combo Bar: You can combine the status bar and the navigation bar on a tablet.

2.3 Notice

The notification system displays some brief information that users can access from the status bar at any time. It provides upgrades, reminders, and information that is important but not directly interrupting users. Slide the status bar down to open the notification drawer (notifications drawer). Clicking on the message will open the relevant app.

Most notifications have a single line of headers and a single line of information. So we recommend two lines of layout. You can add a third row if you want. You can consider displaying timestamps.
Swipe left and right a notification will remove it from the notification drawer.

2.4 Common App Components

A typical Android app consists of the action bar and the app content area.

1. Main Action Bar: the Command and control center you apply. The action Bar includes navigation within your app and the most important actions.
2. View Control buttons: Enables users to switch between the views provided by your app. Views are typically made up of different data and different features in your app.
3. Content area: The display area of your app's primary content.
4. Sub-action Bar: Provides space for more operations, which can be placed below the main action bar or at the bottom of the screen. In this example, the secondary action bar places some functions that do not fit in the main action bar at the bottom of the screen.

3. Equipment and display

Android drives millions of of mobile phones, tablets, and other devices, including various screen widths and proportions. With Android's flexible layout system, you can create apps that look elegant from tablet to phone.

• Flexible. Zoom in, zoom out, or cut the layout to fit different heights and widths.
• Optimize the layout. On larger devices, take advantage of the big screen. Design a mixed view to show more content and provide easier navigation.
• Suitable for all kinds of equipment. For different pixel density (DPI) devices, provide different resources (mostly drawable) to make the app look great on any device.

Suppose the planning department gave a picture of the 160*160 dot matrix, in the 160dpi mdpi, the picture is displayed as 1 inches * 1 inches, and in 320dpi xhdpi, 0.5 inches * 0.5 inches, that is, the picture may become too small.
If you want a picture designed for MDPI, the size shown on different resolution machines, you can let the planning department provide multiple sets of images, placed in the Res directory of drawable-mdpi, drawable-hdpi, drawable-xhdpi. You can also use the following formula to calculate the desired width and height of the bitmap on the current screen, set to the picture control.
Number of dots at current dpi = (number of dots under MDPI * getresources (). Getdisplaymetrics (). densitydpi)/160;

So how do you start designing for multiple screens? One approach is to start with a basic standard (medium size, MDPI) and then scale it to a different size. Another option is to start with the largest screen size and then remove some UI elements from the small screen.

4. Themes

Theme is a mechanism that keeps Android apps in a uniform style. Style styles define the various visual elements required to build a user interface, including color, height, boundary padding, and font size. To enhance the uniformity of applications, Android offers three system themes for your application in ice cream sandwich (ice Cream Sandwich):

• Holo Light
• Holo Dark
• Holo Light with dark action bars

Applying these themes to your design will make your app well-integrated with the Android design language.

Choose a system theme for your application that fits its functionality and design aesthetics. If you want to make your app look different, start your own custom design from a system theme. The system theme provides a solid foundation for you to achieve your own visual effects.
Directly modifying these 3 topics of the system can be a very controversial approach. On the one hand she ensured that the installation of high-quality third-party software (in accordance with the application designed in this guide) has a consistent appearance with local application, on the other hand, she modified the original Android unity, it is likely to provide an incomplete unique style.

5. Touch Feedback

Use the color and glow effects to feedback the touch, emphasize the effect of gestures, and indicate which actions are available. At any time, the user touches the operational area of the application and should be given a visual response. This allows the user to understand which control he is touching and indicates that the app is always working.

5.1 Status

Most Android UI elements have built-in touch feedback effects, including visual effects that indicate whether an element can be manipulated. Note the required background color and how the transmittance should be set when describing pressed, focused, disabled, disabled & focused. When customizing Hisense's own style, you should refer to it.

5.2 AC

When an object on the interface needs to respond to a complex gesture, it should be able to help the user understand what the result of the operation will be. For example, in the recently applied (Recents) interface, the entry begins to dim when the user starts to press and hold an app thumbnail and swipe left and right. Doing so allows the user to understand that swiping removes the app entry.

5.3 Borders

When a user attempts to slide out of the range of a sliding area, visual feedback should be provided at the boundary. For example, if a user tries to swipe left from the first screen of the home screen, the screen will tilt to the right to indicate that it cannot move this way. Many of the sliding UI classes for Android (such as list lists and grid list grid lists) have built-in boundary feedback. If you need to customize the interface, remember to provide boundary feedback.

6. Unit of measure and grid

In addition to the physical dimensions of the screen, the pixel density (DPI) of the screen differs between devices. To simplify the complexity that you design for different screens, you can classify different devices by size and pixel density. The two categories by device size are handheld devices (less than DP) and tablets (greater than or equal to 600DP). Categories categorized by pixel density are ldpi, MDPI, HDPI, and XHDPI. Optimize your application interface for different devices and provide different bitmaps for different pixel densities.

600DP roughly corresponds to the physical size of 3.75 inches (about 95MM,160DP is 1 inches, according to the screen width), the company T958 (4.5 inch) screen width about 56mm,samsung notes screen width about 71mm; company 370 pad width about 90mm, 470 width approx. 95mm. From the above data, the difference between pad and mobile phone is quite big.

For spatial considerations, the number of DP (density-independent pixels) that can be displayed by different devices is not the same as the display space.

In general, the touch controls are all in 48DP. In general, the physical size of the 48DP on the device is 9mm (there will be some changes). This is just the size range recommended by the touch controls (7-10mm), and the size of the user's finger is more accurate and easy to touch.

DP is a device-independent lattice number, 160dp corresponds to 1 inches, 25.4mm, 48dp corresponding to 7.62mm, this article 9mm is not known source, it is in line with the following not below the 7mm of the said.

If you design elements that are at least 48DP in height and width, you can guarantee:
-The element you are designing is not less than the minimum recommended value of 7mm when it is displayed on any screen.
-You can get a good balance between information density and the maneuverability of interface elements.

Note that the white space between the interface elements should be 8DP.

Information is very rich, the list before the picture should be designed to 32DP, the picture should be left and right should be 8DP left white, and the current code is flooded with 5, 10, 15 and other arbitrary boundaries left white value.

In the example, the left and right sides of the white is 16DP, can be considered as 8x2, but personally think 8DP more in line with the purpose of writing this document. Finally, in any case, the design should avoid the 5, 10DP and other non-source design.
If the 160dpi mdpi machine for the initial design, 160-point array corresponding to 160DP, that is 25.4mm, but if the use of 240dpi hdpi machine for the initial design, 240-point array to correspond to 160DP,48DP at this time corresponding to 72-point array. Design needs to pay attention to the corresponding relationship.
Design at the beginning of the calculation is on the one hand, after the implementation of the Code, the programmer should simply use a ruler to measure, to see if their touch control in 7~10mm this comfort range, experience this range, in order to be able to see the interface design, the realization is reasonable.

7. Fonts

Android's English font design is based on traditional typography techniques such as font scaling, word spacing rules, and snapping grids. The successful use of these technologies allows users to quickly understand the information on the screen. To this end, ice cream sandwich (ice Cream Sandwich) introduces a new Roboto font family, designed for high-resolution screens. The current TextView control supports styles such as plain, bold, italic, and bold italic by default.

The Android interface uses the following system default font colors: Textcolorprimary and textcolorsecondary. In the light theme, Textcolorprimaryinverse and Textcolorsecondaryinverse are used. Several different touch feedback font colors are also supported in the system theme.

The differences in font size can create an orderly and easy-to-understand layout. However, using too many font sizes in the same interface can cause confusion. The Android design framework recommends that you use several font sizes:

The user can adjust the font size of the entire system in settings. To support this feature, the font size should be used as much as possible in a scalable unit, which we call (SP). The layout of the SP should also be tested when you test the typesetting.

8. Color

Color is mainly used to highlight important information. Choose the right color for your brand and provide a good visual contrast. Note that blindness people may not be able to tell the difference between red and green.

Blue is the standard color in the Android palette (note that the color is used to emphasize some important information, not colorful to show off their LCD color rich). Each color has a corresponding dark version for use.

9. Icons

An icon is a really small picture on the screen that intuitively provides a first impression of an operation, a state, or an application.

This page details the launcher, Action Bar, contextual, notification 4 types of icons and the overall size of the map area, design style, color and other information, the new design of the icon should follow these requirements as far as possible-- At the moment our phone design feels basically ignoring these rules.

9.1 Launcher

The launch icon represents your app in the home screen and all apps. Because the user can set the wallpaper on the home screen, make sure that your launch icon is clearly visible on any background.

• Size and scale. The boot icon size on the mobile device must be 48x48 DP. The launch icon shown in Google market must be 512x512 pixels.
• Content. Don't stay white, 48X48DP.
• Style. As shown, using a unique silhouette-three-dimensional frontal view, looks a little bit from the top down to the perspective effect, allowing the user to see some depth of field.

9.2 Action Bar

The Action bar icon is an image button that represents important actions that the user can perform in the app. Use simple, straightforward drawings to represent what you're going to do, so users are at a glance.
Use the Android icon to represent some common actions, such as refresh and share. The following link provides an icon pack that includes a variety of screen resolutions, as well as icons for light and dark holo themes. Do you have a styled icon in your package that you can freely modify and match with your own theme, with Adobe? Illustrator? Source files for further modification.

• The icon should be 32X32DP.
• Overall size 32X32DP, actual content 24X24DP.
• Visualize, flat, not small details, with a smooth and sharp silhouette. If the picture is long-skinny, turn it to a 45-degree angle and fill the content area (refer to the pen). The width of the line should not be less than 2DP.
• Color. Colors: #333333, enabled:60% opacity,disabled:30% opacity. Colors: #FFFFFF, enabled:80% opacity,disabled:30% opacity. The above color values are used for the Actionbar icon under light and dark themes, respectively.

9.3 small/contextual Icons

In the body area of the app, use small icons to indicate actions or specific states. For example, in the Gmail app, each message has a star icon to mark "important."

• The small icon should be 16X16DP.
• The overall size is 16X16DP, the actual content 12X12DP
• Gray, Neutral, flat and simple. It is best to use a fill icon instead of a thin line. Use simple visuals to make it easy for the user to understand the purpose of the icon.
• Use non-gray icons with caution and purpose (in exceptional cases). For example, in the Gmail app, a yellow star icon is used to represent important information. If the icon is clickable, use a color that contrasts with the background.

9.4 Notification Icons

If your app uses a notification system, you need to provide an icon to the system. Whenever there is a new notification, it is displayed on the status bar.

• The notification bar icon size must be 24x24 DP.
• Overall size is 24x24 DP actual content 22x22 DP
• Using simple, flat icons should be visually similar to the launch icons you apply.
• The notification icon must be pure white, and note that your icon may be scaled or deepened by the system.

10. User Tip Style

• Keep it short. Concise and accurate. Within 30 English letters (including spaces), unless you need to use extra text.
• Keep it simple. While your users are smart and understand, do not describe technical details and take account of poor English comrades. Use short words, active words, and commonly used nouns.
• Friendly. Use abbreviations. Use the second person ("You" or "you") when you are talking to your users. If your text doesn't read like a daily conversation, you should change the language style. Strive to make users feel comfortable, happy and energetic.
• Say the important thing first. The two phrases at the beginning of a sentence (about 11 characters in English, including spaces) should express the emphasis of the message. Otherwise, rewrite it.
• Only the necessary information is indicated. Don't bother explaining the details. Most users will not go to see.
• Avoid duplication. Even the most commonly used words appear only once in the same screen or in the same piece of text.

Google's official Design guide for Android (top)