diff options
| author | 2014-11-26 00:59:45 +0000 | |
|---|---|---|
| committer | 2014-11-26 00:59:45 +0000 | |
| commit | ee032263046b135045cce0db6dbb8e55cc68baeb (patch) | |
| tree | 0415b82e187926731dfb956ad80bc2b1d73d133e | |
| parent | 0a310c99ee3217567f66578de2d2051e611d39aa (diff) | |
| parent | 9da0881ffbcdc566cc1bf60b817ab4f617d0049a (diff) | |
am 9da0881f: am 59f4624a: am be718f7c: Merge "add wear design guide for contextual apps" into lmp-docs
* commit '9da0881ffbcdc566cc1bf60b817ab4f617d0049a':
add wear design guide for contextual apps
27 files changed, 153 insertions, 0 deletions
diff --git a/docs/html/auto/index.jd b/docs/html/auto/index.jd index 7d9400f33d30..d113a7df1e56 100644 --- a/docs/html/auto/index.jd +++ b/docs/html/auto/index.jd @@ -65,6 +65,9 @@ page.type=about </style> + + + <div class="landing-body-content"> <div class="landing-hero-container"> diff --git a/docs/html/design/design_toc.cs b/docs/html/design/design_toc.cs index 416a93d16a2b..2cbdacd2ee40 100644 --- a/docs/html/design/design_toc.cs +++ b/docs/html/design/design_toc.cs @@ -23,6 +23,7 @@ <li><a href="<?cs var:toroot ?>design/wear/creative-vision.html">Creative Vision</a></li> <li><a href="<?cs var:toroot ?>design/wear/principles.html">Design Principles</a></li> <li><a href="<?cs var:toroot ?>design/wear/structure.html">App Structure</a></li> + <li><a href="<?cs var:toroot ?>design/wear/context.html">Context Awareness</a></li> <li><a href="<?cs var:toroot ?>design/wear/patterns.html">UI Patterns</a></li> <li><a href="<?cs var:toroot ?>design/wear/style.html">Style</a></li> </ul> diff --git a/docs/html/design/media/wear/ContextualExample.005.png b/docs/html/design/media/wear/ContextualExample.005.png Binary files differnew file mode 100644 index 000000000000..a01d941e43dc --- /dev/null +++ b/docs/html/design/media/wear/ContextualExample.005.png diff --git a/docs/html/design/media/wear/ContextualExample.005_2x.png b/docs/html/design/media/wear/ContextualExample.005_2x.png Binary files differnew file mode 100644 index 000000000000..caea8f3a8c8b --- /dev/null +++ b/docs/html/design/media/wear/ContextualExample.005_2x.png diff --git a/docs/html/design/media/wear/ContextualExample.006.png b/docs/html/design/media/wear/ContextualExample.006.png Binary files differnew file mode 100644 index 000000000000..7c3da57a51ad --- /dev/null +++ b/docs/html/design/media/wear/ContextualExample.006.png diff --git a/docs/html/design/media/wear/ContextualExample.006_2x.png b/docs/html/design/media/wear/ContextualExample.006_2x.png Binary files differnew file mode 100644 index 000000000000..319530d7a3b7 --- /dev/null +++ b/docs/html/design/media/wear/ContextualExample.006_2x.png diff --git a/docs/html/design/media/wear/ContextualExample.007.png b/docs/html/design/media/wear/ContextualExample.007.png Binary files differnew file mode 100644 index 000000000000..9d79e418f665 --- /dev/null +++ b/docs/html/design/media/wear/ContextualExample.007.png diff --git a/docs/html/design/media/wear/ContextualExample.007_2x.png b/docs/html/design/media/wear/ContextualExample.007_2x.png Binary files differnew file mode 100644 index 000000000000..06e425b38e85 --- /dev/null +++ b/docs/html/design/media/wear/ContextualExample.007_2x.png diff --git a/docs/html/design/media/wear/ContextualExample.008.png b/docs/html/design/media/wear/ContextualExample.008.png Binary files differnew file mode 100644 index 000000000000..331d77e294f7 --- /dev/null +++ b/docs/html/design/media/wear/ContextualExample.008.png diff --git a/docs/html/design/media/wear/ContextualExample.008_2x.png b/docs/html/design/media/wear/ContextualExample.008_2x.png Binary files differnew file mode 100644 index 000000000000..a6854e8e131b --- /dev/null +++ b/docs/html/design/media/wear/ContextualExample.008_2x.png diff --git a/docs/html/design/media/wear/ContextualExample.009.png b/docs/html/design/media/wear/ContextualExample.009.png Binary files differnew file mode 100644 index 000000000000..67c80add01b0 --- /dev/null +++ b/docs/html/design/media/wear/ContextualExample.009.png diff --git a/docs/html/design/media/wear/ContextualExample.009_2x.png b/docs/html/design/media/wear/ContextualExample.009_2x.png Binary files differnew file mode 100644 index 000000000000..ca5248d2e445 --- /dev/null +++ b/docs/html/design/media/wear/ContextualExample.009_2x.png diff --git a/docs/html/design/media/wear/ContextualExample.010.png b/docs/html/design/media/wear/ContextualExample.010.png Binary files differnew file mode 100644 index 000000000000..e9c6ed812bbc --- /dev/null +++ b/docs/html/design/media/wear/ContextualExample.010.png diff --git a/docs/html/design/media/wear/ContextualExample.010_2x.png b/docs/html/design/media/wear/ContextualExample.010_2x.png Binary files differnew file mode 100644 index 000000000000..ddae792ab0d4 --- /dev/null +++ b/docs/html/design/media/wear/ContextualExample.010_2x.png diff --git a/docs/html/design/media/wear/ContextualExample.011.png b/docs/html/design/media/wear/ContextualExample.011.png Binary files differnew file mode 100644 index 000000000000..ddafd655134b --- /dev/null +++ b/docs/html/design/media/wear/ContextualExample.011.png diff --git a/docs/html/design/media/wear/ContextualExample.011_2x.png b/docs/html/design/media/wear/ContextualExample.011_2x.png Binary files differnew file mode 100644 index 000000000000..46934e4eee64 --- /dev/null +++ b/docs/html/design/media/wear/ContextualExample.011_2x.png diff --git a/docs/html/design/media/wear/ContextualExample.012.png b/docs/html/design/media/wear/ContextualExample.012.png Binary files differnew file mode 100644 index 000000000000..05c72d3a7597 --- /dev/null +++ b/docs/html/design/media/wear/ContextualExample.012.png diff --git a/docs/html/design/media/wear/ContextualExample.012_2x.png b/docs/html/design/media/wear/ContextualExample.012_2x.png Binary files differnew file mode 100644 index 000000000000..c86bda5f5413 --- /dev/null +++ b/docs/html/design/media/wear/ContextualExample.012_2x.png diff --git a/docs/html/design/media/wear/ContextualExample.013.png b/docs/html/design/media/wear/ContextualExample.013.png Binary files differnew file mode 100644 index 000000000000..0c8d3da80db4 --- /dev/null +++ b/docs/html/design/media/wear/ContextualExample.013.png diff --git a/docs/html/design/media/wear/ContextualExample.013_2x.png b/docs/html/design/media/wear/ContextualExample.013_2x.png Binary files differnew file mode 100644 index 000000000000..efbbf870432e --- /dev/null +++ b/docs/html/design/media/wear/ContextualExample.013_2x.png diff --git a/docs/html/design/media/wear/ContextualExample.014.png b/docs/html/design/media/wear/ContextualExample.014.png Binary files differnew file mode 100644 index 000000000000..b8d87e867a45 --- /dev/null +++ b/docs/html/design/media/wear/ContextualExample.014.png diff --git a/docs/html/design/media/wear/ContextualExample.014_2x.png b/docs/html/design/media/wear/ContextualExample.014_2x.png Binary files differnew file mode 100644 index 000000000000..a89199fd8bd9 --- /dev/null +++ b/docs/html/design/media/wear/ContextualExample.014_2x.png diff --git a/docs/html/design/media/wear/ContextualExample.015.png b/docs/html/design/media/wear/ContextualExample.015.png Binary files differnew file mode 100644 index 000000000000..aa00b1fab77b --- /dev/null +++ b/docs/html/design/media/wear/ContextualExample.015.png diff --git a/docs/html/design/media/wear/ContextualExample.015_2x.png b/docs/html/design/media/wear/ContextualExample.015_2x.png Binary files differnew file mode 100644 index 000000000000..7e6421cfc149 --- /dev/null +++ b/docs/html/design/media/wear/ContextualExample.015_2x.png diff --git a/docs/html/design/media/wear/ContextualExample.016.png b/docs/html/design/media/wear/ContextualExample.016.png Binary files differnew file mode 100644 index 000000000000..8d507994919b --- /dev/null +++ b/docs/html/design/media/wear/ContextualExample.016.png diff --git a/docs/html/design/media/wear/ContextualExample.016_2x.png b/docs/html/design/media/wear/ContextualExample.016_2x.png Binary files differnew file mode 100644 index 000000000000..e67cdeec8470 --- /dev/null +++ b/docs/html/design/media/wear/ContextualExample.016_2x.png diff --git a/docs/html/design/wear/context.jd b/docs/html/design/wear/context.jd new file mode 100644 index 000000000000..9672d85191e6 --- /dev/null +++ b/docs/html/design/wear/context.jd @@ -0,0 +1,149 @@ +page.title=Context Awareness on Android Wear +@jd:body + +<style> +div.slide-wrapper { + width:780px; + overflow:visible; +} +div.slide { + width:370px; + float:left; + margin:0 20px 0 0; +} +div.slide p { + height:40px; +} +</style> + + +<p>Some of the most powerful user experiences with Android Wear are based on context-aware +notifications and actions. By using device sensors and other contextual cues, your app can reveal +information and functionality precisely when the user needs it, at a glance.</p> + +<p>For example, if you’re building a social app for restaurants, you can recommend popular menu +items when your app recognizes that the user is at a restaurant. More examples below provide basic +ideas about what you can do with a notification and action confirmation in your Android Wear +app.</p> + + +<div class="slide-wrapper"> + +<div class="slide"> +<h2>Pinterest</h2> +<p>Displays a notification when one of your geo-tagged pins is within walking distance.</p> +<img src="{@docRoot}design/media/wear/ContextualExample.005.png" alt="" + srcset="{@docRoot}design/media/wear/ContextualExample.005.png 1x, + {@docRoot}design/media/wear/ContextualExample.005_2x.png 2x" /> +</div> + +<div class="slide"> +<h2>Trulia</h2> +<p>Displays property details and contact options when you are near a new home.</p> +<img src="{@docRoot}design/media/wear/ContextualExample.006.png" alt="" + srcset="{@docRoot}design/media/wear/ContextualExample.006.png 1x, + {@docRoot}design/media/wear/ContextualExample.006_2x.png 2x" /> +</div> + + + +<div class="slide"> +<h2>Ski Conditions</h2> +<p>Displays lift status and slope conditions when you arrive at a ski resort.</p> +<img src="{@docRoot}design/media/wear/ContextualExample.008.png" alt="" + srcset="{@docRoot}design/media/wear/ContextualExample.008.png 1x, + {@docRoot}design/media/wear/ContextualExample.008_2x.png 2x" /> +</div> + +<div class="slide"> +<h2>Thermostat</h2> +<p>Controls automatically appear when you are at home. +</p> +<img src="{@docRoot}design/media/wear/ContextualExample.007.png" alt="" + srcset="{@docRoot}design/media/wear/ContextualExample.007.png 1x, + {@docRoot}design/media/wear/ContextualExample.007_2x.png 2x" /> +</div> + + + +<div class="slide"> +<h2>Airport</h2> +<p>Displays air miles while you are waiting at the gate. +</p> +<img src="{@docRoot}design/media/wear/ContextualExample.009.png" alt="" + srcset="{@docRoot}design/media/wear/ContextualExample.009.png 1x, + {@docRoot}design/media/wear/ContextualExample.009_2x.png 2x" /> +</div> + +<div class="slide"> +<h2>Hotel</h2> +<p>Displays late check out option on the morning of your departure. +</p> +<img src="{@docRoot}design/media/wear/ContextualExample.010.png" alt="" + srcset="{@docRoot}design/media/wear/ContextualExample.010.png 1x, + {@docRoot}design/media/wear/ContextualExample.010_2x.png 2x" /> +</div> + + + +<div class="slide"> +<h2>Conference</h2> +<p>Shows which of your friends are also attending the conference. +</p> +<img src="{@docRoot}design/media/wear/ContextualExample.011.png" alt="" + srcset="{@docRoot}design/media/wear/ContextualExample.011.png 1x, + {@docRoot}design/media/wear/ContextualExample.011_2x.png 2x" /> +</div> + +<div class="slide"> +<h2>Restaurant</h2> +<p>Provides suggestions for the healthiest items on the menu when in a restaurant. +</p> +<img src="{@docRoot}design/media/wear/ContextualExample.012.png" alt="" + srcset="{@docRoot}design/media/wear/ContextualExample.012.png 1x, + {@docRoot}design/media/wear/ContextualExample.012_2x.png 2x" /> +</div> + + + +<div class="slide"> +<h2>Oil Change</h2> +<p>Offers to set a reminder to change the oil again in six months while waiting at the garage. +</p> +<img src="{@docRoot}design/media/wear/ContextualExample.013.png" alt="" + srcset="{@docRoot}design/media/wear/ContextualExample.013.png 1x, + {@docRoot}design/media/wear/ContextualExample.013_2x.png 2x" /> +</div> + +<div class="slide"> +<h2>Car Sharing</h2> +<p>Unlocks the car as you approach it. +</p> +<img src="{@docRoot}design/media/wear/ContextualExample.016.png" alt="" + srcset="{@docRoot}design/media/wear/ContextualExample.016.png 1x, + {@docRoot}design/media/wear/ContextualExample.016_2x.png 2x" /> +</div> + + + +<div class="slide"> +<h2>Zoo</h2> +<p>Notifies visitors when the penguins are going to be fed! +</p> +<img src="{@docRoot}design/media/wear/ContextualExample.014.png" alt="" + srcset="{@docRoot}design/media/wear/ContextualExample.014.png 1x, + {@docRoot}design/media/wear/ContextualExample.014_2x.png 2x" /> +</div> + +<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> +<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" /> +</div> + + + +</div>
\ No newline at end of file |