summaryrefslogtreecommitdiffstats
path: root/docs/html/design/wear
diff options
context:
space:
mode:
authorLuan Nguyen <luann@google.com>2014-10-01 13:20:43 -0700
committerLuan Nguyen <luann@google.com>2014-10-06 07:55:34 -0700
commit4cd6d42cc75dfba84ff2606c8d3e3f4b907a76a2 (patch)
treed89c96b70184f4a97d0823b8b03240b830f0a906 /docs/html/design/wear
parentc470faab3ee47b5643ee6b0a97c925c8f0f587fa (diff)
downloadframeworks_base-4cd6d42cc75dfba84ff2606c8d3e3f4b907a76a2.zip
frameworks_base-4cd6d42cc75dfba84ff2606c8d3e3f4b907a76a2.tar.gz
frameworks_base-4cd6d42cc75dfba84ff2606c8d3e3f4b907a76a2.tar.bz2
docs: Android Wear Design fixes
Change-Id: I258705082e32eb5633907bdf2ea5b4a5e4be69cb
Diffstat (limited to 'docs/html/design/wear')
-rw-r--r--docs/html/design/wear/creative-vision.jd2
-rw-r--r--docs/html/design/wear/patterns.jd9
-rw-r--r--docs/html/design/wear/principles.jd10
-rw-r--r--docs/html/design/wear/structure.jd2
-rw-r--r--docs/html/design/wear/style.jd12
5 files changed, 18 insertions, 17 deletions
diff --git a/docs/html/design/wear/creative-vision.jd b/docs/html/design/wear/creative-vision.jd
index aee115c..a879cf9 100644
--- a/docs/html/design/wear/creative-vision.jd
+++ b/docs/html/design/wear/creative-vision.jd
@@ -33,7 +33,7 @@ Wear experiences are:</p>
<img src="{@docRoot}design/media/wear/vision_navigation.png" width="147" height="147" />
<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>
+ <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-13">
diff --git a/docs/html/design/wear/patterns.jd b/docs/html/design/wear/patterns.jd
index 152379c..30fdc24 100644
--- a/docs/html/design/wear/patterns.jd
+++ b/docs/html/design/wear/patterns.jd
@@ -58,7 +58,7 @@ page.title=UI Patterns for Android Wear
<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 the <a href="#2DPicker">2D Picker</a> section below).</p>
+<p>Tapping on an action button can cause an action to be executed, 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 <a href="{@docRoot}design/downloads/index.html#Wear">Downloads</a> page for detailed specs regarding action icons.</p>
@@ -94,10 +94,11 @@ page.title=UI Patterns for Android Wear
<li>This pattern should be used when only one possible action could be reasonably expected. For example, tapping on an address with a car icon and ETA seems like it would very obviously launch directions. Conversely, if you see a contact's photo and name, it's not clear what tapping would do (call them? email them?), so the pattern shouldn't be used in this case.</li>
<li>On-card actions should not require a text label to be understood.</li>
<li>On-card actions should only result in something happening on the wearable (apart from web links to open them on the phone).</li>
-<li>Only one action per card: no menus on a single card.</li>
+<li>You should only have one action per card.</li>
+<li>Do not put menus on a single card.</li>
</ul>
-<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>
+<p>Good examples of using an action on card include: play and pause music, toggle light switch on and off, navigate to an address, and call a phone number.</p>
<h2 id="Stacks" style="clear:both">Card stacks</h2>
@@ -143,7 +144,7 @@ to check-in to.</p>
<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>
+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 where 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 6286a92..e6d6b4d 100644
--- a/docs/html/design/wear/principles.jd
+++ b/docs/html/design/wear/principles.jd
@@ -37,7 +37,7 @@ The time required for each action on the left is 5 seconds.</p>
<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>When you swipe through photos on your phone, you’re using a large area of the display and precision isn't required. 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"><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>
@@ -58,18 +58,18 @@ Use few and large touch targets.</p>
<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"><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>
+<p class="try"><b>Try this:</b> How many bits of information are 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 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"><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>
+<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 convey the message? Does it use photos or a distinct shape and color?</p>
<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>A watch constantly touches the user’s skin. Being this intimate, you want to vibrate the watch fewer times than you might on a phone.</p>
-<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
+<p class="try"><b>Try this:</b> Next time you’re in a conversation, imagine someone tapping you on 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 a7b5232..b77ccc2 100644
--- a/docs/html/design/wear/structure.jd
+++ b/docs/html/design/wear/structure.jd
@@ -13,7 +13,7 @@ margin: 0 10px 20px 20px;
}
</style>
-<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>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, but it just as well might not.
</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>
diff --git a/docs/html/design/wear/style.jd b/docs/html/design/wear/style.jd
index 948b934..bb2e17f 100644
--- a/docs/html/design/wear/style.jd
+++ b/docs/html/design/wear/style.jd
@@ -30,7 +30,7 @@ href="{@docRoot}training/wearables/apps/layouts.html#UiLibrary"><code>WatchViewS
<div class="layout-content-col span-7">
<h2 id="Assets" style="clear:both">Specific Assets Required</h2>
- <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>
+ <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, and action confirmation animations. Of course, your specific design may necessitate other assets. Background images 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>
@@ -54,7 +54,7 @@ href="{@docRoot}training/wearables/apps/layouts.html#UiLibrary"><code>WatchViewS
<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>
+<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 to the right, a suitable background image is chosen to reflect the severity of 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>
<img src="{@docRoot}design/media/wear/separate_info_cards.jpg" height="147"
@@ -68,7 +68,7 @@ href="{@docRoot}design/wear/patterns.html#Continuing">Continuing activities on p
<h2 id="KeepMinimum" style="clear:both">Keep Notifications to a Minimum</h2>
-<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>
+<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 <a href={@docRoot}design/patterns/notifications.html">Android Notifications Guidelines</a>.</p>
@@ -83,7 +83,7 @@ href="{@docRoot}design/wear/patterns.html#Continuing">Continuing activities on 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>
+<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 right edge of the card. 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>
<img src="{@docRoot}design/media/wear/copywrite.png" height="147"
@@ -91,7 +91,7 @@ href="{@docRoot}design/wear/patterns.html#Continuing">Continuing activities on p
<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>
+<p>Omit needless text. Design for glanceability and not for 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" style="clear:both" >Be Discreet if Necessary</h2>
@@ -105,7 +105,7 @@ href="{@docRoot}design/wear/patterns.html#Continuing">Continuing activities on p
<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>
+<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 transitioning the user to a new state after completing an action.</p>