docs/html/design/building-blocks/buttons.jd

   1 page.title=Buttons
   2 page.tags=button,input
   3 @jd:body
   4
   5 <a class="notice-developers" href="{@docRoot}guide/topics/ui/controls/button.html">
   6   <div>
   7     <h3>Developer Docs</h3>
   8     <p>Buttons</p>
   9   </div>
  10 </a>
  11
  12 <p itemprop="description">A button consists of text and/or an image that clearly communicates what action
  13   will occur when the user touches it. A button can have an image, text, or both.
  14 </p>
  15
  16 <div class="layout-content-row" style="margin-top:22px">
  17   <div class="layout-content-col span-3">
  18     <img src="{@docRoot}design/media/icon_magnifying_glass.png" style="height:64px;padding:20px 0 0 40px;">
  19   </div>
  20   <div class="layout-content-col span-3">
  21     <img src="{@docRoot}design/media/buttons_text.png"  style="height:94px;">
  22   </div>
  23   <div class="layout-content-col span-7">
  24     <img src="{@docRoot}design/media/buttons_image_and_text.png"  style="height:94px;">
  25   </div>
  26 </div>
  27
  28 <div class="layout-content-row" style="margin-top:0;">
  29   <div class="layout-content-col span-3">
  30       <p>An image alone works best when the action can be represented by a symbol that's well understood.</p>
  31   </div>
  32   <div class="layout-content-col span-3">
  33       <p>Text alone is most appropriate for actions that would be difficult to
  34       represent visually, or are critical to convey in words to avoid any ambiguity.</p>
  35   </div>
  36   <div class="layout-content-col span-7">
  37     <p>
  38       Both an icon and text is most appropriate when they complement each other:
  39       each carrying its own bit of information, but together making a larger whole.
  40     </p>
  41
  42     <p>
  43       For example, in a birthday reminder card in Google Now, the button's text
  44       describes the action while its image indicates that the action will be done
  45       in Google+.
  46     </p>
  47   </div>
  48 </div>
  49
  50 <h3>What about button backgrounds?</h3>
  51
  52 <div class="layout-content-row">
  53   <div class="layout-content-col span-6">
  54     <p>For <strong>image-only</strong> buttons, a background isn't necessary because
  55     users are accustomed to interacting with objects.</p>
  56
  57     <div class="layout-content-row" style="margin-left:72px">
  58       <div class="layout-content-col span-2">
  59         <div class="do-dont-label bad emulate-content-left-padding" style="width:30px">Don't</div>
  60         <img src="{@docRoot}design/media/buttons_image_bg_dont.png" style="padding-left:14px;">
  61       </div>
  62       <div class="layout-content-col span-2" style="width:29px;margin-left:10px;">
  63         <div class="do-dont-label good"><strong>Do</strong></div>
  64         <img src="{@docRoot}design/media/icon_alarm.png" style="width:31px;padding-top:7px;">
  65       </div>
  66     </div>
  67   </div>
  68
  69 <div class="layout-content-col span-7">
  70 <p>
  71   For buttons <strong>with text</strong>, a background is also usually
  72   unnecessary. To invite users to touch, phrase it as a clear action (e.g.
  73   "Start", "Sign in") and use different color and formatting than the screen's
  74   usual body text.
  75 </p>
  76
  77 <p>
  78   Use buttons with backgrounds sparingly. Because they have a heavy appearance,
  79   they work best when there's only one or two of them on the screen. They're
  80   most appropriate for:
  81 </p>
  82
  83 <ul>
  84   <li>A call to action you really want users to pursue (e.g. "Sign up")</li>
  85   <li>A key decision point (e.g. "Accept" / "Decline")</li>
  86   <li>When the user is about to commit a significant action (e.g. "Erase
  87   everything", "Buy now")</li>
  88 </ul>
  89 </div>
  90 </div>
  91