What are the basic rules you need to know about UI design for Apple TV?

Think about it, and you'll find that we're in an interesting phase of the big screen UI design. Apple TV, launched in 2015, is a fourth-generation product, but other similar products are in their first or early stages. The blow out of the press conference will eventually be tested by the market, and the actual situation is more complicated than the expected results. How are you going to design the app for Apple TV? Today's article, I'll share with you the experience of designing apps for the largest content provider in Denmark and the resources that might help you get a glimpse of it.

　Basic information

Major media platforms, such as Netflix, Youtube, HBO, Hulu and Plex, have only 1.0 versions in tvOS's app Store. Most of them are similar to the solutions offered on televisions such as FireTV and SmartTV, which look like old versions of the client and the new system specification. To a large extent, we are in the early stages and no one is sure how to design the app on tvOS. Policymakers are trying to maintain the characteristics of their respective platforms while taking into account the design rules on tvOS.

Content creators, by contrast, are a larger group, and they don't know if they want to participate in the design of the platform, but they need to know how to do it if they decide to participate. They have no decision-making power over the solidified platforms, and they view the new platform as an important channel for trying new tricks and ideas, a new experimental plot. If you're going to build new things on Apple TV and look for new solutions, then you need to read on.

　　Easy to get Started

Designing and developing on Apple TV is easy compared to systems that develop other platforms on other devices. Because there is only one resolution, single device. The interface resolution you need to design is uniform 1920x1080 and requires only a single terminal debugger. For today's designers and developers, this is undoubtedly a luxury thing. If you are a designer, open Photoshop a new standard 1080P canvas is all you need to do, no retina, no need to consider other proportions. A 23-inch external monitor can display all the content you have designed.

　Focus Engine

If you want to create a good user experience on Apple TV, your staff needs to adapt to the new concept of focus engine and understand why "always stay focused." Unlike the common click-and-touch operations on iOS and desktops, you need to slide different chunks of content on Apple TV and always have blocks selected. So you can't directly control the entire interface or simply pick what you want, but you need to select a particular preset block first and then do more detail. Many of the following designs and concepts are inferred and developed based on this basic setting.

　　Exposing content outside the screen

You need the 10%~20% part of the screen to let the user know that there is more to browse.

　　Horizontal navigation easier

On Apple TV, horizontal scrolling is easier than vertical navigation, with the ability to perform horizontal operations with inherent convenience and harmony in hardware and in real-world gestures, which is much more convenient for horizontal sweeps on remote controls than it is to move up and down. The changes on the screen will undoubtedly need to correspond to gestures on the remote, so using horizontal navigation is a more intuitive and effective design.

　　Separate the button from the clear area of the content

Distinguishing between content and navigable operational controls is an important basis for user interface communication, and presumably you don't like the user "pleasantly surprised" that an element is an interactive control.

　　Careful placement of controls

Users will feel comfortable only if the content controls are properly positioned. For example, a very long paragraph of text, and text paragraph users can not directly select, the interactive button at the bottom of the paragraph, such a design is quite a failure. To some extent, in tvOS, users are like Tarzan in the woods, who need to jump from one tree to another, but the next tree is a prerequisite for him to see the next tree. Therefore, the user can manipulate the button, do not hide at the beginning of the user is not visible at the bottom of the paragraph, it is too easy to be confused.

　　Remain visible

Make sure that the focused chunks look like they're being put in the spotlight. These subtle designs do not apply here, and you should make the areas of focus look shiny, big and exaggerated, and you should not let them "remain silent".

　　Designed for long distance browsing

Unlike our everyday familiar mobile phone and computer usage, the TV screen is not within reach of our fingertips, and usually it is a few meters away. The physical distance is only one thing, it also means that we cannot touch and no longer have a sense of control. So make sure that the content and controls on your TV can be read and manipulated across the space. This basically means that the font is bigger and easier to manipulate, which means that the layout is more structured, the action is more clear, and more guided.

　Reduce text entry

It is no doubt that the text input on TV is inefficient and the user operation is extremely laborious. It is best to consider the use of other hardware devices for login, input and other complex input operations.

　　Make the application more vivid

The following picture shows the UI elements in the standard Apple TV, and the entire UI interface is still being perfected at the moment. However, I would like to add more personal style on this basis. There is no need for complex design, want to make the application more vivid, small dynamic effect, interactive feedback, poor design can achieve the goal. Here are some of my successful experiences.

　Let the data breathe

When you just open an interface, let the progress bar fill up until it is close to a certain value, so that the design only need to add a layer on the original interface can be done, it looks very simple, but very effective.

　Let the pictures move.

Let the previously static pictures move in the form of a slow-loading animation, so that the user's vision will better focus on these focused elements and play a guiding role.

　　Rendering content directly

Let the streaming media content in the focus area show up in front of the user, which can increase the transparency of the information and make the user better choice.

Resources

In order to better design the UI of Apple TV, I made a design template and uploaded it to the appicontemplate.com for everyone to download and use.

Of course, you also need to know what Apple's official requirements are for tvOS's interface design, poking around at Apple's official hig.

　　A better living room browsing experience

The future of the living room entertainment experience, should be left on the television, we also need to design and development. It's not a simple thing to have a good experience with television, and presumably you've already experienced it from a lot of "TV boxes." The TV we used to know has changed, and the mobile phones, tablets and computers we've adapted to have a huge difference, and we need to forget the familiar patterns and start from scratch. It's important to create the next generation of TV experiences that we need to do.