diff options
Diffstat (limited to 'docs/html/design/building-blocks/buttons.jd')
-rw-r--r-- | docs/html/design/building-blocks/buttons.jd | 99 |
1 files changed, 0 insertions, 99 deletions
diff --git a/docs/html/design/building-blocks/buttons.jd b/docs/html/design/building-blocks/buttons.jd deleted file mode 100644 index e698f38..0000000 --- a/docs/html/design/building-blocks/buttons.jd +++ /dev/null @@ -1,99 +0,0 @@ -page.title=Buttons -page.tags=button,input -@jd:body - -<a class="notice-designers-material" - href="http://www.google.com/design/spec/components/buttons.html"> - <div> - <h3>Material Design</h3> - <p>Buttons<p> - </div> -</a> - -<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> - |