From ce470e17fd4298c1b8aa9a5fd7493bde7a6be840 Mon Sep 17 00:00:00 2001 From: Peter Ng Date: Wed, 11 Jul 2012 14:54:44 -0700 Subject: copy and image updates to patterns and building blocks Change-Id: If3c012b77744a9095b204b7e313ceaf30126ccad --- docs/html/design/building-blocks/dialogs.jd | 43 +++++++++++---------- docs/html/design/building-blocks/index.jd | 2 +- docs/html/design/building-blocks/tabs.jd | 3 +- docs/html/design/media/building_blocks_landing.png | Bin 141888 -> 166158 bytes docs/html/design/media/color_spectrum.png | Bin 2529 -> 2867 bytes docs/html/design/media/index_landing_page.png | Bin 354256 -> 291083 bytes docs/html/design/media/multipane_show.png | Bin 159034 -> 87619 bytes docs/html/design/media/notifications_dismiss.png | Bin 57718 -> 27896 bytes docs/html/design/media/themes_holo_dark.png | Bin 28203 -> 25031 bytes docs/html/design/media/themes_holo_inverse.png | Bin 66350 -> 68280 bytes docs/html/design/media/themes_holo_light.png | Bin 85709 -> 69149 bytes .../design/media/ui_overview_notifications.png | Bin 59824 -> 42615 bytes docs/html/design/patterns/actionbar.jd | 14 ++++--- docs/html/design/patterns/app-structure.jd | 32 ++++++++------- docs/html/design/patterns/multi-pane-layouts.jd | 10 ++--- docs/html/design/patterns/swipe-views.jd | 3 ++ 16 files changed, 60 insertions(+), 47 deletions(-) diff --git a/docs/html/design/building-blocks/dialogs.jd b/docs/html/design/building-blocks/dialogs.jd index 9b653eeac77e..2820471c93e6 100644 --- a/docs/html/design/building-blocks/dialogs.jd +++ b/docs/html/design/building-blocks/dialogs.jd @@ -10,28 +10,29 @@ user to adjust settings or enter text.

    -
  1. -

    Optional title region

    -

    The title introduces the content of your dialog. It can, for example, identify the name of a - setting that the user is about to change, or request a decision.

    -
    2. -
  2. -

    Content area

    -

    Dialog content varies widely. For settings dialogs, a dialog may contain UI elements such as - sliders, text fields, checkboxes, or radio buttons that allow the user to change app or system - settings. In other cases, such as alerts, the content may consist solely of text that provides - further context for a user decision.

    -
    3. -
  3. -

    Action buttons

    -

    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. As a rule, the dismissive action of a dialog is always on the left - whereas the affirmative actions are on the right.

    -
    4. +
  4. +

    Optional title region

    +

    The title introduces the content of your dialog. It can, for example, identify the name of a + setting that the user is about to change, or request a decision.

    +
    5. +
  5. +

    Content area

    +

    Dialog content varies widely. For settings dialogs, a dialog may contain UI elements such as + sliders, text fields, checkboxes, or radio buttons that allow the user to change app or system + settings. In other cases, such as alerts, the content may consist solely of text that provides + further context for a user decision.

    +
    6. + +
  6. +

    Action buttons

    +

    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.
      • +
    +
-
diff --git a/docs/html/design/building-blocks/index.jd b/docs/html/design/building-blocks/index.jd index d915aae51abf..e55477567915 100644 --- a/docs/html/design/building-blocks/index.jd +++ b/docs/html/design/building-blocks/index.jd @@ -11,7 +11,7 @@ footer.hide=1 #text-overlay { position: absolute; left: 0; - top: 472px; + top: 520px; width: 450px; } diff --git a/docs/html/design/building-blocks/tabs.jd b/docs/html/design/building-blocks/tabs.jd index 19ed1c3ff135..8a2eb41455b5 100644 --- a/docs/html/design/building-blocks/tabs.jd +++ b/docs/html/design/building-blocks/tabs.jd @@ -6,6 +6,7 @@ page.title=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.

+

For details on using gestures to move between tabs, see the Swipe Views pattern.

Scrollable Tabs

@@ -36,7 +37,7 @@ 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.

+

Fixed tabs display all items concurrently. To navigate to a different view, touch the tab, or swipe left or right.

diff --git a/docs/html/design/media/building_blocks_landing.png b/docs/html/design/media/building_blocks_landing.png index 2da47b78cb43..40ab0da9386a 100644 Binary files a/docs/html/design/media/building_blocks_landing.png and b/docs/html/design/media/building_blocks_landing.png differ diff --git a/docs/html/design/media/color_spectrum.png b/docs/html/design/media/color_spectrum.png index 7d2c0236bc15..b7ab3097c7f5 100644 Binary files a/docs/html/design/media/color_spectrum.png and b/docs/html/design/media/color_spectrum.png differ diff --git a/docs/html/design/media/index_landing_page.png b/docs/html/design/media/index_landing_page.png index 3f319b0410f0..2d6eca4f2893 100644 Binary files a/docs/html/design/media/index_landing_page.png and b/docs/html/design/media/index_landing_page.png differ diff --git a/docs/html/design/media/multipane_show.png b/docs/html/design/media/multipane_show.png index b10c91c30414..9993c9b5c658 100644 Binary files a/docs/html/design/media/multipane_show.png and b/docs/html/design/media/multipane_show.png differ diff --git a/docs/html/design/media/notifications_dismiss.png b/docs/html/design/media/notifications_dismiss.png index 71bed4f09d6e..696a97f19df3 100644 Binary files a/docs/html/design/media/notifications_dismiss.png and b/docs/html/design/media/notifications_dismiss.png differ diff --git a/docs/html/design/media/themes_holo_dark.png b/docs/html/design/media/themes_holo_dark.png index 0a5876a99ecc..e1f4477e57cd 100644 Binary files a/docs/html/design/media/themes_holo_dark.png and b/docs/html/design/media/themes_holo_dark.png differ diff --git a/docs/html/design/media/themes_holo_inverse.png b/docs/html/design/media/themes_holo_inverse.png index 50be4fb935e7..528d11937e27 100644 Binary files a/docs/html/design/media/themes_holo_inverse.png and b/docs/html/design/media/themes_holo_inverse.png differ diff --git a/docs/html/design/media/themes_holo_light.png b/docs/html/design/media/themes_holo_light.png index edc7f77f050f..4f34bb3230f4 100644 Binary files a/docs/html/design/media/themes_holo_light.png and b/docs/html/design/media/themes_holo_light.png differ diff --git a/docs/html/design/media/ui_overview_notifications.png b/docs/html/design/media/ui_overview_notifications.png index bc0513f22bfa..fe4375e5f363 100644 Binary files a/docs/html/design/media/ui_overview_notifications.png and b/docs/html/design/media/ui_overview_notifications.png differ diff --git a/docs/html/design/patterns/actionbar.jd b/docs/html/design/patterns/actionbar.jd index 420630104295..5cdf50b50787 100644 --- a/docs/html/design/patterns/actionbar.jd +++ b/docs/html/design/patterns/actionbar.jd @@ -66,7 +66,7 @@ content, such as an app title or longer branding information.

Show the most important actions of your app in the actions section. Actions that don't fit in the -action bar are moved automatically to the action overflow. +action bar are moved automatically to the action overflow. Long-press on an icon to view the action's name.

@@ -144,15 +144,19 @@ content of a CAB in order to insert the actions you would like the user to be ab

For more information, refer to the Selection pattern.

-

Action Bar Elements

+

View Controls

+

If your app displays data in different views, the action bar has three different controls to allow users to switch between them: tabs, spinners, and drawers.

Tabs

-

Tabs display app views concurrently and make it easy to explore and switch between them. Use tabs -if you expect your users to switch views frequently.

+

Tabs display app views concurrently and make it easy to explore and switch between them. Tabs may be fixed, where all tabs are simultaneously displayed, or may scroll, allowing a larger number of views to be presented.

-

There are two types of tabs: fixed and scrollable.

+

Use tabs if:

+
diff --git a/docs/html/design/patterns/app-structure.jd b/docs/html/design/patterns/app-structure.jd index e2398ed17206..f90e4b1d7ea3 100644 --- a/docs/html/design/patterns/app-structure.jd +++ b/docs/html/design/patterns/app-structure.jd @@ -185,28 +185,18 @@ collections of items. Then use multi-select to allow application of those action in a category view.

Details

-

The detail view allows you to view and act on your data. The layout of the detail view depends on -the data type being displayed, and therefore differs widely among apps.

+

The detail view allows you to view and act on your data. The layout of the detail view depends on the data type being displayed, and therefore differs widely among apps.

Layout

-

Consider the activities people will perform in the detail view and arrange the layout accordingly. -For immersive content, make use of the lights-out mode to allow for distraction-free viewing of -full-screen content.

- - +

Consider the activities people will perform in the detail view and arrange the layout accordingly.

- -
- Google Books' detail view is all about replicating the experience of reading an actual book. - The page-flip animation reinforces that notion. To create an immersive experience the app - enters lights-out mode, which hides all system UI affordances. -
+
The purpose of the People app's detail view is to surface communication options. The list view @@ -217,6 +207,22 @@ full-screen content.

+
+
+ +

Lights-out mode

+

Immersive content like media and games is best experienced full screen without distractions. But that doesn't mean you can't also offer actions on the content like sharing, commenting, or searching. If the user hasn't interacted with any of the controls after a short period of time, automatically fade away the action bar and all system UI affordances so the user can lean back and enjoy the content. We call this lights-out mode. Later, if the user wants to take some action, they can touch anywhere on the screen to exit lights-out mode and bring back the controls.

+ +
+
+ + +
+ Google Books' detail view replicates the immersive experience of reading an actual book through lights-out mode and a page-flip animation. +
+
+
+

Make navigation between detail views efficient

If your users are likely to want to look at multiple items in sequence, allow them to navigate between items from within the detail view. Use swipe views or other techniques, such as filmstrips, diff --git a/docs/html/design/patterns/multi-pane-layouts.jd b/docs/html/design/patterns/multi-pane-layouts.jd index 0e63e32e72e2..f752be257ac0 100644 --- a/docs/html/design/patterns/multi-pane-layouts.jd +++ b/docs/html/design/patterns/multi-pane-layouts.jd @@ -26,8 +26,8 @@ left pane. Make sure to keep the item in the left pane selected in order to esta relationship between the panels.

Compound Views and Orientation Changes

-

Screens should have the same functionality regardless of orientation. If you use a compound view in -one orientation, don't split it up when the user rotates the screen. There are several techniques +

Screens should strive to have the same functionality regardless of orientation. If you use a compound view in +one orientation, try not to split it up when the user rotates the screen. There are several techniques you can use to adjust the layout after orientation change while keeping functional parity intact.

@@ -83,9 +83,7 @@ width and vice versa.

Show/hide

-

After rotating the device, show the right pane in fullscreen view. Use the Up icon in the action bar -to show the left panel and allow navigation to a different email. Hide the left panel by touching -the content in the detail panel.

+

If your screen cannot accommodate the compound view on rotation show the right pane in full screen view on rotation to portrait. Use the Up icon in action bar to show the parent screen.

@@ -104,7 +102,7 @@ the content in the detail panel.

Look for opportunities to consolidate your views into multi-panel compound views.

  • -

    Make sure that your screens provide functional parity after the screen orientation +

    Make sure that your screens try to provide functional parity after the screen orientation changes.

    • diff --git a/docs/html/design/patterns/swipe-views.jd b/docs/html/design/patterns/swipe-views.jd index 95d65ddc56c3..93592a7cb587 100644 --- a/docs/html/design/patterns/swipe-views.jd +++ b/docs/html/design/patterns/swipe-views.jd @@ -65,6 +65,9 @@ using the swipe gesture to navigate to the next/previous detail view.

    the swipe gesture.

  • +

    If a view contains content that exceeds the width of the screen (e.g. a wide Email message), make sure the user's initial swipes will scroll horizontally within the view. Once the end of the content is reached, an additional swipe should navigate to the next view. In addition, support the use of edge swipes to immediately navigate between views when content scrolls horizontally.

    +
    • +

  • Consider adding contextual information in your detail view that informs the user about the relative list position of the currently visible item.

    • -- cgit v1.2.3-59-g8ed1b