1page.title=Touch Feedback 2page.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 9of 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. 11This 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 14actionable area in your app, let them know the app is "listening" by providing a visual 15response. Make it subtle —just slightly lighter or darker than the untouched color. This 16provides two benefits:</p> 17 18<ul> 19<li><a href="{@docRoot}design/get-started/principles.html#sprinkle-encouragement">Sprinkles 20of encouragement</a> are more pleasant than jolts.</li> 21<li>Incorporating <a href="{@docRoot}design/style/branding.html">your branding</a> is much 22easier 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 67understand what the outcome will be.</p> 68 69<p>In Recents, when a user starts swiping a thumbnail left or right, it 70begins to dim. This helps the user understand that swiping will cause the 71item 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 isn’t 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 you’re building custom widgets, keep boundary feedback in mind and 98 provide it from within your app. 99</p>
