Loading docs/html/design/building-blocks/progress.jd +3 −3 Original line number Diff line number Diff line Loading @@ -42,9 +42,9 @@ available space.</p> <li class="value-1"><h4>Activity bar (shown with the Holo Dark theme)</h4> <p> An indeterminate activity bar is used at the start of an application download because Google Play hasn't been able to contact the server yet, and it's not possible to determine how long it will take for the download to begin. An indeterminate activity bar is used at the start of an application download because the Play Store app hasn't been able to contact the server yet, and it's not possible to determine how long it will take for the download to begin. </p> </li> Loading docs/html/design/building-blocks/tabs.jd +1 −1 Original line number Diff line number Diff line Loading @@ -25,7 +25,7 @@ to the next/previous view, swipe left or right.</p> <source src="{@docRoot}design/media/tabs_scrolly.ogv" type="video/ogg"> </video> <div class="figure-caption"> Scrolling tabs in Google Play. Scrolling tabs in the Play Store app. <div class="video-instructions"> </div> </div> Loading docs/html/design/design_toc.cs +1 −0 Original line number Diff line number Diff line Loading @@ -35,6 +35,7 @@ <li><a href="<?cs var:toroot ?>design/patterns/swipe-views.html">Swipe Views</a></li> <li><a href="<?cs var:toroot ?>design/patterns/selection.html">Selection</a></li> <li><a href="<?cs var:toroot ?>design/patterns/notifications.html">Notifications</a></li> <li><a href="<?cs var:toroot ?>design/patterns/settings.html">Settings</a></li> <li><a href="<?cs var:toroot ?>design/patterns/compatibility.html">Compatibility</a></li> <li><a href="<?cs var:toroot ?>design/patterns/pure-android.html">Pure Android</a></li> </ul> Loading docs/html/design/downloads/index.jd +1 −1 Original line number Diff line number Diff line Loading @@ -39,7 +39,7 @@ available.</p> <p> <a class="download-button" href="https://dl-ssl.google.com/android/design/Android_Design_Fireworks_Stencil_20120229.png">Adobe® Fireworks® PNG Stencil</a> <a class="download-button" href="https://dl-ssl.google.com/android/design/Android_Design_OmniGraffle_Stencil_20120229.graffle">Omni® OmniGraffle® Stencil</a> <a class="download-button" href="https://dl-ssl.google.com/android/design/Android_Design_Holo_Widgets_20120229.zip">Adobe® Photoshop® Sources</a> <a class="download-button" href="https://dl-ssl.google.com/android/design/Android_Design_Holo_Widgets_20120302.zip">Adobe® Photoshop® Sources</a> </p> </div> Loading docs/html/design/get-started/principles.jd +17 −17 Original line number Diff line number Diff line Loading @@ -10,7 +10,7 @@ with purpose.</p> <div class="layout-content-row"> <div class="layout-content-col span-7"> <h4>Delight me in surprising ways</h4> <h4 id="delight-me">Delight me in surprising ways</h4> <p>A beautiful surface, a carefully-placed animation, or a well-timed sound effect is a joy to experience. Subtle effects contribute to a feeling of effortlessness and a sense that a powerful force is at hand.</p> Loading @@ -28,7 +28,7 @@ force is at hand.</p> <div class="layout-content-row"> <div class="layout-content-col span-7"> <h4>Real objects are more fun than buttons and menus</h4> <h4 id="real-objects-more-fun">Real objects are more fun than buttons and menus</h4> <p>Allow people to directly touch and manipulate objects in your app. It reduces the cognitive effort needed to perform a task while making it more emotionally satisfying.</p> Loading @@ -45,7 +45,7 @@ needed to perform a task while making it more emotionally satisfying.</p> <div class="layout-content-row"> <div class="layout-content-col span-7"> <h4>Let me make it mine</h4> <h4 id="make-it-mine">Let me make it mine</h4> <p>People love to add personal touches because it helps them feel at home and in control. Provide sensible, beautiful defaults, but also consider fun, optional customizations that don't hinder primary tasks.</p> Loading @@ -63,7 +63,7 @@ primary tasks.</p> <div class="layout-content-row"> <div class="layout-content-col span-7"> <h4>Get to know me</h4> <h4 id="get-to-know-me">Get to know me</h4> <p>Learn peoples' preferences over time. Rather than asking them to make the same choices over and over, place previous choices within easy reach.</p> Loading @@ -80,7 +80,7 @@ over, place previous choices within easy reach.</p> <div class="layout-content-row"> <div class="layout-content-col span-7"> <h4>Keep it brief</h4> <h4 id="keep-it-brief">Keep it brief</h4> <p>Use short phrases with simple words. People are likely to skip sentences if they're long.</p> </div> Loading @@ -96,7 +96,7 @@ over, place previous choices within easy reach.</p> <div class="layout-content-row"> <div class="layout-content-col span-7"> <h4>Pictures are faster than words</h4> <h4 id="pictures-faster-than-words">Pictures are faster than words</h4> <p>Consider using pictures to explain ideas. They get people's attention and can be much more efficient than words.</p> Loading @@ -113,7 +113,7 @@ than words.</p> <div class="layout-content-row"> <div class="layout-content-col span-7"> <h4>Decide for me but let me have the final say</h4> <h4 id="decide-for-me">Decide for me but let me have the final say</h4> <p>Take your best guess and act rather than asking first. Too many choices and decisions make people unhappy. Just in case you get it wrong, allow for 'undo'.</p> Loading @@ -130,7 +130,7 @@ unhappy. Just in case you get it wrong, allow for 'undo'.</p> <div class="layout-content-row"> <div class="layout-content-col span-7"> <h4>Only show what I need when I need it</h4> <h4 id="only-show-when-i-need-it">Only show what I need when I need it</h4> <p>People get overwhelmed when they see too much at once. Break tasks and information into small, digestible chunks. Hide options that aren't essential at the moment, and teach people as they go.</p> Loading @@ -147,7 +147,7 @@ digestible chunks. Hide options that aren't essential at the moment, and teach p <div class="layout-content-row"> <div class="layout-content-col span-7"> <h4>I should always know where I am</h4> <h4 id="always-know-where-i-am">I should always know where I am</h4> <p>Give people confidence that they know their way around. Make places in your app look distinct and use transitions to show relationships among screens. Provide feedback on tasks in progress.</p> Loading @@ -164,7 +164,7 @@ use transitions to show relationships among screens. Provide feedback on tasks i <div class="layout-content-row"> <div class="layout-content-col span-7"> <h4>Never lose my stuff</h4> <h4 id="never-lose-my-stuff">Never lose my stuff</h4> <p>Save what people took time to create and let them access it from anywhere. Remember settings, personal touches, and creations across phones, tablets, and computers. It makes upgrading the easiest thing in the world.</p> Loading @@ -182,7 +182,7 @@ easiest thing in the world.</p> <div class="layout-content-row"> <div class="layout-content-col span-7"> <h4>If it looks the same, it should act the same</h4> <h4 id="looks-same-should-act-same">If it looks the same, it should act the same</h4> <p>Help people discern functional differences by making them visually distinct rather than subtle. Avoid modes, which are places that look similar but act differently on the same input.</p> Loading @@ -199,7 +199,7 @@ Avoid modes, which are places that look similar but act differently on the same <div class="layout-content-row"> <div class="layout-content-col span-7"> <h4>Only interrupt me if it's important</h4> <h4 id="interrupt-only-if-important">Only interrupt me if it's important</h4> <p>Like a good personal assistant, shield people from unimportant minutiae. People want to stay focused, and unless it's critical and time-sensitive, an interruption can be taxing and frustrating.</p> Loading @@ -216,7 +216,7 @@ focused, and unless it's critical and time-sensitive, an interruption can be tax <div class="layout-content-row"> <div class="layout-content-col span-7"> <h4>Give me tricks that work everywhere</h4> <h4 id="give-me-tricks">Give me tricks that work everywhere</h4> <p>People feel great when they figure things out for themselves. Make your app easier to learn by leveraging visual patterns and muscle memory from other Android apps. For example, the swipe gesture may be a good navigational shortcut.</p> Loading @@ -234,7 +234,7 @@ may be a good navigational shortcut.</p> <div class="layout-content-row"> <div class="layout-content-col span-7"> <h4>It's not my fault</h4> <h4 id="its-not-my-fault">It's not my fault</h4> <p>Be gentle in how you prompt people to make corrections. They want to feel smart when they use your app. If something goes wrong, give clear recovery instructions but spare them the technical details. If you can fix it behind the scenes, even better.</p> Loading @@ -252,7 +252,7 @@ If you can fix it behind the scenes, even better.</p> <div class="layout-content-row"> <div class="layout-content-col span-7"> <h4>Sprinkle encouragement</h4> <h4 id="sprinkle-encouragement">Sprinkle encouragement</h4> <p>Break complex tasks into smaller steps that can be easily accomplished. Give feedback on actions, even if it's just a subtle glow.</p> Loading @@ -269,7 +269,7 @@ even if it's just a subtle glow.</p> <div class="layout-content-row"> <div class="layout-content-col span-7"> <h4>Do the heavy lifting for me</h4> <h4 id="do-heavy-lifting-for-me">Do the heavy lifting for me</h4> <p>Make novices feel like experts by enabling them to do things they never thought they could. For example, shortcuts that combine multiple photo effects can make amateur photographs look amazing in only a few steps.</p> Loading @@ -287,7 +287,7 @@ only a few steps.</p> <div class="layout-content-row"> <div class="layout-content-col span-7"> <h4>Make important things fast</h4> <h4 id="make-important-things-fast">Make important things fast</h4> <p>Not all actions are equal. Decide what's most important in your app and make it easy to find and fast to use, like the shutter button in a camera, or the pause button in a music player.</p> Loading Loading
docs/html/design/building-blocks/progress.jd +3 −3 Original line number Diff line number Diff line Loading @@ -42,9 +42,9 @@ available space.</p> <li class="value-1"><h4>Activity bar (shown with the Holo Dark theme)</h4> <p> An indeterminate activity bar is used at the start of an application download because Google Play hasn't been able to contact the server yet, and it's not possible to determine how long it will take for the download to begin. An indeterminate activity bar is used at the start of an application download because the Play Store app hasn't been able to contact the server yet, and it's not possible to determine how long it will take for the download to begin. </p> </li> Loading
docs/html/design/building-blocks/tabs.jd +1 −1 Original line number Diff line number Diff line Loading @@ -25,7 +25,7 @@ to the next/previous view, swipe left or right.</p> <source src="{@docRoot}design/media/tabs_scrolly.ogv" type="video/ogg"> </video> <div class="figure-caption"> Scrolling tabs in Google Play. Scrolling tabs in the Play Store app. <div class="video-instructions"> </div> </div> Loading
docs/html/design/design_toc.cs +1 −0 Original line number Diff line number Diff line Loading @@ -35,6 +35,7 @@ <li><a href="<?cs var:toroot ?>design/patterns/swipe-views.html">Swipe Views</a></li> <li><a href="<?cs var:toroot ?>design/patterns/selection.html">Selection</a></li> <li><a href="<?cs var:toroot ?>design/patterns/notifications.html">Notifications</a></li> <li><a href="<?cs var:toroot ?>design/patterns/settings.html">Settings</a></li> <li><a href="<?cs var:toroot ?>design/patterns/compatibility.html">Compatibility</a></li> <li><a href="<?cs var:toroot ?>design/patterns/pure-android.html">Pure Android</a></li> </ul> Loading
docs/html/design/downloads/index.jd +1 −1 Original line number Diff line number Diff line Loading @@ -39,7 +39,7 @@ available.</p> <p> <a class="download-button" href="https://dl-ssl.google.com/android/design/Android_Design_Fireworks_Stencil_20120229.png">Adobe® Fireworks® PNG Stencil</a> <a class="download-button" href="https://dl-ssl.google.com/android/design/Android_Design_OmniGraffle_Stencil_20120229.graffle">Omni® OmniGraffle® Stencil</a> <a class="download-button" href="https://dl-ssl.google.com/android/design/Android_Design_Holo_Widgets_20120229.zip">Adobe® Photoshop® Sources</a> <a class="download-button" href="https://dl-ssl.google.com/android/design/Android_Design_Holo_Widgets_20120302.zip">Adobe® Photoshop® Sources</a> </p> </div> Loading
docs/html/design/get-started/principles.jd +17 −17 Original line number Diff line number Diff line Loading @@ -10,7 +10,7 @@ with purpose.</p> <div class="layout-content-row"> <div class="layout-content-col span-7"> <h4>Delight me in surprising ways</h4> <h4 id="delight-me">Delight me in surprising ways</h4> <p>A beautiful surface, a carefully-placed animation, or a well-timed sound effect is a joy to experience. Subtle effects contribute to a feeling of effortlessness and a sense that a powerful force is at hand.</p> Loading @@ -28,7 +28,7 @@ force is at hand.</p> <div class="layout-content-row"> <div class="layout-content-col span-7"> <h4>Real objects are more fun than buttons and menus</h4> <h4 id="real-objects-more-fun">Real objects are more fun than buttons and menus</h4> <p>Allow people to directly touch and manipulate objects in your app. It reduces the cognitive effort needed to perform a task while making it more emotionally satisfying.</p> Loading @@ -45,7 +45,7 @@ needed to perform a task while making it more emotionally satisfying.</p> <div class="layout-content-row"> <div class="layout-content-col span-7"> <h4>Let me make it mine</h4> <h4 id="make-it-mine">Let me make it mine</h4> <p>People love to add personal touches because it helps them feel at home and in control. Provide sensible, beautiful defaults, but also consider fun, optional customizations that don't hinder primary tasks.</p> Loading @@ -63,7 +63,7 @@ primary tasks.</p> <div class="layout-content-row"> <div class="layout-content-col span-7"> <h4>Get to know me</h4> <h4 id="get-to-know-me">Get to know me</h4> <p>Learn peoples' preferences over time. Rather than asking them to make the same choices over and over, place previous choices within easy reach.</p> Loading @@ -80,7 +80,7 @@ over, place previous choices within easy reach.</p> <div class="layout-content-row"> <div class="layout-content-col span-7"> <h4>Keep it brief</h4> <h4 id="keep-it-brief">Keep it brief</h4> <p>Use short phrases with simple words. People are likely to skip sentences if they're long.</p> </div> Loading @@ -96,7 +96,7 @@ over, place previous choices within easy reach.</p> <div class="layout-content-row"> <div class="layout-content-col span-7"> <h4>Pictures are faster than words</h4> <h4 id="pictures-faster-than-words">Pictures are faster than words</h4> <p>Consider using pictures to explain ideas. They get people's attention and can be much more efficient than words.</p> Loading @@ -113,7 +113,7 @@ than words.</p> <div class="layout-content-row"> <div class="layout-content-col span-7"> <h4>Decide for me but let me have the final say</h4> <h4 id="decide-for-me">Decide for me but let me have the final say</h4> <p>Take your best guess and act rather than asking first. Too many choices and decisions make people unhappy. Just in case you get it wrong, allow for 'undo'.</p> Loading @@ -130,7 +130,7 @@ unhappy. Just in case you get it wrong, allow for 'undo'.</p> <div class="layout-content-row"> <div class="layout-content-col span-7"> <h4>Only show what I need when I need it</h4> <h4 id="only-show-when-i-need-it">Only show what I need when I need it</h4> <p>People get overwhelmed when they see too much at once. Break tasks and information into small, digestible chunks. Hide options that aren't essential at the moment, and teach people as they go.</p> Loading @@ -147,7 +147,7 @@ digestible chunks. Hide options that aren't essential at the moment, and teach p <div class="layout-content-row"> <div class="layout-content-col span-7"> <h4>I should always know where I am</h4> <h4 id="always-know-where-i-am">I should always know where I am</h4> <p>Give people confidence that they know their way around. Make places in your app look distinct and use transitions to show relationships among screens. Provide feedback on tasks in progress.</p> Loading @@ -164,7 +164,7 @@ use transitions to show relationships among screens. Provide feedback on tasks i <div class="layout-content-row"> <div class="layout-content-col span-7"> <h4>Never lose my stuff</h4> <h4 id="never-lose-my-stuff">Never lose my stuff</h4> <p>Save what people took time to create and let them access it from anywhere. Remember settings, personal touches, and creations across phones, tablets, and computers. It makes upgrading the easiest thing in the world.</p> Loading @@ -182,7 +182,7 @@ easiest thing in the world.</p> <div class="layout-content-row"> <div class="layout-content-col span-7"> <h4>If it looks the same, it should act the same</h4> <h4 id="looks-same-should-act-same">If it looks the same, it should act the same</h4> <p>Help people discern functional differences by making them visually distinct rather than subtle. Avoid modes, which are places that look similar but act differently on the same input.</p> Loading @@ -199,7 +199,7 @@ Avoid modes, which are places that look similar but act differently on the same <div class="layout-content-row"> <div class="layout-content-col span-7"> <h4>Only interrupt me if it's important</h4> <h4 id="interrupt-only-if-important">Only interrupt me if it's important</h4> <p>Like a good personal assistant, shield people from unimportant minutiae. People want to stay focused, and unless it's critical and time-sensitive, an interruption can be taxing and frustrating.</p> Loading @@ -216,7 +216,7 @@ focused, and unless it's critical and time-sensitive, an interruption can be tax <div class="layout-content-row"> <div class="layout-content-col span-7"> <h4>Give me tricks that work everywhere</h4> <h4 id="give-me-tricks">Give me tricks that work everywhere</h4> <p>People feel great when they figure things out for themselves. Make your app easier to learn by leveraging visual patterns and muscle memory from other Android apps. For example, the swipe gesture may be a good navigational shortcut.</p> Loading @@ -234,7 +234,7 @@ may be a good navigational shortcut.</p> <div class="layout-content-row"> <div class="layout-content-col span-7"> <h4>It's not my fault</h4> <h4 id="its-not-my-fault">It's not my fault</h4> <p>Be gentle in how you prompt people to make corrections. They want to feel smart when they use your app. If something goes wrong, give clear recovery instructions but spare them the technical details. If you can fix it behind the scenes, even better.</p> Loading @@ -252,7 +252,7 @@ If you can fix it behind the scenes, even better.</p> <div class="layout-content-row"> <div class="layout-content-col span-7"> <h4>Sprinkle encouragement</h4> <h4 id="sprinkle-encouragement">Sprinkle encouragement</h4> <p>Break complex tasks into smaller steps that can be easily accomplished. Give feedback on actions, even if it's just a subtle glow.</p> Loading @@ -269,7 +269,7 @@ even if it's just a subtle glow.</p> <div class="layout-content-row"> <div class="layout-content-col span-7"> <h4>Do the heavy lifting for me</h4> <h4 id="do-heavy-lifting-for-me">Do the heavy lifting for me</h4> <p>Make novices feel like experts by enabling them to do things they never thought they could. For example, shortcuts that combine multiple photo effects can make amateur photographs look amazing in only a few steps.</p> Loading @@ -287,7 +287,7 @@ only a few steps.</p> <div class="layout-content-row"> <div class="layout-content-col span-7"> <h4>Make important things fast</h4> <h4 id="make-important-things-fast">Make important things fast</h4> <p>Not all actions are equal. Decide what's most important in your app and make it easy to find and fast to use, like the shutter button in a camera, or the pause button in a music player.</p> Loading