为APPLE 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上的设计规则。

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

  轻松入门


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

  焦点引擎

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

  露出屏外内容


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

  水平导航更轻松


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

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


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

  谨慎安放控件


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

  保持明显


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

  为远距离浏览而设计


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

  减少文字输入

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

  让应用更生动

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

  让数据呼吸


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

  让图片动起来


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

  直接呈现内容


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

  资源

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


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

  更好的客厅浏览体验

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

时间: 2024-11-02 20:13:27

为APPLE TV进行UI设计需要了解哪些基本规则?的相关文章

智能电视UI设计那些事儿

随着国际市场上Google TV的发布和国内电视厂商纷纷推出定制Android TV的脚步,一时间智能电视平台成为了众多高科技企业争相抢占的新市场.较早的智能电视平台探索者有Google TV.Apple TV和Samsung Smart TV,还有传说中将要上市的iTV. 国外一些知名服务,如Youtube.Twitter.Netflix等,均在这些平台上发布了应用.国内电视厂商多使用Android平台,我们就来谈谈在Android TV上设计app的那些事儿. 智能电视的使用特点--距离远.

Apple TV若想打败对手,有四件事要做

腾讯数码讯(编译:任艳梅) Apple TV在苹果的众多产品中,似乎一直是可有可无的"小爱好",在今年的Apple Watch发布会上,它也没有得到硬件升级,仅仅是降低了价格,令人颇感失望. 但不能否认的是,互联网电视是整个电视行业的大趋势,苹果也需要更加认真地面对.据华尔街日报消息称,新款Apple TV或将在6月举行的WWDC 2015大会上亮相,同时还将集成新的流媒体服务,包括电视直播.那么,如果苹果想要真正专注互联网电视业务,与Netflix.Sling TV以及来势汹汹的索尼

当 App Store 遇上电视,开发者的第四代 Apple TV 开箱体验

当 App Store 遇上电视,开发者的第四代 Apple TV 开箱体验 引子 2015 年 9 月,San Francisco.今年接近 100 华氏度的气温要比往年都更热,而 Apple 例行的秋季发布会也如期在这里举行.自从 iPhone 一战成名后,每年的 iPhone 旗舰机型都是移动通讯设备的业界标杆.而今年秋季发布会大家也自然地将重点放在了最新的 iPhone 6s 上.手机乏善可陈,除了硬件参数的一些常规升级外,我们并没有看到 iPhone 有多大进步.不过这也是大家预料之中

Apple TV资源整合就绪

摘要: 从台湾产业链反馈的消息来看,苹果(486.22, 4.69, 0.97%)推出iTV电视产品只是时间问题,数天前我们针对这个问题进行了解读:<软硬件整合就绪 苹果正秘密打造iTV电 视>,分析师普遍认 从台湾产业链反馈的消息来看,苹果(486.22, 4.69, 0.97%)推出iTV电视产品只是时间问题,数天前我们针对这个问题进行了解读:<软硬件整合就绪 苹果正秘密打造iTV电 视>,分析师普遍认为,苹果将会在2014年10月之前正式推出iTV电视产品,届时将于日本(索尼

当 iOS 7 设计风格遇到 OS X 和 Apple TV,看起来还不错吧?

class="post_content" itemprop="articleBody"> 每当我们讨论起 iOS 7 的视觉设计这个话题的时候都会相当的热烈,看的出来很多人已经渐渐喜欢上这样的设计风格,但是还有数量可观的用户群体对这样的"颠覆性"设计表示不满.不过已经这样了,Jony Ive 短期内不会再改吧-- 我们也都知道苹果近几年不断的整合 iOS 和 OS X 这两个操作系统平台,相互之间更多的借鉴甚至是融合了起来.那么未来的 OS

专注产品UI设计:移动界面设计原则和设计工具

文章描述:移动界面设计点滴. 移动平台的设计与传统的网页有许多不同之处,如独特的交互体验.不同光线下的视觉效果以及移动终端的资源有限.这些都考验着开发者的技术. 通过对设计移动界面的点滴记录,本文为读者介绍了对界面的规划的设计原则以及相关案例,并且推荐了自己中意的设计工具. 一.减少空间占用 与面向桌面电脑的网页设计不同,移动平台的设计中,屏幕空间是一个不可忽视的限制因素.设计需要符合移动平台用户的使用习惯,以最佳的状态呈现屏幕信息. 接下来以当前正在工作的UI做为sample,实战空间优化.

从零开始全面掌握UI设计的配色方法

  一篇你绝对不想错过的文章!以前的色彩知识大多是基础科普,容易看完就忘,配色时还得翻书.但今天这篇,大多是从实战出发,学完可以立刻上手,而且还附有作者本人的色板.配色工具等等,无论是小白还是UI设计师,这篇都不容错过! 我们从小都能熟练地区分颜色,但为什么当我们需要运用色彩进行UI设计的时侯,却往往发现很难恰到好处地运用色彩,作出那些和谐得体.令人赏心悦目的设计来呢?--我觉得原因是我们对色彩的认识和实践不足,以及当我们做设计时,很容易会过度地使用色彩.作为设计初学者,你需要掌握基本的色彩理论

设计更好的用户体验:UI设计的黄金规则

文章描述:解析应用程序UI设计的15项黄金法则. 好友曾向我展示了最新的iPhone和iPad版<极品飞车>.游戏的渲染效果令人印象深刻,是款蓄势待发的优秀游戏.但是,游戏的前端是典型的UI设计偏差案例.但界面中有大量的属性数据等内容,它在玩家没有时间做决定时提供了过多的内容.这些内容能够显著改变他们的游戏体验,但却在玩家往往感受不到变化的时候呈现. 极品飞车(from itunes.apple.com) 这促使我开始思考UI设计的黄金法则.以下是我认为创造最佳体验应当使用的UI设计方法.坦诚

UI设计:触摸优先设计、响应式设计、移动优先设计

文章描述:UI应遵循的三大网站设计原则. 触摸优先设计.响应式设计.移动优先设计是UI设计师设计网站应遵循的三大原则,以使网站最大范围地适应各种设备.外文<Designing The Well-Tempered Web>中详细阐述了这三大原则.CSDN对该文进行了编译,内容如下: 随着技术的进化,Web设计的艺术和技巧也在不断进化.新的技术创造了新的挑战,而新的挑战要求新的解决方案.我们通常工作在未知领域,需要给出全新的解决方案. 考虑到有限的Web设计历史,我们必须超越当前的领域去回答更有挑