* commit '074c1d9313c746c8e8aa6a1f581fad6b7466a1e1': docs: Migrate TV Design docs to main DAC-Design area
@@ -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>
|
||||
|
||||
|
Before Width: | Height: | Size: 80 KiB After Width: | Height: | Size: 80 KiB |
|
Before Width: | Height: | Size: 317 KiB After Width: | Height: | Size: 317 KiB |
|
Before Width: | Height: | Size: 193 KiB After Width: | Height: | Size: 193 KiB |
|
Before Width: | Height: | Size: 7.5 KiB After Width: | Height: | Size: 7.5 KiB |
|
Before Width: | Height: | Size: 1.6 KiB After Width: | Height: | Size: 1.6 KiB |
|
Before Width: | Height: | Size: 114 KiB After Width: | Height: | Size: 114 KiB |
|
Before Width: | Height: | Size: 231 KiB After Width: | Height: | Size: 231 KiB |
|
Before Width: | Height: | Size: 8.1 KiB After Width: | Height: | Size: 8.1 KiB |
|
Before Width: | Height: | Size: 19 KiB After Width: | Height: | Size: 19 KiB |
@@ -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>
|
||||
|
||||
<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}design/tv/images/atv-home.jpg" alt="TV Home screen" />
|
||||
|
||||
|
||||
<p>Android TV is <strong>coming soon</strong> and lets you engage your users in a new, shared environment.</p>
|
||||
<h2>Search</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>
|
||||
<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" />
|
||||
|
||||
@@ -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>
|
||||
@@ -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>
|
||||
|
||||
@@ -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
|
||||
@@ -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" />
|
||||
@@ -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>
|
||||
|
||||