From cd2445a9aa1159dead4107a770b898c8305aed19 Mon Sep 17 00:00:00 2001 From: Joe Fernandez Date: Tue, 7 Oct 2014 22:55:44 -0700 Subject: [PATCH] docs: Migrate TV Design docs to main DAC-Design area Change-Id: Ie9ba7e519ccdf46b58010d5ff11b4042134b7a57 --- docs/html/design/design_toc.cs | 10 ++- .../tv}/images/apps-games-rows.jpg | Bin .../tv}/images/atv-framed-med.png | Bin .../design => design/tv}/images/atv-home.jpg | Bin .../tv/design => design/tv}/images/focus.png | Bin .../tv/design => design/tv}/images/icon.png | Bin .../design => design/tv}/images/overscan.png | Bin .../tv}/images/recommendations.png | Bin .../tv/design => design/tv}/images/search.jpg | Bin .../design => design/tv}/images/settings.jpg | Bin docs/html/design/tv/index.jd | 69 +++++++++++++++-- .../tv/design => design/tv}/patterns.jd | 31 ++++---- .../tv/design => design/tv}/principles.jd | 9 ++- .../{preview/tv/design => design/tv}/style.jd | 16 ++-- docs/html/preview/tv/design/index.jd | 70 ------------------ docs/html/training/tv/start/start.jd | 2 +- 16 files changed, 105 insertions(+), 102 deletions(-) rename docs/html/{preview/tv/design => design/tv}/images/apps-games-rows.jpg (100%) rename docs/html/{preview/tv/design => design/tv}/images/atv-framed-med.png (100%) rename docs/html/{preview/tv/design => design/tv}/images/atv-home.jpg (100%) rename docs/html/{preview/tv/design => design/tv}/images/focus.png (100%) rename docs/html/{preview/tv/design => design/tv}/images/icon.png (100%) rename docs/html/{preview/tv/design => design/tv}/images/overscan.png (100%) rename docs/html/{preview/tv/design => design/tv}/images/recommendations.png (100%) rename docs/html/{preview/tv/design => design/tv}/images/search.jpg (100%) rename docs/html/{preview/tv/design => design/tv}/images/settings.jpg (100%) rename docs/html/{preview/tv/design => design/tv}/patterns.jd (71%) rename docs/html/{preview/tv/design => design/tv}/principles.jd (87%) rename docs/html/{preview/tv/design => design/tv}/style.jd (86%) delete mode 100644 docs/html/preview/tv/design/index.jd diff --git a/docs/html/design/design_toc.cs b/docs/html/design/design_toc.cs index 885f336019ad2..1a6ee7a7ef4fb 100644 --- a/docs/html/design/design_toc.cs +++ b/docs/html/design/design_toc.cs @@ -23,7 +23,15 @@
  • Style
    • -
  • TV
    • +
  • +
    + TV
    + +
  • Auto
    • diff --git a/docs/html/preview/tv/design/images/apps-games-rows.jpg b/docs/html/design/tv/images/apps-games-rows.jpg similarity index 100% rename from docs/html/preview/tv/design/images/apps-games-rows.jpg rename to 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 similarity index 100% rename from docs/html/preview/tv/design/images/atv-framed-med.png rename to 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 similarity index 100% rename from docs/html/preview/tv/design/images/atv-home.jpg rename to 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 similarity index 100% rename from docs/html/preview/tv/design/images/focus.png rename to 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 similarity index 100% rename from docs/html/preview/tv/design/images/icon.png rename to 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 similarity index 100% rename from docs/html/preview/tv/design/images/overscan.png rename to 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 similarity index 100% rename from docs/html/preview/tv/design/images/recommendations.png rename to 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 similarity index 100% rename from docs/html/preview/tv/design/images/search.jpg rename to 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 similarity index 100% rename from docs/html/preview/tv/design/images/settings.jpg rename to docs/html/design/tv/images/settings.jpg diff --git a/docs/html/design/tv/index.jd b/docs/html/design/tv/index.jd index d144ff01da2f2..483c24f7ce922 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 - +

    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.

    + +

    + Important: 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 + TV App Quality. +

    + +

    Home Screen

    + +

    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.

    + +TV Home screen -

    Android TV is coming soon and lets you engage your users in a new, shared environment.

    +

    Search

    -

    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 -Android TV Design Guide -in the L Developer Preview.

    \ No newline at end of file +

    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.

    + +Recommendations Row + +

    To learn more about searching within your app, see + Searching within TV Apps. + +

    Recommendations

    + +

    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.

    + +Recommendations Row + +

    + 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 + Recommending TV Content. +

    + + +

    Apps and Games

    + +

    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.

    + +Apps and Games Rows + + +

    Settings

    + +

    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. +

    + +Settings Row diff --git a/docs/html/preview/tv/design/patterns.jd b/docs/html/design/tv/patterns.jd similarity index 71% rename from docs/html/preview/tv/design/patterns.jd rename to docs/html/design/tv/patterns.jd index 48faee9b0be0c..51bb699eec345 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 +

    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.

    @@ -13,7 +13,7 @@ page.tags="design" user interface has clear paths for two-axis navigation by aligning objects in lists and grids.

    -TV navigation and focus diagram +TV navigation and focus diagram

    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"

    Recommendation cards include a small icon that is imposed over a colored background. An example and specifications for this icon are shown below:

    -Recommendation icon examples +Recommendation icon examples

    Here are the requirements for recommendation icons:

    @@ -65,16 +65,20 @@ page.tags="design"

    Background Images

    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:

    + interest, information, or branding. The user interface widgets provided in the v17 leanback support + library 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. +

    - +

    + Important: Background images must not be transparent. Your must not allow any + portion of another app to be seen through your app. +

    - Note: If the image does not meet this requirement, it is scaled to fit. + Note: If you background image does not meet the size requirements, it is scaled + to fit.

    Audio Feedback

    @@ -82,5 +86,6 @@ page.tags="design"

    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.

    + 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.

    diff --git a/docs/html/preview/tv/design/principles.jd b/docs/html/design/tv/principles.jd similarity index 87% rename from docs/html/preview/tv/design/principles.jd rename to docs/html/design/tv/principles.jd index 106fa96eac762..c2f5fc9167531 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 -

    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.

    + +

    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. +

    +

    Casual Consumption

    diff --git a/docs/html/preview/tv/design/style.jd b/docs/html/design/tv/style.jd similarity index 86% rename from docs/html/preview/tv/design/style.jd rename to docs/html/design/tv/style.jd index 67a70968ec81a..6e2704b29f6fc 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"

    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 + v17 leanback support + library. 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 User Interfaces guide. + see the Building Apps for TV training.

    Here are some additional recommendations for creating functional and attractive layouts for TV @@ -33,8 +33,12 @@ page.tags="design"

  • Design your artwork assets for best viewing at HD resolution (1920 x 1080 pixels).
  • Put on-screen navigational controls on the left or right side of the screen, and save the vertical space for content.
    • -
  • 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.
    • +
  • Use fragments to create UIs that are + divided into sections, and use view groups like Grid View instead of List View to make better use of the + horizontal screen space. +
  • Avoid a cluttered interface by adding sufficient margins between layout controls.
    • @@ -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.

    -Overscan borders for TV +Overscan borders for TV

    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 58bfd5e2f2ef1..0000000000000 --- 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 - - -

    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.

    - -

    - Important: 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 Publishing TV Apps. -

    - -

    Home Screen

    - -

    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.

    - -TV Home screen - - -

    Search

    - -

    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.

    - -Recommendations Row - -

    To learn more about searching within your app, see - Searching in TV Apps. - -

    Recommendations

    - -

    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.

    - -Recommendations Row - -

    - 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 - Recommendations. -

    - - -

    Apps and Games

    - -

    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.

    - -Apps and Games Rows - - -

    Settings

    - -

    Access to Settings is found at the bottom of the Home Screen. From here, the user can access - Android and device-specific settings. -

    - -Settings Row diff --git a/docs/html/training/tv/start/start.jd b/docs/html/training/tv/start/start.jd index b50bc3325689c..bebeeddb1098c 100644 --- a/docs/html/training/tv/start/start.jd +++ b/docs/html/training/tv/start/start.jd @@ -31,7 +31,7 @@ startpage=true

    - Important: There are specific requirements your app must meet in order to + Important: 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 TV App Quality.