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

Date 2025-05-09 11:40:57

仔细想想,你会发现我们正处于大屏幕UI设计的有趣阶段。2015年推出的Apple 电视已经是第四代产品了,但其他同类产品仍处于第一代或早期阶段。新闻发布会上的牛最终必须得到市场的验证,实际情况比预期的结果更复杂。如何提供应用程序? 电视设计应用程序呢?在今天的文章中,我将与您分享我们为丹麦最大的内容供应商设计应用程序的经验和相关资源,这可能会帮助您一窥。

基本情况

比如Netflix、Youtube、HBO、Hulu和Plex TVOS等主要媒体平台 的App Store 只有1.0版本。它们大多与FireTV相同、Smarttv和其他电视提供的解决方案非常相似,它们看起来像旧版本的客户端和新系统标准的组合。在很大程度上,我们正处于初级阶段,没有人知道如何在TVOS上设计应用程序。决策者正试图保持自己平台的特点,同时考虑到TVOS上的设计规则。

相比之下,内容创作者是一个更大的群体。他们不知道是否参与平台的设计,但如何决定参与,他们需要知道如何做。他们对固化的平台没有决策权。同时,他们将新平台视为尝试新技术和新思路的重要渠道和新实验领域。如果你打算在应用程序电视的基础上建立新的东西并寻求新的解决方案,你需要阅读它。

轻松入门

1-jHRMdU6Fx1FB0NQJmZl2_g

与在其他平台上开发其他设备的系统相比,在AppleTV上设计和开发是一件简单的事情。因为只有一个分辨率,一个设备。您需要设计的界面分辨率统一为1920×1080,只需要为唯一的终端调试程序。对于今天的设计师和开发者来说,这无疑是一种奢侈。如果你是一名设计师,打开Photoshop,创建一个标准的1080P画布是你需要做的一切,没有视网膜,没有其他比例。一个23英寸的外部显示器可以显示你设计的所有内容。

焦点引擎

如果你想在Appletv中使用, 如果你创造了一个优秀的用户体验,你需要适应焦点引擎的新概念,并理解为什么“始终保持焦点”。不同于iOS和桌面上常见的点击和触摸操作,Apple 在电视上,您需要滑动不同的内容块,并且总是选择一些块。因此,您不能直接控制整个界面或选择您想要的,而是需要选择特定的预设块,然后进行更详细的操作。以下许多设计和概念都是基于这个基本设置来推断和发展的。

显示屏外内容

1-xImKMHHH7Da6zEXyfXsqiA

您需要显示屏外内容的10%~20%,让用户了解更多内容可以浏览。

水平导航更容易

1-CU7fjDl6oe60mMKx1jiRRg

Apple 在电视上,水平滚动比垂直导航更容易、更光滑。在硬件和实际手势操作方面,水平操作具有先天的便利性和和谐性,在遥控器上进行水平扫描比上下滑动方便得多。屏幕上界面的变化无疑需要与遥控器上的手势相对应,因此使用水平导航是一种更直观、更有效的设计。

清楚地区分按钮和内容

1-_NUZZ2Rv-ekXJ-RW3Wd0Iw

区分内容和可导航、可交互的操作控件是用户在同一界面上沟通的重要基础。你一定不喜欢用户“惊喜地发现”某个元素实际上是可交互的控件。

小心地放置控件

1-f7Ygu9EFfX1Xj4_IPTV3sg

只有当内容控制器正确放置时,用户才会感到舒适。例如,一个很长的文本段落,用户不能直接选择文本段落,互动按钮在段落的底部,这样的设计是相当失败的。在某种程度上,TVOS中的用户就像树林中的猿泰山,需要从一棵树跳到另一棵树,但跳到下一棵树的前提是他必须看到下一棵树。因此,用户可操作的按钮不应隐藏在用户开始时看不见的段落的底部,这太容易感到困惑。

保持明显

1-_NUZZ2Rv-ekXJ-RW3Wd0Iw

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

设计远程浏览

1-3X02vi06nNztO8Y3S1v6yg

与我们熟悉的日常手机和电脑的使用场景不同,电视屏幕不在我们触手可及的地方,通常离几米远。物理距离只是一个方面,这意味着我们不能触摸它,不再有控制感。因此,请确保电视中的内容和控制器可以在整个空间中清晰地阅读和操作。这基本上意味着字体应该更大,更容易控制,这意味着布局应该更整洁,动态效果更清晰,更具指导性。

减少文本输入

在电视上输入文本无疑是低效的,用户操作也是极其困难的。最好考虑使用其他硬件设备进行复杂的输入操作,如登录和输入。

使应用程序更加生动

下标准Apple显示在图片中 电视中的UI元素,目前整个UI界面仍在不断改进。然而,我想在此基础上增加更多的个人风格。不需要复杂的设计,希望使应用程序更加生动、动态效果小、交互反馈、视差等设计能够实现目标。以下是我的一些成功经验。

让数据呼吸

1-Nq0SkgfLjJlKjwWIOtKGwA

刚打开界面时,让进度条逐渐填充,直到接近特定值。这种设计只能在原界面的基础上添加一层。它看起来很简单,但很有效。

移动图片

tvOS focus 1

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

内容直接呈现

tvOS focus

在用户面前展示聚焦区域内的流媒体内容,可以提高信息的透明度,让用户做出更好的选择。

资源

为了更好地设计Apple 我在TV的UI界面上制作了一个设计模板,并上传到appicontemplatetee.下载使用com。

1-9gbBAOUV-zOA_VjkG-vsvg

当然,你也需要知道苹果官方对TVOS界面设计有什么要求,戳这里看苹果官方的HIG。

客厅浏览体验更好

未来的客厅娱乐体验应该落在电视上,我们也需要设计和开发。让电视有一个好的体验并不是一件简单的事情,我们必须从许多“电视盒”中体验到这一点。我们曾经熟悉的电视已经改变了,我们适应的手机、平板电脑和新电视仍然有很大的不同。我们需要忘记以前熟悉的模式,从头开始。塑造下一代的电视体验是我们需要做的,这是非常重要的。

课程推荐
— Course recommendation —
【红喵设计教育】ps教程-ps零基础课程

红喵设计

【红喵设计教育】C4D基础-C4D软件制作教程

红喵设计

【红喵设计教育】包装设计-免费/PS/AI/CDR/平面设计

红喵设计

【红喵设计教育】版式设计-版式的思路PS/AI/CDR/平面设计/排版技巧

红喵设计

【红喵设计教育】ps基础-ps基础入门教程

红喵设计

【红喵设计教育】CDR基础-CDR零基础入门教程

红喵设计

【红喵设计教育】海报基础-PS合成海报设计教程

红喵设计

【野马设计教育】AI基础-AI软件零基础到精通

红喵设计