From cd2445a9aa1159dead4107a770b898c8305aed19 Mon Sep 17 00:00:00 2001 From: Joe Fernandez Date: Tue, 7 Oct 2014 22:55:44 -0700 Subject: docs: Migrate TV Design docs to main DAC-Design area Change-Id: Ie9ba7e519ccdf46b58010d5ff11b4042134b7a57 --- .../preview/tv/design/images/apps-games-rows.jpg | Bin 82048 -> 0 bytes .../preview/tv/design/images/atv-framed-med.png | Bin 324206 -> 0 bytes docs/html/preview/tv/design/images/atv-home.jpg | Bin 197369 -> 0 bytes docs/html/preview/tv/design/images/focus.png | Bin 7729 -> 0 bytes docs/html/preview/tv/design/images/icon.png | Bin 1679 -> 0 bytes docs/html/preview/tv/design/images/overscan.png | Bin 116254 -> 0 bytes .../preview/tv/design/images/recommendations.png | Bin 237004 -> 0 bytes docs/html/preview/tv/design/images/search.jpg | Bin 8344 -> 0 bytes docs/html/preview/tv/design/images/settings.jpg | Bin 19094 -> 0 bytes docs/html/preview/tv/design/index.jd | 70 -------------- docs/html/preview/tv/design/patterns.jd | 86 ------------------ docs/html/preview/tv/design/principles.jd | 33 ------- docs/html/preview/tv/design/style.jd | 101 --------------------- 13 files changed, 290 deletions(-) delete mode 100644 docs/html/preview/tv/design/images/apps-games-rows.jpg delete mode 100644 docs/html/preview/tv/design/images/atv-framed-med.png delete mode 100644 docs/html/preview/tv/design/images/atv-home.jpg delete mode 100644 docs/html/preview/tv/design/images/focus.png delete mode 100644 docs/html/preview/tv/design/images/icon.png delete mode 100644 docs/html/preview/tv/design/images/overscan.png delete mode 100644 docs/html/preview/tv/design/images/recommendations.png delete mode 100644 docs/html/preview/tv/design/images/search.jpg delete mode 100644 docs/html/preview/tv/design/images/settings.jpg delete mode 100644 docs/html/preview/tv/design/index.jd delete mode 100644 docs/html/preview/tv/design/patterns.jd delete mode 100644 docs/html/preview/tv/design/principles.jd delete mode 100644 docs/html/preview/tv/design/style.jd (limited to 'docs/html/preview') diff --git a/docs/html/preview/tv/design/images/apps-games-rows.jpg b/docs/html/preview/tv/design/images/apps-games-rows.jpg deleted file mode 100644 index 5023655..0000000 Binary files a/docs/html/preview/tv/design/images/apps-games-rows.jpg and /dev/null differ diff --git a/docs/html/preview/tv/design/images/atv-framed-med.png b/docs/html/preview/tv/design/images/atv-framed-med.png deleted file mode 100644 index e06f6e7..0000000 Binary files a/docs/html/preview/tv/design/images/atv-framed-med.png and /dev/null differ diff --git a/docs/html/preview/tv/design/images/atv-home.jpg b/docs/html/preview/tv/design/images/atv-home.jpg deleted file mode 100644 index 4b25bab..0000000 Binary files a/docs/html/preview/tv/design/images/atv-home.jpg and /dev/null differ diff --git a/docs/html/preview/tv/design/images/focus.png b/docs/html/preview/tv/design/images/focus.png deleted file mode 100644 index df61f4d..0000000 Binary files a/docs/html/preview/tv/design/images/focus.png and /dev/null differ diff --git a/docs/html/preview/tv/design/images/icon.png b/docs/html/preview/tv/design/images/icon.png deleted file mode 100644 index ae34e18..0000000 Binary files a/docs/html/preview/tv/design/images/icon.png and /dev/null differ diff --git a/docs/html/preview/tv/design/images/overscan.png b/docs/html/preview/tv/design/images/overscan.png deleted file mode 100644 index fb7e4bc..0000000 Binary files a/docs/html/preview/tv/design/images/overscan.png and /dev/null differ diff --git a/docs/html/preview/tv/design/images/recommendations.png b/docs/html/preview/tv/design/images/recommendations.png deleted file mode 100644 index 942cd10..0000000 Binary files a/docs/html/preview/tv/design/images/recommendations.png and /dev/null differ diff --git a/docs/html/preview/tv/design/images/search.jpg b/docs/html/preview/tv/design/images/search.jpg deleted file mode 100644 index c034939..0000000 Binary files a/docs/html/preview/tv/design/images/search.jpg and /dev/null differ diff --git a/docs/html/preview/tv/design/images/settings.jpg b/docs/html/preview/tv/design/images/settings.jpg deleted file mode 100644 index 1c5bf31..0000000 Binary files a/docs/html/preview/tv/design/images/settings.jpg and /dev/null differ 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 - - -

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/preview/tv/design/patterns.jd b/docs/html/preview/tv/design/patterns.jd deleted file mode 100644 index 48faee9..0000000 --- a/docs/html/preview/tv/design/patterns.jd +++ /dev/null @@ -1,86 +0,0 @@ -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.

- -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 - 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: -

- - - - -

Recommendation Icons

- -

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

Here are the requirements for recommendation icons:

- - - -

- 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:

- - - -

- 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/preview/tv/design/principles.jd b/docs/html/preview/tv/design/principles.jd deleted file mode 100644 index 106fa96..0000000 --- a/docs/html/preview/tv/design/principles.jd +++ /dev/null @@ -1,33 +0,0 @@ -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.

- -

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 - immersive gameplay, to hanging out with friends in a living room.

- -

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.

- - -

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 - users. Avoid using on-screen text to convey information and purpose. Tell your story with pictures - and sound.

- - -

Simplicity

- -

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.

diff --git a/docs/html/preview/tv/design/style.jd b/docs/html/preview/tv/design/style.jd deleted file mode 100644 index 67a7096..0000000 --- a/docs/html/preview/tv/design/style.jd +++ /dev/null @@ -1,101 +0,0 @@ -page.title=Style for TV -page.tags="design" -@jd:body - - -

Follow these style guidelines to create beautiful, functional apps for TV.

- - -

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 - 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 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 - the guidance of the Android User Experience team. For more information on using these classes, - see the User Interfaces guide. -

- -

Here are some additional recommendations for creating functional and attractive layouts for TV - apps:

- - - - -

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.

- -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 - top and bottom edges and a minimum of 48px from the right and left edges of the picture.

- - -

Color

- -

Color rendering on televisions can be imprecise compared to computer monitors or mobile - devices. LCD and Plasma TVs often apply smoothing and sharpening filters, and color rendering may - 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 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.

- - -

Typography

- -

The text and controls in a TV application's UI should be easily visible and navigable from a - distance. The minimum recommended font size for TV is 12sp. The default text size setting should - be 18sp. We recommend the following guidelines for TV apps:

- - - -

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.

- -

Text

- -

Use text in TV apps sparingly. The position of users relative to a TV screen - (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:

- - -- cgit v1.1