diff options
Diffstat (limited to 'docs/html/design/style')
| -rw-r--r-- | docs/html/design/style/color.jd | 134 | ||||
| -rw-r--r-- | docs/html/design/style/devices-displays.jd | 45 | ||||
| -rw-r--r-- | docs/html/design/style/iconography.jd | 340 | ||||
| -rw-r--r-- | docs/html/design/style/index.jd | 29 | ||||
| -rw-r--r-- | docs/html/design/style/metrics-grids.jd | 61 | ||||
| -rw-r--r-- | docs/html/design/style/themes.jd | 42 | ||||
| -rw-r--r-- | docs/html/design/style/touch-feedback.jd | 67 | ||||
| -rw-r--r-- | docs/html/design/style/typography.jd | 56 | ||||
| -rw-r--r-- | docs/html/design/style/writing.jd | 278 |
9 files changed, 1052 insertions, 0 deletions
diff --git a/docs/html/design/style/color.jd b/docs/html/design/style/color.jd new file mode 100644 index 0000000..e25f7c6 --- /dev/null +++ b/docs/html/design/style/color.jd @@ -0,0 +1,134 @@ +page.title=Color +@jd:body + +<style> + .color-row { + width: 740px; + margin-left: 10px !important; + margin-right: 10px !important; + + display: -webkit-box; + display: -moz-box; + display: box; + + -webkit-box-orient: horizontal; + -moz-box-orient: horizontal; + box-orient: horizontal; + + cursor: pointer; + + -webkit-user-select: none; + 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; + + -webkit-box-flex: 1; + -moz-box-flex: 1; + 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; + + -webkit-user-select: text; + 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; + } + + /* 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> + +<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 id="palette">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="https://dl-ssl.google.com/android/design/Android_Design_Color_Swatches_20120229.zip">Download the swatches</a></p> + +<img src="{@docRoot}design/media/color_spectrum.png"> + +<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> diff --git a/docs/html/design/style/devices-displays.jd b/docs/html/design/style/devices-displays.jd new file mode 100644 index 0000000..e5fe26d --- /dev/null +++ b/docs/html/design/style/devices-displays.jd @@ -0,0 +1,45 @@ +page.title=Devices and Displays +@jd:body + +<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="{@docRoot}design/media/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="{@docRoot}design/media/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> diff --git a/docs/html/design/style/iconography.jd b/docs/html/design/style/iconography.jd new file mode 100644 index 0000000..775e45d --- /dev/null +++ b/docs/html/design/style/iconography.jd @@ -0,0 +1,340 @@ +page.title=Iconography +@jd:body + +<img src="{@docRoot}design/media/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="{@docRoot}design/media/iconography_launcher_size.png"> + + </div> + <div class="layout-content-col span-4"> + + <img src="{@docRoot}design/media/iconography_launcher_focal.png"> + + </div> + <div class="layout-content-col span-4"> + + <img src="{@docRoot}design/media/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 on Google Play 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="{@docRoot}design/media/iconography_launcher_example.png"> + + </div> + <!-- 2 free columns --> +</div> + +<div class="layout-content-row"> + <div class="layout-content-col span-12"> + + <img src="{@docRoot}design/media/iconography_launcher_example2.png"> + + <div class="vspace size-2"> </div> + + </div> + <!-- 1 free columns --> +</div> + + +<h2 id="action-bar">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> +<p> + +Pre-defined glyphs should be used for certain common actions such as "refresh" and "share." The +download link below provides a package with icons that are scaled for various screen densities and +are suitable for use with the Holo Light and Holo Dark themes. The package also includes unstyled +icons that you can modify to match your theme, in addition to Adobe® Illustrator® source +files for further customization. + +</p> +<p> + +<a href="https://dl-ssl.google.com/android/design/Android_Design_Icons_20120229.zip">Download the Action Bar Icon Pack</a> + +</p> + +<div class="layout-content-row"> + <div class="layout-content-col span-4"> + + <img src="{@docRoot}design/media/iconography_actionbar_size.png"> + + </div> + <div class="layout-content-col span-4"> + + <img src="{@docRoot}design/media/iconography_actionbar_focal.png"> + + </div> + <div class="layout-content-col span-4"> + + <img src="{@docRoot}design/media/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="{@docRoot}design/media/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="{@docRoot}design/media/iconography_small_size.png"> + + </div> + <div class="layout-content-col span-4"> + + <img src="{@docRoot}design/media/iconography_small_focal.png"> + + </div> + <div class="layout-content-col span-4"> + + <img src="{@docRoot}design/media/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="{@docRoot}design/media/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="{@docRoot}design/media/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="{@docRoot}design/media/iconography_notification_size.png"> + + </div> + <div class="layout-content-col span-4"> + + <img src="{@docRoot}design/media/iconography_notification_focal.png"> + + </div> + <div class="layout-content-col span-4"> + + <img src="{@docRoot}design/media/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="{@docRoot}design/media/iconography_notification_example.png"> + + </div> + <!-- 2 free columns --> +</div> diff --git a/docs/html/design/style/index.jd b/docs/html/design/style/index.jd new file mode 100644 index 0000000..d346aea --- /dev/null +++ b/docs/html/design/style/index.jd @@ -0,0 +1,29 @@ +page.title=Style +header.justLinks=1 +footer.hide=1 +@jd:body + +<style> +#landing-graphic-container { + position: relative; +} + +#text-overlay { + position: absolute; + left: 10px; + top: 402px; + width: 220px; +} +</style> + +<div id="landing-graphic-container"> + <div id="text-overlay"> + Build visually compelling apps that look great on any device. + <br><br> + <a href="{@docRoot}design/style/devices-displays.html" class="landing-page-link">Devices and Displays</a> + </div> + + <a href="{@docRoot}design/style/devices-displays.html"> + <img src="{@docRoot}design/media/design_elements_landing.png"> + </a> +</div> diff --git a/docs/html/design/style/metrics-grids.jd b/docs/html/design/style/metrics-grids.jd new file mode 100644 index 0000000..e2b9ab5 --- /dev/null +++ b/docs/html/design/style/metrics-grids.jd @@ -0,0 +1,61 @@ +page.title=Metrics and Grids +@jd:body + +<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="{@docRoot}design/media/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 id="48dp-rhythm">48dp Rhythm</h2> + +<p>Touchable UI components are generally laid out along 48dp units.</p> + +<img src="{@docRoot}design/media/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="{@docRoot}design/media/metrics_closeup.png"> + +<div class="vspace size-2"> </div> + +<h4>Mind the gaps</h4> +<p>Spacing between each UI element is 8dp.</p> + +<h2 id="examples">Examples</h2> + +<img src="{@docRoot}design/media/metrics_forms.png"> diff --git a/docs/html/design/style/themes.jd b/docs/html/design/style/themes.jd new file mode 100644 index 0000000..d4a6acf --- /dev/null +++ b/docs/html/design/style/themes.jd @@ -0,0 +1,42 @@ +page.title=Themes +@jd:body + +<div class="layout-content-row"> + <div class="layout-content-col span-5"> + + <img src="{@docRoot}design/media/themes_holo_light.png"> + <div class="figure-caption"> + Gmail in Holo Light. + </div> + + <img src="{@docRoot}design/media/themes_holo_dark.png"> + <div class="figure-caption"> + Settings in Holo Dark. + </div> + + <img src="{@docRoot}design/media/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> diff --git a/docs/html/design/style/touch-feedback.jd b/docs/html/design/style/touch-feedback.jd new file mode 100644 index 0000000..5fe72a7 --- /dev/null +++ b/docs/html/design/style/touch-feedback.jd @@ -0,0 +1,67 @@ +page.title=Touch Feedback +@jd:body + +<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="{@docRoot}design/media/touch_feedback_reaction_response.png"> + + </div> +</div> + +<h4>States</h4> + +<div class="vspace size-1"> </div> + +<img src="{@docRoot}design/media/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="{@docRoot}design/media/touch_feedback_manipulation.png"> + + </div> +</div> + +<div class="layout-content-row"> + <div class="layout-content-col span-6"> + + <img src="{@docRoot}design/media/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> diff --git a/docs/html/design/style/typography.jd b/docs/html/design/style/typography.jd new file mode 100644 index 0000000..db2fb5f --- /dev/null +++ b/docs/html/design/style/typography.jd @@ -0,0 +1,56 @@ +page.title=Typography +@jd:body + +<div class="layout-content-row"> + <div class="layout-content-col span-8"> + + <img src="{@docRoot}design/media/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="{@docRoot}design/media/typography_alphas.png"> + +<p><a href="https://dl-ssl.google.com/android/design/Roboto_Hinted_20111129.zip">Download Roboto</a></p> +<p><a href="https://dl-ssl.google.com/android/design/Roboto_Specimen_Book_20111129.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="{@docRoot}design/media/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="{@docRoot}design/media/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> diff --git a/docs/html/design/style/writing.jd b/docs/html/design/style/writing.jd new file mode 100644 index 0000000..919ea7a --- /dev/null +++ b/docs/html/design/style/writing.jd @@ -0,0 +1,278 @@ +page.title=Writing Style +@jd:body + +<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 id="examples">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 layout-with-list-item-margins"> + + <div class="do-dont-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="do-dont-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 layout-with-list-item-margins"> + + <div class="do-dont-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="do-dont-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 layout-with-list-item-margins"> + + <div class="do-dont-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="do-dont-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 layout-with-list-item-margins"> + + <div class="do-dont-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="do-dont-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 layout-with-list-item-margins"> + + <div class="do-dont-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="do-dont-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 layout-with-list-item-margins"> + + <div class="do-dont-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="do-dont-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> |