Donate to e Foundation | Murena handsets with /e/OS | Own a part of Murena! Learn more

Commit 4fdaf938 authored by Luan Nguyen's avatar Luan Nguyen
Browse files

docs: Design section fixes for new templates 

- Fix a number of pages in the Wear design docs

bug: 21762391
Change-Id: I26c18130cdd925d1b40f525dd209329ca2b5cd15
parent 041e01bb

docs/html/design/wear/context.jd

+9 −7
Original line number Diff line number Diff line
@@ -2,19 +2,19 @@ page.title=Context Awareness on Android Wear 
@jd:body



<style>

div.slide-wrapper {

.slide-wrapper {

  width:780px;

  overflow:visible;

}

div.slide {

.slide {

  width:370px;

  float:left;

  margin:0 20px 0 0;

}

div.slide p {

.slide p {

  height:40px;

}

div.slide img {

.slide img {

  height: 208px;

}

</style>
@@ -140,8 +140,8 @@ app.</p> 


<div class="slide">

<h2>Location-based Query</h2>

<p>Ask things like, "Are there any picnic tables free at the park?" and get answers from 

people who are there.</p>

<p>Ask questions like, "Are there any picnic tables free at the park?" and get answers in real-time

from people in the area.</p>

<img src="{@docRoot}design/media/wear/ContextualExample.015.png" alt=""

     srcset="{@docRoot}design/media/wear/ContextualExample.015.png 1x,

             {@docRoot}design/media/wear/ContextualExample.015_2x.png 2x" />
@@ -150,3 +150,5 @@ people who are there.</p> 




</div>



<p style="clear:both;height:0">&nbsp;</p>
 
 No newline at end of file

docs/html/design/wear/creative-vision.jd

+4 −9
Original line number Diff line number Diff line
@@ -25,34 +25,29 @@ Wear experiences are:</p> 




  <div class="page-vision">

    <img src="{@docRoot}design/media/wear/vision_traffic.png" width="147" height="147" />



    <h2 id="Launched">Launched automatically</h2>

    <img src="{@docRoot}design/media/wear/vision_traffic.png" width="147" height="147" />

    <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="page-vision">

    <img src="{@docRoot}design/media/wear/vision_navigation.png" width="147" height="147" />



    <h2 id="Glanceable">Glanceable</h2>

    <img src="{@docRoot}design/media/wear/vision_navigation.png" width="147" height="147" />

    <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="page-vision">

    <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>

    <img src="{@docRoot}design/media/wear/vision_voice.png" width="147" height="147" style="border: 1px solid #ddd;" />

    <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 class="page-vision">

    <img src="{@docRoot}design/media/wear/vision_music.png" width="147" height="147" />



    <h2 id="Interaction">Zero or low interaction</h2>

    <img src="{@docRoot}design/media/wear/vision_music.png" width="147" height="147" />

    <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>



<p>Third party apps extend Android Wear to be more specialized and helpful throughout the day. Installing apps are a way for the user to tell the Android Wear how to do that.</p>

docs/html/design/wear/patterns.jd

+4 −5
Original line number Diff line number Diff line
@@ -46,11 +46,9 @@ page.title=UI Patterns for Android Wear 


<h2 id="Dismissing" style="clear:both">Dismissing cards</h2>



  <img src="{@docRoot}design/media/wear/dismiss_cards.png" height="147">



<p>Swiping from left to right on a card causes it to be dismissed from the stream. Dismissed cards may return when they next have relevant information. State is synced between the Android Wear context stream and the notifications on the Android handheld device, so dismissing from one causes an automatic dismissal from the other.</p>





<img src="{@docRoot}design/media/wear/dismiss_cards.png" height="147">



<h2 id="Actions" style="clear:both">Action buttons</h2>
@@ -162,12 +160,11 @@ to check-in to.</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">

  <img src="{@docRoot}design/media/wear/selection_list.png" width="147" height="147" style="float:left;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 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>



<a class="notice-developers left" href="{@docRoot}training/wearables/ui/lists.html">
@@ -176,3 +173,5 @@ href="{@docRoot}training/wearables/apps/layouts.html#UiLibrary"><code>WearableLi 
    <p>Creating Lists</p>

  </div>

</a>



<p style="clear:both;height:0">&nbsp;</p>

docs/html/design/wear/style.jd

+14 −24
Original line number Diff line number Diff line
@@ -48,19 +48,18 @@ href="{@docRoot}training/wearables/apps/layouts.html#UiLibrary"><code>WatchViewS 
</div>





<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:right;margin:29px 0 20px 40px">



<h2 id="InfoDensity" style="margin-top:0" >Low Information Density</h2>

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>



<h2 id="ConfirmAnim">Confirmation Animations</h2>



<img src="{@docRoot}design/media/wear/confirmation.png" height="147"

  style="float:left;margin:29px 40px 20px 0">





<h2 id="ConfirmAnim">Confirmation Animations</h2>

  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">&nbsp;</p>
 
 No newline at end of file

docs/html/design/wear/watchfaces.jd

+59 −81
Original line number Diff line number Diff line
@@ -4,7 +4,7 @@ page.title=Watch Faces for Android Wear 


<!-- developer docs box -->

<a class="notice-developers right" href="{@docRoot}training/wearables/watch-faces/index.html"

   style="clear:left;margin-bottom:90px">

   style="clear:left">

  <div>

    <h3>Developer Docs</h3>

    <p>Creating Watch Faces</p>
@@ -22,7 +22,7 @@ ambient modes, and consider how system user interface elements will interact wit 
<p>Follow the guidelines in this page to design your custom watch faces.</p>



<!-- H2 creative vision -->

<div style="float:right;margin-top:-100px;margin-bottom:20px;margin-left:20px">

<div style="float:right;margin-bottom:20px;margin-left:20px">

  <img src="{@docRoot}design/media/wear/Render_Next.png"

       width="200" height="195" alt="" style="margin-right:5px"/><br/>

  <img src="{@docRoot}design/media/wear/Render_Interactive.png"
@@ -137,9 +137,12 @@ You can configure your watch face to display different ambient designs depending 
of screen available on the device. Consider the best design for your watch faces on all

screens.</p>



<div class="cols" style="margin-top:20px">

<div class="col-9">

<div style="float:right;margin-bottom:20px;margin-left:20px">

  <img src="{@docRoot}design/media/wear/Render_LowBit.png" width="200"

       height="" alt="" style="margin-top:45px;margin-left:13px">

</div>

<h3>Reduced color space</h3>



<p>Some displays use a reduced color space in ambient mode to save power.</p>

<p>One reduced color space power saving method is to use a "low-bit" mode. In low-bit mode,

the available colors are limited to black, white, blue, red, magenta, green, cyan, and yellow.
@@ -151,16 +154,15 @@ screens.</p> 
<p>Other displays save power in ambient mode by not producing any color. When designing for

displays which do not use color in ambient mode, the background may be either black or

white.</p>

</div>

<div class="col-4">

  <img src="{@docRoot}design/media/wear/Render_LowBit.png" width="200"

       height="" alt="" style="margin-top:45px;margin-left:13px">

</div>

</div>



<div class="cols" style="margin-top:20px">

<div class="col-9">



<h3>Burn protection techniques</h3>



<div style="float:right;margin-bottom:20px;margin-left:20px">

  <img src="{@docRoot}design/media/wear/Render_1Bit.png" width="200"

       height="" alt="" style="margin-top:-10px;margin-left:13px">

</div>



<p>When designing for OLED screens, you should consider power efficiency and the screen

burn-in effect. When these screens are in ambient mode, the system shifts the contents of

the screen periodically by a few pixels to avoid pixel burn-in. Do not use large blocks of
@@ -168,13 +170,6 @@ screens.</p> 
your regular ambient mode designs with outlined shapes in burn-protected ambient mode. Also

replace filled images with pixel patterns. For analog watch face designs, hollow out the center

where the hands meet to avoid pixel burn-in in this mode.</p>

</div>

<div class="col-4">

  <img src="{@docRoot}design/media/wear/Render_1Bit.png" width="200"

       height="" alt="" style="margin-top:-10px;margin-left:13px">

</div>

</div>







<h2 id="SystemUI">Accomodate System UI Elements</h2>
@@ -183,8 +178,10 @@ screens.</p> 
user the status of the wearable and show notifications from services on the user's phone. Try

to keep critical elements in your watch face designs from being obscured by the UI elements.</p>



<div class="cols" style="margin-top:20px">

<div class="col-9">

<div style="float:right;margin-bottom:20px;margin-left:20px">

  <img src="{@docRoot}design/media/wear/CardsRender_Build.png" width="200"

        height="" alt="" style="margin-top:20px;margin-left:13px">

</div>

<h3>Cards</h3>

<p>Cards are the notification system that bridges information between the wearable and a

mobile device. Cards are also how most applications communicate with users. The user will be
@@ -201,15 +198,12 @@ variable peek card is that it displays more notification information. Faces with 
the bottom half of the face should leverage the small peek card instead.</p>

<p>The system notifies your watch face when the bounds of a peek card change, so you can

rearrange the elements in your design if necessary.</p>

</div>

<div class="col-4">

  <img src="{@docRoot}design/media/wear/CardsRender_Build.png" width="200"

       height="" alt="" style="margin-top:20px;margin-left:13px">

</div>

</div>



<div class="cols" style="margin-top:20px">

<div class="col-9">



<div style="float:right;margin-bottom:20px;margin-left:20px">

  <img src="{@docRoot}design/media/wear/Indicators_Cropped.png" width="200"

       height="" alt="" style="margin-top:0px;margin-left:13px">

</div>

<h3>Indicators</h3>

<p>Indicators tell the user the status of the wearable, such as charging and airplane mode.

When designing a watch face, consider how the indicator will fall over the watch face.</p>
@@ -218,15 +212,11 @@ large peek card, the indicators should go on the top or on the center of the scr 
position the status icons or the hotword on the bottom of the screen, the system forces small

peek cards. If the edge of the watch face contains strong visual elements, such as

ticks or numbers, place the indicators on the center of the screen.</p>

</div>

<div class="col-4">

  <img src="{@docRoot}design/media/wear/Indicators_Cropped.png" width="200"



<div style="float:right;margin-bottom:20px;margin-left:20px">

  <img src="{@docRoot}design/media/wear/Hotword_Cropped.png" width="200"

       height="" alt="" style="margin-top:0px;margin-left:13px">

</div>

</div>



<div class="cols" style="margin-top:20px">

<div class="col-9">

<h3>The hotword</h3>

<p>The hotword is the phrase "OK Google", which tells the user that they can interact with

the watch using voice commands. When a user turns on the wearable, the hotword appears on
@@ -236,12 +226,6 @@ this element is not as critical. You should still avoid covering up elements of 
watch face. Finally, background protection for the hotword and the indicators should be

turned on unless your design is tailored to have these elements appear on top of them, for example

using dark solid colors with no patterns.</p>

</div>

<div class="col-4">

  <img src="{@docRoot}design/media/wear/Hotword_Cropped.png" width="200"

       height="" alt="" style="margin-top:0px;margin-left:13px">

</div>

</div>



<p>For more information about measurements and positioning of system UI elements, see

<a href="#SpecsAssets">Specifications and Assets</a>.</p>
@@ -253,23 +237,26 @@ using dark solid colors with no patterns.</p> 
<p>Your watch face can show users contextually relevant data and react to it by changing styles

and colors in your design.</p>



<div class="cols" style="margin-top:20px">

<div class="col-9">

<h3>What do you want your user to know?</h3>



<div style="float:right;margin-bottom:20px;margin-left:20px">

  <img src="{@docRoot}design/media/wear/Render_Saturn.png" width="200"

       height="" alt="" style="margin-top:-10px;margin-left:13px">

</div>



<p>The first step in designing a data-integrated watch face is to define a conceptual user

outcome based on available data. First, generate a strong concept or outcome you believe is

supported by real user needs. What do you want your users to know after they have glanced

at your design? Once you have identified your outcome, you need to determine how to obtain

the required data.</p>

</div>

<div class="col-4">

  <img src="{@docRoot}design/media/wear/Render_Saturn.png" width="200"



<div style="clear:both;"/>



<div style="float:right;margin-bottom:20px;margin-left:20px">

  <img src="{@docRoot}design/media/wear/Render_Episode.png" width="200"

       height="" alt="" style="margin-top:-10px;margin-left:13px">

</div>

</div>



<div class="cols" style="margin-top:20px">

<div class="col-9">

<h3>A watch dial is a timeline; add data to it</h3>

<p>Your watch face concept may include use of data beyond time, such as weather, calendar

and fitness data. Consider the inclusion of data integration creatively. Avoid simply
@@ -278,15 +265,12 @@ be expressed through the lens of time. For example, instead of designing a weath 
watch face as a clock with an indication of the current temperature in degrees overlayed,

you might design a watch face that describes how the temperature will change over the

course of the day.</p>

</div>

<div class="col-4">

  <img src="{@docRoot}design/media/wear/Render_Episode.png" width="200"



<div style="float:right;margin-bottom:20px;margin-left:20px">

  <img src="{@docRoot}design/media/wear/Render_Albumem.png" width="200"

       height="" alt="" style="margin-top:-10px;margin-left:13px">

</div>

</div>



<div class="cols" style="margin-top:20px">

<div class="col-9">

<h3>Stick to one message</h3>

<p>Once you have solidified your conceptual direction or desired outcome, you will need to

begin visualizing your watch face. The strongest watch face designs are highly glanceable
@@ -295,12 +279,6 @@ must identify the most important supporting data point. For instance, instead of 
an entire month of calendar events,  you might decide to display only the next

upcoming event. By a process of reduction, you should arrive at a powerful singular

expression of data to include in your design.</p>

</div>

<div class="col-4">

  <img src="{@docRoot}design/media/wear/Render_Albumem.png" width="200"

       height="" alt="" style="margin-top:-10px;margin-left:13px">

</div>

</div>



<h3>Begin with some insight and test as you go</h3>

<p>Make sure your approach begins with insight into the needs and expectations of your users.