-
-
-
-
-
-
-
-
-
-
-
diff --git a/docs/html/preview/preview_toc.cs b/docs/html/preview/preview_toc.cs
index 75703a83e20f6..a29214619fee8 100644
--- a/docs/html/preview/preview_toc.cs
+++ b/docs/html/preview/preview_toc.cs
@@ -30,6 +30,19 @@
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.
+ + +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.
+ +
+
+
+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.
+ +
+
+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 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.
+ +
+
+
+Settings
+ +Access to Settings is found at the bottom of the Home Screen. From here, the user can access + Android and device-specific settings. +
+ +
diff --git a/docs/html/preview/tv/design/patterns.jd b/docs/html/preview/tv/design/patterns.jd
new file mode 100644
index 0000000000000..cdba74c15b256
--- /dev/null
+++ b/docs/html/preview/tv/design/patterns.jd
@@ -0,0 +1,86 @@
+page.title=Patterns for TV
+page.tags="design"
+@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.
+ +Navigation, Focus and Selection
+ +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.
+ +
+
+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.
+ + +Icons
+ +Apps on TV devices require some additional icon images for presentation in the system + user interface, including home screen launcher images (banners) and recommendation icons. + The visual specifications for these icons are shown below.
+ + +Banners
+ +App Banners represent your app on the home screen of TV devices and serve and as a way for + users to launch your app. Here are specific requirements for a banner image: +
+ +-
+
- Size: 320 x 180 px, xhdpi resource +
- 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. +
Recommendation Icons
+ +Recommendation cards include a small icon that is imposed over a colored background. + An example and specifications for the this icon are shown below:
+ +
+
+Here are the requirements for recommendation icons:
+ +-
+
- Monocolor: size 16x16dp, white (#fff) icon with transparent background, PNG format +
- Graphics should be centered within the icon image +
+ Note: Your app icon image may be desaturated and blended for some card + displays. +
+ + +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:
+ +-
+
- Full color, 1920 x 1080 pixels +
+ Note: If the image does not meet this requirement, it is scaled to fit. +
+ +Audio Feedback
+ +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.
diff --git a/docs/html/design/tv/principles.jd b/docs/html/preview/tv/design/principles.jd similarity index 66% rename from docs/html/design/tv/principles.jd rename to docs/html/preview/tv/design/principles.jd index 5c0ce10131742..106fa96eac762 100644 --- a/docs/html/design/tv/principles.jd +++ b/docs/html/preview/tv/design/principles.jd @@ -1,45 +1,33 @@ -page.title=Design Principles for TV +page.title=Creative Vision for TV @jd:body -Users bring a specific set of expectations to the experience of watching TV, versus - interacting with a phone or tablet. These principles have been developed by the Android User +
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.
Casual Consumption
The TV is an entertainment interface, not a computer or mobile device. Optimize for activities that put content at the center: from the casual posture of movie-watching, to - edge-of-seat, immersive gameplay, to hanging out with friends in a living room.
+ immersive gameplay, to hanging out with friends in a living room. -Users expect immediate access to to content when they turn on a TV. Get users into the action +
Users expect immediate access to content when they turn on a TV. Get users into the action fast, be it the big game, their favorite show, or a game with friends. The next piece of content to watch or play should only be a click or two away.
-- [add a visual] -
-Cinematic Experience
Create immersive experiences for the user. Design for as little user interface and as much - content as possible on each screen. Use visual imagery, movement and sound to inform and delight + content as possible on each screen. Use visual imagery, movement, and sound to inform and delight users. Avoid using on-screen text to convey information and purpose. Tell your story with pictures and sound.
-- [add a visual] -
-Simplicity
-An Android TV should be simple and magical. It’s all about finding and enjoying content and +
Android TV is simple and magical. It’s all about finding and enjoying content and apps with the least amount of friction. Minimize the number of navigation steps required to perform actions. Build apps with the fewest screens possible between app entry and content immersion. Avoid making users enter text whenever possible, and use voice interfaces when you require text input.
- -- [add a visual] -
diff --git a/docs/html/design/tv/style.jd b/docs/html/preview/tv/design/style.jd similarity index 62% rename from docs/html/design/tv/style.jd rename to docs/html/preview/tv/design/style.jd index 479ed91c093e2..67a70968ec81a 100644 --- a/docs/html/design/tv/style.jd +++ b/docs/html/preview/tv/design/style.jd @@ -9,13 +9,14 @@ page.tags="design"Layouts
The difference between a TV experience that feels right and one that does not greatly depends - on the number, spacing and size of on-screen elements. Although TV sizes and resolutions have + on the number, spacing, and size of on-screen elements. Although TV sizes and resolutions have steadily increased over time, users expect TV experiences to be relatively simple and uncluttered.
The additional resolution and screen area afforded by modern displays is best used to display things at better quality, rather than greater quantity. For example, use your layouts to show - large, beautiful pieces of content, or resize type for both easy reading and generous spacing.
+ large, beautiful pieces of content, or to resize type for both easy reading and generous spacing. +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 @@ -23,33 +24,28 @@ page.tags="design" see the User Interfaces guide.
-Here are some additional recommendations for creating functional and attractive layout for TV +
Here are some additional recommendations for creating functional and attractive layouts for TV apps:
-
-
Build layouts designed for landscape orientation. TV screens always use in this - orientation.
- Put on-screen navigational controls on the left or right side of the screen and - save the vertical space for content.
- Create UIs that are divided into sections, by using Fragments and use view groups - like GridView instead of ListView to make better use of the horizontal screen space.
- Add sufficient margins between layout controls to avoid a cluttered interface.
+ - Design layouts for landscape orientation. TV screens always use this + orientation. +
- 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. +
- Avoid a cluttered interface by adding sufficient margins between layout controls.
Screen Size
- -TV devices running Android are intended to operate at HD resolution (1920 x 1080 pixels) or - higher. Design your artwork assets for best viewing at this resolution.
- -Overscan
During the evolution of TV technology, overscan originally described an area of TV content 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.
-
+
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 @@ -63,8 +59,9 @@ page.tags="design" not match what you see on a computer screen.
Subtle hue or brightness differences between elements may disappear or be over-emphasized on - TV screens. Some color gradient combinations will show bands. You should avoid pure whites and - highly saturated colors in large areas of the screen (especially reds, greens and blues). You + TV screens. Some color gradient combinations will show bands. You should avoid pure whites on + large areas of the screen. For highly saturated colors (especially reds, greens and blues) you + should review them when used to fill significant areas of the screen. You should also avoid using very dark or muddy colors, as TV settings may display these colors with exaggerated contrast, causing them to be indistinguishable.
@@ -76,17 +73,14 @@ page.tags="design" be 18sp. We recommend the following guidelines for TV apps:-
-
- Browse Titles: Regular 44sp -
- Browse Menu Category Text: 20sp at 50% transparency -
- Browse Focused Menu Category Text: 24sp with no transparency -
- Row Category Titles focused: 20sp with no transparency -
- Row Category Titles focused: 20sp at 50% transparency -
- Details Content Titles: 34sp -
- Details Subtext: 14sp +
- Card Titles: Roboto Condensed 16sp +
- Card Subtext: Roboto Condensed 12sp +
- Browse Screen Title: Roboto Regular 44sp +
- Browse Category Title: Roboto Condensed 20sp +
- Details Content Titles: Roboto Regular 34sp +
- Details Subtext: Roboto Regular 14sp
[visual showing text on a TV screen (sidebar position)]
-Some TVs have strong sharpness and contrast settings as their defaults. These picture settings make thin and light typefaces look jagged and make the text difficult for people to read. Therefore you should avoid thin or light typefaces on TV.
@@ -94,15 +88,14 @@ page.tags="design"Text
Use text in TV apps sparingly. The position of users relative to a TV screen - (typically about 10 away) makes it harder for users to read text and the expectation of users in a - TV environment not conducive to reading. Follow these tips for the best handling of text in your - app:
+ (typically about 10 feet away) makes it harder for users to read text. Users also don't expect to + read much in a TV environment. Follow these tips for the best handling of text in your app:- Break text into small chunks that users can quickly scan.
- Use light text on a dark background. This style is easier to read on a TV.
- Avoid lightweight fonts or fonts that have both very narrow and very broad - strokes. Use simple sans-serif fonts and use anti-aliasing to increase readability. -
- Use layout-relative sizing rather than absolute sizing and density-independent + strokes. Use simple sans-serif fonts and anti-aliasing to increase readability. +
- Use layout-relative sizing rather than absolute sizing, and density-independent pixel units instead of absolute pixel units. -