diff options
Diffstat (limited to 'docs/html/design/style')
| -rw-r--r-- | docs/html/design/style/color.html | 291 | ||||
| -rw-r--r-- | docs/html/design/style/devices-displays.html | 198 | ||||
| -rw-r--r-- | docs/html/design/style/iconography.html | 476 | ||||
| -rw-r--r-- | docs/html/design/style/index.html | 171 | ||||
| -rw-r--r-- | docs/html/design/style/metrics-grids.html | 214 | ||||
| -rw-r--r-- | docs/html/design/style/themes.html | 195 | ||||
| -rw-r--r-- | docs/html/design/style/touch-feedback.html | 220 | ||||
| -rw-r--r-- | docs/html/design/style/typography.html | 210 | ||||
| -rw-r--r-- | docs/html/design/style/writing.html | 483 |
9 files changed, 2458 insertions, 0 deletions
diff --git a/docs/html/design/style/color.html b/docs/html/design/style/color.html new file mode 100644 index 0000000..893e09e --- /dev/null +++ b/docs/html/design/style/color.html @@ -0,0 +1,291 @@ +<!DOCTYPE html> +<html lang="en"> + <head> + <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> + <title> + +Android Design - Color + </title> + <link rel="shortcut icon" type="image/x-icon" href="/favicon.ico"> + <link rel="stylesheet" href="http://fonts.googleapis.com/css?family=Roboto:regular,medium,thin,italic,mediumitalic"> + <link rel="stylesheet" href="../static/yui-3.3.0-reset-min.css"> + <link rel="stylesheet" href="../static/default.css"> + +<style> + .color-row { + width: 740px; + margin-left: 10px !important; + margin-right: 10px !important; + + display: box; + display: -webkit-box; + display: -moz-box; + + box-orient: horizontal; + -webkit-box-orient: horizontal; + -moz-box-orient: horizontal; + + cursor: pointer; + + user-select: none; + -webkit-user-select: none; + /* nested user-select in FF is broken as of Jan 2012, don't use it */ + } + + .color-row-container { + line-height: 0; /* to remove more top space in FF for -moz-box elements */ + } + + .color-row-container + .color-row-container { + margin-top: -10px !important; + } + + .color-row li { + margin-left: 0 !important; + position: relative; + list-style-type: none; + height: 80px; + display: block; + + box-flex: 1; + -webkit-box-flex: 1; + -moz-box-flex: 1; + } + + .color-row li:before { + display: none; + } + + .color-row li.thin { + height: 40px; + } + + .color-row li span { + display: none; + position: absolute; + top: -30px; + left: 50%; + margin-left: -2.5em; + width: 5em; + background-color: #fff; + padding: 10px; + font-weight: 600; + line-height: 20px; + text-align: center; + box-shadow: 0 5px 5px rgba(0,0,0,0.1); + cursor: text; + + user-select: text; + -webkit-user-select: text; + /* nested user-select in FF is broken as of Jan 2012, don't use it */ + } + + .color-row li:hover span { + display: block; + } + + /*.color-row li span:before { + color: #999; + content: 'copy '; + }*/ + + /* triangle callout */ + .color-row li span:after { + content: ''; + display: block; + position: absolute; + left: 50%; + bottom: -16px; + border: 8px solid transparent; + border-top-color: #fff; + width: 0; + height: 0; + margin-left: -8px; + } +</style> + + </head> + <body> + + <div id="page-container"> + + <div id="page-header"><a href="../index.html">Android Design</a></div> + + <div id="main-row"> + + <ul id="nav"> + + <li class="nav-section"> + <div class="nav-section-header"><a href="../index.html">Get Started</a></div> + <ul> + <li><a href="../get-started/creative-vision.html">Creative Vision</a></li> + <li><a href="../get-started/principles.html">Design Principles</a></li> + <li><a href="../get-started/ui-overview.html">UI Overview</a></li> + </ul> + </li> + + <li class="nav-section"> + <div class="nav-section-header"><a href="../style/index.html">Style</a></div> + <ul> + <li><a href="../style/devices-displays.html">Devices and Displays</a></li> + <li><a href="../style/themes.html">Themes</a></li> + <li><a href="../style/touch-feedback.html">Touch Feedback</a></li> + <li><a href="../style/metrics-grids.html">Metrics and Grids</a></li> + <li><a href="../style/typography.html">Typography</a></li> + <li><a href="../style/color.html">Color</a></li> + <li><a href="../style/iconography.html">Iconography</a></li> + <li><a href="../style/writing.html">Writing Style</a></li> + </ul> + </li> + + <li class="nav-section"> + <div class="nav-section-header"><a href="../patterns/index.html">Patterns</a></div> + <ul> + <li><a href="../patterns/new-4-0.html">New in Android 4.0</a></li> + <li><a href="../patterns/gestures.html">Gestures</a></li> + <li><a href="../patterns/app-structure.html">App Structure</a></li> + <li><a href="../patterns/navigation.html">Navigation</a></li> + <li><a href="../patterns/actionbar.html">Action Bar</a></li> + <li><a href="../patterns/multi-pane-layouts.html">Multi-pane Layouts</a></li> + <li><a href="../patterns/swipe-views.html">Swipe Views</a></li> + <li><a href="../patterns/selection.html">Selection</a></li> + <li><a href="../patterns/notifications.html">Notifications</a></li> + <li><a href="../patterns/compatibility.html">Compatibility</a></li> + <li><a href="../patterns/pure-android.html">Pure Android</a></li> + </ul> + </li> + + <li class="nav-section"> + <div class="nav-section-header"><a href="../building-blocks/index.html">Building Blocks</a></div> + <ul> + <li><a href="../building-blocks/tabs.html">Tabs</a></li> + <li><a href="../building-blocks/lists.html">Lists</a></li> + <li><a href="../building-blocks/grid-lists.html">Grid Lists</a></li> + <li><a href="../building-blocks/scrolling.html">Scrolling</a></li> + <li><a href="../building-blocks/spinners.html">Spinners</a></li> + <li><a href="../building-blocks/buttons.html">Buttons</a></li> + <li><a href="../building-blocks/text-fields.html">Text Fields</a></li> + <li><a href="../building-blocks/seek-bars.html">Seek Bars</a></li> + <li><a href="../building-blocks/progress.html">Progress & Activity</a></li> + <li><a href="../building-blocks/switches.html">Switches</a></li> + <li><a href="../building-blocks/dialogs.html">Dialogs</a></li> + <li><a href="../building-blocks/pickers.html">Pickers</a></li> + </ul> + </li> + + <li> + <div id="back-dac-section"><a href="../../index.html">Developers</a></div> + </li> + + </ul> + + <div id="content"> + + + <div class="layout-content-row content-header"> + <div class="layout-content-col span-9"> + <h2>Color</h2> + </div> + <div class="paging-links layout-content-col span-4"> + <a href="#" class="prev-page-link">Previous</a> + <a href="#" class="next-page-link">Next</a> + </div> + </div> + + + + +<p>Use color primarily for emphasis. Choose colors that fit with your brand and provide good contrast +between visual components. Note that red and green may be indistinguishable to color-blind users.</p> + + <div class="color-row-container"> + <ul class="color-row"> + <li><span>#33b5e5</span></li> + <li><span>#aa66cc</span></li> + <li><span>#99cc00</span></li> + <li><span>#ffbb33</span></li> + <li><span>#ff4444</span></li> + </ul> + </div> + + <div class="color-row-container"> + <ul class="color-row"> + <li class="thin"><span>#0099cc</span></li> + <li class="thin"><span>#9933cc</span></li> + <li class="thin"><span>#669900</span></li> + <li class="thin"><span>#ff8800</span></li> + <li class="thin"><span>#cc0000</span></li> + </ul> + </div> + +<h2>Palette</h2> +<p>Blue is the standard accent color 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="../static/download/color_swatches.zip">Download the swatches</a></p> + +<img src="../static/content/color_spectrum.png"> + + + + + <div class="layout-content-row content-footer"> + <div class="paging-links layout-content-col span-9"> </div> + <div class="paging-links layout-content-col span-4"> + <a href="#" class="prev-page-link">Previous</a> + <a href="#" class="next-page-link">Next</a> + </div> + </div> + + </div> + + </div> + + <div id="page-footer"> + + <p id="copyright"> + Except as noted, this content is licensed under + <a href="http://creativecommons.org/licenses/by/2.5/"> + Creative Commons Attribution 2.5</a>.<br> + For details and restrictions, see the + <a href="http://developer.android.com/license.html">Content License</a>. + </p> + + <p> + <a href="http://www.android.com/terms.html">Site Terms of Service</a> – + <a href="http://www.android.com/privacy.html">Privacy Policy</a> – + <a href="http://www.android.com/branding.html">Brand Guidelines</a> + </p> + + </div> + </div> + + <script src="../static/jquery-1.6.2.min.js"></script> + <script> + var SITE_ROOT = '../'; + </script> + <script src="../static/default.js"></script> + +<script> + $(document).ready(function() { + $('.color-row li').each(function() { + var color = $(this).text(); + $(this).css('background-color', color); + $(this).find('span') + .css('color', color) + .text(color.toUpperCase()); + }); + + }); +</script> + + + <script type="text/javascript"> + var gaJsHost = (("https:" == document.location.protocol) ? "https://ssl." : "http://www."); + document.write(unescape("%3Cscript src='" + gaJsHost + "google-analytics.com/ga.js' type='text/javascript'%3E%3C/script%3E")); + </script> + <script type="text/javascript"> + var pageTracker = _gat._getTracker("UA-5831155-1"); + pageTracker._trackPageview(); + </script> + </body> +</html> diff --git a/docs/html/design/style/devices-displays.html b/docs/html/design/style/devices-displays.html new file mode 100644 index 0000000..9fba719 --- /dev/null +++ b/docs/html/design/style/devices-displays.html @@ -0,0 +1,198 @@ +<!DOCTYPE html> +<html lang="en"> + <head> + <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> + <title> + +Android Design - Devices and Displays + </title> + <link rel="shortcut icon" type="image/x-icon" href="/favicon.ico"> + <link rel="stylesheet" href="http://fonts.googleapis.com/css?family=Roboto:regular,medium,thin,italic,mediumitalic"> + <link rel="stylesheet" href="../static/yui-3.3.0-reset-min.css"> + <link rel="stylesheet" href="../static/default.css"> + + </head> + <body> + + <div id="page-container"> + + <div id="page-header"><a href="../index.html">Android Design</a></div> + + <div id="main-row"> + + <ul id="nav"> + + <li class="nav-section"> + <div class="nav-section-header"><a href="../index.html">Get Started</a></div> + <ul> + <li><a href="../get-started/creative-vision.html">Creative Vision</a></li> + <li><a href="../get-started/principles.html">Design Principles</a></li> + <li><a href="../get-started/ui-overview.html">UI Overview</a></li> + </ul> + </li> + + <li class="nav-section"> + <div class="nav-section-header"><a href="../style/index.html">Style</a></div> + <ul> + <li><a href="../style/devices-displays.html">Devices and Displays</a></li> + <li><a href="../style/themes.html">Themes</a></li> + <li><a href="../style/touch-feedback.html">Touch Feedback</a></li> + <li><a href="../style/metrics-grids.html">Metrics and Grids</a></li> + <li><a href="../style/typography.html">Typography</a></li> + <li><a href="../style/color.html">Color</a></li> + <li><a href="../style/iconography.html">Iconography</a></li> + <li><a href="../style/writing.html">Writing Style</a></li> + </ul> + </li> + + <li class="nav-section"> + <div class="nav-section-header"><a href="../patterns/index.html">Patterns</a></div> + <ul> + <li><a href="../patterns/new-4-0.html">New in Android 4.0</a></li> + <li><a href="../patterns/gestures.html">Gestures</a></li> + <li><a href="../patterns/app-structure.html">App Structure</a></li> + <li><a href="../patterns/navigation.html">Navigation</a></li> + <li><a href="../patterns/actionbar.html">Action Bar</a></li> + <li><a href="../patterns/multi-pane-layouts.html">Multi-pane Layouts</a></li> + <li><a href="../patterns/swipe-views.html">Swipe Views</a></li> + <li><a href="../patterns/selection.html">Selection</a></li> + <li><a href="../patterns/notifications.html">Notifications</a></li> + <li><a href="../patterns/compatibility.html">Compatibility</a></li> + <li><a href="../patterns/pure-android.html">Pure Android</a></li> + </ul> + </li> + + <li class="nav-section"> + <div class="nav-section-header"><a href="../building-blocks/index.html">Building Blocks</a></div> + <ul> + <li><a href="../building-blocks/tabs.html">Tabs</a></li> + <li><a href="../building-blocks/lists.html">Lists</a></li> + <li><a href="../building-blocks/grid-lists.html">Grid Lists</a></li> + <li><a href="../building-blocks/scrolling.html">Scrolling</a></li> + <li><a href="../building-blocks/spinners.html">Spinners</a></li> + <li><a href="../building-blocks/buttons.html">Buttons</a></li> + <li><a href="../building-blocks/text-fields.html">Text Fields</a></li> + <li><a href="../building-blocks/seek-bars.html">Seek Bars</a></li> + <li><a href="../building-blocks/progress.html">Progress & Activity</a></li> + <li><a href="../building-blocks/switches.html">Switches</a></li> + <li><a href="../building-blocks/dialogs.html">Dialogs</a></li> + <li><a href="../building-blocks/pickers.html">Pickers</a></li> + </ul> + </li> + + <li> + <div id="back-dac-section"><a href="../../index.html">Developers</a></div> + </li> + + </ul> + + <div id="content"> + + + <div class="layout-content-row content-header"> + <div class="layout-content-col span-9"> + <h2>Devices and Displays</h2> + </div> + <div class="paging-links layout-content-col span-4"> + <a href="#" class="prev-page-link">Previous</a> + <a href="#" class="next-page-link">Next</a> + </div> + </div> + + + + +<p>Android powers millions of phones, tablets, and other devices in a wide variety of screen sizes and +form factors. By taking advantage of Android's flexible layout system, you can create apps that +gracefully scale from large tablets to smaller phones.</p> + +<img src="../static/content/devices_displays_main.png"> + +<div class="vspace size-2"> </div> + +<div class="layout-content-row"> + <div class="layout-content-col span-4"> + +<h4>Be flexible</h4> +<p>Stretch and compress your layouts to accommodate various heights and widths.</p> + + </div> + <div class="layout-content-col span-5"> + +<h4>Optimize layouts</h4> +<p>On larger devices, take advantage of extra screen real estate. Create compound views that combine +multiple views to reveal more content and ease navigation.</p> + + </div> + <div class="layout-content-col span-4"> + +<h4>Assets for all</h4> +<p>Provide resources for different screen densities (<acronym title="Dots per inch">DPI</acronym>) to +ensure that your app looks great on any device.</p> + + </div> +</div> + +<div style="text-align:center"> + <img src="../static/content/devices_displays_density.png"> +</div> + +<h4>Strategies</h4> +<p>So where do you begin when designing for multiple screens? One approach is to work in the base +standard (medium size, <acronym title="Medium density (160 dpi)">MDPI</acronym>) and scale it up or +down for the other buckets. Another approach is to start with the device with the largest screen +size, and then scale down and figure out the UI compromises you'll need to make on smaller screens.</p> +<p>For more detailed information on this topic, please visit <a href="http://developer.android.com/guide/practices/screens_support.html">Supporting Multiple +Screens</a>.</p> + + + + + <div class="layout-content-row content-footer"> + <div class="paging-links layout-content-col span-9"> </div> + <div class="paging-links layout-content-col span-4"> + <a href="#" class="prev-page-link">Previous</a> + <a href="#" class="next-page-link">Next</a> + </div> + </div> + + </div> + + </div> + + <div id="page-footer"> + + <p id="copyright"> + Except as noted, this content is licensed under + <a href="http://creativecommons.org/licenses/by/2.5/"> + Creative Commons Attribution 2.5</a>.<br> + For details and restrictions, see the + <a href="http://developer.android.com/license.html">Content License</a>. + </p> + + <p> + <a href="http://www.android.com/terms.html">Site Terms of Service</a> – + <a href="http://www.android.com/privacy.html">Privacy Policy</a> – + <a href="http://www.android.com/branding.html">Brand Guidelines</a> + </p> + + </div> + </div> + + <script src="../static/jquery-1.6.2.min.js"></script> + <script> + var SITE_ROOT = '../'; + </script> + <script src="../static/default.js"></script> + + + <script type="text/javascript"> + var gaJsHost = (("https:" == document.location.protocol) ? "https://ssl." : "http://www."); + document.write(unescape("%3Cscript src='" + gaJsHost + "google-analytics.com/ga.js' type='text/javascript'%3E%3C/script%3E")); + </script> + <script type="text/javascript"> + var pageTracker = _gat._getTracker("UA-5831155-1"); + pageTracker._trackPageview(); + </script> + </body> +</html> diff --git a/docs/html/design/style/iconography.html b/docs/html/design/style/iconography.html new file mode 100644 index 0000000..663770b --- /dev/null +++ b/docs/html/design/style/iconography.html @@ -0,0 +1,476 @@ +<!DOCTYPE html> +<html lang="en"> + <head> + <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> + <title> + +Android Design - Iconography + </title> + <link rel="shortcut icon" type="image/x-icon" href="/favicon.ico"> + <link rel="stylesheet" href="http://fonts.googleapis.com/css?family=Roboto:regular,medium,thin,italic,mediumitalic"> + <link rel="stylesheet" href="../static/yui-3.3.0-reset-min.css"> + <link rel="stylesheet" href="../static/default.css"> + + </head> + <body> + + <div id="page-container"> + + <div id="page-header"><a href="../index.html">Android Design</a></div> + + <div id="main-row"> + + <ul id="nav"> + + <li class="nav-section"> + <div class="nav-section-header"><a href="../index.html">Get Started</a></div> + <ul> + <li><a href="../get-started/creative-vision.html">Creative Vision</a></li> + <li><a href="../get-started/principles.html">Design Principles</a></li> + <li><a href="../get-started/ui-overview.html">UI Overview</a></li> + </ul> + </li> + + <li class="nav-section"> + <div class="nav-section-header"><a href="../style/index.html">Style</a></div> + <ul> + <li><a href="../style/devices-displays.html">Devices and Displays</a></li> + <li><a href="../style/themes.html">Themes</a></li> + <li><a href="../style/touch-feedback.html">Touch Feedback</a></li> + <li><a href="../style/metrics-grids.html">Metrics and Grids</a></li> + <li><a href="../style/typography.html">Typography</a></li> + <li><a href="../style/color.html">Color</a></li> + <li><a href="../style/iconography.html">Iconography</a></li> + <li><a href="../style/writing.html">Writing Style</a></li> + </ul> + </li> + + <li class="nav-section"> + <div class="nav-section-header"><a href="../patterns/index.html">Patterns</a></div> + <ul> + <li><a href="../patterns/new-4-0.html">New in Android 4.0</a></li> + <li><a href="../patterns/gestures.html">Gestures</a></li> + <li><a href="../patterns/app-structure.html">App Structure</a></li> + <li><a href="../patterns/navigation.html">Navigation</a></li> + <li><a href="../patterns/actionbar.html">Action Bar</a></li> + <li><a href="../patterns/multi-pane-layouts.html">Multi-pane Layouts</a></li> + <li><a href="../patterns/swipe-views.html">Swipe Views</a></li> + <li><a href="../patterns/selection.html">Selection</a></li> + <li><a href="../patterns/notifications.html">Notifications</a></li> + <li><a href="../patterns/compatibility.html">Compatibility</a></li> + <li><a href="../patterns/pure-android.html">Pure Android</a></li> + </ul> + </li> + + <li class="nav-section"> + <div class="nav-section-header"><a href="../building-blocks/index.html">Building Blocks</a></div> + <ul> + <li><a href="../building-blocks/tabs.html">Tabs</a></li> + <li><a href="../building-blocks/lists.html">Lists</a></li> + <li><a href="../building-blocks/grid-lists.html">Grid Lists</a></li> + <li><a href="../building-blocks/scrolling.html">Scrolling</a></li> + <li><a href="../building-blocks/spinners.html">Spinners</a></li> + <li><a href="../building-blocks/buttons.html">Buttons</a></li> + <li><a href="../building-blocks/text-fields.html">Text Fields</a></li> + <li><a href="../building-blocks/seek-bars.html">Seek Bars</a></li> + <li><a href="../building-blocks/progress.html">Progress & Activity</a></li> + <li><a href="../building-blocks/switches.html">Switches</a></li> + <li><a href="../building-blocks/dialogs.html">Dialogs</a></li> + <li><a href="../building-blocks/pickers.html">Pickers</a></li> + </ul> + </li> + + <li> + <div id="back-dac-section"><a href="../../index.html">Developers</a></div> + </li> + + </ul> + + <div id="content"> + + + <div class="layout-content-row content-header"> + <div class="layout-content-col span-9"> + <h2>Iconography</h2> + </div> + <div class="paging-links layout-content-col span-4"> + <a href="#" class="prev-page-link">Previous</a> + <a href="#" class="next-page-link">Next</a> + </div> + </div> + + + + +<img src="../static/content/iconography_overview.png"> + +<p>An icon is a graphic that takes up a small portion of screen real estate and provides a quick, +intuitive representation of an action, a status, or an app.</p> + + + +<h2 id="launcher">Launcher</h2> + +<p>The launcher icon is the visual representation of your app on the Home or All Apps screen. Since the +user can change the Home screen's wallpaper, make sure that your launcher icon is clearly visible on +any type of background.</p> + +<div class="layout-content-row"> + <div class="layout-content-col span-4"> + + <img src="../static/content/iconography_launcher_size.png"> + + </div> + <div class="layout-content-col span-4"> + + <img src="../static/content/iconography_launcher_focal.png"> + + </div> + <div class="layout-content-col span-4"> + + <img src="../static/content/iconography_launcher_style.png"> + + </div> +</div> + +<div class="layout-content-row"> + <div class="layout-content-col span-4"> + + <h4>Sizes & scale</h4> + + <ul> + <li class="no-bullet with-icon tablet"> + <p>Launcher icons on a mobile device must be <strong>48x48 <acronym title="Density-independent pixels. One dp is one pixel on a 160 dpi screen.">dp</acronym></strong>.</p></li> + <li class="no-bullet with-icon web"> + <p>Launcher icons for display in Market must be <strong>512x512 pixels</strong>.</p></li> + </ul> + + </div> + <div class="layout-content-col span-4"> + + <h4>Proportions</h4> + + <ul> + <li class="no-bullet with-icon tablet"> + <p>Full asset, <strong>48x48 dp</strong></p> + </li> + </ul> + + </div> + <div class="layout-content-col span-4"> + +<h4>Style</h4> +<p>Use a distinct silhouette. Three-dimensional, front view, with a slight perspective as if viewed +from above, so that users perceive some depth.</p> + + </div> +</div> + + +<div class="layout-content-row"> + <div class="layout-content-col span-4"> + + </div> + <div class="layout-content-col span-7"> + + <img src="../static/content/iconography_launcher_example.png"> + + </div> + <!-- 2 free columns --> +</div> + +<div class="layout-content-row"> + <div class="layout-content-col span-12"> + + <img src="../static/content/iconography_launcher_example2.png"> + + <div class="vspace size-2"> </div> + + </div> + <!-- 1 free columns --> +</div> + + +<h2 id="actionbar">Action Bar</h2> + +<p>Action bar icons are graphic buttons that represent the most important actions people can take +within your app. Each one should employ a simple metaphor representing a single concept that most +people can grasp at a glance.</p> + + +<div class="layout-content-row"> + <div class="layout-content-col span-4"> + + <img src="../static/content/iconography_actionbar_size.png"> + + </div> + <div class="layout-content-col span-4"> + + <img src="../static/content/iconography_actionbar_focal.png"> + + </div> + <div class="layout-content-col span-4"> + + <img src="../static/content/iconography_actionbar_style.png"> + + </div> +</div> + +<div class="layout-content-row"> + <div class="layout-content-col span-4"> + + <h4>Sizes & scale</h4> + + <ul> + <li class="no-bullet with-icon tablet"> + <p>Action bar icons for phones should be <strong>32x32 <acronym title="Density-independent pixels. One dp is one pixel on a 160 dpi screen.">dp</acronym></strong>.</p></li> + </ul> + + </div> + <div class="layout-content-col span-4"> + + <h4>Focal area & proportions</h4> + + <ul> + <li class="no-bullet with-icon tablet"> + <p>Full asset, <strong>32x32 dp</strong></p> + <p>Optical square, <strong>24x24 dp</strong></p> + </li> + </ul> + + </div> + <div class="layout-content-col span-4"> + +<h4>Style</h4> +<p>Pictographic, flat, not too detailed, with smooth curves or sharp shapes. If the graphic is thin, +rotate it 45° left or right to fill the focal space. The thickness of the strokes and negative +spaces should be a minimum of 2 dp.</p> + + </div> +</div> + + +<div class="layout-content-row"> + <div class="layout-content-col span-3"> + +<h4>Colors</h4> +<p>Colors: <strong>#333333</strong><br /> +Enabled: <strong>60%</strong> opacity<br /> +Disabled: <strong>30%</strong> opacity</p> +<div class="vspace size-1"> </div> + +<p>Colors: <strong>#FFFFFF</strong><br /> +Enabled: <strong>80%</strong> opacity<br /> +Disabled: <strong>30%</strong> opacity</p> + + </div> + <div class="layout-content-col span-9"> + + <img src="../static/content/iconography_actionbar_colors.png"> + + </div> +</div> + + +<h2 id="small_contextual">Small / Contextual Icons</h2> + +<p>Within the body of your app, use small icons to surface actions and/or provide status for specific +items. For example, in the Gmail app, each message has a star icon that marks the message as +important.</p> + + +<div class="layout-content-row"> + <div class="layout-content-col span-4"> + + <img src="../static/content/iconography_small_size.png"> + + </div> + <div class="layout-content-col span-4"> + + <img src="../static/content/iconography_small_focal.png"> + + </div> + <div class="layout-content-col span-4"> + + <img src="../static/content/iconography_small_style.png"> + + </div> +</div> + +<div class="layout-content-row"> + <div class="layout-content-col span-4"> + + <h4>Sizes & scale</h4> + + <ul> + <li class="no-bullet with-icon tablet"> + <p>Small icons should be <strong>16x16 <acronym title="Density-independent pixels. One dp is one pixel on a 160 dpi screen.">dp</acronym></strong>.</p></li> + </ul> + + </div> + <div class="layout-content-col span-4"> + + <h4>Focal area & proportions</h4> + + <ul> + <li class="no-bullet with-icon tablet"> + <p>Full asset, <strong>16x16 dp</strong></p> + <p>Optical square, <strong>12x12 dp</strong></p> + </li> + </ul> + + </div> + <div class="layout-content-col span-4"> + +<h4>Style</h4> +<p>Neutral, flat, and simple. Filled shapes are easier to see than thin strokes. Use a single visual +metaphor so that a user can easily recognize and understand its purpose.</p> + + </div> +</div> + + +<div class="layout-content-row"> + <div class="layout-content-col span-4"> + + <img src="../static/content/iconography_small_colors.png"> + + <div class="vspace size-2"> </div> + +<h4>Colors</h4> +<p>Use non-neutral colors sparingly and with purpose. For example, Gmail uses yellow in the star icon +to indicate a bookmarked message. If an icon is actionable, choose a color that contrasts well with +the background.</p> + + </div> + <div class="layout-content-col span-7"> + + <img src="../static/content/iconography_small_example.png"> + + </div> + <!-- 2 free columns --> +</div> + + +<h2 id="notification">Notification Icons</h2> + +<p>If your app generates notifications, provide an icon that the system can display in the status bar +whenever a new notification is available.</p> + + +<div class="layout-content-row"> + <div class="layout-content-col span-4"> + + <img src="../static/content/iconography_notification_size.png"> + + </div> + <div class="layout-content-col span-4"> + + <img src="../static/content/iconography_notification_focal.png"> + + </div> + <div class="layout-content-col span-4"> + + <img src="../static/content/iconography_notification_style.png"> + + </div> +</div> + +<div class="layout-content-row"> + <div class="layout-content-col span-4"> + + <h4>Sizes & scale</h4> + + <ul> + <li class="no-bullet with-icon tablet"> + <p>Notification icons must be <strong>24x24 <acronym title="Density-independent pixels. One dp is one pixel on a 160 dpi screen.">dp</acronym></strong>.</p></li> + </ul> + + </div> + <div class="layout-content-col span-4"> + + <h4>Focal area & proportions</h4> + + <ul> + <li class="no-bullet with-icon tablet"> + <p>Full asset, <strong>24x24 dp</strong></p> + <p>Optical square, <strong>22x22 dp</strong></p> + </li> + </ul> + + </div> + <div class="layout-content-col span-4"> + +<h4>Style</h4> +<p>Keep the style flat and simple, using the same single, visual metaphor as your launcher icon.</p> + + </div> +</div> + + +<div class="layout-content-row"> + <div class="layout-content-col span-4"> + +<h4>Colors</h4> +<p>Notification icons must be entirely white. Also, the system may scale down and/or darken the icons.</p> + + </div> + <div class="layout-content-col span-7"> + + <img src="../static/content/iconography_notification_example.png"> + + </div> + <!-- 2 free columns --> +</div> + + + + + <div class="layout-content-row content-footer"> + <div class="paging-links layout-content-col span-9"> </div> + <div class="paging-links layout-content-col span-4"> + <a href="#" class="prev-page-link">Previous</a> + <a href="#" class="next-page-link">Next</a> + </div> + </div> + + </div> + + </div> + + <div id="page-footer"> + + <p id="copyright"> + Except as noted, this content is licensed under + <a href="http://creativecommons.org/licenses/by/2.5/"> + Creative Commons Attribution 2.5</a>.<br> + For details and restrictions, see the + <a href="http://developer.android.com/license.html">Content License</a>. + </p> + + <p> + <a href="http://www.android.com/terms.html">Site Terms of Service</a> – + <a href="http://www.android.com/privacy.html">Privacy Policy</a> – + <a href="http://www.android.com/branding.html">Brand Guidelines</a> + </p> + + </div> + </div> + + <script src="../static/jquery-1.6.2.min.js"></script> + <script> + var SITE_ROOT = '../'; + </script> + <script src="../static/default.js"></script> + + + <script type="text/javascript"> + var gaJsHost = (("https:" == document.location.protocol) ? "https://ssl." : "http://www."); + document.write(unescape("%3Cscript src='" + gaJsHost + "google-analytics.com/ga.js' type='text/javascript'%3E%3C/script%3E")); + </script> + <script type="text/javascript"> + var pageTracker = _gat._getTracker("UA-5831155-1"); + pageTracker._trackPageview(); + </script> + </body> +</html> diff --git a/docs/html/design/style/index.html b/docs/html/design/style/index.html new file mode 100644 index 0000000..5ecbafa --- /dev/null +++ b/docs/html/design/style/index.html @@ -0,0 +1,171 @@ +<!DOCTYPE html> +<html lang="en"> + <head> + <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> + <title> + +Android Design - Design Elements + </title> + <link rel="shortcut icon" type="image/x-icon" href="/favicon.ico"> + <link rel="stylesheet" href="http://fonts.googleapis.com/css?family=Roboto:regular,medium,thin,italic,mediumitalic"> + <link rel="stylesheet" href="../static/yui-3.3.0-reset-min.css"> + <link rel="stylesheet" href="../static/default.css"> + +<style> +#landing-graphic-container { + position: relative; +} + +#text-overlay { + position: absolute; + left: 10px; + top: 402px; + width: 220px; +} +</style> + + </head> + <body> + + <div id="page-container"> + + <div id="page-header"><a href="../index.html">Android Design</a></div> + + <div id="main-row"> + + <ul id="nav"> + + <li class="nav-section"> + <div class="nav-section-header"><a href="../index.html">Get Started</a></div> + <ul> + <li><a href="../get-started/creative-vision.html">Creative Vision</a></li> + <li><a href="../get-started/principles.html">Design Principles</a></li> + <li><a href="../get-started/ui-overview.html">UI Overview</a></li> + </ul> + </li> + + <li class="nav-section"> + <div class="nav-section-header"><a href="../style/index.html">Style</a></div> + <ul> + <li><a href="../style/devices-displays.html">Devices and Displays</a></li> + <li><a href="../style/themes.html">Themes</a></li> + <li><a href="../style/touch-feedback.html">Touch Feedback</a></li> + <li><a href="../style/metrics-grids.html">Metrics and Grids</a></li> + <li><a href="../style/typography.html">Typography</a></li> + <li><a href="../style/color.html">Color</a></li> + <li><a href="../style/iconography.html">Iconography</a></li> + <li><a href="../style/writing.html">Writing Style</a></li> + </ul> + </li> + + <li class="nav-section"> + <div class="nav-section-header"><a href="../patterns/index.html">Patterns</a></div> + <ul> + <li><a href="../patterns/new-4-0.html">New in Android 4.0</a></li> + <li><a href="../patterns/gestures.html">Gestures</a></li> + <li><a href="../patterns/app-structure.html">App Structure</a></li> + <li><a href="../patterns/navigation.html">Navigation</a></li> + <li><a href="../patterns/actionbar.html">Action Bar</a></li> + <li><a href="../patterns/multi-pane-layouts.html">Multi-pane Layouts</a></li> + <li><a href="../patterns/swipe-views.html">Swipe Views</a></li> + <li><a href="../patterns/selection.html">Selection</a></li> + <li><a href="../patterns/notifications.html">Notifications</a></li> + <li><a href="../patterns/compatibility.html">Compatibility</a></li> + <li><a href="../patterns/pure-android.html">Pure Android</a></li> + </ul> + </li> + + <li class="nav-section"> + <div class="nav-section-header"><a href="../building-blocks/index.html">Building Blocks</a></div> + <ul> + <li><a href="../building-blocks/tabs.html">Tabs</a></li> + <li><a href="../building-blocks/lists.html">Lists</a></li> + <li><a href="../building-blocks/grid-lists.html">Grid Lists</a></li> + <li><a href="../building-blocks/scrolling.html">Scrolling</a></li> + <li><a href="../building-blocks/spinners.html">Spinners</a></li> + <li><a href="../building-blocks/buttons.html">Buttons</a></li> + <li><a href="../building-blocks/text-fields.html">Text Fields</a></li> + <li><a href="../building-blocks/seek-bars.html">Seek Bars</a></li> + <li><a href="../building-blocks/progress.html">Progress & Activity</a></li> + <li><a href="../building-blocks/switches.html">Switches</a></li> + <li><a href="../building-blocks/dialogs.html">Dialogs</a></li> + <li><a href="../building-blocks/pickers.html">Pickers</a></li> + </ul> + </li> + + <li> + <div id="back-dac-section"><a href="../../index.html">Developers</a></div> + </li> + + </ul> + + <div id="content"> + + +<div class="layout-content-row content-header just-links"> + <div class="layout-content-col span-9"> </div> + <div class="paging-links layout-content-col span-4"> + <a href="#" class="prev-page-link">Previous</a> + <a href="#" class="next-page-link">Next</a> + </div> +</div> + + + + +<div id="landing-graphic-container"> + <div id="text-overlay"> + Build visually compelling apps that look great on any device. + <br><br> + <a href="../style/devices-displays.html" class="landing-page-link">Devices and Displays</a> + </div> + + <a href="../style/devices-displays.html"> + <img src="../static/content/design_elements_landing.png"> + </a> +</div> + + + + + + </div> + + </div> + + <div id="page-footer"> + + <p id="copyright"> + Except as noted, this content is licensed under + <a href="http://creativecommons.org/licenses/by/2.5/"> + Creative Commons Attribution 2.5</a>.<br> + For details and restrictions, see the + <a href="http://developer.android.com/license.html">Content License</a>. + </p> + + <p> + <a href="http://www.android.com/terms.html">Site Terms of Service</a> – + <a href="http://www.android.com/privacy.html">Privacy Policy</a> – + <a href="http://www.android.com/branding.html">Brand Guidelines</a> + </p> + + </div> + </div> + + <script src="../static/jquery-1.6.2.min.js"></script> + <script> + var SITE_ROOT = '../'; + </script> + <script src="../static/default.js"></script> + + + <script type="text/javascript"> + var gaJsHost = (("https:" == document.location.protocol) ? "https://ssl." : "http://www."); + document.write(unescape("%3Cscript src='" + gaJsHost + "google-analytics.com/ga.js' type='text/javascript'%3E%3C/script%3E")); + </script> + <script type="text/javascript"> + var pageTracker = _gat._getTracker("UA-5831155-1"); + pageTracker._trackPageview(); + </script> + </body> +</html> diff --git a/docs/html/design/style/metrics-grids.html b/docs/html/design/style/metrics-grids.html new file mode 100644 index 0000000..17d4937 --- /dev/null +++ b/docs/html/design/style/metrics-grids.html @@ -0,0 +1,214 @@ +<!DOCTYPE html> +<html lang="en"> + <head> + <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> + <title> + +Android Design - Metrics and Grids + </title> + <link rel="shortcut icon" type="image/x-icon" href="/favicon.ico"> + <link rel="stylesheet" href="http://fonts.googleapis.com/css?family=Roboto:regular,medium,thin,italic,mediumitalic"> + <link rel="stylesheet" href="../static/yui-3.3.0-reset-min.css"> + <link rel="stylesheet" href="../static/default.css"> + + </head> + <body> + + <div id="page-container"> + + <div id="page-header"><a href="../index.html">Android Design</a></div> + + <div id="main-row"> + + <ul id="nav"> + + <li class="nav-section"> + <div class="nav-section-header"><a href="../index.html">Get Started</a></div> + <ul> + <li><a href="../get-started/creative-vision.html">Creative Vision</a></li> + <li><a href="../get-started/principles.html">Design Principles</a></li> + <li><a href="../get-started/ui-overview.html">UI Overview</a></li> + </ul> + </li> + + <li class="nav-section"> + <div class="nav-section-header"><a href="../style/index.html">Style</a></div> + <ul> + <li><a href="../style/devices-displays.html">Devices and Displays</a></li> + <li><a href="../style/themes.html">Themes</a></li> + <li><a href="../style/touch-feedback.html">Touch Feedback</a></li> + <li><a href="../style/metrics-grids.html">Metrics and Grids</a></li> + <li><a href="../style/typography.html">Typography</a></li> + <li><a href="../style/color.html">Color</a></li> + <li><a href="../style/iconography.html">Iconography</a></li> + <li><a href="../style/writing.html">Writing Style</a></li> + </ul> + </li> + + <li class="nav-section"> + <div class="nav-section-header"><a href="../patterns/index.html">Patterns</a></div> + <ul> + <li><a href="../patterns/new-4-0.html">New in Android 4.0</a></li> + <li><a href="../patterns/gestures.html">Gestures</a></li> + <li><a href="../patterns/app-structure.html">App Structure</a></li> + <li><a href="../patterns/navigation.html">Navigation</a></li> + <li><a href="../patterns/actionbar.html">Action Bar</a></li> + <li><a href="../patterns/multi-pane-layouts.html">Multi-pane Layouts</a></li> + <li><a href="../patterns/swipe-views.html">Swipe Views</a></li> + <li><a href="../patterns/selection.html">Selection</a></li> + <li><a href="../patterns/notifications.html">Notifications</a></li> + <li><a href="../patterns/compatibility.html">Compatibility</a></li> + <li><a href="../patterns/pure-android.html">Pure Android</a></li> + </ul> + </li> + + <li class="nav-section"> + <div class="nav-section-header"><a href="../building-blocks/index.html">Building Blocks</a></div> + <ul> + <li><a href="../building-blocks/tabs.html">Tabs</a></li> + <li><a href="../building-blocks/lists.html">Lists</a></li> + <li><a href="../building-blocks/grid-lists.html">Grid Lists</a></li> + <li><a href="../building-blocks/scrolling.html">Scrolling</a></li> + <li><a href="../building-blocks/spinners.html">Spinners</a></li> + <li><a href="../building-blocks/buttons.html">Buttons</a></li> + <li><a href="../building-blocks/text-fields.html">Text Fields</a></li> + <li><a href="../building-blocks/seek-bars.html">Seek Bars</a></li> + <li><a href="../building-blocks/progress.html">Progress & Activity</a></li> + <li><a href="../building-blocks/switches.html">Switches</a></li> + <li><a href="../building-blocks/dialogs.html">Dialogs</a></li> + <li><a href="../building-blocks/pickers.html">Pickers</a></li> + </ul> + </li> + + <li> + <div id="back-dac-section"><a href="../../index.html">Developers</a></div> + </li> + + </ul> + + <div id="content"> + + + <div class="layout-content-row content-header"> + <div class="layout-content-col span-9"> + <h2>Metrics and Grids</h2> + </div> + <div class="paging-links layout-content-col span-4"> + <a href="#" class="prev-page-link">Previous</a> + <a href="#" class="next-page-link">Next</a> + </div> + </div> + + + + +<p>Devices vary not only in physical size, but also in screen density (<acronym title="Dots per +inch">DPI</acronym>). To simplify the way you design for multiple screens, think of each device as +falling into a particular size bucket and density bucket. The size buckets are <em>handset</em> (smaller than +600<acronym title="Density-independent pixels. One dp is one pixel on a 160 dpi +screen.">dp</acronym>) and <em>tablet</em> (larger than or equal 600dp). The density buckets are <acronym +title="Low density (120 dpi)">LDPI</acronym>, <acronym title="Medium density (160 +dpi)">MDPI</acronym>, <acronym title="High density (240 dpi)">HDPI</acronym>, and <acronym title +="Extra-high density (320 dpi)">XHDPI</acronym>. Optimize your application's UI by designing +alternative layouts for some of the different size buckets, and provide alternative bitmap images +for different density buckets.</p> + +<div class="layout-content-row"> + <div class="layout-content-col span-8"> + + <img src="../static/content/metrics_diagram.png"> + + </div> + <div class="layout-content-col span-5"> + +<h4>Space considerations</h4> +<p>Devices vary in the amount of density-independent pixels (dp) they can display.</p> +<p>To see more, visit the +<a href="http://developer.android.com/resources/dashboard/screens.html" target="_blank"> +Screen Sizes and Densities Device Dashboard</a>.</p> + + </div> +</div> + +<h2>48dp Rhythm</h2> + +<p>Touchable UI components are generally laid out along 48dp units.</p> + +<img src="../static/content/metrics_48.png"> + +<div class="vspace size-2"> </div> + +<h4>Why 48dp?</h4> +<p>On average, 48dp translate to a physical size of about 9mm (with some variability). This is +comfortably in the range of recommended target sizes (7-10 mm) for touchscreen objects and users +will be able to reliably and accurately target them with their fingers.</p> +<p>If you design your elements to be at least 48dp high and wide you can guarantee that:</p> +<ul> +<li>your targets will never be smaller than the minimum recommended target size of 7mm regardless of + what screen they are displayed on.</li> +<li>you strike a good compromise between overall information density on the one hand, and + targetability of UI elements on the other.</li> +</ul> + +<img src="../static/content/metrics_closeup.png"> + +<div class="vspace size-2"> </div> + +<h4>Mind the gaps</h4> +<p>Spacing between each UI element is 8dp.</p> + +<h2>Examples</h2> + +<img src="../static/content/metrics_forms.png"> + + + + + <div class="layout-content-row content-footer"> + <div class="paging-links layout-content-col span-9"> </div> + <div class="paging-links layout-content-col span-4"> + <a href="#" class="prev-page-link">Previous</a> + <a href="#" class="next-page-link">Next</a> + </div> + </div> + + </div> + + </div> + + <div id="page-footer"> + + <p id="copyright"> + Except as noted, this content is licensed under + <a href="http://creativecommons.org/licenses/by/2.5/"> + Creative Commons Attribution 2.5</a>.<br> + For details and restrictions, see the + <a href="http://developer.android.com/license.html">Content License</a>. + </p> + + <p> + <a href="http://www.android.com/terms.html">Site Terms of Service</a> – + <a href="http://www.android.com/privacy.html">Privacy Policy</a> – + <a href="http://www.android.com/branding.html">Brand Guidelines</a> + </p> + + </div> + </div> + + <script src="../static/jquery-1.6.2.min.js"></script> + <script> + var SITE_ROOT = '../'; + </script> + <script src="../static/default.js"></script> + + + <script type="text/javascript"> + var gaJsHost = (("https:" == document.location.protocol) ? "https://ssl." : "http://www."); + document.write(unescape("%3Cscript src='" + gaJsHost + "google-analytics.com/ga.js' type='text/javascript'%3E%3C/script%3E")); + </script> + <script type="text/javascript"> + var pageTracker = _gat._getTracker("UA-5831155-1"); + pageTracker._trackPageview(); + </script> + </body> +</html> diff --git a/docs/html/design/style/themes.html b/docs/html/design/style/themes.html new file mode 100644 index 0000000..ada974d --- /dev/null +++ b/docs/html/design/style/themes.html @@ -0,0 +1,195 @@ +<!DOCTYPE html> +<html lang="en"> + <head> + <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> + <title> + +Android Design - Themes + </title> + <link rel="shortcut icon" type="image/x-icon" href="/favicon.ico"> + <link rel="stylesheet" href="http://fonts.googleapis.com/css?family=Roboto:regular,medium,thin,italic,mediumitalic"> + <link rel="stylesheet" href="../static/yui-3.3.0-reset-min.css"> + <link rel="stylesheet" href="../static/default.css"> + + </head> + <body> + + <div id="page-container"> + + <div id="page-header"><a href="../index.html">Android Design</a></div> + + <div id="main-row"> + + <ul id="nav"> + + <li class="nav-section"> + <div class="nav-section-header"><a href="../index.html">Get Started</a></div> + <ul> + <li><a href="../get-started/creative-vision.html">Creative Vision</a></li> + <li><a href="../get-started/principles.html">Design Principles</a></li> + <li><a href="../get-started/ui-overview.html">UI Overview</a></li> + </ul> + </li> + + <li class="nav-section"> + <div class="nav-section-header"><a href="../style/index.html">Style</a></div> + <ul> + <li><a href="../style/devices-displays.html">Devices and Displays</a></li> + <li><a href="../style/themes.html">Themes</a></li> + <li><a href="../style/touch-feedback.html">Touch Feedback</a></li> + <li><a href="../style/metrics-grids.html">Metrics and Grids</a></li> + <li><a href="../style/typography.html">Typography</a></li> + <li><a href="../style/color.html">Color</a></li> + <li><a href="../style/iconography.html">Iconography</a></li> + <li><a href="../style/writing.html">Writing Style</a></li> + </ul> + </li> + + <li class="nav-section"> + <div class="nav-section-header"><a href="../patterns/index.html">Patterns</a></div> + <ul> + <li><a href="../patterns/new-4-0.html">New in Android 4.0</a></li> + <li><a href="../patterns/gestures.html">Gestures</a></li> + <li><a href="../patterns/app-structure.html">App Structure</a></li> + <li><a href="../patterns/navigation.html">Navigation</a></li> + <li><a href="../patterns/actionbar.html">Action Bar</a></li> + <li><a href="../patterns/multi-pane-layouts.html">Multi-pane Layouts</a></li> + <li><a href="../patterns/swipe-views.html">Swipe Views</a></li> + <li><a href="../patterns/selection.html">Selection</a></li> + <li><a href="../patterns/notifications.html">Notifications</a></li> + <li><a href="../patterns/compatibility.html">Compatibility</a></li> + <li><a href="../patterns/pure-android.html">Pure Android</a></li> + </ul> + </li> + + <li class="nav-section"> + <div class="nav-section-header"><a href="../building-blocks/index.html">Building Blocks</a></div> + <ul> + <li><a href="../building-blocks/tabs.html">Tabs</a></li> + <li><a href="../building-blocks/lists.html">Lists</a></li> + <li><a href="../building-blocks/grid-lists.html">Grid Lists</a></li> + <li><a href="../building-blocks/scrolling.html">Scrolling</a></li> + <li><a href="../building-blocks/spinners.html">Spinners</a></li> + <li><a href="../building-blocks/buttons.html">Buttons</a></li> + <li><a href="../building-blocks/text-fields.html">Text Fields</a></li> + <li><a href="../building-blocks/seek-bars.html">Seek Bars</a></li> + <li><a href="../building-blocks/progress.html">Progress & Activity</a></li> + <li><a href="../building-blocks/switches.html">Switches</a></li> + <li><a href="../building-blocks/dialogs.html">Dialogs</a></li> + <li><a href="../building-blocks/pickers.html">Pickers</a></li> + </ul> + </li> + + <li> + <div id="back-dac-section"><a href="../../index.html">Developers</a></div> + </li> + + </ul> + + <div id="content"> + + + <div class="layout-content-row content-header"> + <div class="layout-content-col span-9"> + <h2>Themes</h2> + </div> + <div class="paging-links layout-content-col span-4"> + <a href="#" class="prev-page-link">Previous</a> + <a href="#" class="next-page-link">Next</a> + </div> + </div> + + + + +<div class="layout-content-row"> + <div class="layout-content-col span-5"> + + <img src="../static/content/themes_holo_light.png"> + <div class="figure-caption"> + Gmail in Holo Light. + </div> + + <img src="../static/content/themes_holo_dark.png"> + <div class="figure-caption"> + Settings in Holo Dark. + </div> + + <img src="../static/content/themes_holo_inverse.png"> + <div class="figure-caption"> + Talk in Holo Light with dark action bar. + </div> + + </div> + <div class="layout-content-col span-7"> + +<p>Themes are Android's mechanism for applying a consistent style to an app or activity. The style +specifies the visual properties of the elements that make up your user interface, such as color, +height, padding and font size. To promote greater cohesion between all apps on the platform, Android +provides three system themes that you can choose from when building apps for Ice Cream Sandwich:</p> +<ul> +<li>Holo Light</li> +<li>Holo Dark</li> +<li>Holo Light with dark action bars</li> +</ul> +<p>Applying these themes will go a long way in helping you to build apps that fit right into the +general visual language of Android.</p> +<p>Pick the system theme that best matches the needs and design aesthetics for your app. If your +desire is to have a more distinct look for your app, using one of the system themes as a starting +point for your customizations is a good idea. The system themes provide a solid foundation on top +of which you can selectively implement your own visual stylings.</p> + + </div> +</div> + + + + + <div class="layout-content-row content-footer"> + <div class="paging-links layout-content-col span-9"> </div> + <div class="paging-links layout-content-col span-4"> + <a href="#" class="prev-page-link">Previous</a> + <a href="#" class="next-page-link">Next</a> + </div> + </div> + + </div> + + </div> + + <div id="page-footer"> + + <p id="copyright"> + Except as noted, this content is licensed under + <a href="http://creativecommons.org/licenses/by/2.5/"> + Creative Commons Attribution 2.5</a>.<br> + For details and restrictions, see the + <a href="http://developer.android.com/license.html">Content License</a>. + </p> + + <p> + <a href="http://www.android.com/terms.html">Site Terms of Service</a> – + <a href="http://www.android.com/privacy.html">Privacy Policy</a> – + <a href="http://www.android.com/branding.html">Brand Guidelines</a> + </p> + + </div> + </div> + + <script src="../static/jquery-1.6.2.min.js"></script> + <script> + var SITE_ROOT = '../'; + </script> + <script src="../static/default.js"></script> + + + <script type="text/javascript"> + var gaJsHost = (("https:" == document.location.protocol) ? "https://ssl." : "http://www."); + document.write(unescape("%3Cscript src='" + gaJsHost + "google-analytics.com/ga.js' type='text/javascript'%3E%3C/script%3E")); + </script> + <script type="text/javascript"> + var pageTracker = _gat._getTracker("UA-5831155-1"); + pageTracker._trackPageview(); + </script> + </body> +</html> diff --git a/docs/html/design/style/touch-feedback.html b/docs/html/design/style/touch-feedback.html new file mode 100644 index 0000000..0d49832 --- /dev/null +++ b/docs/html/design/style/touch-feedback.html @@ -0,0 +1,220 @@ +<!DOCTYPE html> +<html lang="en"> + <head> + <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> + <title> + +Android Design - Touch Feedback + </title> + <link rel="shortcut icon" type="image/x-icon" href="/favicon.ico"> + <link rel="stylesheet" href="http://fonts.googleapis.com/css?family=Roboto:regular,medium,thin,italic,mediumitalic"> + <link rel="stylesheet" href="../static/yui-3.3.0-reset-min.css"> + <link rel="stylesheet" href="../static/default.css"> + + </head> + <body> + + <div id="page-container"> + + <div id="page-header"><a href="../index.html">Android Design</a></div> + + <div id="main-row"> + + <ul id="nav"> + + <li class="nav-section"> + <div class="nav-section-header"><a href="../index.html">Get Started</a></div> + <ul> + <li><a href="../get-started/creative-vision.html">Creative Vision</a></li> + <li><a href="../get-started/principles.html">Design Principles</a></li> + <li><a href="../get-started/ui-overview.html">UI Overview</a></li> + </ul> + </li> + + <li class="nav-section"> + <div class="nav-section-header"><a href="../style/index.html">Style</a></div> + <ul> + <li><a href="../style/devices-displays.html">Devices and Displays</a></li> + <li><a href="../style/themes.html">Themes</a></li> + <li><a href="../style/touch-feedback.html">Touch Feedback</a></li> + <li><a href="../style/metrics-grids.html">Metrics and Grids</a></li> + <li><a href="../style/typography.html">Typography</a></li> + <li><a href="../style/color.html">Color</a></li> + <li><a href="../style/iconography.html">Iconography</a></li> + <li><a href="../style/writing.html">Writing Style</a></li> + </ul> + </li> + + <li class="nav-section"> + <div class="nav-section-header"><a href="../patterns/index.html">Patterns</a></div> + <ul> + <li><a href="../patterns/new-4-0.html">New in Android 4.0</a></li> + <li><a href="../patterns/gestures.html">Gestures</a></li> + <li><a href="../patterns/app-structure.html">App Structure</a></li> + <li><a href="../patterns/navigation.html">Navigation</a></li> + <li><a href="../patterns/actionbar.html">Action Bar</a></li> + <li><a href="../patterns/multi-pane-layouts.html">Multi-pane Layouts</a></li> + <li><a href="../patterns/swipe-views.html">Swipe Views</a></li> + <li><a href="../patterns/selection.html">Selection</a></li> + <li><a href="../patterns/notifications.html">Notifications</a></li> + <li><a href="../patterns/compatibility.html">Compatibility</a></li> + <li><a href="../patterns/pure-android.html">Pure Android</a></li> + </ul> + </li> + + <li class="nav-section"> + <div class="nav-section-header"><a href="../building-blocks/index.html">Building Blocks</a></div> + <ul> + <li><a href="../building-blocks/tabs.html">Tabs</a></li> + <li><a href="../building-blocks/lists.html">Lists</a></li> + <li><a href="../building-blocks/grid-lists.html">Grid Lists</a></li> + <li><a href="../building-blocks/scrolling.html">Scrolling</a></li> + <li><a href="../building-blocks/spinners.html">Spinners</a></li> + <li><a href="../building-blocks/buttons.html">Buttons</a></li> + <li><a href="../building-blocks/text-fields.html">Text Fields</a></li> + <li><a href="../building-blocks/seek-bars.html">Seek Bars</a></li> + <li><a href="../building-blocks/progress.html">Progress & Activity</a></li> + <li><a href="../building-blocks/switches.html">Switches</a></li> + <li><a href="../building-blocks/dialogs.html">Dialogs</a></li> + <li><a href="../building-blocks/pickers.html">Pickers</a></li> + </ul> + </li> + + <li> + <div id="back-dac-section"><a href="../../index.html">Developers</a></div> + </li> + + </ul> + + <div id="content"> + + + <div class="layout-content-row content-header"> + <div class="layout-content-col span-9"> + <h2>Touch Feedback</h2> + </div> + <div class="paging-links layout-content-col span-4"> + <a href="#" class="prev-page-link">Previous</a> + <a href="#" class="next-page-link">Next</a> + </div> + </div> + + + + +<div class="layout-content-row" style="margin-bottom: -100px"> + <div class="layout-content-col span-7"> + +<p>Use color and illumination 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 visual response. This lets the +user know which object was touched and that your app is "listening".</p> + + </div> + <div class="layout-content-col span-6"> + + <img src="../static/content/touch_feedback_reaction_response.png"> + + </div> +</div> + +<h4>States</h4> + +<div class="vspace size-1"> </div> + +<img src="../static/content/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-4"> </div> + +<div class="layout-content-row"> + <div class="layout-content-col span-4"> + +<h4>Communication</h4> +<p>When your objects react to more complex gestures, help users understand what the outcome of the +operation will be. For example, in Recents, when you start swiping a thumbnail left or right, it +starts to dim. This helps the user understand that swiping will cause the item to be removed.</p> + + </div> + <div class="layout-content-col span-9"> + + <img src="../static/content/touch_feedback_manipulation.png"> + + </div> +</div> + +<div class="layout-content-row"> + <div class="layout-content-col span-6"> + + <img src="../static/content/touch_feedback_communication.png"> + + </div> + <div class="layout-content-col span-6"> + +<div class="vspace size-3"> </div> + +<h4>Boundaries</h4> +<p>When users try to scroll past the upper or lower limit of a scrollable area, communicate the +boundary with a visual cue. For example, if a user attempts to scroll past the first home screen +panel, the screen content tilts to the right to indicate that further navigation in this direction +is not possible. Many of Android's scrollable UI widgets (e.g. lists or grid lists) already have +support for boundary feedback built in. If you are building custom, keep boundary feedback in mind +and provide it from within your app.</p> + + </div> +</div> + + + + + <div class="layout-content-row content-footer"> + <div class="paging-links layout-content-col span-9"> </div> + <div class="paging-links layout-content-col span-4"> + <a href="#" class="prev-page-link">Previous</a> + <a href="#" class="next-page-link">Next</a> + </div> + </div> + + </div> + + </div> + + <div id="page-footer"> + + <p id="copyright"> + Except as noted, this content is licensed under + <a href="http://creativecommons.org/licenses/by/2.5/"> + Creative Commons Attribution 2.5</a>.<br> + For details and restrictions, see the + <a href="http://developer.android.com/license.html">Content License</a>. + </p> + + <p> + <a href="http://www.android.com/terms.html">Site Terms of Service</a> – + <a href="http://www.android.com/privacy.html">Privacy Policy</a> – + <a href="http://www.android.com/branding.html">Brand Guidelines</a> + </p> + + </div> + </div> + + <script src="../static/jquery-1.6.2.min.js"></script> + <script> + var SITE_ROOT = '../'; + </script> + <script src="../static/default.js"></script> + + + <script type="text/javascript"> + var gaJsHost = (("https:" == document.location.protocol) ? "https://ssl." : "http://www."); + document.write(unescape("%3Cscript src='" + gaJsHost + "google-analytics.com/ga.js' type='text/javascript'%3E%3C/script%3E")); + </script> + <script type="text/javascript"> + var pageTracker = _gat._getTracker("UA-5831155-1"); + pageTracker._trackPageview(); + </script> + </body> +</html> diff --git a/docs/html/design/style/typography.html b/docs/html/design/style/typography.html new file mode 100644 index 0000000..d3cc769 --- /dev/null +++ b/docs/html/design/style/typography.html @@ -0,0 +1,210 @@ +<!DOCTYPE html> +<html lang="en"> + <head> + <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> + <title> + +Android Design - Typography + </title> + <link rel="shortcut icon" type="image/x-icon" href="/favicon.ico"> + <link rel="stylesheet" href="http://fonts.googleapis.com/css?family=Roboto:regular,medium,thin,italic,mediumitalic"> + <link rel="stylesheet" href="../static/yui-3.3.0-reset-min.css"> + <link rel="stylesheet" href="../static/default.css"> + + </head> + <body> + + <div id="page-container"> + + <div id="page-header"><a href="../index.html">Android Design</a></div> + + <div id="main-row"> + + <ul id="nav"> + + <li class="nav-section"> + <div class="nav-section-header"><a href="../index.html">Get Started</a></div> + <ul> + <li><a href="../get-started/creative-vision.html">Creative Vision</a></li> + <li><a href="../get-started/principles.html">Design Principles</a></li> + <li><a href="../get-started/ui-overview.html">UI Overview</a></li> + </ul> + </li> + + <li class="nav-section"> + <div class="nav-section-header"><a href="../style/index.html">Style</a></div> + <ul> + <li><a href="../style/devices-displays.html">Devices and Displays</a></li> + <li><a href="../style/themes.html">Themes</a></li> + <li><a href="../style/touch-feedback.html">Touch Feedback</a></li> + <li><a href="../style/metrics-grids.html">Metrics and Grids</a></li> + <li><a href="../style/typography.html">Typography</a></li> + <li><a href="../style/color.html">Color</a></li> + <li><a href="../style/iconography.html">Iconography</a></li> + <li><a href="../style/writing.html">Writing Style</a></li> + </ul> + </li> + + <li class="nav-section"> + <div class="nav-section-header"><a href="../patterns/index.html">Patterns</a></div> + <ul> + <li><a href="../patterns/new-4-0.html">New in Android 4.0</a></li> + <li><a href="../patterns/gestures.html">Gestures</a></li> + <li><a href="../patterns/app-structure.html">App Structure</a></li> + <li><a href="../patterns/navigation.html">Navigation</a></li> + <li><a href="../patterns/actionbar.html">Action Bar</a></li> + <li><a href="../patterns/multi-pane-layouts.html">Multi-pane Layouts</a></li> + <li><a href="../patterns/swipe-views.html">Swipe Views</a></li> + <li><a href="../patterns/selection.html">Selection</a></li> + <li><a href="../patterns/notifications.html">Notifications</a></li> + <li><a href="../patterns/compatibility.html">Compatibility</a></li> + <li><a href="../patterns/pure-android.html">Pure Android</a></li> + </ul> + </li> + + <li class="nav-section"> + <div class="nav-section-header"><a href="../building-blocks/index.html">Building Blocks</a></div> + <ul> + <li><a href="../building-blocks/tabs.html">Tabs</a></li> + <li><a href="../building-blocks/lists.html">Lists</a></li> + <li><a href="../building-blocks/grid-lists.html">Grid Lists</a></li> + <li><a href="../building-blocks/scrolling.html">Scrolling</a></li> + <li><a href="../building-blocks/spinners.html">Spinners</a></li> + <li><a href="../building-blocks/buttons.html">Buttons</a></li> + <li><a href="../building-blocks/text-fields.html">Text Fields</a></li> + <li><a href="../building-blocks/seek-bars.html">Seek Bars</a></li> + <li><a href="../building-blocks/progress.html">Progress & Activity</a></li> + <li><a href="../building-blocks/switches.html">Switches</a></li> + <li><a href="../building-blocks/dialogs.html">Dialogs</a></li> + <li><a href="../building-blocks/pickers.html">Pickers</a></li> + </ul> + </li> + + <li> + <div id="back-dac-section"><a href="../../index.html">Developers</a></div> + </li> + + </ul> + + <div id="content"> + + + <div class="layout-content-row content-header"> + <div class="layout-content-col span-9"> + <h2>Typography</h2> + </div> + <div class="paging-links layout-content-col span-4"> + <a href="#" class="prev-page-link">Previous</a> + <a href="#" class="next-page-link">Next</a> + </div> + </div> + + + + +<div class="layout-content-row"> + <div class="layout-content-col span-8"> + + <img src="../static/content/typography_main.png"> + + </div> + <div class="layout-content-col span-5"> + +<p>The Android design language relies on traditional typographic tools such as scale, space, rhythm, +and alignment with an underlying grid. Successful deployment of these tools is essential to help +users quickly understand a screen of information. To support such use of typography, Ice Cream +Sandwich introduced a new type family named Roboto, created specifically for the requirements of UI +and high-resolution screens. The current TextView framework supports regular, bold, italic, and bold +italic weights by default.</p> + + <img src="../static/content/typography_alphas.png"> + +<p><a href="../static/download/Roboto_Hinted_20111129.zip">Download Roboto</a></p> +<p><a href="../static/download/RobotoSpecimenBook.pdf">Specimen Book</a></p> + + </div> +</div> + +<hr> + +<div class="layout-content-row"> + <div class="layout-content-col span-6"> + +<h4>Default type colors</h4> +<p>The Android UI uses the following default color styles: <code>textColorPrimary</code> and +<code>textColorSecondary</code>. For light themes use <code>textColorPrimaryInverse</code> and +<code>textColorSecondaryInverse</code>. The framework text color styles also support variants for +touch feedback states when used inside UI elements.</p> + + <img src="../static/content/typography_defaults.png"> + + </div> + <div class="layout-content-col span-6"> + +<h4>Typographic Scale</h4> +<p>Contrast in type sizes can go a long way to create ordered, understandable layouts. However, too +many different sizes in the same UI can be messy. The Android framework uses the following limited +set of type sizes:</p> + +<img src="../static/content/typography_sizes.png"> + +<p>Users can select a system-wide scaling factor for text in the Settings app. In order to support +these accessibility features, type should be specified in scale-independent pixels +(<acronym title="Scale-independent pixels. One sp is one pixel on a 160 dpi screen if the user's global text scale is set to 100%.">sp</acronym>) +wherever possible. Layouts supporting scalable types should be tested against these settings.</p> + + </div> +</div> + + + + + + <div class="layout-content-row content-footer"> + <div class="paging-links layout-content-col span-9"> </div> + <div class="paging-links layout-content-col span-4"> + <a href="#" class="prev-page-link">Previous</a> + <a href="#" class="next-page-link">Next</a> + </div> + </div> + + </div> + + </div> + + <div id="page-footer"> + + <p id="copyright"> + Except as noted, this content is licensed under + <a href="http://creativecommons.org/licenses/by/2.5/"> + Creative Commons Attribution 2.5</a>.<br> + For details and restrictions, see the + <a href="http://developer.android.com/license.html">Content License</a>. + </p> + + <p> + <a href="http://www.android.com/terms.html">Site Terms of Service</a> – + <a href="http://www.android.com/privacy.html">Privacy Policy</a> – + <a href="http://www.android.com/branding.html">Brand Guidelines</a> + </p> + + </div> + </div> + + <script src="../static/jquery-1.6.2.min.js"></script> + <script> + var SITE_ROOT = '../'; + </script> + <script src="../static/default.js"></script> + + + <script type="text/javascript"> + var gaJsHost = (("https:" == document.location.protocol) ? "https://ssl." : "http://www."); + document.write(unescape("%3Cscript src='" + gaJsHost + "google-analytics.com/ga.js' type='text/javascript'%3E%3C/script%3E")); + </script> + <script type="text/javascript"> + var pageTracker = _gat._getTracker("UA-5831155-1"); + pageTracker._trackPageview(); + </script> + </body> +</html> diff --git a/docs/html/design/style/writing.html b/docs/html/design/style/writing.html new file mode 100644 index 0000000..e5f1ea8 --- /dev/null +++ b/docs/html/design/style/writing.html @@ -0,0 +1,483 @@ +<!DOCTYPE html> +<html lang="en"> + <head> + <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> + <title> + +Android Design - Writing Style + </title> + <link rel="shortcut icon" type="image/x-icon" href="/favicon.ico"> + <link rel="stylesheet" href="http://fonts.googleapis.com/css?family=Roboto:regular,medium,thin,italic,mediumitalic"> + <link rel="stylesheet" href="../static/yui-3.3.0-reset-min.css"> + <link rel="stylesheet" href="../static/default.css"> + +<style> + +/* UI tables */ + +.ui_table { + width: 100%; + background: #282828; + color: #fff; + border-radius: 2px; + box-shadow: 0 2px 4px rgba(0,0,0,0.25); + border-collapse: separate; +} + +.ui_table th, +.ui_table td { + padding: 5px 10px; +} + +.ui_table thead th { + font-weight: 600; +} + +.ui_table tfoot td { + border-top: 1px solid #494949; + border-right: 1px solid #494949; + text-align: center; +} + +.ui_table tfoot td:last-child { + border-right: 0; +} + +.list_item_margins { + margin-left: 30px !important; +} + +.example_label { + margin-bottom: 10px; + padding-left: 20px; + background: transparent none no-repeat scroll 0px 3px; +} + +.example_label.bad { + background-image: url(../static/ico_wrong.png); +} + +.example_label.good { + background-image: url(../static/ico_good.png); +} + +</style> + + </head> + <body> + + <div id="page-container"> + + <div id="page-header"><a href="../index.html">Android Design</a></div> + + <div id="main-row"> + + <ul id="nav"> + + <li class="nav-section"> + <div class="nav-section-header"><a href="../index.html">Get Started</a></div> + <ul> + <li><a href="../get-started/creative-vision.html">Creative Vision</a></li> + <li><a href="../get-started/principles.html">Design Principles</a></li> + <li><a href="../get-started/ui-overview.html">UI Overview</a></li> + </ul> + </li> + + <li class="nav-section"> + <div class="nav-section-header"><a href="../style/index.html">Style</a></div> + <ul> + <li><a href="../style/devices-displays.html">Devices and Displays</a></li> + <li><a href="../style/themes.html">Themes</a></li> + <li><a href="../style/touch-feedback.html">Touch Feedback</a></li> + <li><a href="../style/metrics-grids.html">Metrics and Grids</a></li> + <li><a href="../style/typography.html">Typography</a></li> + <li><a href="../style/color.html">Color</a></li> + <li><a href="../style/iconography.html">Iconography</a></li> + <li><a href="../style/writing.html">Writing Style</a></li> + </ul> + </li> + + <li class="nav-section"> + <div class="nav-section-header"><a href="../patterns/index.html">Patterns</a></div> + <ul> + <li><a href="../patterns/new-4-0.html">New in Android 4.0</a></li> + <li><a href="../patterns/gestures.html">Gestures</a></li> + <li><a href="../patterns/app-structure.html">App Structure</a></li> + <li><a href="../patterns/navigation.html">Navigation</a></li> + <li><a href="../patterns/actionbar.html">Action Bar</a></li> + <li><a href="../patterns/multi-pane-layouts.html">Multi-pane Layouts</a></li> + <li><a href="../patterns/swipe-views.html">Swipe Views</a></li> + <li><a href="../patterns/selection.html">Selection</a></li> + <li><a href="../patterns/notifications.html">Notifications</a></li> + <li><a href="../patterns/compatibility.html">Compatibility</a></li> + <li><a href="../patterns/pure-android.html">Pure Android</a></li> + </ul> + </li> + + <li class="nav-section"> + <div class="nav-section-header"><a href="../building-blocks/index.html">Building Blocks</a></div> + <ul> + <li><a href="../building-blocks/tabs.html">Tabs</a></li> + <li><a href="../building-blocks/lists.html">Lists</a></li> + <li><a href="../building-blocks/grid-lists.html">Grid Lists</a></li> + <li><a href="../building-blocks/scrolling.html">Scrolling</a></li> + <li><a href="../building-blocks/spinners.html">Spinners</a></li> + <li><a href="../building-blocks/buttons.html">Buttons</a></li> + <li><a href="../building-blocks/text-fields.html">Text Fields</a></li> + <li><a href="../building-blocks/seek-bars.html">Seek Bars</a></li> + <li><a href="../building-blocks/progress.html">Progress & Activity</a></li> + <li><a href="../building-blocks/switches.html">Switches</a></li> + <li><a href="../building-blocks/dialogs.html">Dialogs</a></li> + <li><a href="../building-blocks/pickers.html">Pickers</a></li> + </ul> + </li> + + <li> + <div id="back-dac-section"><a href="../../index.html">Developers</a></div> + </li> + + </ul> + + <div id="content"> + + + <div class="layout-content-row content-header"> + <div class="layout-content-col span-9"> + <h2>Writing Style</h2> + </div> + <div class="paging-links layout-content-col span-4"> + <a href="#" class="prev-page-link">Previous</a> + <a href="#" class="next-page-link">Next</a> + </div> + </div> + + + + +<p>When choosing words for your app:</p> +<ol> +<li> +<p><strong>Keep it brief.</strong> Be concise, simple and precise. Start with a 30 character limit (including + spaces), and don't use more unless absolutely necessary.</p> +</li> +<li> +<p><strong>Keep it simple.</strong> Pretend you're speaking to someone who's smart and competent, but doesn't + know technical jargon and may not speak English very well. Use short words, active verbs, and + common nouns.</p> +</li> +<li> +<p><strong>Be friendly.</strong> Use contractions. Talk directly to the reader using second person ("you"). If + your text doesn't read the way you'd say it in casual conversation, it's probably not the way + you should write it. Don't be abrupt or annoying and make the user feel safe, happy and + energized.</p> +</li> +<li> +<p><strong>Put the most important thing first.</strong> The first two words (around 11 characters, including + spaces) should include at least a taste of the most important information in the string. If they + don't, start over.</p> +</li> +<li> +<p><strong>Describe only what's necessary, and no more.</strong> Don't try to explain subtle differences. They + will be lost on most users.</p> +</li> +<li> +<p><strong>Avoid repetition.</strong> If a significant term gets repeated within a screen or block of text, find + a way to use it just once.</p> +</li> +</ol> + +<h2>Examples</h2> + +<ol><li class="value-1"><strong>Keep it brief.</strong> From the setup wizard:</ol> + +<div class="layout-content-row"> + <div class="layout-content-col span-6 list_item_margins"> + + <div class="example_label bad">Too formal</div> + + <table class="ui_table good"><tbody><tr><td> + Consult the documentation that came with your phone for further instructions. + </td></tr></tbody></table> + + </div> + <div class="layout-content-col span-6"> + + <div class="example_label good">Better</div> + + <table class="ui_table good"><tbody><tr><td> + Read the instructions that came with your phone. + </td></tr></tbody></table> + + </div> +</div> + +<div class="vspace size-1"> </div> + +<ol><li class="value-2"><strong>Keep it simple.</strong> From the Location settings screen:</ol> + +<div class="layout-content-row"> + <div class="layout-content-col span-6 list_item_margins"> + + <div class="example_label bad">Confusing</div> + + <table class="ui_table bad"> + <thead> + <tr> + <th> + Use GPS satellites + </th> + </tr> + </thead> + <tbody> + <tr> + <td> + When locating, accurate to street level. + </td> + </tr> + </tbody> + </table> + + </div> + <div class="layout-content-col span-6"> + + <div class="example_label good">Better</div> + + <table class="ui_table good"> + <thead> + <tr> + <th> + GPS + </th> + </tr> + </thead> + <tbody> + <tr> + <td> + Let apps use satellites to pinpoint your location. + </td> + </tr> + </tbody> + </table> + + </div> +</div> + +<div class="vspace size-1"> </div> + +<ol><li class="value-3"><strong>Be friendly.</strong> Dialog that appears when an application +crashes:</ol> + +<div class="layout-content-row"> + <div class="layout-content-col span-6 list_item_margins"> + + <div class="example_label bad">Confusing and annoying—"Sorry" just rubs salt in the + wound.</div> + + <table class="ui_table bad"> + <thead> + <tr> + <th colspan="3"> + Sorry! + </th> + </tr> + </thead> + <tbody> + <tr> + <td colspan="3"> + Activity MyAppActivity (in application MyApp) + is not responding. + </td> + </tr> + </tbody> + <tfoot> + <tr> + <td width="33%">Force close</td> + <td width="33%">Wait</td> + <td width="33%">Report</td> + </tr> + </tbody> + </table> + + </div> + <div class="layout-content-col span-6"> + + <div class="example_label good">Shorter, more direct, no faux-apologetic title:<br><br></div> + + <table class="ui_table good"> + <thead> + <tr> + <th colspan="3"> + MyApp isn't responding. + </th> + </tr> + </thead> + <tbody> + <tr> + <td colspan="3"> + Do you want to close it? + </td> + </tr> + </tbody> + <tfoot> + <tr> + <td width="33%">Wait</td> + <td width="33%">Report</td> + <td width="33%">Close</td> + </tr> + </tbody> + </table> + + </div> +</div> + +<div class="vspace size-1"> </div> + +<ol><li class="value-4"><strong>Put the most important thing first.</strong></ol> + +<div class="layout-content-row"> + <div class="layout-content-col span-6 list_item_margins"> + + <div class="example_label bad">Top news last</div> + + <table class="ui_table bad"><tbody><tr><td> + 77 other people +1'd this, including Larry Page. + </td></tr></tbody></table> + + </div> + <div class="layout-content-col span-6"> + + <div class="example_label good">Top news first</div> + + <table class="ui_table good"><tbody><tr><td> + Larry Page and 77 others +1'd this. + </td></tr></tbody></table> + + </div> +</div> + +<div class="layout-content-row"> + <div class="layout-content-col span-6 list_item_margins"> + + <div class="example_label bad">Task last</div> + + <table class="ui_table bad"><tbody><tr><td> + Touch Next to complete setup using a Wi-Fi connection. + </td></tr></tbody></table> + + </div> + <div class="layout-content-col span-6"> + + <div class="example_label good">Task first</div> + + <table class="ui_table good"><tbody><tr><td> + To finish setup using Wi-Fi, touch Next. + </td></tr></tbody></table> + + </div> +</div> + +<div class="vspace size-1"> </div> + +<ol><li class="value-5"><strong>Describe only what's necessary, and no more.</strong></ol> + +<div class="layout-content-row"> + <div class="layout-content-col span-6 list_item_margins"> + + <div class="example_label bad">From a Setup Wizard screen</div> + + <table class="ui_table bad"> + <thead> + <tr> + <th> + Signing in... + </th> + </tr> + </thead> + <tbody> + <tr> + <td> + Your phone needs to communicate with<br> + Google servers to sign in to your account.<br> + This may take up to five minutes. + </td> + </tr> + </tbody> + </table> + + </div> + <div class="layout-content-col span-6"> + + <div class="example_label good">From a Setup Wizard screen</div> + + <table class="ui_table good"> + <thead> + <tr> + <th> + Signing in... + </th> + </tr> + </thead> + <tbody> + <tr> + <td> + Your phone is contacting Google.<br> + This can take up to 5 minutes. + </td> + </tr> + </tbody> + </table> + + </div> +</div> + + + + + <div class="layout-content-row content-footer"> + <div class="paging-links layout-content-col span-9"> </div> + <div class="paging-links layout-content-col span-4"> + <a href="#" class="prev-page-link">Previous</a> + <a href="#" class="next-page-link">Next</a> + </div> + </div> + + </div> + + </div> + + <div id="page-footer"> + + <p id="copyright"> + Except as noted, this content is licensed under + <a href="http://creativecommons.org/licenses/by/2.5/"> + Creative Commons Attribution 2.5</a>.<br> + For details and restrictions, see the + <a href="http://developer.android.com/license.html">Content License</a>. + </p> + + <p> + <a href="http://www.android.com/terms.html">Site Terms of Service</a> – + <a href="http://www.android.com/privacy.html">Privacy Policy</a> – + <a href="http://www.android.com/branding.html">Brand Guidelines</a> + </p> + + </div> + </div> + + <script src="../static/jquery-1.6.2.min.js"></script> + <script> + var SITE_ROOT = '../'; + </script> + <script src="../static/default.js"></script> + + + <script type="text/javascript"> + var gaJsHost = (("https:" == document.location.protocol) ? "https://ssl." : "http://www."); + document.write(unescape("%3Cscript src='" + gaJsHost + "google-analytics.com/ga.js' type='text/javascript'%3E%3C/script%3E")); + </script> + <script type="text/javascript"> + var pageTracker = _gat._getTracker("UA-5831155-1"); + pageTracker._trackPageview(); + </script> + </body> +</html> |