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

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

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

基本情况

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

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

轻松入门

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

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

焦点引擎

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

露出屏外内容

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

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

水平导航更轻松

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

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

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

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

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

谨慎安放控件

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

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

保持明显

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

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

为远距离浏览而设计

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

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

减少文字输入

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

让应用更生动

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

让数据呼吸

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

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

让图片动起来

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

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

直接呈现内容

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

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

资源

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

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

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

更好的客厅浏览体验

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

 

译文来自优设

译者:@陈子木

原文地址:medium

原文作者:Michael Flarup

 

原创文章,作者:Catherine,如若转载,请注明出处:https://www.iamue.com/29885/

(0)
CatherineCatherine
上一篇 2017-05-26 10:57
下一篇 2017-05-26

相关推荐

  • 最浓缩的概念:交互是什么?交互的本质及如何理解

    在使用一种产品或东西的整体过程。而无论这个使用行为是有无目的导向。本身这个过程,即是交互的本质。而任何一个交互的过程中必定存在交互对相,及交互的媒介。在这里,我先声明一下哦。以下的分析过程可不那么容易跟得上,思维与对生活细节观察力不够的,请直接跳过。但,以下的内容是当年我在新加坡修用户体验时,在交互过程一环中的必修环节。做好心理准备,那就开始看吧。题外话:而如果想改进这一环节,那么在提升交互环节的效率方式手段上,也无非只能是,1,提升硬件能力来加速。2,减少多余软件操作环节。3,有无改变硬软件间关系的其它模式?题外话:而如果想改进这一环节,那么在提升交互环节的效率方式手段上,也无非只能是,1,提升硬件能力来加速。2,减少多余渠道操作环节,如展开一个个目录,或通过其它模式打开。3,提升系统本身效率。产品设计的体验层级关系:
    核心层:产品本质体验层。---这产品是为达成什么用户目的而生的。
    中间层:产品使用过程中的体验层。---这就是我们所有产品中的交互层。
    最表层:产品的视觉体验层。---这部分就是UI〜我们也知道约炮软件其实并没有什么用,但为什么能相对留存久呢?也就是在于用户在心理层上有侥幸心理。同时加上其在媒体上潜意默化的某某成功的宣传。所以,让用户的心理否定延后。所以,相对来说,知道没什么用,但还是久留一下看看。但大多有头脑的。基本上也在一段时间后最终放弃。

    2017-05-25
  • 设计心得:浅析Chatbot聊天机器人界面交互设计

    最近在做智投app的机器人Neo的原型设计,是一个chatbot聊天机器人。整理了一下关于聊天机器人设计的一些心得。

    2017-04-28
  • 全民关注用户体验的时代已经到来

    聚焦2018年全国两会,共有13位人大代表和政协委员提倡在相关领域内发展与提升用户体验,范围遍布于新能源汽车、互联网、通信、教育科研、传媒、版权保护、交通运输与医药等数十个行业,引起了社会各界的广泛关注。两会期间,全国政协委员叶友达向大会提交了《关于鼓励基于用户体验的设计创新,加速科技创新成果转化的提案》。叶友达建议,从国家层面启动基于用户体验的设计创新倡议,构建用户体验设计创新战略和行动纲领。同时要加大对基于用户体验的设计创新的宣传力...

    微信热点 2018-03-22
  • 产品交互阶段的用户心理密码解析

    作者:雪代巴(心理学硕士,PM/UR,来自迅时通信) 无论是产品、用研、设计、开发还是市场运营,都离不开“用户是怎么想的”这个话题,用户从认识产品到使用产品的一系列过程中,他们的“心路历程”是 怎样的,如何从心…

    2016-09-18
  • 一次关于梦想、音乐和代码的交互设计体验

    ▲ Arcade Fire··[Way to Go] 这是树林里的一次漫步, 这是一次惊人的互动体验。 一个不安分的全景, 一次手工制作动画, 用360度视频(精选)拍摄, 混合着音乐、梦想、还有…

    2017-08-02
  • 交互设计笔记整理

    PC与手机对比使用环境pc:固定位置,干扰少,注意力集中,输入方式强大。手机:任何地方,干扰多,注意力难集中,输入方式单一。交互媒介pc:操作精准快速,桌面大显示内容多,过大屏幕会有视觉盲点。手机:手指操作,精准度低、速度慢。使用特点pc:需处理复杂任务,多任务切换,讲究效率和强互动,没有电池流量问题。手机:适合处理简单任务,多任务切换困难,适合各种姿势使用,电池流量问题严重。web与APP界面对比web是书架,内容繁多,一目了然。更直...

    微信热点 2018-04-07
  • 社区O2O与传统社区平台的对比

    社区O2O是一个需要长时间探索的行业,主要是因为社区是一个复杂的地方,看似商机很大但真正建立一个粘度很高的平台并不那么容易,但平台无论从何点切入,其社区的复杂性决定了在平台搭建时不得不去思考以下四点,分别是场景、内容、载体和融合,本次和大家探讨的是生活场景的打造和载体的介入。

    2017-05-21
  • 在网页设计中运用柔和色调

    小编推荐:看一些让人舒服的设计的时候 总是会发现,人家的用色大部分都很柔和,一些温暖人心的设计总是有一些共同特点,网页设计中也有一些使用柔和色调的方式~

    2015-01-08
  • 实例分析:从搜索结果看地图搜索的交互设计

    每一个交互都有其特有的逻辑支撑,即便是一点小小的体验不同,背后的逻辑可能千差万别。

    2017-05-11
  • UED 招聘,多个职位给你更多选择!

    14载,我们初心不变,依然要做行业最有力的的发声者。从一张纸到一串电波,媒介在变,我们的眼光始终如一大家都在说AI是未来,然而在这里,我们依然需要你无可代替的头脑。WE ARE HIRING这次招聘我们为什么要做这次公开招聘?信息爆炸,百家争鸣,越是瞬息万变,媒体的价值愈发凸显。我们不会随便说满意,而是希望在诸多嘈杂的背景声中,发出属于新时代建筑媒体人独到的观点,让关于建筑的解读,走进公众的视野;我们希望以全新的面貌去呈现UED对于中国...

    2018-03-05