am dfb41027: lots of updates to the wear design guide actually decent layout with images
* commit 'dfb4102718dcb87acdf4015dc44ab578f57e945f':
lots of updates to the wear design guide actually decent layout with images
diff --git a/Android.mk b/Android.mk
index 7b91147..d86289c 100644
--- a/Android.mk
+++ b/Android.mk
@@ -721,6 +721,7 @@
$(framework_docs_LOCAL_DROIDDOC_OPTIONS) \
-toroot / \
-hdf android.whichdoc online \
+ -briefdocs \
$(sample_groups) \
-hdf android.hasSamples true \
-samplesdir $(samples_dir)
diff --git a/docs/html/design/auto/index.jd b/docs/html/design/auto/index.jd
index aac79ab..c970cac 100644
--- a/docs/html/design/auto/index.jd
+++ b/docs/html/design/auto/index.jd
@@ -1,4 +1,4 @@
-page.title=Auto
+page.title=Android Auto
@jd:body
<style>
diff --git a/docs/html/design/devices.jd b/docs/html/design/devices.jd
index 0015d01..c67e585 100644
--- a/docs/html/design/devices.jd
+++ b/docs/html/design/devices.jd
@@ -13,8 +13,8 @@
#text-overlay {
position: absolute;
left: 0;
- top: 420px;
- width: 360px;
+ top: 410px;
+ width: 340px;
}
#hero-image {
diff --git a/docs/html/design/downloads/index.jd b/docs/html/design/downloads/index.jd
index 16f5509..5ad8780 100644
--- a/docs/html/design/downloads/index.jd
+++ b/docs/html/design/downloads/index.jd
@@ -2,27 +2,12 @@
page tags="Icons", "stencils", "color swatches"
@jd:body
-<div class="layout-content-row">
- <div class="layout-content-col span-9">
-<p>Want everything? We've bundled all the downloads available on Android Design, except for the
- <a href="#roboto">Roboto</a> font family, into a single ZIP file. You can also download
- individual files listed below.</p>
+<p>You may use these materials without restriction to facilitate your app design
+and implementation.</p>
-<p>You may use these materials without restriction in your apps and to develop your apps.</p>
- </div>
- <div class="layout-content-col span-4">
-
-<p>
- <a class="download-button" onClick="_gaq.push(['_trackEvent', 'Design', 'Download', 'All Design Assets']);"
- href="{@docRoot}downloads/design/Android_Design_Downloads_20131106.zip">Download All</a>
-</p>
-
- </div>
-</div>
-
-<h2 id="stencils">Stencils and Sources</h2>
+<h2 id="stencils">Phone & Tablet Stencils</h2>
<div class="layout-content-row">
<div class="layout-content-col span-5">
@@ -54,6 +39,11 @@
</div>
</div>
+
+
+
+
+
<h2 id="action-bar-icon-pack">Action Bar Icon Pack</h2>
<div class="layout-content-row">
@@ -81,6 +71,76 @@
</div>
</div>
+
+
+
+
+<h2 id="Wear">Android Wear Materials</h2>
+
+<div class="layout-content-row">
+ <div class="layout-content-col span-5">
+ <h4>UI toolkit</h4>
+<p>The toolkit contains detailed specs and measurements of all of the primary Android Wear UI components. Available in PDF and Illustrator formats.</p>
+
+ </div>
+ <div class="layout-content-col span-4">
+
+ <img src="{@docRoot}design/media/downloads_wear_toolkit.png" width="220">
+
+ </div>
+ <div class="layout-content-col span-4">
+ <a class="download-button" onClick="_gaq.push(['_trackEvent', 'Design', 'Download', 'Wear Toolkit AI']);"
+ href="{@docRoot}downloads/design/Android_Design_Stencils_Sources_20131106.zip">Adobe® Illustrator® Toolkit</a>
+
+ <a class="download-button" onClick="_gaq.push(['_trackEvent', 'Design', 'Download', 'Wear Toolkit PDF']);"
+ href="{@docRoot}downloads/design/Android_Design_Stencils_Sources_20131106.zip">PDF Toolkit</a>
+ </div>
+</div>
+
+<div class="layout-content-row">
+ <div class="layout-content-col span-5">
+ <h4>Sample app user flows</h4>
+<p>Examples of how to chain together simple Android Wear UI components into common user flows, from simple notifications to complex interactions involving full screen activities.
+</p>
+
+ </div>
+ <div class="layout-content-col span-4">
+
+ <img src="{@docRoot}design/media/downloads_wear_flows.png" width="220">
+
+ </div>
+ <div class="layout-content-col span-4">
+ <a class="download-button" onClick="_gaq.push(['_trackEvent', 'Design', 'Download', 'Wear Sample Flows AI']);"
+ href="{@docRoot}downloads/design/Android_Design_Stencils_Sources_20131106.zip">Adobe® Illustrator® App Flows</a>
+ <a class="download-button" onClick="_gaq.push(['_trackEvent', 'Design', 'Download', 'Wear Sample Flows PDF']);"
+ href="{@docRoot}downloads/design/Android_Design_Stencils_Sources_20131106.zip">PDF App Flows</a>
+ </div>
+</div>
+
+<div class="layout-content-row">
+ <div class="layout-content-col span-5">
+ <h4>Sample app design mocks</h4>
+<p>Stream cards and UI elements for some example apps in fully editable PSD format.
+</p>
+
+ </div>
+ <div class="layout-content-col span-4">
+
+ <img src="{@docRoot}design/media/downloads_wear_psds.png" width="220">
+
+ </div>
+ <div class="layout-content-col span-4">
+ <a class="download-button" onClick="_gaq.push(['_trackEvent', 'Design', 'Download', 'Wear Sample PSD Mocks']);"
+ href="{@docRoot}downloads/design/Android_Wear_Sample_Assets.zip">Adobe® Photoshop® mocks</a>
+ </div>
+</div>
+
+
+
+
+
+
+
<h2 id="style">Style</h2>
<div class="layout-content-row">
@@ -89,6 +149,7 @@
<h4 id="roboto">Roboto</h4>
<p>Ice Cream Sandwich introduced a new type family named Roboto, created specifically for the
requirements of UI and high-resolution screens.</p>
+<p>For Android Wear, Roboto Condensed is the system font and the Regular and Light variants should be used by all Wear apps.</p>
<p><a href="{@docRoot}design/style/typography.html">More on Roboto</a></p>
<p><a href="http://www.google.com/fonts/specimen/Roboto" class="external-link">Roboto on Google Fonts</a></p>
<p><a href="http://www.google.com/fonts/specimen/Roboto+Condensed" class="external-link">Roboto Condensed on Google Fonts</a></p>
diff --git a/docs/html/design/media/android-tv.png b/docs/html/design/media/android-tv.png
new file mode 100644
index 0000000..98005cd
--- /dev/null
+++ b/docs/html/design/media/android-tv.png
Binary files differ
diff --git a/docs/html/design/media/device_family.png b/docs/html/design/media/device_family.png
index 7889884..96b31d3 100644
--- a/docs/html/design/media/device_family.png
+++ b/docs/html/design/media/device_family.png
Binary files differ
diff --git a/docs/html/design/media/downloads_wear_flows.png b/docs/html/design/media/downloads_wear_flows.png
new file mode 100644
index 0000000..5669a2d
--- /dev/null
+++ b/docs/html/design/media/downloads_wear_flows.png
Binary files differ
diff --git a/docs/html/design/media/downloads_wear_psds.png b/docs/html/design/media/downloads_wear_psds.png
new file mode 100644
index 0000000..2b071a3
--- /dev/null
+++ b/docs/html/design/media/downloads_wear_psds.png
Binary files differ
diff --git a/docs/html/design/media/downloads_wear_toolkit.png b/docs/html/design/media/downloads_wear_toolkit.png
new file mode 100644
index 0000000..c3d30e8
--- /dev/null
+++ b/docs/html/design/media/downloads_wear_toolkit.png
Binary files differ
diff --git a/docs/html/design/media/wear/2d_picker_indicated.png b/docs/html/design/media/wear/2d_picker_indicated.png
new file mode 100644
index 0000000..d31c099
--- /dev/null
+++ b/docs/html/design/media/wear/2d_picker_indicated.png
Binary files differ
diff --git a/docs/html/design/media/wear/Bluebird.png b/docs/html/design/media/wear/Bluebird.png
index 447e643..7b911c7 100644
--- a/docs/html/design/media/wear/Bluebird.png
+++ b/docs/html/design/media/wear/Bluebird.png
Binary files differ
diff --git a/docs/html/design/media/wear/Dismissing-cards.png b/docs/html/design/media/wear/Dismissing-cards.png
new file mode 100644
index 0000000..973ef39
--- /dev/null
+++ b/docs/html/design/media/wear/Dismissing-cards.png
Binary files differ
diff --git a/docs/html/design/media/wear/appstructuresample.png b/docs/html/design/media/wear/appstructuresample.png
new file mode 100644
index 0000000..0e5b86f
--- /dev/null
+++ b/docs/html/design/media/wear/appstructuresample.png
Binary files differ
diff --git a/docs/html/design/media/wear/assets_specifics.png b/docs/html/design/media/wear/assets_specifics.png
index 35a3819..00f97d1 100644
--- a/docs/html/design/media/wear/assets_specifics.png
+++ b/docs/html/design/media/wear/assets_specifics.png
Binary files differ
diff --git a/docs/html/design/media/wear/biggesture.png b/docs/html/design/media/wear/biggesture.png
new file mode 100644
index 0000000..6c6f0cd
--- /dev/null
+++ b/docs/html/design/media/wear/biggesture.png
Binary files differ
diff --git a/docs/html/design/media/wear/fitness.png b/docs/html/design/media/wear/context_fitness.png
similarity index 100%
rename from docs/html/design/media/wear/fitness.png
rename to docs/html/design/media/wear/context_fitness.png
Binary files differ
diff --git a/docs/html/design/media/wear/context_lights.png b/docs/html/design/media/wear/context_lights.png
new file mode 100644
index 0000000..6374bdd
--- /dev/null
+++ b/docs/html/design/media/wear/context_lights.png
Binary files differ
diff --git a/docs/html/design/media/wear/contextualnotification.png b/docs/html/design/media/wear/context_running.png
similarity index 87%
rename from docs/html/design/media/wear/contextualnotification.png
rename to docs/html/design/media/wear/context_running.png
index 1ec7ac8..8b44e8c 100644
--- a/docs/html/design/media/wear/contextualnotification.png
+++ b/docs/html/design/media/wear/context_running.png
Binary files differ
diff --git a/docs/html/design/media/wear/context_workout.png b/docs/html/design/media/wear/context_workout.png
new file mode 100644
index 0000000..2ed8901
--- /dev/null
+++ b/docs/html/design/media/wear/context_workout.png
Binary files differ
diff --git a/docs/html/design/media/wear/customlayout.png b/docs/html/design/media/wear/customlayout.png
new file mode 100644
index 0000000..6a3cd9a
--- /dev/null
+++ b/docs/html/design/media/wear/customlayout.png
Binary files differ
diff --git a/docs/html/design/media/wear/five_seconds.gif b/docs/html/design/media/wear/five_seconds.gif
new file mode 100644
index 0000000..199ceb9
--- /dev/null
+++ b/docs/html/design/media/wear/five_seconds.gif
Binary files differ
diff --git a/docs/html/design/media/wear/gross_gestures.png b/docs/html/design/media/wear/gross_gestures.png
new file mode 100644
index 0000000..1faad9a
--- /dev/null
+++ b/docs/html/design/media/wear/gross_gestures.png
Binary files differ
diff --git a/docs/html/design/media/wear/peek-card.png b/docs/html/design/media/wear/peek-card.png
new file mode 100644
index 0000000..916f157
--- /dev/null
+++ b/docs/html/design/media/wear/peek-card.png
Binary files differ
diff --git a/docs/html/design/media/wear/peek_card.png b/docs/html/design/media/wear/peek_card.png
deleted file mode 100644
index 2b12297..0000000
--- a/docs/html/design/media/wear/peek_card.png
+++ /dev/null
Binary files differ
diff --git a/docs/html/design/media/wear/round_noframe.png b/docs/html/design/media/wear/round_noframe.png
new file mode 100644
index 0000000..7a9759b
--- /dev/null
+++ b/docs/html/design/media/wear/round_noframe.png
Binary files differ
diff --git a/docs/html/design/media/wear/separate-info-cards.png b/docs/html/design/media/wear/separate-info-cards.png
new file mode 100644
index 0000000..59ee084
--- /dev/null
+++ b/docs/html/design/media/wear/separate-info-cards.png
Binary files differ
diff --git a/docs/html/design/media/wear/vision_music.png b/docs/html/design/media/wear/vision_music.png
new file mode 100644
index 0000000..b676d20
--- /dev/null
+++ b/docs/html/design/media/wear/vision_music.png
Binary files differ
diff --git a/docs/html/design/media/wear/vision_navigation.png b/docs/html/design/media/wear/vision_navigation.png
new file mode 100644
index 0000000..ef56977
--- /dev/null
+++ b/docs/html/design/media/wear/vision_navigation.png
Binary files differ
diff --git a/docs/html/design/media/wear/vision_traffic.png b/docs/html/design/media/wear/vision_traffic.png
new file mode 100644
index 0000000..2affa22
--- /dev/null
+++ b/docs/html/design/media/wear/vision_traffic.png
Binary files differ
diff --git a/docs/html/design/media/wear/vision_voice.png b/docs/html/design/media/wear/vision_voice.png
new file mode 100644
index 0000000..25fd49e
--- /dev/null
+++ b/docs/html/design/media/wear/vision_voice.png
Binary files differ
diff --git a/docs/html/design/media/wear/wear_checkin.png b/docs/html/design/media/wear/wear_checkin.png
new file mode 100644
index 0000000..9aeb267
--- /dev/null
+++ b/docs/html/design/media/wear/wear_checkin.png
Binary files differ
diff --git a/docs/html/design/tv/index.jd b/docs/html/design/tv/index.jd
index 5534724..d144ff0 100644
--- a/docs/html/design/tv/index.jd
+++ b/docs/html/design/tv/index.jd
@@ -1,9 +1,9 @@
-page.title=TV
+page.title=Android TV
@jd:body
-<img src="{@docRoot}preview/tv/design/images/atv-home.jpg"
- width="460" height="283" style="float:right;margin:0 0 40px 40px" />
+<img src="{@docRoot}design/media/android-tv.png"
+ width="460" style="float:right;margin:0 0 40px 40px" />
<p>Android TV is <strong>coming soon</strong> and lets you engage your users in a new, shared environment.</p>
diff --git a/docs/html/design/wear/creative-vision.jd b/docs/html/design/wear/creative-vision.jd
index 4530744..aee115c 100644
--- a/docs/html/design/wear/creative-vision.jd
+++ b/docs/html/design/wear/creative-vision.jd
@@ -1,34 +1,54 @@
-page.title=Creative Vision for Wear
+page.title=Creative Vision for Android Wear
@jd:body
+<style>
+div.span-13 {
+ margin:10px 0;
+}
+div.span-13 img {
+ float:left;
+ margin:2px 20px 40px 0;
+}
+div.span-13 p {
+ margin-left:167px;
+}
+div.span-13 h2 {
+ margin-top:0;
+ }
+</style>
<p>Android Wear devices provide just the right information at just the right time,
allowing users to be more connected to both the virtual world and the real world. Great Android
Wear experiences are:</p>
-<div class="layout-content-row">
- <div class="layout-content-col span-6">
- <h4>Launched automatically</h4>
+ <div class="layout-content-col span-13">
+ <img src="{@docRoot}design/media/wear/vision_traffic.png" width="147" height="147" />
+
+ <h2 id="Launched">Launched automatically</h2>
<p>Most people are used to launching apps by clicking an icon. Android Wear is different. Wearable apps are aware of the user’s context - time, location, physical activity, and so on. The apps use this information to insert cards into the stream when they become relevant. This makes Android Wear timely, relevant and very specific.</p>
</div>
- <div class="layout-content-col span-6" style="margin-left:75px">
- <h4>Glanceable</h4>
- <p>A classic wrist watch is designed to let you see the time in a split second and get on with what you were doing. Designing for Android Wear is no different. The less time it takes to use your software, the more time the user can be present in whatever they are doing. Android wear is fast, sharp and immediate.</p>
- </div>
-</div>
+ <div class="layout-content-col span-13">
+ <img src="{@docRoot}design/media/wear/vision_navigation.png" width="147" height="147" />
-<div class="layout-content-row">
- <div class="layout-content-col span-6">
- <h4>Zero or low interaction</h4>
- <p>Staying true to the strengths afforded by a smaller form factor, Android Wear focuses on simple interactions, only requiring input by the user when absolutely necessary. Most inputs are based around touch swipes or voice, and inputs requiring fine-grained finger movements are avoided. Android Wear is gestural, simple, and fast.</p>
+ <h2 id="Glanceable">Glanceable</h2>
+ <p>A classic wrist watch is designed to let you see the time in a split second and get on with what you were doing. Designing for Android Wear is no different. The less time it takes to use your software, the more time the user can be present in whatever they are doing. Android wear is fast, sharp and immediate.</p>
</div>
- <div class="layout-content-col span-6" style="margin-left:75px">
- <h4>All about suggest and demand</h4>
- <p>Android Wear is like a great personal assistant: it knows you and your preferences, it only interrupts you when absolutely necessary, and it’s always on hand to provide a ready answer. Android Wear is helpful, respectful, and responsive.</p>
+
+ <div class="layout-content-col span-13">
+ <img src="{@docRoot}design/media/wear/vision_voice.png" width="147" height="147" style="border: 1px solid #ddd;" />
+
+ <h2 id="SuggestDemand">All about suggest and demand</h2>
+ <p>Android Wear is like a great personal assistant: it knows you and your preferences, it only interrupts you when absolutely necessary, and it’s always on hand to provide a ready answer. Android Wear is helpful, respectful, and responsive.</p>
</div>
-</div>
+
+ <div class="layout-content-col span-13">
+ <img src="{@docRoot}design/media/wear/vision_music.png" width="147" height="147" />
+
+ <h2 id="Interaction">Zero or low interaction</h2>
+ <p>Staying true to the strengths afforded by a smaller form factor, Android Wear focuses on simple interactions, only requiring input by the user when absolutely necessary. Most inputs are based around touch swipes or voice, and inputs requiring fine-grained finger movements are avoided. Android Wear is gestural, simple, and fast.</p>
+ </div>
<p>By providing a smart connection to the rest of the world while respecting the user’s attention, Android Wear feels personal and global, simple and smart, unobtrusive and ever-ready. Applications that represent these principles will feel most at home in the overall Android Wear experience.</p>
diff --git a/docs/html/design/wear/index.jd b/docs/html/design/wear/index.jd
index 3536445..d6202d1 100644
--- a/docs/html/design/wear/index.jd
+++ b/docs/html/design/wear/index.jd
@@ -1,9 +1,9 @@
-page.title=Wear
+page.title=Android Wear
@jd:body
-<p>Designing apps for wearables powered by Android Wear
+<p>Designing apps for wearable devices powered by Android Wear
is substantially different than designing for phones or
tablets: different strengths and weaknesses, different use cases, different ergonomics.
To get started, you should understand the overall vision for the Android Wear experience,
@@ -26,7 +26,9 @@
<p>This UI model ensures that users don’t have to launch many different applications to check for updates; they can simply glance at their stream for a brief update on what’s important to them.</p>
-<p>Cards in the stream are more than simple notifications. They can be swiped horizontally to reveal additional pages. Further horizontal swiping may reveal buttons, allowing the user to take action on the notification. Cards can also be dismissed by swiping left to right, removing them from the stream until the next time the app has useful information to display.</p>
+<p>Cards in the stream are more than simple notifications. They can be swiped horizontally to reveal additional
+<a href="{@docRoot}design/wear/patterns.html#Pages">pages</a>. Further horizontal swiping may reveal
+<a href="{@docRoot}design/wear/patterns.html#Actions">buttons</a>, allowing the user to take action on the notification. Cards can also be dismissed by swiping left to right, removing them from the stream until the next time the app has useful information to display.</p>
diff --git a/docs/html/design/wear/patterns.jd b/docs/html/design/wear/patterns.jd
index 8f4698c..274b62f 100644
--- a/docs/html/design/wear/patterns.jd
+++ b/docs/html/design/wear/patterns.jd
@@ -1,26 +1,22 @@
-page.title=UI Patterns for Wear
+page.title=UI Patterns for Android Wear
@jd:body
<p>Android Wear is used for micro-interactions, and so adhering to consistent design patterns that users are already accustomed to is paramount.</p>
-<h2>Cards</h2>
+<h2 id="Cards">Cards</h2>
<p>Cards in the stream can take slightly different forms:</p>
-<div class="framed-wear-square-small" style="float:left;margin:0 20px 20px 0">
- <img src="{@docRoot}design/media/wear/Bluebird.png">
-</div>
+ <img src="{@docRoot}design/media/wear/Bluebird.png" width="147" height="147" style="float:left;margin:0 0 20px 0px">
-<div class="framed-wear-square-small" style="float:left;margin:0 20px 20px 0">
- <img src="{@docRoot}design/media/wear/single_action_controls.jpg">
-</div>
-<div class="framed-wear-square-small" style="float:left;margin:0 20px 20px 0">
- <img src="{@docRoot}design/media/wear/expandable_stacks.png">
-</div>
-
+ <img src="{@docRoot}design/media/wear/single_action_controls.jpg" width="147" height="147" style="float:left;margin:0 0 20px 40px">
+
+
+ <img src="{@docRoot}design/media/wear/expandable_stacks.png" width="147" height="147" style="float:left;margin:0 0 20px 40px">
+
<ul style="clear:both">
<li>Standard cards for displaying information from a notification</li>
<li>Single-action controls (such as a play/pause toggle)</li>
@@ -28,28 +24,27 @@
</ul>
-<h2>App icons</h2>
+<h2 id="Icons">App icons</h2>
-<div class="framed-wear-square-small" style="float:right;margin:0 0 20px 60px">
- <img src="{@docRoot}design/media/wear/clear_bold_type.jpg">
-</div>
+ <img src="{@docRoot}design/media/wear/clear_bold_type.jpg" width="147" height="147" style="float:right;margin:0 0 20px 40px">
<p>App icons appear in a fixed position overhanging the edge at the top right of the card by default for all notifications in the Context Stream. This is an opportunity for cards to be recognized as coming from a specific source. Photo backgrounds should be used only to convey information, not to brand a card. App icons are necessary only on the leftmost card; it is not necessary to add the app icon to pages.</p>
-<h2 style="clear:both">Pages</h2>
+<h2 id="Pages" style="clear:both">Pages</h2>
-<div class="framed-wear-square-small" style="float:right;margin:0 0 20px 40px">
- <img src="{@docRoot}design/media/wear/separate_info_cards_2.jpg">
-</div>
-
-<div class="framed-wear-square-small" style="float:right;margin:0 0 20px 40px">
- <img src="{@docRoot}design/media/wear/separate_info_cards_1.jpg">
-</div>
+ <img src="{@docRoot}design/media/wear/separate-info-cards.png" height="147" style="float:right;margin:0 0 20px 40px">
<p>Supplementary information should be displayed on additional cards to the right of a main Context Stream card. In most cases one additional detail card should be sufficient. For example, a weather card might show the weather for the current location today, with subsequent days listed in an additional card to the right. Keep the number of detail cards as low as possible. Actions (see below) should always come after pages; don’t change the order or interleave them.</p>
-<h2 style="clear:both">Dismissing cards</h2>
+<a class="notice-developers left" href="{@docRoot}training/wearables/notifications/pages.html">
+ <div>
+ <h3>Developer Docs</h3>
+ <p>Adding Pages to a Notification</p>
+ </div>
+</a>
+
+<h2 id="Dismissing" style="clear:both">Dismissing cards</h2>
<img src="{@docRoot}design/media/wear/dismiss_cards.png" height="147">
@@ -57,24 +52,20 @@
-<h2 style="clear:both">Action buttons</h2>
+<h2 id="Actions" style="clear:both">Action buttons</h2>
-<div class="framed-wear-square-small" style="float:right;margin:0 0 20px 40px">
- <img src="{@docRoot}design/media/wear/action_button.png">
-</div>
+ <img src="{@docRoot}design/media/wear/action_button.png" width="147" height="147" style="float:right;margin:0 0 20px 40px">
<p>Where the user may need to take action on the information shown in a notification, you can provide action buttons. These are system-rendered buttons that appear to the right of detail cards. They consist of a white icon set on a blue system-rendered circular button and a short caption with a verb. Actions should be limited to three for a single card row.</p>
-<p>Tapping on an action button can cause an action to be executed; or an action to be continued on the companion handheld; or a full screen activity to be invoked for further input (see “2D Picker” section below).</p>
+<p>Tapping on an action button can cause an action to be executed; or an action to be continued on the companion handheld; or a full screen activity to be invoked for further input (see the <a href="#2DPicker">2D Picker</a> section below).</p>
-<p>Refer to the UI Toolkit provided in the Downloads section for detailed specs regarding action icons.</p>
+<p>Refer to the UI Toolkit provided in the <a href="{@docRoot}design/downloads/index.html#Wear">Downloads</a> page for detailed specs regarding action icons.</p>
-<h2 style="clear:both">Action countdown and confirmation</h2>
+<h2 id="Countdown" style="clear:both">Action countdown and confirmation</h2>
-<div class="framed-wear-square-small" style="float:right;margin:0 0 20px 40px">
- <img src="{@docRoot}design/media/wear/countdown.png">
-</div>
+ <img src="{@docRoot}design/media/wear/countdown.png" width="149" height="149" style="float:right;margin:0 0 20px 40px">
<p>Where tapping on an action button results in an action being executed, one of the following can happen:</p>
@@ -86,20 +77,16 @@
</ol>
-<h2 style="clear:both">Continuing activities on phone</h2>
+<h2 id="Continuing" style="clear:both">Continuing activities on phone</h2>
-<div class="framed-wear-square-small" style="float:right;margin:0 0 20px 40px">
- <img src="{@docRoot}design/media/wear/continue_phone.png">
-</div>
+ <img src="{@docRoot}design/media/wear/continue_phone.png" width="147" height="147" style="float:right;margin:0 0 20px 40px">
<p>Developers should attempt to perform actions on the wearable device wherever possible. In cases where the phone must be used, a generic animation should be played once the action button has been tapped and the corresponding Android app will open on the phone.</p>
-<h2 style="clear:both">Actions on cards (such as media controls)</h2>
+<h2 id="ActionOnCard" style="clear:both">Actions on cards (such as media controls)</h2>
-<div class="framed-wear-square-small" style="float:right;margin:0 0 20px 40px">
- <img src="{@docRoot}design/media/wear/action_on_card.png">
-</div>
+ <img src="{@docRoot}design/media/wear/action_on_card.png" width="147" height="147" style="float:right;margin:0 0 20px 40px">
<p>Some cards may benefit from having tappable actions directly on a card. Some guidance on when to use this pattern versus using an action button:</p>
@@ -113,14 +100,20 @@
<p>Good examples of using an action on card include: play / pause music; toggle light switch on and off; navigate to an address; call a phone number.</p>
-<h2 style="clear:both">Card stacks</h2>
-<img src="/wear/images/11_bundles_B.png" height="200" width="169" style="float:right;margin:0 0 20px 40px" alt="">
-<img src="/wear/images/11_bundles_A.png" height="200" width="169" style="float:right;margin:0 0 20px 40px" alt="">
+<h2 id="Stacks" style="clear:both">Card stacks</h2>
+ <img src="{@docRoot}design/media/wear/expandable_stacks.png" width="147" height="147" style="float:right;margin:0 0 20px 40px">
<p>Card stacks group related cards together and allow them to be progressively expanded vertically in the stream. A tap on a stack fans the cards out so that the top edge of each card can be seen. A subsequent tap on a fanned card reveals that card fully. Stacks of cards revert to a fully collapsed state once the user has swiped away from them.</p>
+<a class="notice-developers left" style="clear:none" href="{@docRoot}training/wearables/notifications/stacks.html">
+ <div>
+ <h3>Developer Docs</h3>
+ <p>Stacking Notifications</p>
+ </div>
+</a>
-<h2 style="clear:both">2D Picker</h2>
+
+<h2 id="2DPicker" style="clear:both">2D Picker</h2>
<p>A 2D Picker component in your app can be invoked from the cue card or from an action button. It allows users to choose from a list of items, and optionally select an attribute of each item. For example, in response to a voice action to “buy tickets to a movie tonight,” you could show a 2D Picker with a vertical list of movies playing, with each movie having a horizontal list of showtimes.</p>
@@ -128,23 +121,29 @@
<p>In some instances, further information may be required. In these cases, the most probable default values for these choices should be chosen on the user’s behalf with the option to edit before completing the action. This pattern is in keeping with Android Wear’s core design principle of minimizing interactions required.</p>
+<p>More information about how to use the 2D Picker pattern is provided in the <a href="{@docRoot}design/wear/structure.html#2DPicker">App Structure</a> guide.</p>
-<h2 style="clear:both">Voice commands</h2>
-<div class="framed-wear-square-small" style="float:right;margin:0 0 20px 40px">
- <img src="{@docRoot}design/media/wear/voice_commands.png">
-</div>
+<h2 id="Voice" style="clear:both">Voice commands</h2>
+
+ <img src="{@docRoot}design/media/wear/voice_commands.png" width="147" height="147" style="float:right;margin:0 0 20px 40px">
<p>It is possible for apps to take action in response to Android voice commands that invoke intents. For example, an app can register for the “Take a note” intent and capture the subsequent voice input for processing. In the case where multiple apps registered for the same intent, user preference will be captured once and saved. Users can edit their intent preferences in the Android Wear app on their handheld.</p>
-
-<h2 style="clear:both">Selection List</h2>
-
-<div class="framed-wear-square-small" style="float:right;margin:0 0 20px 40px">
- <img src="{@docRoot}design/media/wear/selection_list.png">
-</div>
-
-<p>Choosing an item from a list is a common interaction. The Selection List pattern (available as the WearableListView component) creates a simple list optimized for ease of use on a small screen: the focused item snaps to the center of the screen, and a single tap selects. This widget is recommended as a common pattern for selecting items. It is used throughout the system UI, including in the list that can be accessed by swiping up on the cue card.</p>
+<a class="notice-developers left" style="clear:none" href="{@docRoot}training/wearables/apps/voice.html">
+ <div>
+ <h3>Developer Docs</h3>
+ <p>Adding Voice Capabilities</p>
+ </div>
+</a>
-<p>Of course, it is possible for Android Wear apps to extend themselves beyond the familiarities of these patterns. For a deeper look at the options available, see the section on App Structure.</p>
+<h2 id="Selection" style="clear:both">Selection List</h2>
+
+ <img src="{@docRoot}design/media/wear/selection_list.png" width="147" height="147" style="float:right;margin:0 0 20px 40px;border:1px solid #ddd">
+
+<p>Choosing an item from a list is a common interaction. The Selection List pattern (available as the <a
+href="{@docRoot}training/wearables/apps/layouts.html#UiLibrary"><code>WearableListView</code></a> component) creates a simple list optimized for ease of use on a small screen: the focused item snaps to the center of the screen, and a single tap selects. This widget is recommended as a common pattern for selecting items. It is used throughout the system UI, including in the list that can be accessed by swiping up on the cue card.</p>
+
+
+<p>Of course, it is possible for Android Wear apps to extend themselves beyond the familiarities of these patterns. For a deeper look at the options available, see the <a href="{@docRoot}design/wear/structure.html">App Structure</a> guide.</p>
diff --git a/docs/html/design/wear/principles.jd b/docs/html/design/wear/principles.jd
index a214435..6286a92 100644
--- a/docs/html/design/wear/principles.jd
+++ b/docs/html/design/wear/principles.jd
@@ -1,10 +1,18 @@
-page.title=Design Principles for Wear
+page.title=Design Principles for Android Wear
@jd:body
<style>
p.try {
- background:#e4e4e4;
- padding:10px;
+ color:#888;
+}
+p.try b {
+font-size: 22px;
+font-weight: 200;
+padding: 0 0 5px;
+display: block;
+}
+h2 {
+ margin-top:50px;
}
</style>
@@ -13,40 +21,55 @@
<h2>Focus on not stopping the user and all else will follow</h2>
+
+<img src="{@docRoot}design/media/wear/five_seconds.gif" height="147" style="float:right;margin:10px 0 0 40px" />
+<p class="img-caption" style="width:315px;float:right;clear:right;margin:5px 0 30px 40px">
+The time required for each action on the left is 5 seconds.</p>
+
<p>A watch is a perfect form factor for a device that you can use while doing something else, such as cooking, eating, walking, running, or even having a conversation. If using your wearable app causes the user to stop whatever they’re doing, it’s a good occasion to consider how to improve it using the principles in this section.</p>
-<p class="try"><strong>Try this:</strong> Time a typical use of your Wear app. If using it takes more than 5 seconds, you should think about making your app more focused. Also try using your app while you’re having a conversation, and see how it affects your train of thought and eye contact.</p>
+<p class="try" ><b>Try this:</b> Time a typical use of your Wear app. If using it takes more than 5 seconds, you should think about making your app more focused. Also try using your app while you’re having a conversation, and see how it affects your train of thought and eye contact.</p>
-<h2>Design for big gestures</h2>
+<h2 id="BigGestures">Design for big gestures</h2>
+
+<img src="{@docRoot}design/media/wear/biggesture.png" alt="" height="147" style="float:right;margin:10px 0 0 40px" />
+<p class="img-caption" style="width:315px;float:right;clear:right;margin:5px 0 30px 40px">
+Use few and large touch targets.</p>
<p>When you swipe through photos on your phone you’re using a large area of the display, and you don’t have to be precise at all. That’s the best kind of interaction for a wearable device. Your users are going to use your app in all sorts of situations, the least frequent one might actually be sitting down at their desk.</p>
-<p class="try"><strong>Try this:</strong> Use your app in various everyday situations, such as walking, eating, talking to people, or ordering coffee. If you have to slow down while walking or stop the conversation to be precise, you should consider how your gestures could be bigger.</p>
+<p class="try"><b>Try this:</b> Use your app in various everyday situations, such as walking, eating, talking to people, or ordering coffee. If you have to slow down while walking or stop the conversation to be precise, you should consider how your gestures could be bigger.</p>
-<h2>Think about stream cards first</h2>
+
+<h2 id="CardsFirst">Think about stream cards first</h2>
+
+<p class="img-caption" style="width:150px;float:right;clear:right;margin:10px 0 30px 25px">An app that offers to check in users could appear in the stream suggesting the most likely place nearby, after a certain amount of time.</p>
+
+<img src="{@docRoot}design/media/wear/wear_checkin.png" style="float:right;margin:10px 0 40px 40px" width="147" height="147">
+
<p>The best experience on a wearable device is when the right content is there just when the user needs it. You can figure out when to show your cards with sensors, or events happening in the cloud. For the cases where it’s impossible to know when the user needs your app, you can rely on a voice action or touch.</p>
-<p class="try"><strong>Try this:</strong> Make a list of all the situations a user would find your app useful. What do they have in common? Same location? Time of day? Certain physical activities? You will most likely come up with several different situations - that’s a good sign, because it means that you can specialize your cards to those situations. Remember that the user always has the option of completely muting your stream cards if they feel they aren’t relevant enough.</p>
+<p class="try"><b>Try this:</b> Make a list of all the situations a user would find your app useful. What do they have in common? Same location? Time of day? Certain physical activities? You will most likely come up with several different situations - that’s a good sign, because it means that you can specialize your cards to those situations. Remember that the user always has the option of completely muting your stream cards if they feel they aren’t relevant enough.</p>
-<p>[image] </p>
-<p class="img-caption">An app that offers to check in users could appear in the stream suggesting the most likely place nearby, after a certain amount of time.</p>
+<h2 id="Fast">Do one thing, really fast</h2>
-<h2>Do one thing, really fast</h2>
<p>While users will engage with your app for only a few seconds at time, they'll use it many times throughout the day. A well-designed stream card carries one bit of information and potentially offers a few action buttons when the user swipes over.</p>
-<p class="try"><strong>Try this:</strong> How many bits of information is there in your design? Is everything absolutely necessary, or could you split it up into separate cards? If you’re designing a card, don’t forget that you can use multiple pages.</p>
+<p class="try"><b>Try this:</b> How many bits of information is there in your design? Is everything absolutely necessary, or could you split it up into separate cards? If you’re designing a card, don’t forget that you can use multiple pages.</p>
-<h2>Design for the corner of the eye</h2>
+<h2 id="CornerOfEye">Design for the corner of the eye</h2>
+
<p>The longer the user is looking at your app, the more you are pulling them out of the real world. Thinking about how to design your app for glanceability can vastly help the user get full value from your app and quickly go back to what they were doing.</p>
-<p class="try"><strong>Try this:</strong> To view your app with your peripheral vision, try focusing on your knuckles while your watch is displaying the app. Do you get a sense of what it is trying to do? Is it distinguishable from other apps? Does the background image help conveying the message? Does it use photos or a distinct shape and color?</p>
+<p class="try"><b>Try this:</b> To view your app with your peripheral vision, try focusing on your knuckles while your watch is displaying the app. Do you get a sense of what it is trying to do? Is it distinguishable from other apps? Does the background image help conveying the message? Does it use photos or a distinct shape and color?</p>
-<h2>
-Don’t be a constant shoulder tapper</h2>
+
+<h2 id="Tapper">Don’t be a constant shoulder tapper</h2>
+
<p>A watch constantly touches the user’s skin. Being this intimate, you want to buzz the watch fewer times than you’re used to on the phone.</p>
-<p class="try"><strong>Try this:</strong> Next time you’re in a conversation, imagine someone tapping you your shoulder, interrupting you with the information you want your app to deliver. If the information delivered did not justify suspending a conversation, you should not make the notification interruptive.</p>
\ No newline at end of file
+<p class="try"><b>Try this:</b> Next time you’re in a conversation, imagine someone tapping you your shoulder, interrupting you with the information you want your app to deliver. If the information delivered did not justify suspending a conversation, you should not make the notification interruptive.</p>
\ No newline at end of file
diff --git a/docs/html/design/wear/structure.jd b/docs/html/design/wear/structure.jd
index caeb119..f5ed49d 100644
--- a/docs/html/design/wear/structure.jd
+++ b/docs/html/design/wear/structure.jd
@@ -1,78 +1,69 @@
-page.title=App Structure for Wear
+page.title=App Structure for Android Wear
@jd:body
-<p>As outlined in the <a href="{@docRoot}design/wear/creative-vision.html">Creative Vision</a>,
-Android Wear apps do not adhere to the traditional mobile app model of touching an icon to launch into a self-contained experience. Rather, it is useful to think about the different spaces in the Android Wear UI and how your app might present itself across these spaces. For example, a typical app might begin by showing a notification card in the stream at a contextually relevant moment, then jump into a custom full screen UI for a micro-interaction, or maybe open the cue card to capture voice input that is then relayed back to the in-stream card.</p>
+<p>Users are used to tapping icons to launch apps. Android Wear is different. A typical Wear app adds a card to the stream at a contextually relevant moment. It might have a button that opens a full screen view for a fast micro interaction, like below, but it just as well might not.
+</p>
-<p>It’s important to make some fundamental decisions about how your users will interact with your app. There are a number of ways that functionality can manifest itself in Android Wear, and it is important to choose the places that provide maximum value and ease of use.</p>
+<img src="{@docRoot}design/media/wear/appstructuresample.png" alt="" />
-<p>For example, application functionality might show up in the following ways:</p>
+<p>These are the building blocks, ordered by simplicity. You can use one of them or some of them, but we strongly recommend not building apps the user has to launch and quit before thinking really hard about how you could react to a specific location, activity, time of day, or something happening in the cloud.</p>
+
<ul>
- <li>As a <strong>card in the main context stream</strong>:
+ <li><strong>Contextual card in the stream</strong>:
<ul>
- <li><strong>Bridged notifications</strong> are pushed to the wearable from the connected handheld (a phone or tablet) using the standard Android notifications framework. In general, bridged notifications mirror what’s happening on the handheld and use one of a predefined layout templates. Example: new message notification.
- <li><strong>Contextual notifications</strong> are like smart notifications. They are generated locally on the wearable and appear at contextually relevant moments specificed by the app developer. Contextual notifications allow more freedom of control, allowing for custom layouts and dynamic updating of card contents. Example: live updating exercise stats.
+ <li><a href="#Bridged"><strong>Bridged notifications</strong></a> are pushed to the wearable from the connected handheld such as new message notifications, using standard Android notifications. These require little or no code on the wearable.
+ <li><a href="#Contextual"><strong>Contextual notifications</strong></a> are generated locally on the wearable and appear at contextually relevant moments such as an exercise card that appears when you’re going on a run. You can do more with this kind of card than with a notification bridged from the handheld.
</ul>
</li>
- <li>As a <strong>full screen UI</strong> that temporarily overlays on top of the context stream:
+ <li><strong>Full screen UI app</strong>:
<ul>
- <li>The <strong>2D Picker</strong> is a simple design pattern (available in the SDK as a prebuilt component) aimed at asking the user to select from a set of items. This is a common interaction and a familiar pattern, so use of the familiar 2D Picker pattern is encouraged wherever possible. Example: choose from a set of artists and albums to play.
- <li><strong>Custom layouts</strong> are also possible where apps need to extend beyond the basic card/stream metaphor. These apps should be distinctly separate from the core user experience in both appearance and interaction.</li>
+ <li><a href="#2DPicker"><strong>2D Picker</strong></a> is design pattern that allows the user to select from a set of items, such as choosing artists and then albums. We recommend using this pre-built component from the SDK whenever relevant.
+ <li><a href="#Custom"><strong>Custom layouts</strong></a> are also possible where apps need to extend beyond the basic card/stream metaphor.</li>
</ul>
</li>
</ul>
-
-<p>Apps can also open the cue card to capture voice input.</p>
-
-<p>Note that the different approaches above are listed in order of complexity. When designing your interactions, try to achieve them with the simplest approach possible. If your needs are more involved, move to the next level of complexity.</p>
-
<p>Many applications will consist of a combination of these views, possibly with connections between them. For example, a contextual card may have an action that launches a more immersive experience. Inversely, an immersive experience may result in a card being added to the stream.</p>
-<p>Think of these different components as building blocks that can be snapped together into a single user flow. Avoid single monolithic full screen UIs that need to be launched and quit. Place simple notifications and ongoing information in the stream, and jump in and out of simple full screen activities to complete quick tasks before returning to the stream.</p>
-
-<p>In this section we will look at these different approaches and how combine them to create the best experience for your users.</p>
-
<h2 id="Bridged">Bridged Notifications</h2>
-<div class="framed-wear-square-small" style="float:right;margin:0 -22px 60px 40px">
- <img src="{@docRoot}design/media/wear/bridgednotifications.jpg">
-</div>
+<img src="{@docRoot}design/media/wear/bridgednotifications.jpg" height="147" style="float:right;margin:0 0 20px 20px" alt="">
+<img src="{@docRoot}design/media/wear/Bluebird.png" height="147" style="float:right;margin:0 0 20px 40px" alt="">
-<p>Bridged notifications are the simplest way of having content appear on an Android wearable. Since cards in the Android Wear stream are synced from the notifications on your connected handheld, any notifications created there automatically appear on Android Wear. Where appropriate, make sure to use the new APIs in the support library that enhance your app's notifications with features such as voice replies and notification pages.</p>
+<p>This is the simplest way to get on Android Wear. In fact, your app already does this if it uses notifications. You can add Wear-specific features like extra pages and voice replies by using the new notification APIs. </p>
+
+<a class="notice-developers left" style="clear:none" href="{@docRoot}training/wearables/notifications/creating.html">
+ <div>
+ <h3>Developer Docs</h3>
+ <p>Creating a Notification</p>
+ </div>
+</a>
+
+
+<h2 id="Contextual" style="clear:both">Contextual Notifications</h2>
+
+
+<img src="{@docRoot}design/media/wear/context_workout.png" width="323" height="147" style="float:right;margin:0 0 20px 40px;clear:right" alt="" />
+<img src="{@docRoot}design/media/wear/context_lights.png" width="323" height="147" style="float:right;margin:0 0 20px 40px;clear:right" alt="" />
+
+<p>This is what Android Wear does best; showing users information just when they need it.</p>
+
+<p>Here’s how it works: Your app knows when it is relevant for the user, and when it happens, you trigger a contextual notification. Maybe you’re building a running app that’s relevant when the user is running. Maybe it’s a museum guide that’s relevant when the user is visiting a particular museum. Check out the design principles for more on thinking about your app contextually. </p>
+
+<p>Getting contextual triggering right is one of the most impactful things you can do to craft a great user experience. </p>
+
+<p>The easiest way to do this is to use standard templates for Android notifications. If you decide to make your own ActivityView, we strongly recommend you take a look at the <a href="{@docRoot}design/wear/style.html">Style</a> guide to make sure you stay consistent with the rest of the device. </p>
+
+<p>Don’t forget to test your triggering thoroughly. Triggering too often can be so annoying that users might end up blocking all your notifications. </p>
-<h2 id="Contextual">Contextual Notifications</h2>
+<h2 id="2DPicker">2D Picker</h2>
-<p>Displaying information on contextual cards is at the core of the Android Wear user experience. Cards with focused trigger criteria appear at just the right time, delighting and assisting the user with timely, useful content. Refer to the Design principles section for details on how to think about triggering cards, and the UI overview section for a breakdown of the familiar system UI components that make up an entry in the context stream.</p>
-
-<p>An important aspect of creating contextual notifications is defining trigger conditions: what is the specific scenario in which your notification should appear? Think about using all sensor information available to you -- time, location, movement, identity, user habits and patterns, interaction with nearby devices, and more -- and describe the specific combination of sensor readings that should result in your app presenting itself.</p>
-
-
-<img src="{@docRoot}design/media/wear/contextualnotification.png" width="500" alt="" />
-
-
-<p>For example, imagine you were building a running app. If the user is standing at the beginning of their regular running trail, at the time that they often go for a run, and we detect a running activity... they are probably going for a run! This would be a great time to present a contextual card that offers to track their run.</p>
-
-<p>Putting effort into getting your contextual triggering just right is one of the most impactful things you can do to create a delightful experience for your users.</p>
-
-<p>You may use the standard Android notifications framework to create cards using a range of provided templates, or draw your own ActivityView inside cards for a custom card layout. Make sure to refer to the Style section to make sure your custom ActivityView layouts are sympathetic to the overall design of cards in the stream. Use ActivityViews to create custom card layouts that are stylistically consistent with neighboring cards in the stream; do not invent entirely new or conflicting UI patterns inside cards.</p>
-
-<p>Contextual cards are ideal for situations where it may be useful to push information to the user, when the information may be useful on an ongoing basis or referred back to, or when context strongly indicates that the information is useful. Refer to the section on Respecting Users Attention in the Design Principles section for details on targeted triggering. Triggering too often or in unsuitable contexts will result in users being annoyed by your app.</p>
-
-
-
-<h2 id="Picker">2D Picker</h2>
-
-<p>The 2D Picker design pattern (available as the GridViewPager component) is useful for showing a range of options or asking a user to make a quick selection. Google search results on Android Wear are a great example of the GridViewPager pattern in action.</p>
-
-<p>A 2D Picker is called up as an overlay on the main UI by tapping a card or button, or through a voice action. It preserves the same look and feel as the main context stream, giving users a familiar and predictable set of interaction patterns to rely on.</p>
-
-<p>On Android Wear, the basic hierarchy is vertical-then-horizontal, never horizontal-then-vertical, with a recommended vertical limit of five cards. Each vertical slot may consist of one card, as in the Google results case, or multiple cards which may be swiped horizontally.</p>
+<p>The 2D Picker design pattern (available as the <a href="{@docRoot}training/wearables/apps/layouts.html#UiLibrary">GridViewPager component</a>) is useful for showing a range of options or asking a user to make a quick selection. Google search results on Android Wear are a great example of the GridViewPager pattern in action.</p>
<img src="{@docRoot}design/media/wear/1D_picker.png" alt="" width="499px" />
<p class="img-caption">This pattern can be used to present a single vertical list, or a “1D Picker”</p>
@@ -80,37 +71,60 @@
<img src="{@docRoot}design/media/wear/2D_picker.png" alt="" width:760px" />
<p class="img-caption">It can also be used as a 2D matrix of options, as a way of presenting categorized options.</p>
-<p>This flexibility means that developers can choose to present a one or two-dimensional set of options. For example, a music app could use a vertical list to present a list of albums by a given artist (one dimension of options), and it could additionally allow each album slot to be horizontally swipeable to also choose a song from each album (a second dimension of options).</p>
-<p>Do not add buttons or pages to horizontal 2D Picker rows; rows should only be used to present a list or grid of similar options in this context. Provide a clear call to action on the card using the Action cards pattern detailed in the <a href="{@docRoot}design/wear/patterns.html">UI Patterns</a> guide.</p>
+<img src="{@docRoot}design/media/wear/2d_picker_indicated.png" alt="" width="760px" />
+<p class="img-caption">Navigation should be vertical-then-horizontal, not horizontal-then-vertical, and limit the the vertical set to around five cards.</p>
+
+<h3>Actions</h3>
+<p>For actions on each cards, use the <a href="{@docRoot}design/wear/patterns.html#Actions">Action cards pattern</a>.</p>
+
+
+<h3>Exiting</h3>
<p>2D Picker should be automatically dismissed when a selection is made. It may also be exited by swiping back down on the first card, or by swiping left to right on a leftmost card.</p>
-<p>The simplicity of individual cards within a 2D Picker is a feature. Remember that in many cases the user may be on the go or attempting to complete a task as quickly as possible. As such, micro-interactions and familiar input mechanism are paramount, and using the already-familiar pattern of vertically-then-horizontally oriented cards gives users exactly what they want with as little fuss as possible. Strive to minimize the number of results or options that you present. Show the most popular or repeatedly-used options at the top of the list of cards to avoid scrolling. Learn the user's preferences and use context detection to put the most likely option for any given situation at the top. In general, optimize for fast task completion over excessive customization.</p>
+<h3>Making it fast</h3>
+<p>A few of our favorite tips on how to make the 2D picker really fast for your users:</p>
+<ul>
+<li>Minimize the number of cards</li>
+<li>Show the most popular card at the top </li>
+<li>Keep the cards extremely simple</li>
+<li>Optimize for speed over customization</li>
+
+</ul>
-<h2 id="Custom">Custom Layouts</h2>
+<h2 id="Custom">Breaking out of the card (with custom layouts)</h2>
-<p>Some interactions may require a broader range of input mechanisms than is possible within the limitations of a card-based UI. For example, an app that allows for location selection may require the user to swipe in many directions before tapping to drop a pin. In cases like this, it is recommended to momentarily launch out of the context stream UI and present an immersive, full screen app with a custom layout.</p>
-
-<p>Custom full screen apps provides the benefit of flexibility: you can launch your own Android activity that takes up the entire screen, and capture all touch events, making a wide range of UIs possible.</p>
-
-<img src="{@docRoot}design/media/wear/customlayout.jpg" alt="" width="760px" />
+<p>There are some things you can’t do on a card. Swiping in many directions on a map or a joystick are a few examples. In those cases it might be good idea to momentarily go full screen.</p>
-<p>However, be cautious of making this the default way of accessing your app’s functionality. Users will thank you for presenting your content in the familiar, simple environment of the context stream if it is possible to do so. Only enter full screen mode when the interactions required are not possible using the card UI. Full screen is a modal state to be entered for the purpose of achieving a specific task, and in most cases should be easily and quickly exited. You should use full screen apps to achieve a single, quick task within a broader user flow that hinges off the Context Stream. A great full screen experience will present itself quickly, ask for some user input, and then self-quit back to the stream.</p>
+<a class="notice-developers" href="{@docRoot}training/wearables/apps/index.html">
+ <div>
+ <h3>Developer Docs</h3>
+ <p>Creating Wearable Apps</p>
+ </div>
+</a>
-<p>To avoid confusion, avoid using the specific styles and idioms of the context stream when designing immersive experiences. If you find yourself replicating the structure of the card layout, your should probably be using a 2D Picker. Make your immersive experience visually distinct. However, still adhere to the <a href="{@docRoot}design/wear/principles.html">Design Principles</a>, which apply universally to Android Wear interfaces.</p>
+<img src="{@docRoot}design/media/wear/customlayout.png" alt="" width="760px" />
-<p>Because Android wearables do not feature a home or back button, exiting the application at the appropriate time is the responsibility of the app developer. Exiting always leads back to the context stream. Where possible, exit automatically or present the option to exit at logical break points using acknowledge/cancel buttons. For example:</p>
+<h3>When to go full screen</h3>
+<p>We highly recommend only going full screen when you can’t do what you want on a card, and quickly exit back to the stream the moment you’re done. That way your app will feel like an integrated part of the system.</p>
-<ol>
-<li>A map view that allows the user to slide a map to drop a pin on a location should automatically exit when the pin has been placed.</li>
-<li>A short game should automatically exit back to the stream at the end of each game.</li>
-<li>A drawing app should display the option to exit after 5 seconds of inactivity.</li>
-</ol>
+<h3>Be distinct</h3>
+<p>Your full screen design shouldn’t look too much like the card stream or it could confuse users. The 2D picker is always available if you need a card-like UI.</p>
-<p>Even with logical exit points like these, some cases may exist where the user may want to immediately initiate an exit. This may be particularly common in apps of longer duration. In all cases, the developer should <strong>present the option to quit the app on long press</strong> using DismissOverlayView. Your design should long press for the sole purpose of prompting to quit.</p>
+<h3>Automatically exiting</h3>
+<p>Many devices don’t have back or home buttons, so exiting is your responsibility as the app designer. Here’s a few examples of natural exits:</p>
+<ul>
+ <li>A map that asks the user to drop a pin should exit when it happens</li>
+ <li>A short game can exit when the game finishes</li>
+ <li>A drawing app can finish after 5 seconds of inactivity.</li>
+</ul>
-<p>Seamlessly and fluidly moving between the context stream and immersive mode makes your app feel like an integrated part of the Android Wear experience.</p>
\ No newline at end of file
+<h3>Manually exiting</h3>
+<p>Even with logical exit points like these, some cases may exist where the user may want to immediately exit. This may be common in apps that are used for a longer while. In all cases, the developer should present the option to quit the app on long press using
+<a href="{@docRoot}training/wearables/apps/layouts.html#UiLibrary"><code>DismissOverlayView</code></a>. Your design should reserve long press for the sole purpose of prompting to quit.</p>
+
+
diff --git a/docs/html/design/wear/style.jd b/docs/html/design/wear/style.jd
index ed39bd6..948b934 100644
--- a/docs/html/design/wear/style.jd
+++ b/docs/html/design/wear/style.jd
@@ -1,57 +1,69 @@
-page.title=Style for Wear
+page.title=Style for Android Wear
@jd:body
<p>Here are a number of design considerations to bear in mind that are particular to Android Wear.</p>
-<h2 id="ScreenSize">Screen Size</h2>
+
<img src="{@docRoot}design/media/wear/circle_message2.png" height="200"
- style="float:right;margin:0 0 20px 60px">
+ style="float:right;margin:32px 0 50px 40px;">
<img src="{@docRoot}design/media/wear/fitness.png" height="200"
- style="float:right;margin:0 0 20px 60px">
+ style="float:right;margin:32px 0 50px 40px;">
+
+<h2 id="ScreenSize">Screen Size</h2>
<p>Be mindful of different device sizes and shapes. Wearable devices are a form of fashion and expression for their owners, and so Android Wear supports a variety of forms. Most of the complexities of supporting these different devices is taken care of at a system level, but bear in mind different screen types when designing custom full screen apps.</p>
-<p>Use the Android Wear emulator to test both square and round devices, and note that <code>WatchViewStub</code> is available to activities to detect whether a square or round device is being used.</p>
+<p>Use the Android Wear emulator to test both square and round devices, and note that <a
+href="{@docRoot}training/wearables/apps/layouts.html#UiLibrary"><code>WatchViewStub</code></a> is available to activities to detect whether a square or round device is being used.</p>
+<div class="layout-content-row">
+ <div class="layout-content-col span-6">
-<h2 id="Assets" style="clear:both">Specific Assets Required</h2>
+ <img src="{@docRoot}design/media/wear/assets_specifics.png" width="300"
+ style="margin:32px 0 20px;">
+ </div>
+ <div class="layout-content-col span-7">
+ <h2 id="Assets" style="clear:both">Specific Assets Required</h2>
-<img src="{@docRoot}design/media/wear/assets_specifics.png" width="300"
- style="float:left;margin:0 60px 20px 0">
-
-<p>A core set of standard assets may need to be provided depending on your card design: app icon, background image or images, action icons, actions confirmation animation. Of course, your specific design may necessitate other assets. Background image should be provided in landscape format at least 600px width for notifications that include pages of cards, since the system automatically adds a parallaxing effect.</p>
-
-
-
-<h2 id="PeekCard" style="clear:both">Peek Card Readability</h2>
-
-<img src="{@docRoot}design/media/wear/peek_card.png" width="300"
- style="float:left;margin:0 60px 20px 0">
-
-<p>Test your card layout to ensure that useful information is conveyed in the peek state on the Home screen. The main message of the card should be readable in the peek state, particularly for contextual cards. Content that requires an interaction to be read, for example a long message, should be cropped appropriately to provide an affordance to the user to swipe the card to read more.</p>
-
-
-
-<h2 id="InfoDensity" style="clear:both">Low Information Density</h2>
-
-<div class="framed-wear-square-small" style="float:right;margin:0 0 40px 60px">
- <img src="{@docRoot}design/media/wear/low_info_card.png">
+ <p>A core set of standard assets may need to be provided depending on your card design: app icon, background image or images, action icons, actions confirmation animation. Of course, your specific design may necessitate other assets. Background image should be provided in landscape format at least 600px width for notifications that include pages of cards, since the system automatically adds a parallaxing effect.</p>
+ </div>
</div>
+<div class="layout-content-row">
+ <div class="layout-content-col span-6">
+ <h2 id="PeekCard" style="clear:both">Peek Card Readability</h2>
+
+ <p>Test your card layout to ensure that useful information is conveyed in the peek state on the Home screen. The main message of the card should be readable in the peek state, particularly for contextual cards. Content that requires an interaction to be read, for example a long message, should be cropped appropriately to provide an affordance to the user to swipe the card to read more.</p>
+ </div>
+ <div class="layout-content-col span-6">
+
+ <img src="{@docRoot}design/media/wear/peek-card.png" width="300"
+ style="margin:12px 0 0 20px">
+ </div>
+</div>
+
+
+
+ <img src="{@docRoot}design/media/wear/low_info_card.png" width="147" height="147"
+ style="float:right;margin:29px 0 20px 40px">
+
+<h2 id="InfoDensity" style="margin-top:0" >Low Information Density</h2>
+
<p>Cards should be designed to be glanceable in a split second, just like reading the time on a traditional watch. In most cases a pairing of an icon and value, or a title and short caption should be enough to convey a meaningful message. Note that the background photo should also be used to convey information; backgrounds that change to reflect and support the primary message in the card work great. For example, in the case illustrated above a suitable background image is chosen to reflect severity of the current traffic conditions. This is not just a nice piece of attention to detail; the background actually reinforces the message and makes the content more glanceable.</p>
-<h2 id="Chunks" style="clear:both">Separate Information into Chunks</h2>
+<img src="{@docRoot}design/media/wear/separate_info_cards.jpg" height="147"
+ style="float:right;margin:29px 0 20px 40px">
-<img src="{@docRoot}design/media/wear/separate_info_cards.jpg" width="400"
- style="float:left;margin:0 60px 20px 0">
+<h2 id="Chunks">Separate Information into Chunks</h2>
-<p>In cases where additional information is absolutely necessary, don’t crowd out a card layout to the point where glanceability is affected. Instead, add an additional page (or multiple pages, if needed) to the right of the main card in the stream to which the user can swipe for more information. See also “Continuing activities on phone”, below.</p>
+<p>In cases where additional information is absolutely necessary, don’t crowd out a card layout to the point where glanceability is affected. Instead, add an additional <a href="{@docRoot}design/wear/patterns.html#Pages">page</a> (or multiple pages, if needed) to the right of the main card in the stream to which the user can swipe for more information. See also <a
+href="{@docRoot}design/wear/patterns.html#Continuing">Continuing activities on phone</a>.</p>
<h2 id="KeepMinimum" style="clear:both">Keep Notifications to a Minimum</h2>
@@ -59,39 +71,39 @@
<p>Don’t abuse the user’s attention. Active notifications (that is, those that cause the device to vibrate) should only be used in cases that are both timely and involve a contact, for example receiving a message from a friend. Non-urgent notifications should be silently added to the Context Stream. See also the general Android Notifications Guidelines.</p>
-<h2 id="Typography" style="clear:both">Use Clear, Bold Typography</h2>
-
-<div class="framed-wear-square-small" style="float:right;margin:0 0 60px 40px">
- <img src="{@docRoot}design/media/wear/clear_bold_type.jpg">
-</div>
-
-<p>The system font is Roboto Condensed, with Regular and Light variants. Text should adhere to the size and color recommendations (see the UI Toolkit in the Downloads section). In general, text should be displayed as large as possible. Your goal should be to convey maximum information with minimum fuss.</p>
-<h2 id="Branding" >Use Consistent Branding and Color</h2>
+<img src="{@docRoot}design/media/wear/clear_bold_type.jpg" height="147"
+ style="float:left;margin:19px 40px 20px 0">
+
+<h2 id="Typography" >Use Clear, Bold Typography</h2>
+
+<p>The system font is Roboto Condensed, with Regular and Light variants. Text should adhere to the size and color recommendations (see the UI Toolkit in the <a href="{@docRoot}design/downloads/index.html#Wear">Downloads</a> page). In general, text should be displayed as large as possible. Your goal should be to convey maximum information with minimum fuss.</p>
+
+
+<h2 id="Branding" style="clear:both" >Use Consistent Branding and Color</h2>
<p>The app icon is used to identify and brand your application. The icon is optional but when present always appears in the same location, overhanging the top edge of the card at the right. Note that app icons or branding should not be displayed in the background photo, which is reserved to display an image relevant to the information on the card.</p>
-<h2 id="Copywrite" style="clear:both">Copywrite Sparingly</h2>
+<img src="{@docRoot}design/media/wear/copywrite.png" height="147"
+ style="float:left;margin:19px 40px 20px 0">
-<div class="framed-wear-square-small" style="float:right;margin:0 0 60px 40px">
- <img src="{@docRoot}design/media/wear/copywrite.png">
-</div>
+<h2 id="Copywrite" >Copywrite Sparingly</h2>
<p>Omit needless text. Design for glanceability, not reading. Use words and phrases, not sentences. Use icons paired with values instead of text wherever possible. Text strings should be as concise as possible, and long pieces of text will be truncated to fit on a single card.</p>
-<h2 id="BeDiscreet" >Be Discreet if Necessary</h2>
+<h2 id="BeDiscreet" style="clear:both" >Be Discreet if Necessary</h2>
<p>Wearables are personal devices by nature, but they are not completely private. If your notification serves content that may be particularly sensitive or embarrassing (such as notifications from a dating app or a medical status report), consider not displaying all of the information in a peek card. A notification could place the sensitive information on a second page that must be swiped to, or an application could show different amounts of detail in peek and focused card positions.</p>
-<h2 id="ConfirmAnim" style="clear:both">Confirmation Animations</h2>
+ <img src="{@docRoot}design/media/wear/confirmation.png" height="147"
+ style="float:left;margin:29px 40px 20px 0">
-<div class="framed-wear-square-small" style="float:left;margin:0 40px 40px 0 ">
- <img src="{@docRoot}design/media/wear/confirmation.png">
-</div>
+
+<h2 id="ConfirmAnim">Confirmation Animations</h2>
<p>If your app allows the user to perform an action, it is necessary to provide positive feedback. Show a generic confirmation animation or create your own. A confirmation animation is an opportunity to express your app’s character and insert a moment of delight for your user. Keep animations short (less than 1000ms) and simple. Animating the confirmation icon is an effective way of transitions the user to a new state after completing an action.</p>
@@ -100,3 +112,4 @@
+
diff --git a/docs/html/tv/index.jd b/docs/html/tv/index.jd
index e3f3855..ff70977 100644
--- a/docs/html/tv/index.jd
+++ b/docs/html/tv/index.jd
@@ -73,7 +73,7 @@
effort.
</p>
<p class="landing-small">
- <a href="/design/tv/index.html">Learn about design for TV</a>
+ <a href="{@docRoot}preview/tv/design/index.html">Learn about design for TV</a>
</p>
</div>
