</div>
</a>
-<p>A button consists of text and/or an image that clearly communicates what action will occur when the
-user touches it. Android supports two different types of buttons: <em>basic buttons</em> and <em>borderless
-buttons</em>. Both can contain text labels and/or images.</p>
+<p>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>
-<img src="{@docRoot}design/media/buttons_basic.png">
+<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>
-<h2 id="basic">Basic Buttons</h2>
+<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>
-<p>Basic buttons are traditional buttons with borders and background. Android supports two styles for
-basic buttons: default and small. Default buttons have slightly larger font size and are optimized
-for display outside of form content. Small buttons are intended for display alongside other content.
-They have a smaller font and smaller minimum height. Use small buttons in forms where they need to
-align with other UI elements.</p>
+<h3>What about button backgrounds?</h3>
-<img src="{@docRoot}design/media/buttons_default_small.png">
<div class="layout-content-row">
<div class="layout-content-col span-6">
- <div class="figure-caption">
- Default buttons in Holo Dark & Light.
- </div>
- </div>
- <div class="layout-content-col span-6">
- <div class="figure-caption">
- Small buttons in Holo Dark & Light.
+ <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>
-<h2 id="borderless">Borderless Buttons</h2>
+<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>Borderless buttons resemble basic buttons except that they have no borders or background. You can
-use borderless buttons with both icons and text. Borderless buttons are visually more lightweight
-than basic buttons and integrate nicely with other content.</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>
-<img src="{@docRoot}design/media/buttons_borderless.png">
+<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>
page.title=Downloads
+page tags="Icons", "stencils", "color swatches"
@jd:body
<div class="layout-content-row">
<p>
<a class="download-button" onClick="_gaq.push(['_trackEvent', 'Design', 'Download', 'All Design Assets']);"
- href="{@docRoot}downloads/design/Android_Design_Downloads_20130814.zip">Download All</a>
+ href="{@docRoot}downloads/design/Android_Design_Downloads_20131106.zip">Download All</a>
</p>
</div>
<div class="layout-content-row">
<div class="layout-content-col span-5">
-<p>Drag and drop your way to beautifully designed Ice Cream Sandwich apps. The stencils feature the
-rich typography, colors, interactive controls, and icons found throughout Android 4.0, along with
+<p>Drag and drop your way to beautifully designed Android apps. The stencils feature the
+rich typography, colors, interactive controls, and icons found throughout Android, along with
phone and tablet outlines to frame your creations. Source files for icons and controls are also
available.</p>
<div class="layout-content-col span-4">
<p>
- <a class="download-button" onClick="_gaq.push(['_trackEvent', 'Design', 'Download', 'Fireworks Stencil']);"
+ <!--<a class="download-button" onClick="_gaq.push(['_trackEvent', 'Design', 'Download', 'Fireworks Stencil']);"
href="{@docRoot}downloads/design/Android_Design_Fireworks_Stencil_20120814.png">Adobe® Fireworks® PNG Stencil</a>
<a class="download-button" onClick="_gaq.push(['_trackEvent', 'Design', 'Download', 'Illustrator Stencil']);"
href="{@docRoot}downloads/design/Android_Design_Illustrator_Vectors_20120814.ai">Adobe® Illustrator® Stencil</a>
<a class="download-button" onClick="_gaq.push(['_trackEvent', 'Design', 'Download', 'OmniGraffle Stencil']);"
- href="{@docRoot}downloads/design/Android_Design_OmniGraffle_Stencil_20120814.graffle">Omni® OmniGraffle® Stencil</a>
+ href="{@docRoot}downloads/design/Android_Design_OmniGraffle_Stencil_20120814.graffle">Omni® OmniGraffle® Stencil</a>-->
<a class="download-button" onClick="_gaq.push(['_trackEvent', 'Design', 'Download', 'Photoshop Sources']);"
- href="{@docRoot}downloads/design/Android_Design_Holo_Widgets_20120814.zip">Adobe® Photoshop® Sources</a>
+ href="{@docRoot}downloads/design/Android_Design_Stencils_Sources_20131106.zip">Adobe® Photoshop® Stencils and Sources</a>
</p>
</div>
<p>
<a class="download-button" onClick="_gaq.push(['_trackEvent', 'Design', 'Download', 'Action Bar Icons']);"
- href="{@docRoot}downloads/design/Android_Design_Icons_20130926.zip">Action Bar Icon Pack</a>
+ href="{@docRoot}downloads/design/Android_Design_Icons_20131106.zip">Action Bar Icon Pack</a>
</p>
</div>
<div class="layout-content-col span-5">
<h4>Color</h4>
-<p>Blue is the standard accent color in Android's color palette. Each color has a corresponding darker
+<p>In Android's color palette, each color has a corresponding darker
shade that can be used as a complement when needed.</p>
<p><a href="{@docRoot}design/style/color.html">More on Color</a></p>
<p>
<a onClick="_gaq.push(['_trackEvent', 'Design', 'Download', 'Action Bar Icons (@actionbar page)']);"
- href="{@docRoot}downloads/design/Android_Design_Icons_20130926.zip">Download the Action Bar Icon Pack</a>
+ href="{@docRoot}downloads/design/Android_Design_Icons_20131106.zip">Download the Action Bar Icon Pack</a>
</p>
--- /dev/null
+page.title=Buttons
+page.tags="buttons"
+@jd:body
+
+<p>
+ Some content is best experienced full screen, like videos, games, image
+ galleries, books, and slides in a presentation. You can engage users more
+ deeply with content in full screen by minimizing visual distraction from app
+ controls and protecting users from escaping the app accidentally.
+</p>
+
+<div style="margin:auto;padding:auto;text-align:center;">
+ <img src="{@docRoot}design/media/fullscreen_landing.png" style="margin:1em auto 2em auto;">
+</div>
+<p>
+ In version 4.4, Android offers two approaches for making your app go full
+ screen: Lean Back and Immersive. In both approaches, all persistent system
+ bars are hidden. The difference between them is how the user brings the bars
+ back into view.
+</p>
+
+<div class="layout-content-row">
+ <div class="layout-content-col span-6">
+ <h4>Lean Back</h4>
+ <p>Touch the screen anywhere to bring back system bars. </p>
+ <img src="{@docRoot}design/media/fullscreen_leanback.png" style="width:311px;">
+ </div>
+ <div class="layout-content-col span-6">
+ <h4>Immersive</h4>
+ <p>Swipe from the any edge of the screen with a hidden bar to bring back system bars. </p>
+ <img src="{@docRoot}design/media/fullscreen_immersive_swipe_bottom.png" style="width:160px;float:right">
+ <img src="{@docRoot}design/media/fullscreen_immersive_swipe_top.png" style="width:160px">
+ </div>
+</div>
+
+<h2 id="leanback">
+ Lean Back
+</h2>
+
+<p>
+ The Lean Back approach is for full-screen experiences in which users won't be
+ interacting heavily with the screen while consuming content, like while
+ watching a video.
+</p>
+
+<p>
+ In this type of experience, users are leaning back and watching the screen.
+ Then, when they need to bring back the bars, they simply touch anywhere. This
+ gesture is easy and intuitive.
+</p>
+
+ <img src="{@docRoot}design/media/fullscreen_leanback.png" style="width:311px;">
+
+<h2 id="immersive">
+ Immersive
+</h2>
+
+<p>
+ The Immersive approach is mainly intended for apps in which the user will be
+ heavily interacting with the full screen as part of the primary experience.
+ Examples are games, viewing images in a gallery, or reading paginated
+ content, like a book or slides in a presentation.
+</p>
+
+<p>
+ In this type of experience, when users need to bring back the system bars,
+ they swipe from any edge where a system bar is hidden. By requiring this more
+ deliberate gesture, the user's deep engagement with your app won't be
+ interrupted by accidental touches and swipes.
+</p>
+
+<div class="layout-content-row">
+ <div class="layout-content-col span-6">
+ <img src="{@docRoot}design/media/fullscreen_immersive_swipe_bottom.png" style="width:160px;float:right">
+ <img src="{@docRoot}design/media/fullscreen_immersive_swipe_top.png" style="width:160px">
+ </div>
+</div>
+
+<p>
+ The user learns about the gesture to bring back the system bars through a
+ message that appears the first time the app goes full screen.
+</p>
+
+<p>
+ If your app has its own controls that aren't needed when a user is immersed
+ in content, make them disappear and reappear in sync with the system bars.
+ This rule also applies to any app-specific gestures you might have for hiding
+ and showing app controls. For example, if touching anywhere on the screen
+ toggles the appearance of an action bar or a palette, then it must also
+ toggle the appearance of system bars.
+</p>
+
+<p>
+ You might be tempted to use this approach just to maximize screen real
+ estate. But be mindful of how often users jump in and out of apps to check
+ notifications, do impromptu searches, and more. This approach will cause
+ users to lose easy access to system navigation, so a little extra space
+ should not be the only benefit they're getting in return.
+</p>
+
+<h2 id="variation_using_edges">
+ Variation: Swiping from edges with bars also affects the app
+</h2>
+
+<p>
+ In the Immersive approach, any time a user swipes from an edge with a system
+ bar, the Android framework takes care of revealing the system bars. Your app
+ won't even be aware that this gesture occurred.
+</p>
+
+<p>
+ But in some apps, the user might occasionally need to swipe from the edge as
+ <strong>part of the primary app experience</strong>. Examples are games and
+ drawing applications.
+</p>
+
+<p>
+ For apps with this requirement, you can use a variation on the Immersive
+ approach: when a user swipes from an edge with a system bar, system bars are
+ shown and the gesture is passed to the app so the app can respond to the
+ gesture.
+</p>
+
+<p>
+ For example, in a drawing app that uses this approach, if a user wants to
+ draw a line that begins at the very edge of the screen, swiping from the edge
+ would reveal the system bars and also start drawing a line that begins at the
+ very edge.
+</p>
+
+<p>
+ In this approach, to minimize disruption while a user is deeply engaged in
+ the app, the system bars are semi-transparent. The bars automatically
+ disappear after a few seconds of no interaction or as soon as the user
+ touches or gestures anywhere outside the system bars.
+</p>
+
+<h2 id="lightsout">What About Lights Out Mode?</h2>
+
+<p>
+ Before Android 4.4, the design guideline was to use Lights Out mode, a mode
+ in which the Action Bar and Status Bar fades away and becomes unavailable
+ after a few seconds of inactivity. The Navigation Bar is still available and
+ responds to touches but appears dimmed.
+</p>
+
+<p>
+ Replace previous implementations of Lights Out mode with the Lean Back or
+ Immersive approaches. Continue to use Lights Out mode for implementations of
+ your app targeted for earlier releases.
+</p>
\ No newline at end of file
controls and protecting users from escaping the app accidentally.
</p>
+<div style="margin:auto;padding:auto;text-align:center;">
<img src="{@docRoot}design/media/fullscreen_landing.png" style="margin:1em auto 2em auto;">
-
+</div>
<p>
In version 4.4, Android offers two approaches for making your app go full
screen: Lean Back and Immersive. In both approaches, all persistent system
<div class="layout-content-col span-4">
<img src="{@docRoot}design/media/gesture_doubletouch.png">
<h4>Double touch </h4>
- <p>Scales up the smallest targetable view, if available, or scales a standard amount
- around the gesture. Also used as a secondary gesture for text selection.</p>
+ <p> Scales up a standard amount around the target with each repeated gesture until reaching
+ maximum scale. For nested views, scales up the smallest targetable view, or returns it to
+ its original scale. Also used as a secondary gesture for text selection.</p>
<ul>
<li class="no-bullet with-icon action">
<h4>Action</h4>
<div class="vspace size-1"> </div>
<div class="layout-content-row">
- <div class="layout-content-col span-6">
- <img src="{@docRoot}design/media/yourbranding_icon.png" style="width:60px;float:left;padding-right:1em;">
- <div class="figure-caption" style="widdth:220px;margin-left:20px;">
- The HowzAbout app uses a launcher icon that is a shortened version of its full logo.
+ <div class="layout-content-col span-6" style="padding-top:24px;">
+ <img src="{@docRoot}design/media/branding_launcher_icon.png" style="width:60px;float:left;padding-right:1em;">
+ <div class="figure-caption" style="width:290px;margin-left:20px;">
+ Google+ reinforces its brand by carrying its launcher icon through to the action bar.
</div>
-
+ <img src="{@docRoot}design/media/branding_logo_icon_action_bar.png" style="width:320px;float:left;padding-right:1em;">
</div>
<div class="layout-content-col span-6">
- <img src="{@docRoot}design/media/yourbranding_app.png" style="width:94%">
- <div class="figure-caption">
+ <img src="{@docRoot}design/media/yourbranding_app.png" style="width:320px;">
+ <div class="figure-caption" style="width:320px;">
Example of a the logo in the action bar. This works well in cases where the brand's logo matches the name of the app.
</div>
</div>
</div>
<div class="layout-content-col span-6">
- <img src="{@docRoot}design/media/yourbranding_in-app-icons.png" style="width:300px;margin:12px 48px 0 16px;"">
+ <img src="{@docRoot}design/media/yourbranding_in-app-icons.png" style="width:300px;margin:12px 48px 0 16px;">
</div>
</div>
</div>
<div style="margin-bottom:1em;">
<span class="do-dont-label bad" style="margin-left:12px">Don't</span>
- <span style="margin-left: 44px;" class="do-dont-label good"><strong>Do</strong></span>
+ <span style="margin-left: 64px;" class="do-dont-label good"><strong>Do</strong></span>
</div>
- <img src="{@docRoot}design/media/yourbranding_sharing.png" style="width:200px;">
+ <img src="{@docRoot}design/media/yourbranding_sharing.png" style="width:180px;">
</div>
</div>
</p>
<p>
<a onClick="_gaq.push(['_trackEvent', 'Design', 'Download', 'Action Bar Icons (@iconography page)']);"
- href="{@docRoot}downloads/design/Android_Design_Icons_20130926.zip">Download the Action Bar Icon Pack</a>
+ href="{@docRoot}downloads/design/Android_Design_Icons_20131106.zip">Download the Action Bar Icon Pack</a>
</p>
<div class="layout-content-row">
<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>Whenever a user touches an actionable area in your app, provide a subtle visual response.
-This lets the user know which object was touched and that your app is "listening".</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
easier because the default touch feedback works with whatever hue you choose.</li>
</ul>
- </div>
-
- <div class="layout-content-col span-6" style="float:right;">
-
- <!-- <div class="framed-nexus5-port-span-5">
- <video class="play-on-hover" autoplay>
- <source src="{@docRoot}design/media/calendar.mp4" type="video/mp4">
- <source src="{@docRoot}design/media/calendar.webm" type="video/webm">
- <source src="{@docRoot}design/media/calendar.ogv" type="video/ogg">
- </video>
- </div>
- <div class="figure-caption" style="margin-top:0">
- <div class="video-instructions"> </div>
- </div>
- </div> -->
-
-
- <div class="layout-content-col span-6">
-
- <img src="{@docRoot}design/media/touch_feedback_reaction_response.png">
+</div>
+<div class="layout-content-col span-6" style="float:right;">
+ <video poster="{@docRoot}design/media/touch_feedback_thumb.png" class="play-on-hover" width="270" autoplay style="border:1px solid #ddd;">
+ <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>
<a href="" class="slideshow-next">Next</a>
<div class="frame">
<ul>
+ <!-- set explicit widths as needed to prevent overflow issues -->
<li class="item carousel-home">
- <div class="content-left col-7">
- <a href="/about/versions/kitkat.html"><img src="/images/home/kk-hero.jpg" style="width:242px;padding-top:72px;"></a>
- </div>
- <div class="content-right col-6">
+ <div class="content-left col-7" style="width:400px;">
+ <a href="{@docRoot}about/versions/kitkat.html">
+ <img src="{@docRoot}images/home/kk-hero.jpg" width="242" style="padding-top:72px;">
+ </a>
+ </div>
+ <div class="content-right col-4" style="width:340px;">
<h1>Android 4.4 KitKat!</h1>
<p>A new version of Android is here, with great new features, APIs, and tools for developers.</p>
<p>Android 4.4 is built to run on more devices than ever before, and gives you more ways to showcase your content and create beautiful, useful, and innovative apps.</p>
<p>Learn about what's new in the Platform Highlights and see the API Overview for details.</p>
- <p><a href="/about/versions/kitkat.html" class="button">Check out the highlights</a></p>
- </div>
+ <p><a href="{@docRoot}about/versions/kitkat.html" class="button">Check out the highlights</a></p>
+ </div>
</li>
<li class="item carousel-home">
- <div class="content-left col-11" style="padding-top:65px;">
- <a href="https://www.youtube.com/watch?v=sONcojECWXs&list=PLWz5rJ2EKKc-2quE-o0enpILZF3nBZg_K&index=1">
- <img src="/images/title-devbytes-kk.jpg" style="margin-top:22px;width:600px;">
- </a>
- </div>
-
- <div class="content-right col-4">
+ <div class="content-left col-11" style="padding-top:65px;">
+ <a href="https://www.youtube.com/watch?v=sONcojECWXs&list=PLWz5rJ2EKKc-2quE-o0enpILZF3nBZg_K&index=1">
+ <img src="{@docRoot}images/title-devbytes-kk.jpg" style="margin-top:0px;width:600px;">
+ </a>
+ </div>
+ <div class="content-right col-4">
<h1 style="white-space:nowrap;line-height:1.2em;">DevBytes: <br />Android 4.4</h1>
<p>Join the DevBytes team for a look at what's new in Android 4.4 KitKat — new ways to make your apps beautiful, printing, storage access framework, and more.</p>
<p><a href="https://www.youtube.com/watch?v=sONcojECWXs&list=PLWz5rJ2EKKc-2quE-o0enpILZF3nBZg_K&index=1" class="button">Watch the video </a></p>
- </div>
+ </div>
</li>
-
<li class="item carousel-home">
- <div class="content-left col-10"><a href="/design/patterns/new.html">
- <img src="/design/media/design_elements_landing.png" style="margin-top:30px">
- </a>
- </div>
- <div class="content-right col-5">
+ <div class="content-left col-19" style="width:580px;">
+ <a href="{@docRoot}design/patterns/new.html">
+ <img src="{@docRoot}design/media/design_elements_landing.png" style="margin-top:30px">
+ </a>
+ </div>
+ <div class="content-right col-4" style="width:280px;">
<h1>Design for Android KitKat</h1>
<p>Android KitKat brings a refreshed UI with updated styles, patterns, and gestures to use in your apps. </p>
<p>We've updated the Android Design guidelines and added new pages on branding, fullscreen, and more. </p>
- <p><a href="/design/patterns/new.html" class="button">See what's new</a></p>
- </div>
+ <p><a href="{@docRoot}design/patterns/new.html" class="button">See what's new</a></p>
+ </div>
</li>
- <!--<li class="item carousel-home">
- <div class="content-left col-11" style="padding-top:65px;">
- <a href="http://www.youtube.com/watch?v=6QHkv-bSlds&list=PLWz5rJ2EKKc8j2B95zGMb8muZvrIy-wcF&index=1">
- <img src="/images/title-adia-kk.png" style="margin-top:22px;width:600px;">
- </a>
- </div>
-
- <div class="content-right col-4">
+ <li class="item carousel-home">
+ <div class="content-left col-11" style="padding-top:65px;">
+ <a href="http://www.youtube.com/watch?v=6QHkv-bSlds&list=PLWz5rJ2EKKc8j2B95zGMb8muZvrIy-wcF&index=1">
+ <img src="{@docRoot}images/title-adia-kk.png" style="margin-top:0px;width:600px;">
+ </a>
+ </div>
+ <div class="content-right col-4">
<h1 style="white-space:nowrap;line-height:1.2em;">ADIA: <br />Android 4.4</h1>
</p>Join the Android Design in Action team for a walkthrough of new developer features, UX changes, and updates to design guidelines in Android 4.4.</p>
<p><a href="http://www.youtube.com/watch?v=6QHkv-bSlds&list=PLWz5rJ2EKKc8j2B95zGMb8muZvrIy-wcF&index=1" class="button">Watch the video </a></p>
- </div>
- </li> -->
- <!-- <li class="item carousel-home">
- <div class="content-left col-11" style="padding-top:10px;">
- <a href="/channels/io2013.html">
- <img src="/images/home/io-videos-2013.png" style="margin:60px 0 0;
- box-shadow: 3px 10px 18px 1px #999;">
- </a>
- </div>
- <div class="content-right col-4">
- <h1>Hands-on with New KitKat Features</h1>
- <p>If you weren't able to attend Google I/O in person or couldn't make it
- to all the talks, you can catch up on the action
- with all the recordings, brought to you by
- <a href="http://developers.google.com/live">Google Developers Live</a>.</p>
- <p><a href="/channels/io2013.html" class="button"
- >See the Android talks</a></p>
- </div>
- </li> -->
+ </div>
+ </li>
</ul>
</div>
</div>
OSDN Git Service
