diff options
| author | Joe Fernandez <joefernandez@google.com> | 2014-10-07 22:55:44 -0700 |
|---|---|---|
| committer | Joe Fernandez <joefernandez@google.com> | 2014-10-12 22:31:41 -0700 |
| commit | cd2445a9aa1159dead4107a770b898c8305aed19 (patch) | |
| tree | 2ca46312be081034ea1c0bb1136407594ed412f1 /docs/html | |
| parent | 15edcda56ba12ad04a286f4d07f2b6fe0b1c5e38 (diff) | |
| download | frameworks_base-cd2445a9aa1159dead4107a770b898c8305aed19.zip frameworks_base-cd2445a9aa1159dead4107a770b898c8305aed19.tar.gz frameworks_base-cd2445a9aa1159dead4107a770b898c8305aed19.tar.bz2 | |
docs: Migrate TV Design docs to main DAC-Design area
Change-Id: Ie9ba7e519ccdf46b58010d5ff11b4042134b7a57
Diffstat (limited to 'docs/html')
| -rw-r--r-- | docs/html/design/design_toc.cs | 10 | ||||
| -rw-r--r-- | docs/html/design/tv/images/apps-games-rows.jpg (renamed from docs/html/preview/tv/design/images/apps-games-rows.jpg) | bin | 82048 -> 82048 bytes | |||
| -rw-r--r-- | docs/html/design/tv/images/atv-framed-med.png (renamed from docs/html/preview/tv/design/images/atv-framed-med.png) | bin | 324206 -> 324206 bytes | |||
| -rw-r--r-- | docs/html/design/tv/images/atv-home.jpg (renamed from docs/html/preview/tv/design/images/atv-home.jpg) | bin | 197369 -> 197369 bytes | |||
| -rw-r--r-- | docs/html/design/tv/images/focus.png (renamed from docs/html/preview/tv/design/images/focus.png) | bin | 7729 -> 7729 bytes | |||
| -rw-r--r-- | docs/html/design/tv/images/icon.png (renamed from docs/html/preview/tv/design/images/icon.png) | bin | 1679 -> 1679 bytes | |||
| -rw-r--r-- | docs/html/design/tv/images/overscan.png (renamed from docs/html/preview/tv/design/images/overscan.png) | bin | 116254 -> 116254 bytes | |||
| -rw-r--r-- | docs/html/design/tv/images/recommendations.png (renamed from docs/html/preview/tv/design/images/recommendations.png) | bin | 237004 -> 237004 bytes | |||
| -rw-r--r-- | docs/html/design/tv/images/search.jpg (renamed from docs/html/preview/tv/design/images/search.jpg) | bin | 8344 -> 8344 bytes | |||
| -rw-r--r-- | docs/html/design/tv/images/settings.jpg (renamed from docs/html/preview/tv/design/images/settings.jpg) | bin | 19094 -> 19094 bytes | |||
| -rw-r--r-- | docs/html/design/tv/index.jd | 69 | ||||
| -rw-r--r-- | docs/html/design/tv/patterns.jd (renamed from docs/html/preview/tv/design/patterns.jd) | 31 | ||||
| -rw-r--r-- | docs/html/design/tv/principles.jd (renamed from docs/html/preview/tv/design/principles.jd) | 9 | ||||
| -rw-r--r-- | docs/html/design/tv/style.jd (renamed from docs/html/preview/tv/design/style.jd) | 16 | ||||
| -rw-r--r-- | docs/html/preview/tv/design/index.jd | 70 | ||||
| -rw-r--r-- | docs/html/training/tv/start/start.jd | 2 |
16 files changed, 105 insertions, 102 deletions
diff --git a/docs/html/design/design_toc.cs b/docs/html/design/design_toc.cs index 885f336..1a6ee7a 100644 --- a/docs/html/design/design_toc.cs +++ b/docs/html/design/design_toc.cs @@ -23,7 +23,15 @@ <li><a href="<?cs var:toroot ?>design/wear/style.html">Style</a></li> </ul> </li> - <li><a href="<?cs var:toroot ?>design/tv/index.html">TV</a></li> + <li class="nav-section"> + <div class="nav-section-header"> + <a href="<?cs var:toroot ?>design/tv/index.html">TV</a></div> + <ul> + <li><a href="<?cs var:toroot ?>design/tv/principles.html">Creative Vision</a></li> + <li><a href="<?cs var:toroot ?>design/tv/patterns.html">UI Patterns</a></li> + <li><a href="<?cs var:toroot ?>design/tv/style.html">Style</a></li> + </ul> + </li> <li><a href="<?cs var:toroot ?>design/auto/index.html">Auto</a></li> </ul> </li> diff --git a/docs/html/preview/tv/design/images/apps-games-rows.jpg b/docs/html/design/tv/images/apps-games-rows.jpg Binary files differindex 5023655..5023655 100644 --- a/docs/html/preview/tv/design/images/apps-games-rows.jpg +++ b/docs/html/design/tv/images/apps-games-rows.jpg diff --git a/docs/html/preview/tv/design/images/atv-framed-med.png b/docs/html/design/tv/images/atv-framed-med.png Binary files differindex e06f6e7..e06f6e7 100644 --- a/docs/html/preview/tv/design/images/atv-framed-med.png +++ b/docs/html/design/tv/images/atv-framed-med.png diff --git a/docs/html/preview/tv/design/images/atv-home.jpg b/docs/html/design/tv/images/atv-home.jpg Binary files differindex 4b25bab..4b25bab 100644 --- a/docs/html/preview/tv/design/images/atv-home.jpg +++ b/docs/html/design/tv/images/atv-home.jpg diff --git a/docs/html/preview/tv/design/images/focus.png b/docs/html/design/tv/images/focus.png Binary files differindex df61f4d..df61f4d 100644 --- a/docs/html/preview/tv/design/images/focus.png +++ b/docs/html/design/tv/images/focus.png diff --git a/docs/html/preview/tv/design/images/icon.png b/docs/html/design/tv/images/icon.png Binary files differindex ae34e18..ae34e18 100644 --- a/docs/html/preview/tv/design/images/icon.png +++ b/docs/html/design/tv/images/icon.png diff --git a/docs/html/preview/tv/design/images/overscan.png b/docs/html/design/tv/images/overscan.png Binary files differindex fb7e4bc..fb7e4bc 100644 --- a/docs/html/preview/tv/design/images/overscan.png +++ b/docs/html/design/tv/images/overscan.png diff --git a/docs/html/preview/tv/design/images/recommendations.png b/docs/html/design/tv/images/recommendations.png Binary files differindex 942cd10..942cd10 100644 --- a/docs/html/preview/tv/design/images/recommendations.png +++ b/docs/html/design/tv/images/recommendations.png diff --git a/docs/html/preview/tv/design/images/search.jpg b/docs/html/design/tv/images/search.jpg Binary files differindex c034939..c034939 100644 --- a/docs/html/preview/tv/design/images/search.jpg +++ b/docs/html/design/tv/images/search.jpg diff --git a/docs/html/preview/tv/design/images/settings.jpg b/docs/html/design/tv/images/settings.jpg Binary files differindex 1c5bf31..1c5bf31 100644 --- a/docs/html/preview/tv/design/images/settings.jpg +++ b/docs/html/design/tv/images/settings.jpg diff --git a/docs/html/design/tv/index.jd b/docs/html/design/tv/index.jd index d144ff0..483c24f 100644 --- a/docs/html/design/tv/index.jd +++ b/docs/html/design/tv/index.jd @@ -2,14 +2,67 @@ page.title=Android TV @jd:body -<img src="{@docRoot}design/media/android-tv.png" - width="460" style="float:right;margin:0 0 40px 40px" /> +<p>The Android TV platform user interface provides the launch pad for your app's big screen + experience. It's important to understand how your app is presented in the main user interface and + how your app can help users get to the content they want quickly.</p> +<p class="note"> + <strong>Important:</strong> There are specific design requirements your app must meet to qualify + as an Android TV app on Google Play. For more information, see the requirements listed in + <a href="{@docRoot}distribute/essentials/quality/tv.html">TV App Quality</a>. +</p> -<p>Android TV is <strong>coming soon</strong> and lets you engage your users in a new, shared environment.</p> +<h2>Home Screen</h2> -<p>Users bring a specific set of expectations to the experience of watching TV, versus interacting -with a phone or tablet. So find out how to get your app ready for its big-screen debut -later this year by reading the -<a href="{@docRoot}preview/tv/design/index.html">Android TV Design Guide</a> -in the L Developer Preview.</p>
\ No newline at end of file +<p>The Home Screen is the start of the user experience, providing search, content + recommendations, and access to apps and settings. This screen provides a rich and cinematic + overview of apps and content.</p> + +<img src="{@docRoot}design/tv/images/atv-home.jpg" alt="TV Home screen" /> + + +<h2>Search</h2> + +<p>By bringing the power of Google search to the big screen, Android TV makes new, dynamic + connections between content. A favorite movie may lead to the discovery of a new music artist; + planning a trip to Paris might surface new YouTube content and photos.</p> + +<img src="{@docRoot}design/tv/images/search.jpg" alt="Recommendations Row" /> + +<p>To learn more about searching within your app, see + <a href="{@docRoot}training/tv/discovery/in-app-search.html">Searching within TV Apps</a>. + +<h2>Recommendations</h2> + +<p>The recommendations row on Android TV is a central feature of the Home Screen that allows + users quick access to dynamic and relevant content for their media-consumption activities. The + row is optimized for quick browsing of personalized content and activity resumption (on the + device and across devices), while also providing a way for users to act on meaningful new + content.</p> + +<img src="{@docRoot}design/tv/images/recommendations.png" alt="Recommendations Row" /> + +<p> + Recommendations are based on the user’s recent and frequent usage behaviors, as well as + expressed content preferences. They appear as cards that represent a system or app action, + notification, activity, or piece of actionable media. Your app can provide suggestions for the + recommendations row to help get your content noticed. To learn more, see + <a href="{@docRoot}training/tv/discovery/recommendations.html">Recommending TV Content</a>. +</p> + + +<h2>Apps and Games</h2> + +<p>Apps and Games rows both have special areas on the Home Screen. Within their respective + areas, Apps and Games titles are ordered to reflect the user’s recent usage.</p> + +<img src="{@docRoot}design/tv/images/apps-games-rows.jpg" alt="Apps and Games Rows" /> + + +<h2>Settings</h2> + +<p>Users can access Android and device-specific settings from the bottom of the Home Screen. From + here, the user can access Android and device-specific settings. +</p> + +<img src="{@docRoot}design/tv/images/settings.jpg" alt="Settings Row" /> diff --git a/docs/html/preview/tv/design/patterns.jd b/docs/html/design/tv/patterns.jd index 48faee9..51bb699 100644 --- a/docs/html/preview/tv/design/patterns.jd +++ b/docs/html/design/tv/patterns.jd @@ -1,7 +1,7 @@ -page.title=Patterns for TV -page.tags="design" +page.title=UI Patterns for TV @jd:body + <p>As a developer of apps for TV, you should follow certain patterns to enable users to quickly understand and operate your app. This section describes recommended design patterns for TV apps.</p> @@ -13,7 +13,7 @@ page.tags="design" user interface has clear paths for two-axis navigation by aligning objects in lists and grids.</p> -<img src="{@docRoot}preview/tv/design/images/focus.png" alt="TV navigation and focus diagram" /> +<img src="{@docRoot}design/tv/images/focus.png" alt="TV navigation and focus diagram" /> <p>A key aspect of making your application work well with a D-Pad controller is to make sure that there is always an object that is obviously in focus. Your app must clearly indicate @@ -47,7 +47,7 @@ page.tags="design" <p>Recommendation cards include a small icon that is imposed over a colored background. An example and specifications for this icon are shown below:</p> -<img src="{@docRoot}preview/tv/design/images/icon.png" alt="Recommendation icon examples" /> +<img src="{@docRoot}design/tv/images/icon.png" alt="Recommendation icon examples" /> <p>Here are the requirements for recommendation icons:</p> @@ -65,16 +65,20 @@ page.tags="design" <h2>Background Images</h2> <p>Background images are displayed in the background of your app to provide additional visual - interest, information, or branding. The BrowseFragment and DetailsFragment classes in the Leanback - support library provide specific support for background images and for updating them as items gain - and lose focus. Here are the specific requirements for background images:</p> + interest, information, or branding. The user interface widgets provided in the <a href="{@docRoot}tools/support-library/features.html#v17-leanback">v17 leanback support + library</a> provide specific support for background images and for updating them as items gain + and lose focus. The specific requirements for background images on TV devices is that they + should be full color and a size of 1920 x 1080 pixels. +</p> -<ul> - <li>Full color, 1920 x 1080 pixels</li> -</ul> +<p class="note" id="solid-background"> + <strong>Important:</strong> Background images must not be transparent. Your must not allow any + portion of another app to be seen through your app. +</p> <p class="note"> - <strong>Note:</strong> If the image does not meet this requirement, it is scaled to fit. + <strong>Note:</strong> If you background image does not meet the size requirements, it is scaled + to fit. </p> <h2>Audio Feedback</h2> @@ -82,5 +86,6 @@ page.tags="design" <p>Sounds on Android TV bring a cinematic quality to the interaction experience. You should consider adding sounds for user actions or to provide feedback when a user is only partially visually engaged with the screen (e.g., because they are distracted or multitasking). - You should also consider using sounds as alternatives to visual messages, for example to indicate - that a user has reached the end of a list or is trying to navigate to an undefined location.</p> + You should also consider using sounds as alternatives to visual messages. For example, use sounds + to indicate that a user has reached the end of a list or is trying to navigate to an undefined + location.</p> diff --git a/docs/html/preview/tv/design/principles.jd b/docs/html/design/tv/principles.jd index 106fa96..c2f5fc9 100644 --- a/docs/html/preview/tv/design/principles.jd +++ b/docs/html/design/tv/principles.jd @@ -1,9 +1,12 @@ page.title=Creative Vision for TV @jd:body -<p>Users bring a specific set of expectations when watching TV, versus - interacting with a phone or tablet. These guidelines have been developed by the Android User - Experience Team to guide creation of the Android TV platform and the apps that run on it.</p> + +<p>Users bring a specific set of expectations when watching TV, versus interacting with a phone or + tablet. The Android User Experience Team has developed the following guidelines for creation of + the Android TV platform and the apps that run on it. +</p> + <h2>Casual Consumption</h2> diff --git a/docs/html/preview/tv/design/style.jd b/docs/html/design/tv/style.jd index 67a7096..6e2704b 100644 --- a/docs/html/preview/tv/design/style.jd +++ b/docs/html/design/tv/style.jd @@ -1,5 +1,4 @@ page.title=Style for TV -page.tags="design" @jd:body @@ -19,9 +18,10 @@ page.tags="design" </p> <p>If you are creating an app for browsing and playing content, use the prebuilt fragments in the - Leanback support library. These layouts have been built specifically for use on TV devices with + <a href="{@docRoot}tools/support-library/features.html#v17-leanback">v17 leanback support + library</a>. These layouts have been built specifically for use on TV devices with the guidance of the Android User Experience team. For more information on using these classes, - see the <a href="{@docRoot}preview/tv/build-ui/index.html">User Interfaces</a> guide. + see the <a href="{@docRoot}training/tv/index.html">Building Apps for TV</a> training. </p> <p>Here are some additional recommendations for creating functional and attractive layouts for TV @@ -33,8 +33,12 @@ page.tags="design" <li>Design your artwork assets for best viewing at HD resolution (1920 x 1080 pixels).</li> <li>Put on-screen navigational controls on the left or right side of the screen, and save the vertical space for content.</li> - <li>Use Fragments to create UIs that are divided into sections, and use view groups - like GridView instead of ListView to make better use of the horizontal screen space.</li> + <li>Use <a href="{@docRoot}guide/components/fragments.html">fragments</a> to create UIs that are + divided into sections, and use view groups like <a href= + "{@docRoot}guide/topics/ui/layout/gridview.html">Grid View</a> instead of <a href= + "{@docRoot}guide/topics/ui/layout/listview.html">List View</a> to make better use of the + horizontal screen space. + </li> <li>Avoid a cluttered interface by adding sufficient margins between layout controls.</li> </ul> @@ -45,7 +49,7 @@ page.tags="design" outside of a safe zone that most TVs could reliably display. Even on some of today’s HDTV flat screens, areas outside that zone may not be visible.</p> -<img src="{@docRoot}preview/tv/design/images/overscan.png" alt="Overscan borders for TV" /> +<img src="{@docRoot}design/tv/images/overscan.png" alt="Overscan borders for TV" /> <p>Build a 10% margin into your TV screen designs to account for overscan area the TV may not display correctly. On a 1920 x 1080 pixel screen, this margin should be a minimum of 27px from the diff --git a/docs/html/preview/tv/design/index.jd b/docs/html/preview/tv/design/index.jd deleted file mode 100644 index 58bfd5e..0000000 --- a/docs/html/preview/tv/design/index.jd +++ /dev/null @@ -1,70 +0,0 @@ -page.title=Design for TV -header.justLinks=1 -footer.hide=1 -@jd:body - - -<p>The Android TV platform user interface provides the launch pad for your app's big screen - experience. It's important to understand how your app is presented in the main user interface and - how your app can help users get to the content they want quickly.</p> - -<p class="note"> - <strong>Important:</strong> There are specific requirements your app must meet in order to - qualify as an Android TV app on Google Play. For more information, see the requirements listed - in <a href="{@docRoot}preview/tv/publish/index.html">Publishing TV Apps</a>. -</p> - -<h2>Home Screen</h2> - -<p>The Home Screen is the start of the user experience, providing search, content - recommendations, and access to apps and settings. This screen provides a rich and cinematic - overview of apps and content.</p> - -<img src="{@docRoot}preview/tv/design/images/atv-home.jpg" alt="TV Home screen" /> - - -<h2>Search</h2> - -<p>By bringing the power of Google search to the big screen, Android TV makes new, dynamic - connections between content. A favorite movie may lead to the discovery of a new music artist, - planning a trip to Paris might surface new YouTube content and photos.</p> - -<img src="{@docRoot}preview/tv/design/images/search.jpg" alt="Recommendations Row" /> - -<p>To learn more about searching within your app, see - <a href="{@docRoot}preview/tv/ui/in-app-search.html">Searching in TV Apps</a>. - -<h2>Recommendations</h2> - -<p>The recommendations row on Android TV is a central feature of the Home Screen that allows - users quick access to dynamic and relevant content for their media-consumption activities. The - row is optimized for quick browsing of personalized content and activity resumption (on the - device and across devices), while also providing a way for users to act on meaningful new - content.</p> - -<img src="{@docRoot}preview/tv/design/images/recommendations.png" alt="Recommendations Row" /> - -<p> - Recommendations are based on the user’s recent and frequent usage behaviors, as well as - expressed content preferences. They appear as cards that represent a system or app action, - notification, activity, or piece of actionable media. Your app can provide suggestions for the - recommendations row to help get your content noticed. To learn more, see - <a href="{@docRoot}preview/tv/ui/recommendations.html">Recommendations</a>. -</p> - - -<h2>Apps and Games</h2> - -<p>Apps and Games rows both have special areas on the Home Screen. Within their respective - areas, Apps and Games titles are ordered to reflect the user’s recent usage.</p> - -<img src="{@docRoot}preview/tv/design/images/apps-games-rows.jpg" alt="Apps and Games Rows" /> - - -<h2>Settings</h2> - -<p>Access to Settings is found at the bottom of the Home Screen. From here, the user can access - Android and device-specific settings. -</p> - -<img src="{@docRoot}preview/tv/design/images/settings.jpg" alt="Settings Row" /> diff --git a/docs/html/training/tv/start/start.jd b/docs/html/training/tv/start/start.jd index b50bc33..bebeedd 100644 --- a/docs/html/training/tv/start/start.jd +++ b/docs/html/training/tv/start/start.jd @@ -31,7 +31,7 @@ startpage=true </p> <p class="note"> - <strong>Important:</strong> There are specific requirements your app must meet in order to + <strong>Important:</strong> There are specific requirements your app must meet to qualify as an Android TV app on Google Play. For more information, see the requirements listed in <a href="{@docRoot}distribute/essentials/quality/tv.html">TV App Quality</a>. </p> |
