96 lines
3.2 KiB
Plaintext
96 lines
3.2 KiB
Plaintext
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>
|