Production determines consumption, and the alternating promotion of TV carrier innovation, Internet video services and technology promotes the upgrading of the audio-visual experience of the public home. So, how to design a home audio and video application for large-screen TVs? Let’s take a look together.

Review before, we could only watch live content such as CCTV, Jiangsu Satellite TV , and Hunan Satellite TV when watching TV. However, we are not satisfied with live programs, and want to advertise and watch paid content. We want to play back the TV series broadcast during class. What impressed me a lot was the kind of animations that the on-demand stations, which were broadcast on-demand for phone calls and played back and forth. Now, we can voice search for popular online dramas on TV, subscribe to the live broadcast of the Champions League Premier League matches, select various variety shows, and more.
production determines consumption, and it is the alternating promotion between TV carrier innovation, Internet video services and technology that promotes the upgrading of the popular home audio and video experience. How to design a home audio and video application for large-screen TVs is what I want to share next. I plan to start with the differences between TV and mobile phones.
01 The five major differences between smart TV design and mobile phone
User-Context Scenario-Behavior-Tool or Media-Purpose.
1. Scenarios for home use
In different scenarios, people and things have different interaction methods.
When we use mobile phones, the user usage scenario can be mobile, in the bathroom on the subway, using fragmented time, while the TV is usually fixed in the living room and bedroom home scene . The usage duration is the entire period, generally concentrated in the evening.
scene: at what time, where, what environment, and what happens in the end; the classification of scenes in
movies: interior, exterior, physical scene, virtual scene.
2. Family members share
In the home scene, the TV is the public equipment of the whole family, covering people of different ages. Especially for the elderly and children, the usage periods are very different from age to age. Therefore, when using a TV, the user's learning cost is lower, the operation requirements are simpler, and there are different modes to switch.
As a personal item, mobile phones are more private and personalized. Although mobile phones have sensitive interactions, they have relatively more accurate operation requirements and high learning costs.
3. Careful consumption behavior
Compared with mobile phones, TVs are not suitable for functional operation tasks. As a home leisure and entertainment device, the usage scenarios and functions are relatively single. Leisure and entertainment are the main uses of TV, including learning, smart assistants, home control, decoration, etc.
4. The interactive mode of remote control + voice input
is different from the mobile terminal. The TV experience takes place in different spaces and needs to be clearly visible from 3 meters away. In near-field interaction, entity and touch are the first choice, while in medium and far-field interaction, voice becomes the first choice for input methods. The remote control, a remote remote control entity input method, is low in learning and has been retained to this day.
5. Purpose of immersive experience
People often use TV with a relaxed mindset, hoping to get an immersive entertainment experience that cannot be obtained when watching a small screen. Compared with mobile phones, TVs pay more attention to immersive experiences and achieve movie-like effects.

02 How to think about the interface design of smart TV
First of all, when designing the TV side, we can refer to the TV side design principles of Android and Apple to dominate the interface design. Secondly, we can still think about the direction of interface design based on the five elements of design.

1. Limitations of usage scenarios
1) Used in combination with the dark mode of the scene
TV usage scenario: Night Living Room Environment - has the characteristics of low light, quiet, and comfortable . Therefore, we generally use dark theme to allow the background color to integrate into the scene atmosphere to highlight the content. The contrast between content and background does not need to be too obvious. The choice of background color should not be too dark to make the shadow of the picture visible. Avoid using too saturated theme highlights to avoid harsh feeling.

2) The poster content is clear at a glance
Generally, it is divided into application icons and content recommendations on TV. They all need to be clearly identified from 3 meters away. The tone of each picture can be uniformly different from the background.
The simple background is used in the image to make the subject stand out without overwhelming the nearby content. Using too much gradient will actually weaken the overall contrast, so the use of colors in the picture should be reduced to highlight the main content.

3) Avoid the theme color glaring and distortion
Pure white (#FFFFFF) can be very glaring on a bright TV screen, and it is recommended to use light gray (#EEEEE) as the default text color on a dark background. Also, some highlighted theme colors should be paid attention to when applying them to the TV interface design, especially red, yellow and orange colors, which will be particularly severely distorted.

4) Text recognizable
Because reading a large amount of text from a distance will cause eye fatigue, you must carefully consider the number of words displayed in the text. Avoid using text if you can communicate with images or animations. Ensure that all kinds of fonts are clearly visible in the distance. The general system font should not be less than 22px (12sp), and try to simplify the font style and avoid excessively fine font weights.

2. Restrictions on the device itself
1) Common TV sizes
Mainstream TV sizes are generally between 43-85 inches, and the common ones are 43, 50, 55, 60, 65, 75, etc. Consumers choose the appropriate TV size based on the viewing distance. The ruler of the TV screen generally follows the 16:9 TV screen aspect ratio . We generally use 1920×1080 as the minimum canvas, which is the most common TV resolution at present, and all picture resources are @1x resolution. With the popularity of 4K content, 1920×1080 can also be used, but images that should be provided with @2x images are required.
asked: What K is the TV of 1920×1080? Does 1080P refer to the resolution size of 1920×1080?

2) Canvas Size and Security Area Settings
Due to overscan on old TVs, unexpected cropping may occur, and a security area needs to be left to keep the main content away from the edge of the screen. generally leaves about 5% of the distance between the canvas up, down, left and right.

3) The color rendering difference is obvious. It is necessary to test
. Each TV focuses on the picture quality as a selling point. The prices are different. The picture quality processing technology of each store is also different. It can be seen that the picture quality of each store must be different. The main differences are color rendering, color gamut, light control, picture quality, etc. In summary, the color rendering difference is obvious. We should conduct display tests on the TV models that consumers mainly use. Especially, colors such as green, red, and yellow are prone to obvious color difference.

3. Manipulation limitations
is precisely because of such a peripheral input source, you need to consider the touched but untriggered upper focus state (focused), just as when there is input on the keyboard, and when the mouse is suspended. The TV focus design follows the general Android design principles and has its uniqueness.
1) D-PAD cross interaction and grid layout
We can call the interaction form between D-PAD and the screen "cross linear interaction". It is this interaction form that determines the basic form of interface layout at the output end.
In this large screen, our focus can only follow the command of D-PAD to walk horizontal or vertical lines, and the path of each position can only walk two-dimensional "ten" lines, which can better guide the user to what he wants. (The very typical principle of closeness is used here.)
designers and developers are familiar with using grids to layout horizontal pages, while TVs often use grids with uniform spacing to standardize content collections, which facilitates remote browsing and also facilitates quick navigation of the remote control. The design can customize the number of columns according to the content, and can even reach 9 columns.

2) The level of focus in space
Position and sense of direction: In the Android design language, we can divide the levels between controls through different positions on the Z axis. It is usually expressed through changes in shadows. Therefore, in order to highlight the position of the focus, the focus generally has obvious shadows. Other styles may be added to enhance it.
At the same time, in order to clearly point to the location where D-PAD can reach, we also need to avoid overlap between controls when designing the layout.
is the Z-axis direction, with only one focus and ordinary levels, and the (upper focus) ordinary levels do not overlap each other.

4. Restrictions for multiple users
1) Multi-mode
input source under home sharing not only considers the input device itself, but also considers multiple people from multiple people, which may be collaborated by multiple people or shared by multiple people. In this home environment scenario, the information page under the corresponding account is provided according to the user's different information, and multiple people conduct TV operations together.

2) Age segmentation mode presents different contents and UI
In the mode of multiple users, different users need to be classified. The common user modes on the TV are: children, ordinary, and elders. Under the three modes of
, the tone, background, spacing, focus, font size, and content posters are adjusted visually. It means that many controls need to be customized. (Operation can also be configured)

3) Resident "newbies" prompts and boots
TV is still a public device, and different people use it at different times. Different age groups also have different familiarity with smart TV operations. When we design guided pages, we will also make repeatable process pages instead of one-time guidance. Common examples are such as button copy design as copywriting with operation description, and focal bubble prompts, etc.

5. Immediateness and immersion experience
On the home page, users are more interested in content. Users can immediately see the video content by selecting one content. Therefore, it is recommended to use the method of obtaining focus, that is, execution, which can save search costs. The user clicks the confirmation key to enter the playback page.
One is to switch the background image with focus and automatically play it.

One is to automatically play the gasket content when the focus is focused on the content and not moved, without entering the second level, the selected instant playback is selected.

03 How to plan a TV application page
TV application has few levels and flat structure. Below I will give examples of how to think about the information arrangement of a large-screen page and some design priorities of the page focus.
1. The four common page structures
Android design guide lists several common page structures: browsing view, detailed view, consumption view, and search view. These types of page structures basically constitute a main process for browsing a content on the TV side, selecting a content from a voice or recommended project, entering the details and starting to watch. The corresponding page effects of

in appleTV are shown in the figure below. They all reflect the immersion brought by the large canvas background + no split view, and there is no unnecessary status bar title bar.

A common process is as follows: After selecting the viewing content in the browsing view, the detailed view or the search view, we enter the consumption view (video playback page), and may actively or passively select related content, jump to play or picture-in-picture playback.




04 Take a K song application as an example

1. Product positioning
Migu Ai Singing is a product that mainly provides users with music copyrighted content (including music MV, K song accompaniment, concerts) through membership payment.


2. Key page layout - browse view
When we start with our behavior, what is the information page of a karaoke, we can think that under the behavior of a family karaoke, it corresponds to multiple people's control and use for many years. The layout is the best. It is best to see the instant karaoke accompaniment MV at a glance, and there is a QR code that allows multiple people to operate the song order at the same time, supporting convenient voice search.
Based on the determined functional point module, based on the immersive purpose and the rules of cross interaction, I replanned a homepage layout with no main center in real time. The content displayed has not changed, but the entire page is no longer a divided card but a primary and secondary function and information arrangement.


Newly planned immersive layout1

Newly planned immersive layout2
3. Key page layout-consumption view (play page)
Consumption view not only carries the most important audio-visual content, but also has some personalized recommended services and functions. Therefore, when designing, you need to mention the page to consider it first.

pure lyrics content view, lyrics are literally on the screen, which is a unique display form of karaoke. LRC lyrics themselves have time scales, so here I associate the time progress bar with the lyrics. The user moves up and down to select single sentences more intuitively, rather than fast forward or backward.

content recommendation + lyrics display content view. In fact, this is the page effect after selecting the playlist on the previous page. I tend to generate a cover picture for each song. (Generally every song will have pictures or MV)

video displays the content view. When playing the content, minimize the experience of selecting content for immersive viewing. When the content is played, you can weigh the business needs later.

4. Color matching
The commonly used dark tone color matching can certainly be better highlighted, but considering matching the daytime atmosphere, light tones are also possible. The shadows on the light background can more clearly highlight the focus level. More importantly, the color of the button background can be displayed on different materials. And the overall tone selection of all pictures.



Dark Transparency Button Background Color on Two Backgrounds

Medium Gray Transparency Button Background Color


Of course, the target users of each TV large screen are different, and it should be designed and planned according to the main groups. Because the karaoke product is also a product that includes both children and elderly users. Therefore, for different users, the channel styles also differ.




Whether we are from foreign applications such as .netfly and Amazon , or from several top video websites in China, we can find that the covers of film and television works also present some directions and styles I give below. When we display pictures of TV applications, we should follow the style of streamlined, clean, and unified light effects.




Some previous design examples
5. Focus state design
1) The state of the remote control and focus
1) How many types of control states are required only depends on the input source. For example, if your input source is mouse + keyboard, then focus (give to keyboard), hover (give to mouse), active (press the mouse/keyboard), and then be more delicate and you will want to add disabled. It is precisely because of the long-distance interaction + button form that the focus state on the TV side is very different. The purpose of theTV focus state is to facilitate users to know clearly and clearly where their cursor is and where they can move.
- Through the unity and immediacy of focus, we can further clearly tell the users on the TV where they stop and where they can go.
Apple TV's unified focus style
control's state and input form are strongly related. If the input source is D-PAD, the focus state of the control is two-dimensional, and the input source is a touch disk, the focus state of the control can be three-dimensional dynamic.

Focus state dynamic picture of Apple TV

Due to the need for strong operation in China, the design of the focus state of TV has been varied and layered.
2) Focus Motion Effect and Remote Control Direction
We have overview of two major design principles, both mentioning movie experience and immersive experience. Some subtle changes in small screens (such as spring) will be enlarged and appear excessively complex. We can imagine the bad experience of falling frames when watching movies. In order to create a visual connection between people and the content on the screen during the animation on the TV side.
, the same as the mobile terminal, can also be considered in this category: startup animation, feedback animation, and transition animation.It can also be considered according to interactive actions, and only used in response to user operations. For example, when considering entry and exit animations, the exit animation can consider unification - corresponding to the return key on the remote control, while the entry animation considers two points:
- Relevance: allows the user to understand what happened just now and what caused the change in the layout.
- Purpose: lets users understand what will happen next and where they can go.
Because the TV side is more of a display form of picture list, the display of picture list often appears in parallax motion, showing a feeling of continuous emergence of vertical content on the large screen.
3) Immersive focus effect
You can currently see this effect in the browser and TV side - that is, when you scroll through the recommended line, as long as you stay on the image for more than one or two seconds, the preview video of each title will start to automatically play. This is a very intuitive interaction on TV, just like we had vivid sounds and pictures when we turned on TV a long time ago.
TV has decades of expectations, and when you turn on the TV, you can play video and audio. So it is actually strange to have a silent experience.
If you want to deeply optimize the excellent dynamic effects of large-screen terminals, you can go to a game console system like PS to learn from it. Regarding how big screen design is improved, I think it is still possible to get a glimpse of the game interface design from the console side. The future large screen will be AR glasses , which is VR, and the TV set has been moved into small consoles and light glasses.
Conclusion
This article mainly uses the five elements of interactive design as a framework, analyzes the unique attributes of TV from the difference between TV and mobile phone, and then leads to some special points of interface design. Finally, take an example of a TV-side K-Song APP design, and explains in detail from several aspects such as layout, color matching, and focus design.
Reference:
- Adroid design guidlines
- tvOS-Human Interface Guidlines
- From physical logic to behavioral logic http://www.360doc.com/content/15/0210/13/21907744_447672901.shtml
- Design basics: Some things about TV interaction design http://www.woshipm.com/ucd/918841.html
- TV end design principles analysis http://www.woshipm.com/pd/4105626.html
- TV UI design quick guide https://www.zcool.com.cn/work/ZMjc3NTU0ODA=.html
- On the TV side, how to carry out card design? http://www.woshipm.com/pd/1047767.html
- TV design, focus knowledge is indispensable https://www.ui.cn/detail/364730.html?nopop=1
- Xiaomi TV children's model experience report https://www.ui.cn/detail/322402.html?nopop=1
- Smart TV launcher design summary https://www.ui.cn/detail/309609.html?nopop=1
- 3 Analysis of aspects: How to provide feedback on the TV side? http://www.woshipm.com/pd/1060010.html
- From Zero to One | Penguin Esports TV's initial cry https://mp.weixin.qq.com/s/aAFNZCp2vg9CYaaQgDWnQw
- Product Analysis | iQiyi - "Will I become a domestic version of Netflix?" http://www.woshipm.com/evaluating/4296471.html
- TV screen recommendation system design? Here is a detailed plan http://www.woshipm.com/pd/1089858.html
This article was originally published by @吧学发学发学发学发学发学发学发学发学发学发学发学发学发学发学发学发学发学发学发学发学发学发学发学发学发学发学发学发学发学发学发学发学发学发学发学发学发学发学发学发学发学发学发学发学发学发学发学发学发学发学发学发学发学发学发学发学发学发学发学发学发学发学发学发学发学发学发学发学发学发学发学发学发学发学发学发学发学� Reproduction of
without permission is prohibited. The title image from Unsplash is from Unsplash. Based on the CC0 protocol
, the views of this article only represent the author himself. Everyone is a product manager. The platform only provides information storage space services.