为TV进行UI设计需要了解哪些基本规则

仔细想想，你会发现我们正处于大屏UI设计的一个有趣的阶段。2015年推出的Apple TV已经是第四代产品了，但是其他的同类型产品尚且处于第一代或者说早期阶段。发布会上吹出的牛逼最终还是要经过市场验证，而实际状况比起大家预期的结果，更加复杂。到底要如何给Apple TV设计APP呢？今天的文章，我将为大家分享一下我们为丹麦最大的内容供应商设计APP的经验和相关的资源，也许能帮大家一窥究竟。

基本情况

诸如Netflix、Youtube、HBO、Hulu和Plex 等主要的媒体平台，在tvOS 的App Store 中都只有1.0的版本。它们绝大多数都同FireTV、SmartTV等电视中所提供的解决方案非常类似，这些客户端看起来像是老版本的客户端和新系统规范的揉合体。在很大程度上，我们正处于初级阶段，现在没人确知在tvOS上应当如何设计APP。决策者们正在力图保持他们各自平台的特性的同时，兼顾tvOS上的设计规则。

相比之下，内容创作者是更大的群体，他们现在并不知道是否要参与到平台的设计中来，但是如何决定参与的话，他们需要知道怎么去做。他们对于已经固化的平台并没有决策权，同时他们会将新平台视作为尝试新手法和新思路的重要渠道，一个新的试验田。如果你打算在AppleTV的基础上搭建新的东西，寻求新的方案，那么你有必要读下去。

轻松入门

相比于在其他的设备开发其他平台的系统而言，在AppleTV上进行设计和开发是一件简单的事情。因为只有一个分辨率，单一设备。你所需要设计的界面分辨率统一为1920×1080，并且只需要为唯一的终端调试程序。对于今天的设计师和开发者而言，这无疑是一件奢侈的事情。如果你是设计师，打开Photoshop新建一个标准1080P的画布就是你需要做的全部，没有视网膜，不需要考虑其他的比例。一个23英寸的外接显示器可以显示你所设计的全部内容。

焦点引擎

如果你想在AppleTV 上创造优秀的用户体验的话，你手下你需要适应焦点引擎这个新概念，并且明白为什么会“始终保持聚焦”。不同于在iOS和桌面端上常见的点击、触摸的操作方式，Apple TV上你需要通过滑动不同的内容区块，并且始终有区块是被选中的。所以你并不能直接控制整个界面或者直接选取你想要的，而是需要通过先选定某个特定的预设置区块，然后进行更细致的操作。下面的许多设计和概念都是基于这一基本设定来进行推断和发展的。

露出屏外内容

你需要显示屏外内容的10%~20%的部分，让用户明白还有更多的内容可供浏览。

水平导航更轻松

在Apple TV上，水平滚动给人的感觉比垂直导航更加轻松顺畅，从硬件和实际手势操作上，水平操作都有着先天的便捷性和和谐性，在遥控器上进行水平扫动比上下滑动要方便得多。而屏幕上界面的变动无疑需要同遥控器上的手势对应起来，所以使用水平导航是更直觉有效的设计。

将按钮和内容清晰地区分开

将内容和可导航可交互的操作控件区分开来是用户同界面沟通的重要基础，想必你也不喜欢用户“惊喜地发现”某个元素居然是可交互的控件。

谨慎安放控件

只有当内容可控件都被正确安置，用户才会感到舒适。比如很长的一个文字段落，而文字段落用户又不能直接选取，可交互的按钮又在段落底部，这样的设计就是相当失败的。从某种程度上而言，tvOS中，用户就像树林中的人猿泰山，需要从一棵树上跳到另外一棵树上前进，但是跳到下一棵树的前提是他必须看到下一棵树。所以，用户可操作的按钮，不要隐藏在用户开始就不可见的段落底部，这样太容易让人感到迷惑了。

保持明显

确保那些被聚焦的区块看起来真的像是被放到聚光灯下一样。那些微妙的设计在此处并不适用，你应当让被聚焦的地方看起来闪亮、变大、夸张，这个时候不应该让这些内容“保持沉默”。

为远距离浏览而设计

和我们日常熟悉的手机、电脑的使用场景不一样，电视的屏幕并不在我们触手可及的地方，通常它都是远在几米之外。物理层面上的远离只是一方面，它同时意味着我们无法触摸，不再具备掌控感。所以，请确保电视中的内容和控件是可以在整个空间内，都可以被清晰阅读和操作的。这基本上就意味着，字体要更大，更容易操控，这样意味着布局要更加规整，动效更加明显清晰，并且更具有引导性。

减少文字输入

在电视上进行文字输入无疑是低效的，用户操作也极其费劲。最好是考虑到使用其他的硬件设备来进行登录、输入等复杂的输入操作。

让应用更生动

下面的图片中所展示的是标准的Apple TV中的UI元素，并且此刻整套UI界面还在不断被完善。不过，我更想在这个基础上加入更多的个人风格。并不需要复杂的设计，想要让应用更加生动，小动效，交互反馈，视差等设计都能达成目的。下面是我的一些成功经验。

让数据呼吸

刚刚打开某个界面的时候，让进度条逐步填满直到接近某个特定的值，这样的设计只需要在原有界面基础上加一层就可以搞定，看起来很简单，但是很有效。

让图片动起来

让之前静态的图片，以缓慢加载的动画的形式动起来，这样用户的视觉会更好地聚焦到这些聚焦元素之上，起到引导操作的作用。

直接呈现内容

让聚焦区域内的流媒体内容展现在用户面前，这样可以增加信息的透明度，从而让用户更好的选择。

资源

为了能能更好的设计Apple TV的UI界面，我制作了一个设计模板，并上传到了appicontemplate.com供大家下载使用。

当然，你还需要了解苹果官方对于tvOS的界面设计有着怎样的要求，戳这里看苹果官方的HIG。

更好的客厅浏览体验

未来的客厅娱乐体验，应该就落在电视上了，我们也需要为此而设计和开发。想让电视拥有好的体验并不是一件简单的事情，想必大家已经从诸多“电视盒子”上体验到了这一点。我们曾经熟悉的电视已经发生改变，而我们适应的手机、平板和电脑和新的电视还有着巨大的差别，我们需要忘掉之前熟悉的模式，从头开始。塑造下一代的电视体验，是我们需要做的事情，这很重要。