diff options
Diffstat (limited to 'docs/html/design/wear/style.jd')
| -rw-r--r-- | docs/html/design/wear/style.jd | 38 |
1 files changed, 14 insertions, 24 deletions
diff --git a/docs/html/design/wear/style.jd b/docs/html/design/wear/style.jd index bb559fe..75bd65f 100644 --- a/docs/html/design/wear/style.jd +++ b/docs/html/design/wear/style.jd @@ -48,19 +48,18 @@ href="{@docRoot}training/wearables/apps/layouts.html#UiLibrary"><code>WatchViewS </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> +<img src="{@docRoot}design/media/wear/low_info_card.png" width="147" height="147" +style="float:left;margin:5px 20px 20px 0"> + <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" - style="float:right;margin:29px 0 20px 40px"> <h2 id="Chunks">Separate Information into Chunks</h2> +<img src="{@docRoot}design/media/wear/separate_info_cards.jpg" height="147" + style="float:right;margin:5px 0 20px 20px"> <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> @@ -73,21 +72,19 @@ href="{@docRoot}design/wear/patterns.html#Continuing">Continuing activities on p -<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> +<img src="{@docRoot}design/media/wear/clear_bold_type.jpg" height="147" + style="float:left;margin:5px 20px 20px 0"> <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 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" - style="float:left;margin:19px 40px 20px 0"> + style="float:right;margin:0 20px 0 20px"> + +<p style="margin-bottom: 60px">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> <h2 id="Copywrite" >Copywrite Sparingly</h2> @@ -98,18 +95,11 @@ href="{@docRoot}design/wear/patterns.html#Continuing">Continuing activities on p <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> - - <img src="{@docRoot}design/media/wear/confirmation.png" height="147" - style="float:left;margin:29px 40px 20px 0"> - - <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 transitioning the user to a new state after completing an action.</p> - - - - - +<img src="{@docRoot}design/media/wear/confirmation.png" height="147" + style="float:left;margin:5px 20px 20px 0"> +<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> +<p style="clear:both;height:0"> </p>
\ No newline at end of file |