1 page.title=UI Overview 2 page.customHeadTag=<link rel="stylesheet" type="text/css" href="/wear/css/wear.css"> 3 4 @jd:body 5 6 <style> 7 h3 { 8 padding:30px 0 10px; 9 } 10 </style> 11 12 <p>A new form factor deserves a new UI model. At a high level, the Android Wear UI consists of two 13 main spaces centered around the core functions of <strong>Suggest</strong> and 14 <strong>Demand</strong>. Your application will have an important role to play in both of these 15 spaces.</p> 16 17 18 19 <h3 id="Stream">Suggest: The Context Stream</h3> 20 21 <div class="wear-inset-video-container" style="float:right;margin:0 -22px 60px 40px"> 22 <img class="wear-bezel-only" src="{@docRoot}wear/images/screens/bezel.png" alt=""> 23 <img class="gif" src="{@docRoot}wear/images/screens/stream.gif"> 24 </div> 25 26 <p>The context stream is a vertical list of cards, each showing a useful or timely piece of 27 information. Much like Google Now on Android phones and tablets, users swipe vertically to navigate 28 from card to card for a brief and comprehensive update about what's important to them. Only one card 29 is displayed on screen at a time, and background images are used to provide additional visual 30 information. Your application can create cards and inject them into the stream when they are most 31 likely to be useful.</p> 32 33 <p>Cards in the stream are more than simple notifications. They can be swiped horizontally to 34 reveal additional pages. Further horizontal swiping may reveal tappable buttons, allowing the user 35 to take action on the notification. Cards can also be dismissed by swiping left to right, removing 36 them from the stream until the next time they have useful information to display. 37 In the emulator, hovering the mouse over the top of the screen illuminates a blue bar at 38 the top of the device that takes you home when clicked.</p> 39 40 41 42 <h3 id="CueCard">Demand: The Cue Card</h3> 43 44 <div class="wear-inset-video-container" style="float:right;margin:0 -22px 60px 40px"> 45 <img class="wear-bezel-only" src="{@docRoot}wear/images/screens/bezel.png" alt=""> 46 <img class="gif" src="{@docRoot}wear/images/screens/cuecard.gif"> 47 </div> 48 49 <p>For cases where the context stream can't anticipate what the user would like to do, the cue card 50 allows users to speak to their device. The cue card is opened by saying, "Ok Google" or by tapping 51 on the "g" icon on the home screen. Swiping up on the cue card shows a list of actions, which can 52 also be tapped.</p> 53 54 <p>The list of actions includes Android intents for voice actions. The upcoming Android Wear SDK 55 will enable developers to match their applications to these intents so users can perform actions 56 using these voice commands. Multiple applications may register for a single voice intent, and users 57 will have the opportunity to choose which application they prefer to use.</p> 58 59
