a97e177857
Conflicts: docs/html/design/patterns/accessibility.jd docs/html/design/patterns/actionbar.jd docs/html/design/patterns/compatibility.jd docs/html/design/patterns/multi-pane-layouts.jd docs/html/design/style/iconography.jd Change-Id: I349cf8ebc159c0a7ef0796900e2d11fe6e0c888a
92 lines
3.3 KiB
Plaintext
92 lines
3.3 KiB
Plaintext
page.title=Buttons
|
|
page.tags=button,input
|
|
@jd:body
|
|
|
|
<a class="notice-developers" href="{@docRoot}guide/topics/ui/controls/button.html">
|
|
<div>
|
|
<h3>Developer Docs</h3>
|
|
<p>Buttons</p>
|
|
</div>
|
|
</a>
|
|
|
|
<p itemprop="description">A button consists of text and/or an image that clearly communicates what action
|
|
will occur when the user touches it. A button can have an image, text, or both.
|
|
</p>
|
|
|
|
<div class="layout-content-row" style="margin-top:22px">
|
|
<div class="layout-content-col span-3">
|
|
<img src="{@docRoot}design/media/icon_magnifying_glass.png" style="height:64px;padding:20px 0 0 40px;">
|
|
</div>
|
|
<div class="layout-content-col span-3">
|
|
<img src="{@docRoot}design/media/buttons_text.png" style="height:94px;">
|
|
</div>
|
|
<div class="layout-content-col span-7">
|
|
<img src="{@docRoot}design/media/buttons_image_and_text.png" style="height:94px;">
|
|
</div>
|
|
</div>
|
|
|
|
<div class="layout-content-row" style="margin-top:0;">
|
|
<div class="layout-content-col span-3">
|
|
<p>An image alone works best when the action can be represented by a symbol that's well understood.</p>
|
|
</div>
|
|
<div class="layout-content-col span-3">
|
|
<p>Text alone is most appropriate for actions that would be difficult to
|
|
represent visually, or are critical to convey in words to avoid any ambiguity.</p>
|
|
</div>
|
|
<div class="layout-content-col span-7">
|
|
<p>
|
|
Both an icon and text is most appropriate when they complement each other:
|
|
each carrying its own bit of information, but together making a larger whole.
|
|
</p>
|
|
|
|
<p>
|
|
For example, in a birthday reminder card in Google Now, the button's text
|
|
describes the action while its image indicates that the action will be done
|
|
in Google+.
|
|
</p>
|
|
</div>
|
|
</div>
|
|
|
|
<h3>What about button backgrounds?</h3>
|
|
|
|
<div class="layout-content-row">
|
|
<div class="layout-content-col span-6">
|
|
<p>For <strong>image-only</strong> buttons, a background isn't necessary because
|
|
users are accustomed to interacting with objects.</p>
|
|
|
|
<div class="layout-content-row" style="margin-left:72px">
|
|
<div class="layout-content-col span-2">
|
|
<div class="do-dont-label bad emulate-content-left-padding" style="width:30px">Don't</div>
|
|
<img src="{@docRoot}design/media/buttons_image_bg_dont.png" style="padding-left:14px;">
|
|
</div>
|
|
<div class="layout-content-col span-2" style="width:29px;margin-left:10px;">
|
|
<div class="do-dont-label good"><strong>Do</strong></div>
|
|
<img src="{@docRoot}design/media/icon_alarm.png" style="width:31px;padding-top:7px;">
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="layout-content-col span-7">
|
|
<p>
|
|
For buttons <strong>with text</strong>, a background is also usually
|
|
unnecessary. To invite users to touch, phrase it as a clear action (e.g.
|
|
"Start", "Sign in") and use different color and formatting than the screen's
|
|
usual body text.
|
|
</p>
|
|
|
|
<p>
|
|
Use buttons with backgrounds sparingly. Because they have a heavy appearance,
|
|
they work best when there's only one or two of them on the screen. They're
|
|
most appropriate for:
|
|
</p>
|
|
|
|
<ul>
|
|
<li>A call to action you really want users to pursue (e.g. "Sign up")</li>
|
|
<li>A key decision point (e.g. "Accept" / "Decline")</li>
|
|
<li>When the user is about to commit a significant action (e.g. "Erase
|
|
everything", "Buy now")</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
|