138 lines
5.4 KiB
Plaintext
138 lines
5.4 KiB
Plaintext
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>
|
|
|
|
<h2>Navigation, Focus and Selection</h2>
|
|
|
|
<p>Users typically navigate TV devices using a directional pad (D-Pad). This type of controller
|
|
limits movement to up, down, left, and right. As you design your app for TV, make sure your
|
|
user interface has clear paths for two-axis navigation by aligning objects in lists and
|
|
grids.</p>
|
|
|
|
<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
|
|
what object is focused, so users can easily see what action they can take. Use scale, shadow
|
|
brightness, opacity, animation or a combination of these attributes to help users see a focused
|
|
object.</p>
|
|
|
|
<h2 id="banner">App and Game Banners</h3>
|
|
|
|
<p>App Banners represent your app or game on the home screens of TV devices and serve and as a way for
|
|
users to launch your app. Here are the specific requirements for a banner image:
|
|
</p>
|
|
|
|
<ul>
|
|
<li>Size: 320 x 180 px, xhdpi resource</li>
|
|
<li>Text should be included in the image. If your app is available in more than one
|
|
language, you must provide versions of the banner image for each supported language.</li>
|
|
</ul>
|
|
|
|
<p>See <a href="{@docRoot}training/tv/start/start.html#banner">Provide a home screen banner</a>
|
|
in Get Started with TV Apps for more information.</p>
|
|
|
|
<h2 id="recommendation">Recommendations</h2>
|
|
|
|
<p>The first row of the Android TV home screen displays cards for content recommended by applications.
|
|
Your application provides these recommendations, as described in <a href="{@docRoot}training/tv/discovery/recommendations.html">
|
|
</a>. For a visual overview of recommendations, see <a href="design/tv/index.html#recommendations">
|
|
Design for Android TV</a>.</p>
|
|
|
|
<div class="cols">
|
|
<div class="col-8 with-callouts">
|
|
|
|
<p>The design elements of the recommendation card are as follows:</p>
|
|
<ol>
|
|
<li><strong>Large icon</strong></li>
|
|
<li><strong>Content title</strong></li>
|
|
<li><strong>Content text</strong></li>
|
|
<li><strong>Small icon</strong></li>
|
|
</ol>
|
|
|
|
<p>The design specifications for these elements are described below.</p>
|
|
|
|
<p>You can also set a background image (not shown) and the color of the card's text area in the
|
|
recommendation notification. See <a href="{@docRoot}training/tv/discovery/recommendations.html">
|
|
Recommendations</a> for more information.</p>
|
|
|
|
</div>
|
|
<div class="col-5">
|
|
|
|
<img src="{@docRoot}images/tv/recommend-card.png">
|
|
|
|
</div>
|
|
</div>
|
|
|
|
<h3>Background Image</h3>
|
|
|
|
<p>The background image also appears behind the recommendations
|
|
row and fills the Android TV home screen when the user selects the recommendation card. This image
|
|
should be different than the one provided for the large icon, and meet the following specifications:</p>
|
|
|
|
<ul>
|
|
<li>Measure 2016 x 1134 pixels (1920 x 1080 plus 5% margin for for motion)</li>
|
|
<li id="solid-background">Must not be transparent</li>
|
|
</ul>
|
|
|
|
<p class="note">
|
|
<strong>Note:</strong> If the background image does not meet the size requirements, the system
|
|
scales it to fit.
|
|
</p>
|
|
|
|
<p>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.
|
|
</p>
|
|
|
|
<h3 id="icons">Icons</h3>
|
|
|
|
<h4>Large icon</h4>
|
|
|
|
<p>Typically, the large icon is an image of the content for the recommendation. It appears
|
|
above a colored area that contains the recommendation content title and text. This image should be
|
|
different from that which you provide for the background image, and conform to the following
|
|
specifications:</p>
|
|
|
|
<ul>
|
|
<li>Height: 176dp or more</li>
|
|
<li>Minimum width: 2/3 of the height (117dp for an image 176dp in height)</li>
|
|
<li>Max width: 4/3 of the height (234dp for an image 176dp in height)</li>
|
|
<li>Must not be transparent</li>
|
|
</ul>
|
|
|
|
<p class="note">
|
|
<strong>Note:</strong> If the large icon does not meet the size requirements, the system
|
|
scales it to fit.
|
|
</p>
|
|
|
|
<h4>Small icon</h4>
|
|
|
|
<p>Recommendation cards include a small icon that is imposed over a colored background. The icon and
|
|
background color display at 100% opacity when the card is selected, and at 50% opacity when not
|
|
selected.</p>
|
|
|
|
<img src="{@docRoot}design/tv/images/icon.png" alt="Recommendation icon examples" />
|
|
|
|
<p>Here are the requirements for recommendation small icons:</p>
|
|
|
|
<ul>
|
|
<li>Flat image</li>
|
|
<li>Monocolor: size 16x16dp, white (#fff) icon with transparent background, PNG format</li>
|
|
<li>Graphics should be centered within the icon image</li>
|
|
</ul>
|
|
|
|
<h2>Audio Feedback</h2>
|
|
|
|
<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, use sounds
|
|
to indicate that a user has reached the end of a list or is trying to navigate to an undefined
|
|
location.</p>
|