ITP 140 Mobile App Technologies. User Interface for Android

Transcription

1 ITP 140 Mobile App Technologies User Interface for Android

2 Android Design Android Android GUI PSD 2

3 3

4 Enchant me Creative Vision Delight me in surprising ways Real objects are more fun than buttons and menus Let me make it mine Get to know me 4

5 Simply my life Android Goals Keep it brief Pictures are faster than words Decide for me but let me have the final say Only show what I need when I need it 5

6 Simply my life cont. I should always know where I am Never lose my stuff If it looks the same, it should act the same Android Goals Only interrupt me if it's important 6

7 Make me amazing Android Goals Give me tricks that work everywhere It's not my fault Sprinkle encouragement Do the heavy lifting for me Make important things fast 7

8 Home Screen Home is a customizable space that houses app shortcuts, folders and widgets. Navigate between different home screen panels by swiping left and right. The Favorites Tray at the bottom always keeps your most important shortcuts and folders in view regardless of which panel is currently showing. Access the entire collection of apps and widgets by touching the All Apps button at the center of the Favorites Tray. 8

9 All Apps Screen The All Apps screen lets you browse the entire set of apps and widgets that are installed on your device. Users can drag an app or widget icon from the All Apps screen and place it in any empty location on any Home screen. 9

10 Recents Screen Recents provides an efficient way of switching between recently used applications. It provides a clear navigation path between multiple ongoing tasks. The Recents button at the right side of the navigation bar displays the apps that the user has interacted with most recently. They are organized in reverse chronological order with the most recently used app at the bottom. Switch to an app by touching it. Remove an item by swiping left or right. 10

11 System Bars The system bars are screen areas dedicated to the display of notifications, communication of device status, and device navigation. Typically the system bars are displayed concurrently with your app. Apps that display immersive content, such as movies or images, can temporarily hide the system bars to allow the user to enjoy full screen content without distraction. 11

12 System Bars 12

13 System Bars 1. Status Bar Displays pending notifications on the left and status, such as time, battery level, or signal strength, on the right. Swipe down from the status bar to show notification details. 2. Navigation Bar New for phones in Android 4.0, the navigation bar is present only on devices that don't have the traditional hardware keys. It houses the device navigation controls Back, Home, and Recents, and also displays a menu for apps written for Android 2.3 or earlier. 13

14 Common App UI 1. Main Action Bar Command and control center for app 2. View Control Allows users to switch between different views 3. Content Area Space where the content of your app is displayed 4. Split Action Bar Provide a way to distribute actions across additional bars located below the main action bar or at the bottom of the screen 14

15 Themes Themes are Android's mechanism for applying a consistent style to an app or activity. The style specifies the visual properties of the elements that make up your user interface, such as color, height, padding and font size. To promote greater cohesion between all apps on the platform, Android provides three system themes: Holo Light Holo Dark Holo Light with dark action bars 15

16 Themes 16

17 Color Android's colors #33B5E5 #AA66CC #99CC00 #FFBB33 #FF4444 #0099CC #9933CC # #FF8800 #CC

18 Iconography An icon is a graphic that takes up a small portion of screen real estate and provides a quick, intuitive representation of an action, a status, or an app. The launcher icon is the visual representation of your app on the Home or All Apps screen. Since the user can change the Home screen's wallpaper, make sure that your launcher icon is clearly visible on any type of background. Sizes 48x48 dp (display independent pixels one dp is one pixel on a 160 dpi screen) Launcher icons on Google Play 512x512 px 18

19 Typography The Android design language relies on traditional typographic tools such as scale, space, rhythm, and alignment with an underlying grid. To support such use of typography, Ice Cream Sandwich introduced a new type family named Roboto, created specifically for the requirements of UI and high-resolution screens. The framework offers an italic for each weight. 19

20 Writing Style 1. Keep it brief. Be concise, simple and precise. Start with a 30 character limit (including spaces), and don't use more unless absolutely necessary. Example from the setup wizard: 2. Keep it simple. Pretend you're speaking to someone who's smart and competent, but doesn't know technical jargon and may not speak English very well. Use short words, active verbs, and common nouns. Example from the Location settings screen: 20

21 3. Be friendly. Writing Style Use contractions. Talk directly to the reader using second person ("you"). If your text doesn't read the way you'd say it in casual conversation, it's probably not the way you should write it. Don't be abrupt or annoying and make the user feel safe, happy and energized. Example from dialog that appears when an app crashes: 21

22 Writing Style 4. Put the most important thing first. The first two words (around 11 characters, including spaces) should include at least a taste of the most important information in the string. If they don't, start over. 22

23 Writing Style 5. Describe only what's necessary, and no more. Don't try to explain subtle differences. They will be lost on most users. Example from a Setup Wizard screen: 6. Avoid repetition. If a significant term gets repeated within a screen or block of text, find a way to use it just once. 23

24 Newer Components Since Android 4.0 Ice Cream Sandwich: Navigation bar Action bar Multi-pane layouts Selection 24

25 Navigation Bar Android 4.0 removes the need for traditional hardware keys on phones by replacing them with a virtual navigation bar that houses the Back, Home and Recents buttons. Read the Compatibility pattern to learn how the OS adapts to phones with hardware buttons and how pre-android 3.0 apps that rely on menu keys are supported. 25

26 Action Bar The action bar is the most important structural element of an Android app. It provides consistent navigation across the platform and allows your app to surface actions. 26

27 Multi-pane Layouts Creating apps that scale well across different form factors and screen sizes is important in the Android world. Multi-pane layouts allow you to combine different activities that show separately on smaller devices into richer compound views for tablets. 27

28 Selection The long press gesture which was traditionally used to show contextual actions for objects is now used for data selection. When selecting data, contextual action bars allow you to surface actions. 28

29 App Structure A typical Android app consists of top level and detail/edit views. If the navigation hierarchy is deep and complex, category views connect top level and detail views. The top level of the app typically consists of the different views that your app supports. The views either show different representations of the same data or expose an altogether different functional facet of your app. Category views allow you to drill deeper into your data. The detail/edit view is where you consume or create data. 29

30 Top level views Category views Detail/edit views 30

31 Top Level The top level communicates your app s capabilities by introducing the user to the major functional areas. In many cases the top level will consist of multiple views, and you need to make sure that the user can navigate between them efficiently. Android supports a number of view controls for this task. Use the control that best matches your app's navigation needs: Fixed tabs Spinners Navigation drawers 31

32 Fixed tabs Fixed tabs display top-level views concurrently and make it easy to explore and switch between them. They are always visible on the screen, and can't be moved out of the way like scrollable tabs. Fixed tabs should always allow the user to navigate between the views by swiping left or right on the content area. Use tabs if: You expect your app's users to switch views frequently. You have a limited number of up to three top-level views. You want the user to be highly aware of the alternate views. 32

33 Spinners A spinner is a drop-down menu that allows users to switch between views of your app. Use a spinner in the main action bar if: You don't want to give up the vertical screen real estate for a dedicated tab bar. The user is switching between views of the same data set (for example: calendar events viewed by day, week, or month) or data sets of the same type (such as content for two different accounts). 33

34 Navigation Drawers A navigation drawer is a slide-out menu that allows users to switch between views of your app. It can hold a large number of items and is accessible from anywhere in your app. They show your app's top-level views, but can also provide navigation to lower-level screens. This makes them particularly suitable for complex apps. 34

35 Navigation Drawers Use navigation drawers if: You don't want to give up the vertical screen real estate for a dedicated tab bar. You have a large number of top-level views. You want to provide direct access to screens on lower levels. You want to provide quick navigation to views which don't have direct relationships between each other. You have particularly deep navigation branches. 35

36 Navigation with Back and Up Consistent navigation is an essential component of the overall user experience. Android 2.3 and earlier relied upon the system Back button for supporting navigation within an app. With the introduction of action bars in Android 3.0, a second navigation mechanism appeared: the Up button, consisting of the app icon and a left-point caret. 36

37 Up vs. Back The Up button is used to navigate within an app based on the hierarchical relationships between screens. If a screen is the topmost one in an app (that is, the app's home), it should not present an Up button. The system Back button is used to navigate, in reverse chronological order, through the history of screens the user has recently worked with. When the previously viewed screen is also the hierarchical parent of the current screen, pressing the Back button has the same result as pressing an Up button this is a common occurrence. However, unlike the Up button, which ensures the user remains within your app, the Back button can return the user to the Home screen, or even to a different app. 37

38 Action Bar The action bar is a dedicated piece of real estate at the top of each screen that is generally persistent throughout the app. It provides several key functions: Makes important actions prominent and accessible in a predictable way (such as New or Search). Supports consistent navigation and view switching within apps. Reduces clutter by providing an action overflow for rarely used actions. Provides a dedicated space for giving your app an identity. 38

39 Action Bar 1. App icon The app icon establishes your app's identity. It can be replaced with a different logo or branding if you wish. 2. View control If your app displays data in different views, this segment of the action bar allows users to switch views. 3. Action buttons Show the most important actions of your app in the actions section. 4. Action overflow Move less often used actions to the action overflow. 39

40 Action Bars When splitting up content across multiple action bars, you generally have three possible locations for action bar content: 1. Main action bar 2. Top bar 3. Bottom bar App icon with & without "up" 40

41 Building Blocks Inventory of ready-to-use elements for creating outstanding apps 41

42 Tabs Tabs in the action bar make it easy to explore and switch between different views or functional aspects of your app, or to browse categorized data sets. 42

43 Scrollable Tabs Scrolling tab controls can contain a larger number of items than a standard tab control. To navigate to the next/previous view, swipe left or right. 43

44 Fixed Tabs Fixed tabs display all items concurrently. To navigate to a different view, touch the tab, or swipe left or right. Fixed tabs are displayed with equal width, based on the width of the widest tab label. If there is insufficient room to display all tabs, the tab labels themselves will be scrollable. For this reason, fixed tabs are best suited for displaying 3 or fewer tabs. 44

45 Stacked Tabs If view navigation is essential to your app, you can break out tabs into a separate action bar. This permits fast view switching even on narrower screens. 45

46 Lists present multiple line items in a vertical arrangement. They can be used for data selection as well as drilldown navigation. 1. Section Divider 2. Line Items Lists 46

47 Grid Lists Grid lists are an alternative to standard list views. They are best suited for showing data sets that represent themselves through images. In contrast to simple lists, grid lists may scroll either vertically or horizontally. Generic Grids Vertical scrolling Horizontal scrolling Avoid creating grid lists that scroll in two dimensions. 47

48 Generic Grids Vertical scrolling Horizontal scrolling 48

49 Grid List with Labels Use labels to display additional contextual information for your grid list items. Use semi-transparent panels on top of the grid list items to display your labels. This allows you to control the contrast and ensures legibility of the labels while letting the content "shine through". 49

50 Scrolling Scrolling allows the user to navigate to content in the overflow using a swipe gesture. The scrolling speed is proportional to the speed of the gesture. Scroll Indicator Appears during scrolling to indicate what portion of the content is currently in view. Index Scrolling A long alphabetical list can also offer index scrolling: a way to quickly navigate to the items that begin with a particular letter. 50

51 Spinners Spinners provide a quick way to select one value from a set. In the default state, a spinner shows its currently selected value. Touching the spinner displays a dropdown menu with all other available values, from which the user can select a new one. 51

52 Buttons A button consists of text and/or an image that clearly communicates what action will occur when the user touches it. Android supports two different types of buttons: basic buttons and borderless buttons. Both can contain text labels and/or images. 52

53 Text Fields Text fields allow the user to type text into your app. They can be either single line or multi-line. Touching a text field places the cursor and automatically displays the keyboard. In addition to typing, text fields allow for a variety of other activities, such as text selection (cut, copy, paste) and data lookup via autocompletion. 53

54 Seek Bars and Sliders Interactive sliders make it possible to select a value from a continuous or discrete range of values by moving the slider thumb. The smallest value is to the left, the largest to the right. The interactive nature of the slider makes it a great choice for settings that reflect intensity levels, such as volume brightness, or color saturation. 54

55 Progress & Activity Progress bars and activity indicators signal to users that something is happening that will take a moment. 55

56 Progress Bars Progress bars are for situations where the percentage completed can be determined. They give users a quick sense of how much longer an operation will take. A progress bar should always fill from 0% to 100% and never move backwards to a lower value. If multiple operations are happening in sequence, use the progress bar to represent the delay as a whole, so that when the bar reaches 100%, it doesn't return back to 0%. 56

57 Activity Indicators Activity indicators are for operations of an indeterminate length. They ask users to wait a moment while something finishes up, without getting into specifics about what's happening behind the scenes. Two styles are available: a bar and a circle. Each is offered in a variety of sizes, in both Holo Light and Holo Dark themes. Choose the appropriate style and size for the surrounding context. 57

58 1. Activity Bar Activity Indicators 1. Activity Circle 58

59 Custom Indicators Some situations may call for something more custom, especially if you have multiple states. Example: Not downloaded Temporarily downloaded (automatically cached by the app) Permanently downloaded on the device at the user's request 59

60 Switches Switches allow the user to select options. There are three kinds of switches: 1. checkboxes Use for 0, 1, or more options selected 2. radio buttons Use for 1 and only 1 option selected 3. on/off switches 60

61 Checkboxes Checkboxes allow the user to select multiple options from a set. Avoid using a single checkbox to turn an option off or on. Instead, use an on/off switch. 61

62 Radio Buttons Radio buttons allow the user to select one option from a set. Use radio buttons for exclusive selection if you think that the user needs to see all available options sideby-side. Otherwise, consider a spinner, which uses less space. 62

63 On/off Switches On/off switches toggle the state of a single settings option. 63

64 Dialogs Dialogs prompt the user for decisions or additional information required by the app to continue a task. Such requests can range from simple Cancel/OK decisions to more complex layouts asking the user to adjust settings or enter text. 64

65 Dialogs 1. Optional title region 2. Content area Dialog content varies widely. A dialog may contain UI elements such as sliders, text fields, checkboxes, or radio buttons. In other cases, such as alerts, the content may consist solely of text that provides further context for a user decision. 3. Action buttons 65

66 Action Buttons on Dialogs Action buttons are typically Cancel and/or OK, with OK indicating the preferred or most likely action. However, if the options consist of specific actions such as Close or Wait rather than a confirmation or cancellation of the action described in the content, then all the buttons should be active verbs Order actions following these rules: The dismissive action of a dialog is always on the left. Dismissive actions return to the user to the previous state. The affirmative actions are on the right. Affirmative actions continue progress toward the user goal that triggered the dialog. 66

67 Alerts Alerts inform the user about a situation that requires their confirmation or acknowledgement before proceeding. They differ slightly in appearance based upon the severity and impact of the message conveyed. When crafting a confirmation dialog, make the title meaningful by echoing the requested action. 67

68 Alerts Alerts without title bars Most alerts don't need titles. Alerts with title bars Use alerts with title bars sparingly. They are appropriate only when a high-risk operation. 68

69 Popups Popups are lightweight version of dialogs that require a single selection from the user. Popups don't have have explicit buttons that accept or cancel the operation. Instead, making a selection advances the workflow, and simply touching outside the popup dismisses it. 69

70 Toasts Toasts provide lightweight feedback about an operation in a small popup. For example, navigating away from an before you send it triggers a "Draft saved" toast to let you know that you can continue editing later. Toasts automatically disappear after a timeout. 70

71 Snackbars Snackbars contain a single line of text directly related to the operation performed. They may contain a text action, but no icons. 71

72 Pickers Pickers provide a simple way to select a single value from a set. In addition to touching the up/down arrow buttons, it's possible to set the desired value from the keyboard or via a swipe gesture. Space considerations Pickers can be used inline on a form, but their relatively large footprint is best suited for display in a dialog. 72

73 Date and Time Pickers Android provides these as ready-to-use dialogs. Each picker is a dialog with a set of controls for entering the parts of the date (month, day, year) or time (hour, minute, AM/PM). Using these in your app helps ensure that a user's specification of a data or time input is valid and formatted correctly. 73

74 Downloads Resources ndex.html Videos The Android Design Team was pleased to present five fantastic design-oriented sessions at Google I/O Visit these pages to view the videos and presentations from the conference. 74