smain@google.com | 98ee16c | 2014-11-25 12:44:19 -0800 | [diff] [blame] | 1 | page.title=Context Awareness on Android Wear |
| 2 | @jd:body |
| 3 | |
| 4 | <style> |
| 5 | div.slide-wrapper { |
| 6 | width:780px; |
| 7 | overflow:visible; |
| 8 | } |
| 9 | div.slide { |
| 10 | width:370px; |
| 11 | float:left; |
| 12 | margin:0 20px 0 0; |
| 13 | } |
| 14 | div.slide p { |
| 15 | height:40px; |
| 16 | } |
smain@google.com | 3a4b011 | 2014-11-25 18:05:39 -0800 | [diff] [blame] | 17 | div.slide img { |
| 18 | height: 208px; |
| 19 | } |
smain@google.com | 98ee16c | 2014-11-25 12:44:19 -0800 | [diff] [blame] | 20 | </style> |
| 21 | |
| 22 | |
| 23 | <p>Some of the most powerful user experiences with Android Wear are based on context-aware |
| 24 | notifications and actions. By using device sensors and other contextual cues, your app can reveal |
| 25 | information and functionality precisely when the user needs it, at a glance.</p> |
| 26 | |
| 27 | <p>For example, if you’re building a social app for restaurants, you can recommend popular menu |
| 28 | items when your app recognizes that the user is at a restaurant. More examples below provide basic |
| 29 | ideas about what you can do with a notification and action confirmation in your Android Wear |
| 30 | app.</p> |
| 31 | |
| 32 | |
| 33 | <div class="slide-wrapper"> |
| 34 | |
| 35 | <div class="slide"> |
| 36 | <h2>Pinterest</h2> |
| 37 | <p>Displays a notification when one of your geo-tagged pins is within walking distance.</p> |
| 38 | <img src="{@docRoot}design/media/wear/ContextualExample.005.png" alt="" |
| 39 | srcset="{@docRoot}design/media/wear/ContextualExample.005.png 1x, |
| 40 | {@docRoot}design/media/wear/ContextualExample.005_2x.png 2x" /> |
| 41 | </div> |
| 42 | |
| 43 | <div class="slide"> |
| 44 | <h2>Trulia</h2> |
| 45 | <p>Displays property details and contact options when you are near a new home.</p> |
| 46 | <img src="{@docRoot}design/media/wear/ContextualExample.006.png" alt="" |
| 47 | srcset="{@docRoot}design/media/wear/ContextualExample.006.png 1x, |
| 48 | {@docRoot}design/media/wear/ContextualExample.006_2x.png 2x" /> |
| 49 | </div> |
| 50 | |
| 51 | |
| 52 | |
| 53 | <div class="slide"> |
| 54 | <h2>Ski Conditions</h2> |
| 55 | <p>Displays lift status and slope conditions when you arrive at a ski resort.</p> |
| 56 | <img src="{@docRoot}design/media/wear/ContextualExample.008.png" alt="" |
| 57 | srcset="{@docRoot}design/media/wear/ContextualExample.008.png 1x, |
| 58 | {@docRoot}design/media/wear/ContextualExample.008_2x.png 2x" /> |
| 59 | </div> |
| 60 | |
| 61 | <div class="slide"> |
| 62 | <h2>Thermostat</h2> |
| 63 | <p>Controls automatically appear when you are at home. |
| 64 | </p> |
| 65 | <img src="{@docRoot}design/media/wear/ContextualExample.007.png" alt="" |
| 66 | srcset="{@docRoot}design/media/wear/ContextualExample.007.png 1x, |
| 67 | {@docRoot}design/media/wear/ContextualExample.007_2x.png 2x" /> |
| 68 | </div> |
| 69 | |
| 70 | |
| 71 | |
| 72 | <div class="slide"> |
| 73 | <h2>Airport</h2> |
| 74 | <p>Displays air miles while you are waiting at the gate. |
| 75 | </p> |
| 76 | <img src="{@docRoot}design/media/wear/ContextualExample.009.png" alt="" |
| 77 | srcset="{@docRoot}design/media/wear/ContextualExample.009.png 1x, |
| 78 | {@docRoot}design/media/wear/ContextualExample.009_2x.png 2x" /> |
| 79 | </div> |
| 80 | |
| 81 | <div class="slide"> |
| 82 | <h2>Hotel</h2> |
| 83 | <p>Displays late check out option on the morning of your departure. |
| 84 | </p> |
| 85 | <img src="{@docRoot}design/media/wear/ContextualExample.010.png" alt="" |
| 86 | srcset="{@docRoot}design/media/wear/ContextualExample.010.png 1x, |
| 87 | {@docRoot}design/media/wear/ContextualExample.010_2x.png 2x" /> |
| 88 | </div> |
| 89 | |
| 90 | |
| 91 | |
| 92 | <div class="slide"> |
| 93 | <h2>Conference</h2> |
| 94 | <p>Shows which of your friends are also attending the conference. |
| 95 | </p> |
| 96 | <img src="{@docRoot}design/media/wear/ContextualExample.011.png" alt="" |
| 97 | srcset="{@docRoot}design/media/wear/ContextualExample.011.png 1x, |
| 98 | {@docRoot}design/media/wear/ContextualExample.011_2x.png 2x" /> |
| 99 | </div> |
| 100 | |
| 101 | <div class="slide"> |
| 102 | <h2>Restaurant</h2> |
| 103 | <p>Provides suggestions for the healthiest items on the menu when in a restaurant. |
| 104 | </p> |
| 105 | <img src="{@docRoot}design/media/wear/ContextualExample.012.png" alt="" |
| 106 | srcset="{@docRoot}design/media/wear/ContextualExample.012.png 1x, |
| 107 | {@docRoot}design/media/wear/ContextualExample.012_2x.png 2x" /> |
| 108 | </div> |
| 109 | |
| 110 | |
| 111 | |
| 112 | <div class="slide"> |
| 113 | <h2>Oil Change</h2> |
| 114 | <p>Offers to set a reminder to change the oil again in six months while waiting at the garage. |
| 115 | </p> |
| 116 | <img src="{@docRoot}design/media/wear/ContextualExample.013.png" alt="" |
| 117 | srcset="{@docRoot}design/media/wear/ContextualExample.013.png 1x, |
| 118 | {@docRoot}design/media/wear/ContextualExample.013_2x.png 2x" /> |
| 119 | </div> |
| 120 | |
| 121 | <div class="slide"> |
| 122 | <h2>Car Sharing</h2> |
| 123 | <p>Unlocks the car as you approach it. |
| 124 | </p> |
| 125 | <img src="{@docRoot}design/media/wear/ContextualExample.016.png" alt="" |
| 126 | srcset="{@docRoot}design/media/wear/ContextualExample.016.png 1x, |
| 127 | {@docRoot}design/media/wear/ContextualExample.016_2x.png 2x" /> |
| 128 | </div> |
| 129 | |
| 130 | |
| 131 | |
| 132 | <div class="slide"> |
| 133 | <h2>Zoo</h2> |
| 134 | <p>Notifies visitors when the penguins are going to be fed! |
| 135 | </p> |
| 136 | <img src="{@docRoot}design/media/wear/ContextualExample.014.png" alt="" |
| 137 | srcset="{@docRoot}design/media/wear/ContextualExample.014.png 1x, |
| 138 | {@docRoot}design/media/wear/ContextualExample.014_2x.png 2x" /> |
| 139 | </div> |
| 140 | |
| 141 | <div class="slide"> |
| 142 | <h2>Location-based Query</h2> |
| 143 | <p>Ask things like, "Are there any picnic tables free at the park?" and get answers from |
| 144 | people who are there.</p> |
| 145 | <img src="{@docRoot}design/media/wear/ContextualExample.015.png" alt="" |
| 146 | srcset="{@docRoot}design/media/wear/ContextualExample.015.png 1x, |
| 147 | {@docRoot}design/media/wear/ContextualExample.015_2x.png 2x" /> |
| 148 | </div> |
| 149 | |
| 150 | |
| 151 | |
| 152 | </div> |