Uidesign: TV UI design elements

Introduction:Most of the text in this article is taken from other websites. After you have sorted it out, you can refer to it during design.

TV UI design elements 1. Interaction

• Respect cross navigation principles and user habits
• Ing operations can be insurmountable and straightforward. system operation efficiency is the first problem to be solved.
• The screen is large, at. It is suitable for horizontal switching, and the vertical layout is suitable for browsing the interface. There must be a grid concept.
• From Basic Unit Customization to complex framework construction, controls derived from basic grid units must be standardized and generalized.
• You must first return to the main interface. The main interface has a very clear TV program portal.
• Gradually jump into the tvos system design age

2. Vision

• Large
• Bright-clear focus (static and quiet)
• Superior performance of block elements
• The color saturation and brightness of the icon must be high.
• The proportion of cold tones and warm tones is controlled at around.
• Add theme elements to a seasonal skin change Design
• Scenario-Based Virtual Reality Design is better than independent element-based Virtual Reality Design

3. Navigation items

• When designing a navigation item based on the cross direction key, there are generally three States of the navigation item,
• That is, "Selected", "focused" and "Selected and focused".
• If Category items and action items are included in the navigation, the Focus movement will not switch the content in the right container when the navigation gets the focus.
• When all the items in the navigation are category items, the focus can be moved together with the selected state, and the right container moves with the focus to switch the content.

To sum up, the navigation design principles are as follows:

• The purpose of the navigation design is to allow users to quickly locate and predict the operation results.

4. Focus Control

• When designing a TV control, you need to increase the response area of the mouse hover to facilitate user operations.

1. It is best to move the pure focus path straight and aligned with the region, as shown in. If you move from a along the Green Line to B, you can better understand and understand it. If you move along the red line, it does not meet your expectations;
2. High Focus movement should avoid large-scale transfer, and the focus of large-scale transfer will make users feel the loss of focus;

5. Color

For the characteristics of TV display, pay attention to the following points during the visual design of UI:

1. Pure White (# ffffff) will produce images on the TV. To use white, use # f1f1f1 (HEX) or 240/240/240 (RGB) instead.
2. The high saturation color will cause display distortion, and edge Blur will occur when the high saturation color transitions to the low saturation color
3. A wide gradient will cause the display of the band and the smooth transition will fail.
4. It is best to leave a 10% gap at the edge of the interface to avoid the phenomenon of "Over scanning (stepping on)" exclusive to the TV display screen.

6. Resolution

Currently, Smart TVs have two resolution modes: 1920x1080 and 1280x720, which we often call 1080p and 720 p. During uidesign:

1. The high-resolution design allows you to use the android 9-patch cut graph for low-resolution adaptation. When testing, you can use a low-resolution test to better detect problems.
2. TV has multiple display modes to ensure that all modes are tested without any problems.