[Kaizige takes you to consolidate the application layer] Android's official Google design guide (I) and androidgoogle

[Kaizige takes you to consolidate the application layer] Android's official Google design guide (I) and androidgoogle
Android design specifications

• Time: 2015.3.2
• Version V1.0
• Translation Yang Peng
• Organize Zhao kaiqiang

This article is an official Google design guide translated by my colleagues from a company before Daniel. I have compiled it and shared it with you. You are welcome to repost it, but please keep the source and author. This Guide provides detailed content and specifications. It should be studied and studied by novice developers, Senior developers, and even the company's product design and artist! I have published several articles to facilitate reading and learning. If it is helpful to you, please comment or comment on the support. Thank you!

1. Design Principles

Three goals to be kept in mind for android design on this page:

• Enchant me (make me happy)
• Simplify my life (Simplifying my life)
• Make me amazing (surprise me)

The connotation is elaborated in detail.

1.1 Enchant me

• Amazing ways to make people pleasant-beautiful interfaces, carefully arranged animations or sound effects
• Real objects are more interesting than menus and buttons.
• Users like personalized marks, so that they have a sense of belonging and feel that everything is under control. In addition to providing a reasonable and beautiful default setting, you should also leave room for the optional personalization without interfering with the main tasks.
• The mobile phone has the ability to learn user operations. Take the automatic association of input methods as an example. Do not give the same option each time. The user should be given priority over the previous input.

1.2 Simplify my life

• Keep it concise-use simple phrases. If sentences are long, people will always ignore them.
• Images are easier to understand than text-use images to explain ideas as much as possible. Images can attract attention and be easier to understand.
• Help me make decisions, but let me make a shot. First, I tried to guess the user's choice and directly cut into the question, instead of asking the user. Too many choices and decisions make people feel uncomfortable. However, in case of an error, the "undo" operation is allowed.
• Show what I need only when I need it. When people see a lot of choices at the same time, they will be helpless. Splitting tasks and information into small and easy-to-understand steps. Hide unnecessary options and let people learn them slowly.
• Let me know where it is now. When the screen is switched, the transition screen is used to show the relationship between the pages on each screen. Provides task progress feedback (such as progress bar ).
• Don't lose my stuff. Save things that people spend time doing and get them anytime, anywhere. Remember settings, personal styles, things created by users, and synchronize them between mobile phones, tablets, and computers. Making upgrades the easiest thing on earth.
• If the interface looks the same, the behavior will be the same. Through unique, rather than subtle visual design, it helps people identify different functions. Do not make the page that looks the same get different results under the same input.
• Interrupt customer operations only when important. A good application is like a good personal assistant, helping people get rid of all kinds of things. Users who want to stay focused can interrupt them unless they are urgent or time-sensitive. It is frustrating to interrupt normal user operations.

1.3 Make me amazing

• Supports common tips. Users will feel good when they figure out what they want. By using the existing visual modes and common methods of other Android applications, you can easily get started with your applications. For example, sliding gesture is a good shortcut for page navigation.
• The error is not from the user. When you prompt people to make changes, be patient. When using your application, users want to think they are smart, not stupid. If something is wrong, a clear recovery method is prompted, but don't let them handle technical details. If the application can solve the problem quietly, it would be better.
• Give encouragement. It is easy to break down complex tasks into small steps. Give feedback on operations, even if it is just a tiny halo.
• Help me with complicated things. By completing tasks that could not have been completed, new users feel like experts. For example, adding a few photo effects through a few simple steps can make the photos of beginners very good.
• Separation of priorities-quick completion of important things (with greater optimization value) is not as important as all operations. Determine in advance what is the most important in your application, so that this function is easy to find and use, such as the shutter of the camera and the pause button of the music player.

2. UI Overview

The Android system UI provides a basic framework for building your own applications. It mainly includes Home Screen, global device navigation, and notification system ). Your applications play an important role in maintaining a unified and beautiful Android user experience. At the end of this chapter, we will introduce the basic elements that should be included in your application. By reading this chapter, you will have a general understanding of the most important part of the Android user interface.

2.1 main screen, all applications, recent applications

• The Home screen is a place where app icons, directories, and widgets can be customized. Slide left and right to switch between different main screen panels. The favorite bar is at the bottom of the screen. No matter how you switch the panel, it always displays the icons and directories that are most important to you. Click the "All Applications" button in the middle of the favorites bar to open the display interface for all applications and gadgets.
• On the "All Applications" page, you can view all applications and gadgets installed on your device. You can drag the icon in "All Applications" to place the application or gadgets in the blank area of the main screen.
• "Recent applications" provides an efficient way to switch between recently used applications. It provides clear navigation for running tasks. The "Recent Application" button is placed on the right of the navigation bar. After you click it, the recently used application is displayed. They are arranged in chronological order, with the most recent placed at the bottom. Click to switch to the application. You can move the application left and right to remove it.

2.2 System bar

The UI bar is the area on the screen specifically used to display notifications, device communication status, and device navigation. Normally, the UI bar is always displayed with your application. When an application needs to be displayed in full screen, such as playing a movie or browsing an image, the UI bar can be temporarily hidden to avoid unnecessary interference.

2.3 notification

The notification system displays some brief information, which can be accessed from the status bar at any time. It provides upgrades, reminders, and important information without interrupting users. Slide the status bar to open the notification drawer ). Clicking a message will open the relevant application.

Most notifications have a single row title and single row information. Therefore, we recommend the layout of the two rows. If necessary, you can add the third line. You can consider displaying the timestamp.
Sliding a notification Left or Right will remove it from the notification drawer.

2.4 universal APP Components

A typical Android Application consists of the Action Bar and the Content Area of the application.

3. device and display

Android drives millions of mobile phones, tablets, and other devices, including various screen widths and proportions. With the flexible Layout System of Android, you can create applications that look elegant from tablets to mobile phones.

• Flexible. Scale up, down, or down the layout to adapt to different heights and widths.
• Optimize the layout. Use the advantages of large screens on large devices. Design a hybrid view to display more content and provide easier navigation.
• Applicable to various devices. Provide different resources (primarily drawable) for devices with different pixel density (DPI) to make applications look great on any device.

Assume that the planning department gave a 160*160 dot matrix image. In the 1 inch DPI mdpi, the image is displayed as 1 inch * 0.5 inch. In the xhdpi of 320dpi, the image is displayed as 0.5 inch, that is, the image may become too small.
If you want an image designed for mdpi to display the same size on machines with different resolutions, the Planning Department can provide multiple sets of images, they are placed in the drawable-mdpi, drawable-hdpi, and drawable-xhdpi In the res directory respectively. You can also use the following formula to calculate the required number of wide and high lattice numbers on the current screen and set them to the image control.
Number of dots under the current dpi = (number of dots under the mdpi * getResources (). getDisplayMetrics (). densityDpi)/160;

How should you start designing for multiple screens? One method starts with a basic standard (medium size, MDPI) and scales it to different sizes. Another way is to start with the largest screen size and remove some UI elements for the small screen.

4. Subject

Theme is a mechanism that keeps Android apps in a uniform style. Style styles define the visual elements required to build a user interface, including color, height, border fill, and font size. To improve the uniformity of various applications, Android provides three system themes for your applications designed on 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 application well integrated with the Android design language.

Select a system topic that suits your application's functions and Design Aesthetics. If you want to make your application look more distinctive, it is better to customize your own design from a system topic. The system topic provides a solid foundation for you to achieve your own visual effects.
Directly modifying these three themes of the system may cause a lot of controversy. On the one hand, she ensures that the installed high-quality third-party software (applications designed according to this Guide) has the same appearance as the local applications, and on the other hand, she modifies the original uniformity of android, it is likely to provide an incomplete and unique style.

5. Touch feedback

The color and halo effects are used to feedback the touch, emphasize the effect of the gesture, and indicate which operations are available. At any time, the user should give a visual response to the operable Area of the application. This allows the user to know which control he is touching and indicates that the application has been working.

Status 5.1

Most Android UI elements have built-in touch feedback effects, including visual effects that can indicate whether the elements can be operated. Note: This section describes the background color and proportions required for pressed, focused, disabled, and disabled & focused. For details about how to customize Hisense's own style, refer.

5.2 Communication

When the operation object on the Interface needs to respond to complicated gestures, it should help the user understand what the operation result will be. For example, on the latest application (Recents) interface, when you start to hold down an application thumbnail and Slide left and right, the entry begins to fade. In this way, you can see that sliding can remove the application entry.

5.3 border

Visual feedback should be provided at the boundary when the user tries to slide out the range of the slip area. For example, if a user tries to slide from the first screen of the main screen to the left, the screen will tilt to the right to indicate that the screen cannot be moved to this side. Many Android slide UI classes (such as lists and grid lists) have built-in boundary feedback. If you need to customize the interface, remember to provide boundary feedback.

6. measurement unit and grid

In addition to the physical size of the screen, the pixel density (DPI) varies with devices. To simplify the design complexity for different screens, you can classify devices by size and pixel density. The two types of devices are handheld devices (less than 600 dp) and tablets (greater than or equal to 600dp ). LDPI, MDPI, HDPI, and XHDPI are classified by pixel density. Optimize your application interface for different devices and provide different bitmaps for different pixel density.

600dp roughly corresponds to 3.75 inch physical size (about 95mm, 160dp is 1 inch, according to the screen width), company T958 (4.5) screen width about 56mm, samsung Notes screen width is about 71mm; company 370 pad width is about 90mm, 470 width is about 95mm. From the above data, we can see that the difference between pad and mobile phone is quite big.

In terms of space, the number of density-independent pixels displayed by different devices (corresponding to the displayed space) is also different.

In general, the touchable controls are all in 48dp units. Generally, the physical size of 48dp on the device is 9mm (with some changes ). This is within the recommended size range (7-10mm) of the touch control. In addition, it is more accurate and easy to touch with your fingers.

Dp is a device-independent dot matrix number. 160dp corresponds to 1 inch, 25.4, and 48dp corresponds to 7.62. This article 9mm does not know the source, but it is in line with the following statement not lower than 7mm.

If all elements you design have at least the height and width of 48dp, you can ensure that:
-When the elements you designed are displayed on any screen, they will not be less than the minimum recommended value of 7mm.
-You can strike a good balance between the information density and the availability of interface elements.

Pay attention to the white space. The white space between interface elements should be 8dp.

The information is very rich. The picture in front of the list should be designed to be 32dp, and the picture should be left white with 8dp at the top, bottom, and bottom, currently, the code is filled with random boundary values such as 5, 10, and 15.

In this example, the left and right sides of the white space are 16dp, which can be considered as 8 × 2, but I personally think 8dp is more in line with the original writing intention of this document. Finally, in any case, we should avoid designs with no source such as 5 and 10dp.
If the 160 DPI mdpi machine is used for initial design, the 25.4 dot matrix corresponds to 160dp, that is, 240mm. However, if the DPI hdpi machine is used for initial design, the dot matrix corresponds to 160dp, 48dp corresponds to the 72 dot matrix. Pay attention to the relationship during design.
Computing at the beginning of the design is on the one hand. After the code is implemented, the programmer should simply use a ruler to check whether the touch control is in the 7 ~ 10mm within the comfort scope, let's take a look at this scope to see at a glance whether the design and implementation of the interface are reasonable.

7. Font

The English font design of Android is based on traditional typographical technology, such as font scaling, regular font spacing, and grid alignment. The successful use of these technologies allows users to quickly understand information on the screen. To this end, Ice Cream Sandwich (Ice Cream Sandwich) introduced a brand new family of Roboto fonts designed for high-resolution screens. The current TextView control supports regular, bold, italic, and bold italic by default.

The Android interface uses the following default font colors: textColorPrimary and textColorSecondary. In the light topic, textColorPrimaryInverse and textColorSecondaryInverse are used. The system subject also supports several different font colors for touch feedback.

Different font sizes can create an orderly and easy-to-understand layout. However, using too many font sizes on the same interface can cause confusion. We recommend that you use the following font sizes for the Android design framework:

You can adjust the font size of the entire system in "Settings. To support this feature, the font size should be scaled as much as possible, which we call (sp ). You should also test the sp layout when testing the layout.

8. Color

Colors are mainly used to highlight important information. Select the appropriate color and provide a good visual comparison. Note: People with weak colors may not be able to distinguish between red and green.

Blue is the standard color in the Android color palette (note that colors are used to emphasize an important piece of information, rather than selling their own LCD colors in green colors ). Each color has a corresponding dark version for use.

9. icon

An icon is a real small image on the screen. It intuitively gives a first impression of an operation, a State, or an application.

This page details the overall information of the four types of icons, including launcher, action bar, contextual, and notification, as well as the size, design style, and color of the image area, the newly designed icons should follow these requirements as much as possible-the current design of our mobile phones seems to basically ignore these rules.

9.1 Launcher

The launch icon represents your application on the "home screen" and "All Applications. Because you can set the wallpaper of the "home screen", make sure that your startup icon is clearly visible on any background.

• Size and scaling. The size of the Start icon on the mobile device must be 48x48 dp. The launch icon displayed in the Google Market must be 512x512 pixels.
• Content. Do not leave it white, 48x48dp
• Style. As shown in, using a unique silhouette-a three-dimensional front view looks a little bit from top to bottom, allowing users to see some depth of field.

9.2 Action Bar

The operation bar icon is an image button used to indicate important operations that can be performed by users in the application. Use concise and clear pictures to show the operations to be performed.
Use the Android icon to represent some common operations, such as "refresh" and "share ". The following link provides an icon package, including multiple screen resolutions and icons corresponding to the light and dark Holo themes. There are no styles in the package, you can freely modify and match your own themes, and provide Adobe Illustrator source files for further modification.

• The icon must be 32x32dp.
• The overall size is 32x32dp, and the actual content is 24x24dp.
• Visualization, plane, not small details, with smooth and sharp outlines. If the picture is long and thin, turn it into a 45-degree angle and fill the content area (refer to the pen in ). The line width 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 icons under the light and dark themes respectively.

9.3 Small/Contextual Icons

In the subject area of the application, use a small icon to indicate the operation or specific status. For example, in a Gmail application, each piece of information has a star icon to mark "important ".

• The small icon must be 16x16dp.
• The overall size is 16x16dp, and the actual content is 12x12dp.
• Gray, neutral, plane, and simple. It is best to use a fill icon instead of a line outline. With simple visual effects, you can easily understand the purpose of icons.
• Use non-gray icons with caution and purpose (in special cases. For example, in a Gmail application, a yellow star icon is used to indicate important information. If the icon is clickable, use a color that is compared with the background.

9.4 Notification Icons

If your application uses the notification system, you need to provide an icon for the system. A new notification is displayed on the status bar.

• The size of the icon in the notification bar must be 24x24 dp.
• The overall size is 24x24 dp. The actual content is 22x22 dp.
• The simple and flat icons should be visually similar to the startup icons of your application.
• The notification icon must be pure white. Note that the system may scale or deepen your icon.

10. User prompt Style

• Keep it short. Concise and accurate. 30 letters or less (including spaces), unless necessary.
• Keep it simple. Although your users are smart and have poor understanding skills, do not describe technical details and take into account comrades who are not good at English. Use short words, active words, and common nouns.
• Friendly. Use the abbreviation. Use the second person ("you" or "you") when talking to your users "). If your words do not read normally, you should change the language style. Strive to make users feel comfortable, happy, and energetic.
• Let's talk about important things first. The two phrases at the beginning of a sentence (about 11 characters in English, including spaces) should express the focus of the information. Otherwise, rewrite it.
• Only the necessary information is described. Do not bother explaining the details. Most users will not see it.
• Avoid duplication. Even frequently-used words, appear only once on the same screen or in the same text.