| Roman Nurik | b99ae73 | 2012-03-06 12:26:15 -0800 | [diff] [blame] | 1 | page.title=Touch Feedback |
| Scott Main | 64d5103 | 2013-04-12 14:00:30 -0700 | [diff] [blame] | 2 | page.tags="input","button" |
| Roman Nurik | b99ae73 | 2012-03-06 12:26:15 -0800 | [diff] [blame] | 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 color and illumination to respond to touches, reinforce the resulting behaviors of gestures, and |
| 9 | indicate what actions are enabled and disabled.</p> |
| 10 | <p>Whenever a user touches an actionable area in your app, provide a visual response. This lets the |
| 11 | user know which object was touched and that your app is "listening".</p> |
| 12 | |
| 13 | </div> |
| 14 | <div class="layout-content-col span-6"> |
| 15 | |
| 16 | <img src="{@docRoot}design/media/touch_feedback_reaction_response.png"> |
| 17 | |
| 18 | </div> |
| 19 | </div> |
| 20 | |
| 21 | <h4>States</h4> |
| 22 | |
| 23 | <div class="vspace size-1"> </div> |
| 24 | |
| 25 | <img src="{@docRoot}design/media/touch_feedback_states.png"> |
| 26 | <div class="figure-caption"> |
| 27 | Most of Android's UI elements have touch-feedback built in, including states that indicate |
| 28 | whether touching the element will have any effect. |
| 29 | </div> |
| 30 | |
| 31 | <div class="vspace size-4"> </div> |
| 32 | |
| 33 | <div class="layout-content-row"> |
| 34 | <div class="layout-content-col span-4"> |
| 35 | |
| 36 | <h4>Communication</h4> |
| 37 | <p>When your objects react to more complex gestures, help users understand what the outcome of the |
| 38 | operation will be. For example, in Recents, when you start swiping a thumbnail left or right, it |
| 39 | starts to dim. This helps the user understand that swiping will cause the item to be removed.</p> |
| 40 | |
| 41 | </div> |
| 42 | <div class="layout-content-col span-9"> |
| 43 | |
| 44 | <img src="{@docRoot}design/media/touch_feedback_manipulation.png"> |
| 45 | |
| 46 | </div> |
| 47 | </div> |
| 48 | |
| 49 | <div class="layout-content-row"> |
| 50 | <div class="layout-content-col span-6"> |
| 51 | |
| 52 | <img src="{@docRoot}design/media/touch_feedback_communication.png"> |
| 53 | |
| 54 | </div> |
| 55 | <div class="layout-content-col span-6"> |
| 56 | |
| 57 | <div class="vspace size-3"> </div> |
| 58 | |
| 59 | <h4>Boundaries</h4> |
| 60 | <p>When users try to scroll past the upper or lower limit of a scrollable area, communicate the |
| 61 | boundary with a visual cue. For example, if a user attempts to scroll past the first home screen |
| 62 | panel, the screen content tilts to the right to indicate that further navigation in this direction |
| 63 | is not possible. Many of Android's scrollable UI widgets (e.g. lists or grid lists) already have |
| 64 | support for boundary feedback built in. If you are building custom, keep boundary feedback in mind |
| 65 | and provide it from within your app.</p> |
| 66 | |
| 67 | </div> |
| 68 | </div> |