[自译]为Apple TV设计

[自译]为Apple TV设计_第1张图片

原文作者:Michael Flarup

原文地址:Designing for the Apple TV

我们发现自己身处在一个为大屏做UI设计的有趣时代。伴随着2015年末推出的第四代Apple TV,大多数的主要参与者已经抛弃了对现代TV“应该如何观看体验”的旧观念。迷雾逐渐消散并且结果会混杂着比你想的更多的原因。这是一个勇敢的新世界,但是在这篇文章中,我会分享一些我们为丹麦最大的内容提供商构建apps的经验,一些我们至今学到的东西和一些能够帮你入门的资源。

背景解读

主要的参与者像Netflix,Youtube,HBO,Hulu和Plex都有一个版本在tvOS应用商城。然而,他们中的大多数都存在在系统的以前版本或者其它平台像是FireTV,SamsungTV或者其它HbbTV[混合型广播宽带TV(Hybrid Broadcast Broadband Tv)]。因此,在多数情况下,我们现在获取的tvOS应用

是一个传统设计和Apple新设计规范的奇怪组合产物。在很多方面,我们都处在一个人人都想如何去做好它的初级阶段。决策者目前平衡它们用来做什么,保证和其它平台的一致性,尝试推动apple允许他们通过tvOS来做的变动。你可以很容易地发现决策穿过了当前你能在TV上获取的全部方案。

但是更大的一个群体,内容创建者正在决定他们是否应该参与这个平台,如果参与进来了,他们该怎么做?他们中的很多人并没有足够的apps粘性在其它平台上,通过观看这些平台来作为一种,体验趣味性服务于内容的方式。这篇文章非常适合这群人,以及为他们提供解决方案的开发者。如果你打算为Apple TV做一些什么,那么可以继续读下去。

开始很简单

因为积累了很多的其它设备和移动解决方案,为AppleTV做设计和开发是一件轻而易举的事情。它是一种方案,一种设备。事实上就是单一的1920*1080像素,并在单一的硬件设备上调试,这真是一种要被遗忘的奢侈。我就像上面说的那样打开photoshop新建一个画布,导出@1x非retina,非9-patch。在外接设备下我能很轻松的在屏幕上100%观看。

[自译]为Apple TV设计_第2张图片

遇见你的新朋友,focus engine

当在Apple TV上设计超赞体验时,你需要熟悉的主要导航规范之一就是focous engine和一个东西如何“总处于焦点”。不同于IOS或者桌面端,你主要的操作内容是tapping,clicking和scrolling;在TV上,刷过内容然后控制一个被选中的对象。事实上你并不是刷过界面直接控制你所看见的东西,而是通过控制一系列预设的区域焦点在布局上的不同来实现工作的。本篇文章中大部分知识直接或间接的联系到了解fouce engine的优势和局限。

梳理屏幕外的内容

溢出屏幕的行和列的内容应该保持对齐,并且显示至少10%~20%的内容,让用户清楚的了解到这里还有更多内容。

[自译]为Apple TV设计_第3张图片
(清晰地指出这里有其他导航内容)

水平很简单,垂直却很难

水平滑动会比垂直滑动更加顺畅,不仅是在硬件上的实际手势,从屏幕上的一侧滑动到另一侧也会感觉到更轻松。对你的拇指而言,侧向滑动更为简单,结果是你的屏幕上也会映射对应的微妙关系。让你的拇指上下移动来移动屏幕上的所有对象会更困难,因此这是一个更难的交互动作。充分利用这些知识,并保留垂直滚动这一交互动作给更有意义的动作,例如切换类别。

(左右滑动比上下滑动更加舒适)

区别按钮和内容

让按钮和内容清楚地传达出它们表述的含义是非常重要。你不会想让用户进入下一步的时候感到“惊讶”,所以请确保按钮看起来像按钮,内容看起来像内容。

[自译]为Apple TV设计_第4张图片
(在focus engine中,向用户展示他们可能感兴趣的内容是很重要的)

严谨的布置控件,为了让你的用户感觉更佳舒适,控件和内容的布局非常重要。一长串垂直你不会选择的内容,比如一长段文字,不会起到什么作用。考虑到你可能不会去滚动它,然后布置一个可选的元素在它的底部会让导航变得跳跃。在某种意义上,tvOS的用户就像是Tarzan(那位人猿泰山)-从一棵树荡到另外一棵树上;从一个聚焦项目到另外一个。请确保Tarzan可以清楚地看到下一棵树和预期到下一次的摇荡。不要藏起来,没有人希望Tarzan从树上掉下来。

[自译]为Apple TV设计_第5张图片
(让它可见并且清晰的呈现下一个聚焦控件在哪里,除非你真的想要杀死Tarzan)

网格很棒,当你在遥控器上,上下左右滑动的时候,你不会去怀疑焦点是否运动正确。当你打破了网格或偏离了元素,请确定有个很好的理由让它是值得的,不要让导航跳到一个用户不希望它在的地方。

显而易见

确保聚焦的东西看起来就像聚焦。不要模棱两可。使目标扩展,发光或者是改变颜色。夸张的表现方法在大屏幕上或者其他需要体现出层级的平台上表现的很好。

[自译]为Apple TV设计_第6张图片
(让它及时愉悦地呈现“what”被选中了)

为距离而设计

为你的TV构建的界面在几米之外可能会被喜欢或者厌恶。这与移动端和桌面端形成对比,因为我们在桌面和移动端都快把脸塞进屏幕里去了。当为TV设计时,移动端或桌面界面设计的亲密性与生俱来。不仅是因为它远离我们的身体,基于遥控器(即便是触控)的控制也会削弱感觉。所以请确保内容和控件在房间的另一端也能操作。这基本上意味着更大的文字和更清晰的定义控件,同样意味着有意义的网格布局和有指导意义的动画。

[自译]为Apple TV设计_第7张图片
(在 TV上,控件和内容需要比我们习惯的移动端和桌面端更大,更易于导航)

减少文本输入

在TV上输入文本依然很糟糕,当用户不得不去使用的时候尽量限制次数。考虑代替方式例如其他设备登录。

让它生动起来

我们目前看到很多标准化的UI元素被应用在Apple TV apps上,也正如这个时间所愿。但是我希望开发者能够作出更多的尝试,添加他们自己的想法。这里有很多事可以做来让使用产品的体验丰富起来。小动画,图片微位移,显而易见的内容视差。这有一些我们成功的小技巧。

呼吸数据

第一次打开屏幕时进度条会有一个加载到值的动画,它加载了一个动画层,并让数据不在那么乏味,更加生动。

图片移动

Ken burns背景图片,伴随着聚焦元素的上升,和用户的带入,使屏幕画面缓缓移动是一个处理沉浸式的不错手法。

内容显示

在聚焦的控件内流动的内容(在这种情况下来自直播渠道),让用户能够对信息作出选择,无论什么场合尽可能地提高透明度来导向预期。

资源

为了能够更方便地设计Apple TV界面,我做了可用的模板发布在appicontemplate.com上。在tvOS UI模板PSD下,你可以很容易构建当前标准的界面平台。模板包括dark和light两种状态,以及一些常见控件尺寸基于tvOS的1920X1080px画布。

[自译]为Apple TV设计_第8张图片

建立一个更好的居住空间体验

为了得到想要的未来居住空间,我们要为之而努力。为TV设计伟大的体验并不简单,即便是平庸的设计也不容易。我们中的大多数仅仅只是走出了第一步,学习哪些可以或者应该是穿越房间的屏幕,我们无需学习便对移动设备和桌面亲近并且适应新模式。我们需要尝试和挑战TV可以做什么。这令人激动不已。我们打开一个被尘封已久的盒子,并且塑造下一代消费内容的体验。我们不应该轻视这一个任务。我们引导我们的文化遗产和重塑了一个几十年没变的媒介。让我们看看,是否能改变些什么。

原文作者:Michael Flarup

原文地址:Designing for the Apple TV

你可能感兴趣的:([自译]为Apple TV设计)