为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

相关推荐

  • 体验方法论:以目标为导向的设计

    产品名称:金融圈APP 设计团队:金融圈UED设计中心 项目介绍:本项目为首页改版方案,与产品经理,交互,运营,视觉四方共同讨论得出的一期改版方向 设计目的:以体验设计方法论体系结合商业目标对APP首屏进行改版 …

    2016-08-31
  • 深聊软件设计中最基础的控件元素

    控件作为组织界面最基础的元素,相信大家都不会陌生,今天想谈谈这个不起眼的话题。文章从现实的控件过渡到软件界面,再用三大输入法的控件作为实际案例解说,全文干货满满,来收!扩大词汇量有助于提高你在某种语言上的表达能力,扩大「设计词汇量」可以帮助你更好地进行设计。但要记住,界面设计真正的艺术在于:解决正确的问题。

    2017-06-04
  • Interaction Design - Beyond Human-Computer Interaction, 4th Edition 下载 pdf&epub

    “交互设计呈现在交互设计领域的高度需要全面的和当代的视角。第三版再次确立了书作为该领域的基本教材。“

    2016-09-08
  • 【交互设计留学】作品集是怎么样的?

      美国交互专业作品集侧重点是一个方向很多的专业,如果学生偏重界面、视觉、解决方案方向,那么作品集要注重调研,以及数据分析,数据展示、解决方案等内容。如果学生是侧重多媒体,交互装置方向,那么作品集要…

    交互设计 2016-05-08
  • 2018年产品经理交互设计交流分享大会

    活动背景一个优秀的产品经理不仅能引导产品的发展,而且还能引导公司的发展。同时,他还是一名优秀的执行者、项目管理和团队管理者,具备敏锐的洞察力,能在用户心理和产品细节间灵活游走,打磨出令人惊叹的产品。所以,在成为CEO之前,先成为一名出色的产品经理吧。然而当我们投入到实际工作中时,总是一次又_次遇到阻碍:和运营、枝术部门沟通不畅,项目推进难。公司要求不高,任务很轻松就能完成,想要挑战大公司,却深知自己还欠火候。看过许多千货,听过许多直播,...

    2018-04-17
  • 用户体验很重要,外卖小票了解一下

    失恋了,今天很丧,老板给我画一个小猪佩奇好吗?这个要求是四川资阳的一个女孩子点外卖时,在订单上给店主留的言。没有想到,店主竟然答应了。1当顾客在向外卖商家提需求时他们究竟要的是什么?不久前,一个在外卖小票上画画的帖子在网上刷了屏。原来,四川资阳一女子失恋点外卖要求画小猪佩奇,店主竟然答应了。据店主回忆,“大概在下午4点的时候,店里接到订单,在备注栏中,顾客称‘失恋了,今天很丧,老板给我画一个小猪佩奇好吗?’ ”为了安慰失恋的顾客,王女士...

    2018-03-26
  • 独家 | 马化腾:用户体验,比一切事情都大

    内容来源:2017年4月26日下午,“清华-青腾未来科技学堂”发布会在深圳举办,马化腾出席了发布会,并以创业者的身份与在场的青腾学员进行交流,分享腾讯的创业经验。笔记侠经主办方授权发布。责编| Even第1715篇深度好文:2825字 | 3 分钟阅读独家·精华笔记·商业思维本文新鲜度:★★★★+口感:绿茶笔记君邀您,先思考:1、战略选择的第一步是什么?2、怎么通过用户体验打动用户?3、如何从互联网跨界中找到大的商机或蓝海?我非常希望也...

    2018-02-01
  • 简约至上--交互设计四策略

    无所不在的产品简单设计人们喜欢简单、值得信赖、适应性强的产品。复杂的产品很难吸引人。所有不必要的功能都是要付钱的。简单并不意味着欠缺或低劣,也不意味着不注重装饰或者完全赤裸裸。而是说装饰应该紧密贴近设计本身,任何无关的要素都应该予以剔除。四个策略以DVD遥控器设计方案为例.删除:去掉所有不必要的按钮,直至减到不能再减。组织:按照有意义的标准将按钮划分成组。隐藏:把那些不是最重要的按钮安排在活动仓盖之下,避免分散用户注意力。转移:只在遥控...

    2018-02-09
  • 手机app开发交互设计的四大要素

    app开发中的交互设计是用户体验好坏的关键点,在开发手机app时,注重的应该是交互设计的效果。用户是交互设计的直接受益人,手机app怎样进行交互设计才能让用户舒心,在这里有四个要素需要把握。手机app开发交互设计在开发过程中是重中之重,这个环节一旦出现问题,用户的体验也会变得别扭难受。怎样进行交互设计,很多人都找不到其中的诀窍,其实只要把握四要素,一切就会变得比较简单。一、遵循平台规范的基本原则遵循平台规范的基本原则并不是说限制于设计规...

    2018-03-24
  • 弹窗设计的5条基本原则

    当你将弹窗设计 及使用得恰到好处时,它们就会是非常有效的用户界面元素。它们能帮助用户快速且便捷地达成目标。然而当错误使用时,弹窗却会困扰你的用户。学会如何设计弹窗,会帮助你在使用时避免那些可能对用户造成的困扰。

    2017-05-22