1 page.title=Touch Feedback 2 page.tags="input","button" 3 @jd:body 4 5 <div class="layout-content-row" style="margin-bottom: -100px"> 6 <div class="layout-content-col span-7"> 7 8 <p>Use illumination and dimming to respond to touches, reinforce the resulting behaviors 9 of gestures, and indicate what actions are enabled and disabled.</p> 10 <p>Whenever a user touches an actionable area in your app, provide a subtle visual response. 11 This lets the user know which object was touched and that your app is "listening".</p> 12 13 <p><strong>Be responsive to touches in a gentle way</strong>. Whenever a user touches an 14 actionable area in your app, let them know the app is "listening" by providing a visual 15 response. Make it subtle —just slightly lighter or darker than the untouched color. This 16 provides two benefits:</p> 17 18 <ul> 19 <li><a href="{@docRoot}design/get-started/principles.html#sprinkle-encouragement">Sprinkles 20 of encouragement</a> are more pleasant than jolts.</li> 21 <li>Incorporating <a href="{@docRoot}design/style/branding.html">your branding</a> is much 22 easier because the default touch feedback works with whatever hue you choose.</li> 23 </ul> 24 25 </div> 26 27 <div class="layout-content-col span-6" style="float:right;"> 28 29 <!-- <div class="framed-nexus5-port-span-5"> 30 <video class="play-on-hover" autoplay> 31 <source src="{@docRoot}design/media/calendar.mp4" type="video/mp4"> 32 <source src="{@docRoot}design/media/calendar.webm" type="video/webm"> 33 <source src="{@docRoot}design/media/calendar.ogv" type="video/ogg"> 34 </video> 35 </div> 36 <div class="figure-caption" style="margin-top:0"> 37 <div class="video-instructions"> </div> 38 </div> 39 </div> --> 40 41 42 <div class="layout-content-col span-6"> 43 44 <img src="{@docRoot}design/media/touch_feedback_reaction_response.png"> 45 46 </div> 47 </div> 48 49 <h4 style="clear:both;">States</h4> 50 51 52 <div class="vspace size-1"> </div> 53 54 <img src="{@docRoot}design/media/touch_feedback_states.png"> 55 <div class="figure-caption"> 56 Most of Android's UI elements have touch feedback built in, including 57 states that indicate whether touching the element will have any effect. 58 </div> 59 60 <div class="vspace size-3"> </div> 61 62 <div class="layout-content-row"> 63 <div class="layout-content-col span-6"> 64 65 <h4>Communication</h4> 66 <p>When your objects react to more complex gestures, help users 67 understand what the outcome will be.</p> 68 69 <p>In Recents, when a user starts swiping a thumbnail left or right, it 70 begins to dim. This helps the user understand that swiping will cause the 71 item to be removed.</p> 72 </div> 73 <div class="layout-content-col span-7"> 74 75 <img src="{@docRoot}design/media/touch_feedback_manipulation.png"> 76 77 </div> 78 </div> 79 <div class="vspace size-3"> </div> 80 81 <div class="layout-content-row"> 82 <div class="layout-content-col span-6"> 83 84 <img src="{@docRoot}design/media/touch_feedback_communication.png"> 85 <p><em>If a user attempts to scroll past the last home screen panel, the screen 86 content tilts to the right to indicate that further navigation in this direction 87 isnt possible.</em></p> 88 89 </div> 90 <div class="layout-content-col span-6"> 91 92 <h4>Boundaries</h4> 93 <p> 94 When users try to scroll past the beginning or end of a scrollable area, 95 communicate the boundary with a visual cue. Many of Android's scrollable UI 96 widgets, like lists and grid lists, have support for boundary feedback built 97 in. If youre building custom widgets, keep boundary feedback in mind and 98 provide it from within your app. 99 </p>
