From 02123630ca652d88191dc8739dcb2e5559655bd5 Mon Sep 17 00:00:00 2001 From: Peter Ng Date: Mon, 6 Aug 2012 11:44:48 -0700 Subject: Multiple design styleguide fixes -Changing extras to videos -new bullet item in swipeviews -new in 4.0 removal -Ui overview notification info -reppling typo fixed Bug: 6936546 Bug: 6936394 Bug: 6958972 Bug: 6960355 Bug: 6937850 Bug: 6937856 Bug: 6912380 Bug: 6941255 Bug: 6937723 Bug: 5836846 Bug: 6915055 Bug: 6915259 Bug: 6651973 Bug: 6937070 Bug: 6947018 Bug: 6924456 Bug: 6915152 Bug: 6936797 Bug: 6924201 Bug: 6922994 Bug: 6924137 Bug: 6907998 Bug: 6912377 Bug: 6937761 Bug: 6923664 Bug: 6946790 Bug: 6918869 Change-Id: Ic5f39fe5b9f56c911af8bde9a254007748f6530e --- docs/html/design/building-blocks/dialogs.jd | 39 ++++++ docs/html/design/building-blocks/tabs.jd | 3 +- docs/html/design/design_toc.cs | 5 +- docs/html/design/extras/index.jd | 22 ---- docs/html/design/get-started/creative-vision.jd | 8 +- docs/html/design/get-started/ui-overview.jd | 3 +- .../design/media/action_bar_pattern_share_pack.png | Bin 694567 -> 692263 bytes docs/html/design/media/confirm_ack_flowchart.png | Bin 318408 -> 191417 bytes docs/html/design/media/downloads_stencils.png | Bin 12181 -> 15300 bytes docs/html/design/media/help_better.png | Bin 6360 -> 10385 bytes docs/html/design/media/help_dont.png | Bin 14031 -> 21054 bytes docs/html/design/media/help_evenbetter.png | Bin 11309 -> 15522 bytes docs/html/design/media/multipane_expand.png | Bin 155849 -> 97509 bytes docs/html/design/media/new_notifications.png | Bin 24282 -> 15239 bytes .../media/notifications_expand_contract_msg.png | Bin 23119 -> 22960 bytes .../media/notifications_pattern_dialog_toast.png | Bin 42372 -> 0 bytes .../media/notifications_pattern_expandable.png | Bin 161690 -> 162040 bytes .../media/notifications_pattern_personal.png | Bin 14983 -> 15239 bytes docs/html/design/media/swipe_views2.png | Bin 114967 -> 116051 bytes docs/html/design/media/swipe_views3.png | Bin 0 -> 214151 bytes .../design/media/widgets_collection_bookmarks.png | Bin 0 -> 25810 bytes .../html/design/media/widgets_collection_gmail.png | Bin 0 -> 26594 bytes docs/html/design/media/widgets_config.png | Bin 0 -> 30269 bytes docs/html/design/media/widgets_control.png | Bin 0 -> 10653 bytes docs/html/design/media/widgets_gestures.png | Bin 0 -> 368609 bytes docs/html/design/media/widgets_hybrid.png | Bin 0 -> 7654 bytes docs/html/design/media/widgets_info.png | Bin 0 -> 18531 bytes docs/html/design/media/widgets_resizing01.png | Bin 0 -> 31052 bytes docs/html/design/media/widgets_resizing02.png | Bin 0 -> 17165 bytes docs/html/design/patterns/actionbar.jd | 21 ++-- .../design/patterns/confirming-acknowledging.jd | 33 ++---- docs/html/design/patterns/help.jd | 20 ++-- docs/html/design/patterns/index.jd | 4 +- docs/html/design/patterns/multi-pane-layouts.jd | 4 +- docs/html/design/patterns/notifications.jd | 120 +++++++------------ docs/html/design/patterns/selection.jd | 3 +- docs/html/design/patterns/settings.jd | 4 +- docs/html/design/patterns/swipe-views.jd | 56 ++++----- docs/html/design/patterns/widgets.jd | 131 +++++++++++++++++++++ docs/html/design/videos/index.jd | 67 +++++++++++ 40 files changed, 349 insertions(+), 194 deletions(-) delete mode 100644 docs/html/design/extras/index.jd delete mode 100644 docs/html/design/media/notifications_pattern_dialog_toast.png create mode 100644 docs/html/design/media/swipe_views3.png create mode 100644 docs/html/design/media/widgets_collection_bookmarks.png create mode 100644 docs/html/design/media/widgets_collection_gmail.png create mode 100644 docs/html/design/media/widgets_config.png create mode 100644 docs/html/design/media/widgets_control.png create mode 100644 docs/html/design/media/widgets_gestures.png create mode 100644 docs/html/design/media/widgets_hybrid.png create mode 100644 docs/html/design/media/widgets_info.png create mode 100644 docs/html/design/media/widgets_resizing01.png create mode 100644 docs/html/design/media/widgets_resizing02.png create mode 100644 docs/html/design/patterns/widgets.jd create mode 100644 docs/html/design/videos/index.jd (limited to 'docs/html/design') diff --git a/docs/html/design/building-blocks/dialogs.jd b/docs/html/design/building-blocks/dialogs.jd index 2820471..728821e 100644 --- a/docs/html/design/building-blocks/dialogs.jd +++ b/docs/html/design/building-blocks/dialogs.jd @@ -81,7 +81,46 @@ available based on the title and the text of the action buttons.

+

When crafting a confirmation dialog, make the title meaningful by echoing the requested action.

+
+
+
Don't
+ + + + + + +
+ Are you sure? +
+
+
+
Don't
+ + + + + + +
+ Warning! +
+
+
+
Do
+ + + + + + +
+ Erase USB storage? +
+
+

Popups

diff --git a/docs/html/design/building-blocks/tabs.jd b/docs/html/design/building-blocks/tabs.jd index 8a2eb41..fe05f80 100644 --- a/docs/html/design/building-blocks/tabs.jd +++ b/docs/html/design/building-blocks/tabs.jd @@ -35,9 +35,8 @@ to the next/previous view, swipe left or right.

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.

diff --git a/docs/html/design/design_toc.cs b/docs/html/design/design_toc.cs index 72007f5..c3020e1 100644 --- a/docs/html/design/design_toc.cs +++ b/docs/html/design/design_toc.cs @@ -34,13 +34,14 @@
  • Multi-pane Layouts
  • Swipe Views
  • Selection
    • +
  • Confirming & Acknowledging
  • Notifications
    • +
  • Widgets
  • Settings
  • Help
  • Compatibility
  • Accessibility
  • Pure Android
    • -
  • Confirming & Acknowledging
    • @@ -67,7 +68,7 @@
  • -
    Extras
    +
    Videos
    • \ No newline at end of file diff --git a/docs/html/design/extras/index.jd b/docs/html/design/extras/index.jd deleted file mode 100644 index 4546f75..0000000 --- a/docs/html/design/extras/index.jd +++ /dev/null @@ -1,22 +0,0 @@ -page.title=Extras -@jd:body - -

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

    - - -

    Android Design for Success

    -

    You have a great idea for an Android app. You want it to stand out among hundreds of thousands. You want your users to love it and tell everyone they know. The Android User Experience team is here to help. We talk about the Android Design guide and other tricks of the trade for creating apps that delight users and help them accomplish their goals. No design background is required.

    - -

    Android Design for Engineers

    -

    Design isn't black magic, it's a field that people can learn. In this talk two elite designers from Google give you an advanced crash course in interactive and visual design. Topics include mental models, natural mappings, metaphors, mode errors, visual hierarchies, typography and gestalt principles. Correctly applied, this knowledge can drastically improve the quality of your work.

    - - -

    An app is useless if people can't find their way around it. Android introduced big navigation-support changes in 3.0 and 4.0. The Action Bar offers a convenient control for Up navigation, the Back key's behavior became more consistent within tasks, and the Recent Tasks UI got an overhaul. In this talk, we discuss how and why we got where we are today, how to think about navigation when designing your app's user experience, and how to write apps that offer effortless navigation in multiple Android versions.

    - -

    So You've Read the Design Guide; Now What?

    -

    The Android Design Guide describes how to design beautiful Android apps, but not how to build them. In this talk we give practical tips for how to apply fit & finish as you implement your design, we show you how to avoid some common pitfalls, we describe some useful patterns, and show how tools can help.

    - -

    Playing with Patterns

    -

    Best-in-class application designers and developers talk about their experience in developing for Android, showing screenshots from their app, exploring the challenges they faced, and offering creative solutions congruent with the Android Design guide. Guests are invited to show examples of visual and interaction patterns in their application that manage to keep it simultaneously consistent and personal.

    - -

    Videos for the entire Design Track can also be found on the Android Developers Channel on YouTube.

    \ No newline at end of file diff --git a/docs/html/design/get-started/creative-vision.jd b/docs/html/design/get-started/creative-vision.jd index 792b97d..c57b185 100644 --- a/docs/html/design/get-started/creative-vision.jd +++ b/docs/html/design/get-started/creative-vision.jd @@ -5,13 +5,7 @@ page.title=Creative Vision
     
    -

    Ice Cream Sandwich (Android 4.0) marks a major milestone for Android design. We touched nearly every -pixel of the system as we expanded the new design approaches introduced in Honeycomb tablets to all -types of mobile devices. Starting with the most basic elements, we introduced a new font, Roboto, -designed for high-resolution displays. Other big changes include framework-level action bars on -phones and support for new phones without physical buttons.

    -

    We focused the design work with three overarching goals for our core apps and the system at large. -As you design apps to work with Android, consider these goals:

    +

    We focused the design of Android around three overarching goals, which apply to our core apps as well as the system at large. As you design apps to work with Android, consider these goals:

     
    diff --git a/docs/html/design/get-started/ui-overview.jd b/docs/html/design/get-started/ui-overview.jd index 34cdd06..bfb9ec9 100644 --- a/docs/html/design/get-started/ui-overview.jd +++ b/docs/html/design/get-started/ui-overview.jd @@ -101,8 +101,7 @@ notification opens the associated app. -

    Most notifications have a one-line title and a one-line message. The recommended layout for a -notification includes two lines. If necessary, you can add a third line. Timestamps are optional.

    +

    Notifications can be expanded to uncover more details and relevant actions. When collapsed, notifications have a one-line title and a one-line message.The recommended layout for a notification includes two lines. If necessary, you can add a third line.

    Swiping a notification right or left removes it from the notification drawer.

    diff --git a/docs/html/design/media/action_bar_pattern_share_pack.png b/docs/html/design/media/action_bar_pattern_share_pack.png index dde18f3..c8cff61 100644 Binary files a/docs/html/design/media/action_bar_pattern_share_pack.png and b/docs/html/design/media/action_bar_pattern_share_pack.png differ diff --git a/docs/html/design/media/confirm_ack_flowchart.png b/docs/html/design/media/confirm_ack_flowchart.png index 277cb11..3935d47 100644 Binary files a/docs/html/design/media/confirm_ack_flowchart.png and b/docs/html/design/media/confirm_ack_flowchart.png differ diff --git a/docs/html/design/media/downloads_stencils.png b/docs/html/design/media/downloads_stencils.png index 9e09319..9b1a9fe 100644 Binary files a/docs/html/design/media/downloads_stencils.png and b/docs/html/design/media/downloads_stencils.png differ diff --git a/docs/html/design/media/help_better.png b/docs/html/design/media/help_better.png index fde5cb2..83d7b07 100644 Binary files a/docs/html/design/media/help_better.png and b/docs/html/design/media/help_better.png differ diff --git a/docs/html/design/media/help_dont.png b/docs/html/design/media/help_dont.png index a1c9841..3c52c97 100644 Binary files a/docs/html/design/media/help_dont.png and b/docs/html/design/media/help_dont.png differ diff --git a/docs/html/design/media/help_evenbetter.png b/docs/html/design/media/help_evenbetter.png index beb88f8..66b9d16 100644 Binary files a/docs/html/design/media/help_evenbetter.png and b/docs/html/design/media/help_evenbetter.png differ diff --git a/docs/html/design/media/multipane_expand.png b/docs/html/design/media/multipane_expand.png index f761e5f..6014cc8 100644 Binary files a/docs/html/design/media/multipane_expand.png and b/docs/html/design/media/multipane_expand.png differ diff --git a/docs/html/design/media/new_notifications.png b/docs/html/design/media/new_notifications.png index 1d9bcf5..a7293c8 100644 Binary files a/docs/html/design/media/new_notifications.png and b/docs/html/design/media/new_notifications.png differ diff --git a/docs/html/design/media/notifications_expand_contract_msg.png b/docs/html/design/media/notifications_expand_contract_msg.png index f37ec2c..056c9f2 100644 Binary files a/docs/html/design/media/notifications_expand_contract_msg.png and b/docs/html/design/media/notifications_expand_contract_msg.png differ diff --git a/docs/html/design/media/notifications_pattern_dialog_toast.png b/docs/html/design/media/notifications_pattern_dialog_toast.png deleted file mode 100644 index 517d57b..0000000 Binary files a/docs/html/design/media/notifications_pattern_dialog_toast.png and /dev/null differ diff --git a/docs/html/design/media/notifications_pattern_expandable.png b/docs/html/design/media/notifications_pattern_expandable.png index 3092676..31cb3f1 100644 Binary files a/docs/html/design/media/notifications_pattern_expandable.png and b/docs/html/design/media/notifications_pattern_expandable.png differ diff --git a/docs/html/design/media/notifications_pattern_personal.png b/docs/html/design/media/notifications_pattern_personal.png index 08880b2..a7293c8 100644 Binary files a/docs/html/design/media/notifications_pattern_personal.png and b/docs/html/design/media/notifications_pattern_personal.png differ diff --git a/docs/html/design/media/swipe_views2.png b/docs/html/design/media/swipe_views2.png index 6479a2f..ee0f2c4 100644 Binary files a/docs/html/design/media/swipe_views2.png and b/docs/html/design/media/swipe_views2.png differ diff --git a/docs/html/design/media/swipe_views3.png b/docs/html/design/media/swipe_views3.png new file mode 100644 index 0000000..bdf9994 Binary files /dev/null and b/docs/html/design/media/swipe_views3.png differ diff --git a/docs/html/design/media/widgets_collection_bookmarks.png b/docs/html/design/media/widgets_collection_bookmarks.png new file mode 100644 index 0000000..86d4d88 Binary files /dev/null and b/docs/html/design/media/widgets_collection_bookmarks.png differ diff --git a/docs/html/design/media/widgets_collection_gmail.png b/docs/html/design/media/widgets_collection_gmail.png new file mode 100644 index 0000000..bbd538d Binary files /dev/null and b/docs/html/design/media/widgets_collection_gmail.png differ diff --git a/docs/html/design/media/widgets_config.png b/docs/html/design/media/widgets_config.png new file mode 100644 index 0000000..0ac3473 Binary files /dev/null and b/docs/html/design/media/widgets_config.png differ diff --git a/docs/html/design/media/widgets_control.png b/docs/html/design/media/widgets_control.png new file mode 100644 index 0000000..a46add8 Binary files /dev/null and b/docs/html/design/media/widgets_control.png differ diff --git a/docs/html/design/media/widgets_gestures.png b/docs/html/design/media/widgets_gestures.png new file mode 100644 index 0000000..f991609 Binary files /dev/null and b/docs/html/design/media/widgets_gestures.png differ diff --git a/docs/html/design/media/widgets_hybrid.png b/docs/html/design/media/widgets_hybrid.png new file mode 100644 index 0000000..470f75f Binary files /dev/null and b/docs/html/design/media/widgets_hybrid.png differ diff --git a/docs/html/design/media/widgets_info.png b/docs/html/design/media/widgets_info.png new file mode 100644 index 0000000..6621158 Binary files /dev/null and b/docs/html/design/media/widgets_info.png differ diff --git a/docs/html/design/media/widgets_resizing01.png b/docs/html/design/media/widgets_resizing01.png new file mode 100644 index 0000000..5c85df6 Binary files /dev/null and b/docs/html/design/media/widgets_resizing01.png differ diff --git a/docs/html/design/media/widgets_resizing02.png b/docs/html/design/media/widgets_resizing02.png new file mode 100644 index 0000000..28f9461 Binary files /dev/null and b/docs/html/design/media/widgets_resizing02.png differ diff --git a/docs/html/design/patterns/actionbar.jd b/docs/html/design/patterns/actionbar.jd index 80aa77d..9ceb499 100644 --- a/docs/html/design/patterns/actionbar.jd +++ b/docs/html/design/patterns/actionbar.jd @@ -3,20 +3,15 @@ page.title=Action Bar -

    The action bar is arguably the most important structural element of an Android app. It's a -dedicated piece of real estate at the top of each screen that is generally persistent throughout the -app.

    -

    The main purpose of the action bar is to:

    +

    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:

    -

    If you're new to writing Android apps, note that the action bar is one of the most important design -elements you can implement. Following the guidelines described here will go a long way toward making -your app's interface consistent with the core Android apps.

    +

    If you're new to writing Android apps, note that the action bar is one of the most important design elements you can implement. Following the guidelines described here will go a long way toward making your app's interface consistent with the core Android apps.

    General Organization

    The action bar is split into four different functional areas that apply to most apps.

    @@ -224,7 +219,7 @@ tabs. Fixed tabs in the main action bar can move to the top bar when the screen

    Drawers

    -

    A drawer is a slide-out menu that allows users to switch between views of your app. It can be opened by touching the action bar's app icon (decorated with the Up caret.) Because it relies on Up navigation, a drawer is only suitable for use at the topmost level of your app's hierarchy.

    +

    A drawer is a slide-out menu that allows users to switch between views of your app. It can be opened by touching the action bar's app icon (decorated with the Up caret.) Additionally, a drawer can be revealed by an edge swipe from the left of the screen, and dismissed by swiping from the right edge of the drawer. However, because many users will rely on Up navigation to open a drawer, it is only suitable for use at the topmost level of your app's hierarchy.

    Open a drawer from the main action bar if:

      diff --git a/docs/html/design/patterns/confirming-acknowledging.jd b/docs/html/design/patterns/confirming-acknowledging.jd index 28e4427..ce0631b 100644 --- a/docs/html/design/patterns/confirming-acknowledging.jd +++ b/docs/html/design/patterns/confirming-acknowledging.jd @@ -23,37 +23,30 @@ page.title=Confirming & Acknowledging

      Confirming

      -

      Example: Google Play Books

      -

      In this example, the user has requested to delete a book from their Google Play library. A dialog appears to confirm this action because it's important to understand that the book will no longer be available from any device.

      + +

      In this example, the user has requested to delete a book from their Google Play library. An alert appears to confirm this action because it's important to understand that the book will no longer be available from any device.

      When crafting a confirmation dialog, make the title meaningful by echoing the requested action.

      - -
        -
      • Don't

        Are you sure?

        • -
      • Don't

        Warning!

        • -
      • Do

        Delete from library?

        • -
      -
      -

      Example: Android Beam

      -

      Confirmations don't necessarily have to be presented in a dialog with two buttons. After initiating Android Beam, the user is prompted to touch the content to be shared (in this example, it's a photo). If they decide not to proceed, they simply move their phone away.

      + +

      Confirmations don't necessarily have to be presented in an alert with two buttons. After initiating Android Beam, the user is prompted to touch the content to be shared (in this example, it's a photo). If they decide not to proceed, they simply move their phone away.

      Acknowledging

      -

      Example: Abandoned Gmail draft saved

      +

      In this example, if the user navigates back or up from the Gmail compose screen, something possibly unexpected happens: the current draft is automatically saved. An acknowledgment in the form of a toast makes that apparent. It fades after a few seconds.

      Undo isn't appropriate here because saving was initiated by the app, not the user. And it's quick and easy to resume composing the message by navigating to the list of drafts.

      -

      Example: Gmail conversation deleted

      +

      After the user deletes a conversation from the list in Gmail, an acknowledgment appears with an undo option. The acknowledgment remains until the user takes an unrelated action, such as scrolling the list.

      @@ -61,16 +54,16 @@ page.title=Confirming & Acknowledging

      No Confirmation or Acknowledgment

      - +

      Example: +1'ing

      + +

      Confirmation is unnecessary. If the user +1'd by accident, it's not a big deal. They can just touch the button again to undo the action.

      +

      Acknowledgment is unnecessary. The user will see the +1 button bounce and turn red. That's a very clear signal.

      +
      +

      Example: Removing an app from the Home Screen

      +

      Confirmation is unnecessary. This is a deliberate action: the user must drag and drop an item onto a relatively large and isolated target. Therefore, accidents are highly unlikely. But if the user regrets the decision, it only takes a few seconds to bring it back again.

      Acknowledgment is unnecessary. The user will know the app is gone from the Home Screen because they made it disappear by dragging it away.

      -
      - -

      Example: +1'ing

      -

      Confirmation is unnecessary. If the user +1'd by accident, it's not a big deal. They can just touch the button again to undo the action.

      -

      Acknowledgment is unnecessary. The user will see the +1 button bounce and turn red. That's a very clear signal.

      -
      \ No newline at end of file diff --git a/docs/html/design/patterns/help.jd b/docs/html/design/patterns/help.jd index e42ea26..cdac54d 100644 --- a/docs/html/design/patterns/help.jd +++ b/docs/html/design/patterns/help.jd @@ -17,20 +17,18 @@ page.title=Help
    • They're usually not necessary. If you have usability concerns about an aspect of your app, don't just throw help at the problem. Try to solve it in the UI. Apply Android design patterns, styles, and building blocks, and you'll go a long way in reducing the need to educate your users.

    The only reason for showing pure help content to new users unsolicited is:
    -To teach high value functionality that's only available through an atypical use of a gesture.

    +To teach high value functionality that's only available through a gesture.

    For example, we use help content to teach users how to place apps on their Home Screen. This functionality is:

    -
      +
      • High value -

        Without it, users wouldn't be able to customize the most frequently-visited Android screen to meet their needs.

        • +

        Without it, users wouldn't be able to customize the most frequently visited Android screen to meet their needs.

      • Available only through a gesture -

        Users can't do this through a button or a menu.

        • -
      • Atypical for the gesture -

        Many high value functions invoked through a gesture - like scrolling, swiping tabs, and turning pages - are common and yield expected results. Users will be able to discover them in your app, and unsolicited help is unnecessary. But here, the gesture does something unexpected: press and hold doesn't just select an app, it also immediately navigates to the Home Screen and creates a shortcut to the app that can then be dragged around.

        • -
    -

    However, this is an exceptional case. Most functionality doesn't meet all three of these criteria.

    +

    Because there's no button or menu for it, users might not ever discover it on their own.

    + +

    However, not all high value gesture-only functionality needs a tutorial. For example, don't teach users how to scroll content. They already know how because it's a fundamental, system-wide interaction.

    @@ -60,9 +58,9 @@ page.title=Help

    Assume that every call for help is urgent

    -

    In addition to help, you might want to expose miscellaneous other information, such as copyright info, credits, terms of service, and privacy policy.

    +

    In addition to help, you might want to expose other information, such as copyright info, credits, terms of service, and privacy policy.

    -

    Let users access this information through your Help menu item, but don't give it prominence equal to the core help content. Optimize the flow for people who have urgent questions about how to do something or why something is happening in your app. The smaller subset of users who are looking for legal fine print or the names of the people who created the app won't be as burdened by taking a few extra steps.

    +

    Let users access this information through the Help menu item, but optimize the flow for people with urgent questions about how to do something or why something is happening in your app. The smaller subset of users who are looking for legal fine print or the names of the people who created the app won't be as burdened by taking a few extra steps.

    The same is true for any communication options you might want to provide, such as contacting customer support or submitting feedback. Offer these options in a way that doesn't add an extra step before users see help. When you put the help content forward, you increase the likelihood that users will find the answers on their own, which in turn reduces your support costs.

    @@ -91,7 +89,7 @@ page.title=Help

    Even Better

    -

    Build a help screen in your app and offer other options in the action bar.

    +

    Build a help screen in your app and offer other options in the action bar. For example, you could let users contact you with questions or feedback through an action button. The action overflow is the ideal place for non-help information that users rarely need.

    This requires more development work than launching a web browser, but it's a nicer experience for users because they don't leave your app to get the help they need and doesn't require a network connection.

    diff --git a/docs/html/design/patterns/index.jd b/docs/html/design/patterns/index.jd index 6f88e6d..4416de1 100644 --- a/docs/html/design/patterns/index.jd +++ b/docs/html/design/patterns/index.jd @@ -20,10 +20,10 @@ footer.hide=1
    Design apps that behave in a consistent, predictable fashion.

    - New in Android 4.0 + New in Android
    - +
    diff --git a/docs/html/design/patterns/multi-pane-layouts.jd b/docs/html/design/patterns/multi-pane-layouts.jd index f752be2..ad888e9 100644 --- a/docs/html/design/patterns/multi-pane-layouts.jd +++ b/docs/html/design/patterns/multi-pane-layouts.jd @@ -67,9 +67,7 @@ you can use to adjust the layout after orientation change while keeping function

    Expand/collapse

    -

    When the device rotates, collapse the left pane view to only show the most important information. -Provide an expand control that allows the user to bring the left pane content back to its original -width and vice versa.

    +

    When the device rotates, collapse the left pane view to only show the most important information.

    diff --git a/docs/html/design/patterns/notifications.jd b/docs/html/design/patterns/notifications.jd index fbb05e3..75bfff2 100644 --- a/docs/html/design/patterns/notifications.jd +++ b/docs/html/design/patterns/notifications.jd @@ -7,8 +7,7 @@ page.title=Notifications

    In Jelly Bean, notifications received their most important structural and functional update since the beginning of Android.

    @@ -21,10 +20,10 @@ page.title=Notifications -

    The base notification layout has not changed in Jelly Bean, so app notifications designed for versions earlier than Jelly Bean still look and work the same.

    +

    The information arrangement of the base layout has not changed in Jelly Bean, so app notifications designed for versions earlier than Jelly Bean still look and work the same.

    @@ -35,7 +34,7 @@ page.title=Notifications

    Expanded layouts

    -

    With Jelly Bean you have the option to provide more event detail. You can use this to show the first few lines of a message or show a larger image preview. This provides the user with additional context, and - in some cases - may allow the user to read a message in its entirety. The user can pinch-zoom or two-finger glide in order to toggle between base and expanded layouts. For single event notifications, Android provides two expanded layout templates (text and image) for you to re-use in your application.

    +

    With Jelly Bean you have the option to provide more event detail. You can use this to show the first few lines of a message or show a larger image preview. This provides the user with additional context, and - in some cases - may allow the user to read a message in its entirety. The user can pinch-zoom or two-finger glide in order to toggle between base and expanded layouts. For single event notifications, Android provides two expanded layout templates (text and image) for you to re-use in your application.

    @@ -53,7 +52,7 @@ page.title=Notifications

    Avoid actions that are:

    @@ -64,7 +63,7 @@ page.title=Notifications
    -

    You can specify a maximum of three actions, each consisting of an action icon and an action name. Adding actions to a base layout will make the notification expandable, even if the notification doesn't have an expanded layout. Since actions are only shown for expanded notifications and are otherwise hidden, you must make sure that any action a user can invoke from a notification is available from within the associated application as well.

    +

    You can specify a maximum of three actions, each consisting of an action icon and an action name. Adding actions to a simple base layout will make the notification expandable, even if the notification doesn't have an expanded layout. Since actions are only shown for expanded notifications and are otherwise hidden, you must make sure that any action a user can invoke from a notification is available from within the associated application as well.

    Design guidelines

    @@ -79,27 +78,13 @@ page.title=Notifications

    Navigate to the right place

    -

    When the user touches a notification, open your app to the place where the user can consume and -act upon the data referenced in the notification. In most cases this will be the detail view of a -single data item such as a message, but it might also be a summary view if the notification is -stacked (see Stacked notifications below) and references multiple items. If in any of those cases -the user is taken to a hierarchy level below your app's top-level, insert navigation into your app's -back stack to allow them to navigate to your app's top level using the system back key. For more -information, see the chapter on System-to-app navigation in the -Navigation design pattern.

    -

    Timestamps for time sensitive events

    -

    By default, standard Android notifications include a timestamp. Consider -whether the timestamp is valuable in the context of your notification.

    -

    Include a timestamp if the user likely needs to know how long ago the notification occurred. Good -candidates for timestamps include communication notifications (email, messaging, chat, voicemail) -where the user may need the timestamp information to understand the context of a message or to -tailor a response.

    +

    When the user touches the body of a notification (outside of the action buttons), open your app to the place where the user can consume and act upon the data referenced in the notification. In most cases this will be the detail view of a +single data item such as a message, but it might also be a summary view if the notification is stacked (see Stacked notifications below) and references multiple items. If in any of those cases the user is taken to a hierarchy level below your app's top-level, insert navigation into your app's back stack to allow them to navigate to your app's top level using the system back key. For more +information, see the chapter on System-to-app navigation in the Navigation design pattern.

    Correctly set and manage notification priority

    Starting with Jelly Bean, Android now supports a priority flag for notifications. It allows you to influence where your notification will appear in comparison to other notifications and help to make sure that users always see their most important notifications first. You can choose from the following priority levels when posting a notification:

    - - @@ -126,6 +111,7 @@ tailor a response.

    Priority Contextual/background information (e.g. weather information, contextual location information). Minimum priority notifications will not show in the status bar. The user will only discover them when they expand the notification tray.
    +

    Stack your notifications

    If your app creates a notification while another of the same type is still pending, avoid creating @@ -145,29 +131,30 @@ notifications of a particular kind are pending.

    Make notifications optional

    -

    Users should always be in control of notifications. Allow the user to silence the notifications from -your app by adding a notification settings item to your application settings.

    +

    Users should always be in control of notifications. Allow the user to disable your apps notifications or change their alert properties, such as alert sound and whether to use vibration, by adding a notification settings item to your application settings.

    Use distinct icons

    -

    By glancing at the notification area, the user should be able to discern what notification types are -currently pending.

    -

    Do:

    -

    Look at the notification icons the Android apps already provide and create notification icons for - your app that are sufficiently distinct in appearance.

    -

    Don't:

    -

    Use color to distinguish your app from others. Notification icons should be white.

    +

    By glancing at the notification area, the user should be able to discern what kinds of notifications are currently pending.

    + +
    Do
    +

    Look at the notification icons the Android apps already provide and create notification icons for your app that are sufficiently distinct in appearance.

    +
    Do
    +

    Use the proper notification icon style for small icons, and the Holo Dark action bar icon style for your action icons.

    +
    Do
    +

    Keep your icons visually simple and avoid excessive detail that is hard to discern.

    +
    Don't
    +

    Use color to distinguish your app from others.

    + +

    Pulse the notification LED appropriately

    +

    Many Android devices contain a tiny lamp, called the notification LED, which is used to keep the user informed about events while the screen is off. Notifications with a priority level of MAX, HIGH, or DEFAULT should cause the LED to glow, while those with lower priority (LOW and MIN) should not.

    + +

    The user's control over notifications should extend to the LED. By default, the LED will glow with a white color. Your notifications shouldn't use a different color unless the user has explicitly customized it.

    Building notifications that users care about

    To create an app that feels streamlined, pleasant, and respectful, it is important to design your notifications carefully. Notifications embody your app's voice, and contribute to your app's personality. Unwanted or unimportant notifications can annoy the user, so use them judiciously.

    When to display a notification

    -

    To create an application that people love, it's important to recognize that the user's attention and -focus is a resource that must be protected. To use an analogy that might resonate with software -developers, the user is not a method that can be invoked to return a value. The user's focus is a -resource more akin to a thread, and creating a notification momentarily blocks the user thread as -they process and then dismiss the interruptive notification.

    -

    Android's notification system has been designed to quickly inform users of events while they focus -on a task, but it is nonetheless still important to be conscientious when deciding to create a -notification.

    +

    To create an application that people love, it's important to recognize that the user's attention and focus is a resource that must be protected. While Android's notification system has been designed to minimize the impact of notifications on the users attention, it is nonetheless still important to be aware of the fact that notifications are potentially interrupting the users task flow. As you plan your notifications, ask yourself if they are important enough to warrant an interruption. If you are unsure, allow the user to opt into a notification using your apps notification settings or adjust the notifications priority flag.

    +

    Time sensitive events are great opportunities for valuable notifications with high priority, especially if these synchronous events involve other people. For instance, an incoming chat is a real time and synchronous form of communication: there is another user actively waiting on you to respond. Calendar events are another good example of when to use a notification and grab the user's attention, because the event is imminent, and calendar events often involve other people.

    While well behaved apps generally only speak when spoken to, there are some limited cases where an app actually should interrupt the user with an unprompted notification.

    Notifications should be used primarily for time sensitive events, and especially if these @@ -187,27 +174,19 @@ attention, because the event is imminent, and calendar events often involve othe

    There are however many other cases where notifications should not be used: