diff options
Diffstat (limited to 'docs/html/design/style/touch-feedback.jd')
| -rw-r--r-- | docs/html/design/style/touch-feedback.jd | 95 |
1 files changed, 0 insertions, 95 deletions
diff --git a/docs/html/design/style/touch-feedback.jd b/docs/html/design/style/touch-feedback.jd deleted file mode 100644 index e1fac2f..0000000 --- a/docs/html/design/style/touch-feedback.jd +++ /dev/null @@ -1,95 +0,0 @@ -page.title=Touch Feedback -page.tags=input,button -@jd:body - -<div class="cols" style="margin-bottom: -100px"> -<div class="col-7"> - -<a class="notice-designers-material" - href="http://www.google.com/design/spec/animation/responsive-interaction.html"> - <div> - <h3>Material Design</h3> - <p>Responsive Interaction<p> - </div> -</a> - - -<p>Use illumination and dimming to respond to touches, reinforce the resulting behaviors -of gestures, and indicate what actions are enabled and disabled.</p> - -<p><strong>Be responsive to touches in a gentle way</strong>. Whenever a user touches an -actionable area in your app, let them know the app is "listening" by providing a visual -response. Make it subtle —just slightly lighter or darker than the untouched color. This -provides two benefits:</p> - -<ul> -<li><a href="{@docRoot}design/get-started/principles.html#sprinkle-encouragement">Sprinkles -of encouragement</a> are more pleasant than jolts.</li> -<li>Incorporating <a href="{@docRoot}design/style/branding.html">your branding</a> is much -easier because the default touch feedback works with whatever hue you choose.</li> -</ul> - -</div> - -<div class="col-6" style="float:right;"> - <video class="play-on-hover" width="268" height="442" autoplay style="border:1px solid #ddd;background-color:#f9f9f9;" poster=""> - <source src="{@docRoot}design/media/touch_feedback.mp4" type="video/mp4"> - <source src="{@docRoot}design/media/touch_feedback.webm" type="video/webm"> - <source src="{@docRoot}design/media/touch_feedback.ogv" type="video/ogg"> - </video> - <div class="figure-caption"> - <div style="color:#a3a3a3;margin-left:130px;"><em>Click image to replay...</em></div> - </div> -</div> - -<h4 style="clear:both;">States</h4> - - -<div class="vspace size-1"> </div> - -<img src="{@docRoot}design/media/touch_feedback_states.png"> -<div class="figure-caption"> - Most of Android's UI elements have touch feedback built in, including - states that indicate whether touching the element will have any effect. -</div> - -<div class="vspace size-3"> </div> - -<div class="cols"> - <div class="col-6"> - - <h4>Communication</h4> -<p>When your objects react to more complex gestures, help users -understand what the outcome will be.</p> - -<p>In Recents, when a user starts swiping a thumbnail left or right, it -begins to dim. This helps the user understand that swiping will cause the -item to be removed.</p> - </div> - <div class="col-7"> - - <img src="{@docRoot}design/media/touch_feedback_manipulation.png"> - - </div> -</div> -<div class="vspace size-3"> </div> - -<div class="cols"> - <div class="col-6"> - - <img src="{@docRoot}design/media/touch_feedback_communication.png"> - <p><em>If a user attempts to scroll past the last home screen panel, the screen - content tilts to the right to indicate that further navigation in this direction - isn’t possible.</em></p> - - </div> - <div class="col-6"> - -<h4>Boundaries</h4> -<p> - When users try to scroll past the beginning or end of a scrollable area, - communicate the boundary with a visual cue. Many of Android's scrollable UI - widgets, like lists and grid lists, have support for boundary feedback built - in. If you’re building custom widgets, keep boundary feedback in mind and - provide it from within your app. -</p> |