[自译]为Apple TV设计

原文作者: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%观看。

遇见你的新朋友,focus engine

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

梳理屏幕外的内容

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

(清晰地指出这里有其他导航内容)

水平很简单,垂直却很难

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

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

区别按钮和内容

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

(在focus engine中,向用户展示他们可能感兴趣的内容是很重要的)

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

(让它可见并且清晰的呈现下一个聚焦控件在哪里,除非你真的想要杀死Tarzan)

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

显而易见

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

(让它及时愉悦地呈现“what”被选中了)

为距离而设计

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

(在 TV上,控件和内容需要比我们习惯的移动端和桌面端更大,更易于导航)

减少文本输入

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

让它生动起来

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

呼吸数据

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

图片移动

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

内容显示

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

资源

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

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

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

原文作者:Michael Flarup

原文地址:Designing for the Apple TV

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 158,117评论 4 360
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 66,963评论 1 290
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 107,897评论 0 240
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 43,805评论 0 203
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 52,208评论 3 286
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 40,535评论 1 216
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 31,797评论 2 311
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 30,493评论 0 197
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 34,215评论 1 241
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 30,477评论 2 244
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 31,988评论 1 258
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 28,325评论 2 252
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 32,971评论 3 235
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 26,055评论 0 8
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 26,807评论 0 194
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 35,544评论 2 271
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 35,455评论 2 266

推荐阅读更多精彩内容