电视界面设计揭秘:经久不衰的D-pad导航模式

本文深入探讨电视界面设计的核心交互模式,从10英尺体验原则到遥控器演进历史,重点分析D-pad导航模式如何历经40年技术变革仍保持核心地位,为电视界面设计提供理论基础。

为电视设计:塑造电视体验的经久不衰模式(第一部分)

电视界面设计是一个独特、迷人且常被忽视的领域。它经历了数十年的演进和创新,但仍深受其传统约束。跟随Milan一起探索支配我们控制这些设备的历史、特性和不可动摇的规则。

电视机几十年来一直是我们客厅的主要设备。我们观看、互动和控制,但为它们设计的频率有多高?电视设计多年来一直不在我的"雷达"范围内,直到有一天我发现自己深入设计了专门的电视用户界面。现在,在这个领域积累了相当多的经验后,我想分享这个相当罕见主题的知识。

就像任何其他设备或用例一样,电视有其特性、细节和指导原则。在开始之前,了解核心要点将是有益的。

两个关键范式

注意间隔,或10英尺体验

首先,我们有所谓的"10英尺体验",指的是与电视的互动和消费发生在大约三米或更远的距离。这与手机或电脑的互动显著不同,意味着在电视用户界面设计中需要采取特定方法。

此外,我们将特别注意遵守对比度标准,主要依赖深色界面,因为浅色界面在较暗环境中可能太刺眼。最后,考虑到设备的休闲性质,我们将简化互动。

但10英尺体验只是等式的一部分。如果没有用户和设备之间的中介,如果我们没有从远处互动的东西,首先就不会有"10英尺体验"。

如果没有遥控器,就不会有10英尺体验。

中介者

遥控器,等式的另一半,让我们能够从舒适的沙发上与电视互动。这种按钮集合虽然速度较慢且更谨慎,缺乏鼠标的流畅运动或触摸屏上手指的灵巧性——但遥控器的能力不应被低估。

尽管它基础且功能有限,但遥控器允许一些有趣的设计方法,并能承载现代电视及其不断增长的互动需求。

模式的诞生

随着电视机在1950年代占据人们的客厅,制造商寻求升级和改进用户体验。最终,走到设备前手动调整某些设置的努力被确定为需要改进的领域,结果,第一批电视遥控器被引入市场。

早期发展

遥控器的初步迭代相当独特,在我们最终确定矩形形状并在顶部撒上按钮之前,经历了一些分歧。

以Zenith Flash-Matic为例。这个突出的设备设计于1950年代中期,具有一个触发定向灯的单一按钮;通过将其指向电视机的特定角落,观众可以控制各种功能,如切换频道或调整音量。

虽然与现代对应物相比相去甚远,但像Flash-Matic这样的设备为后续发展奠定了基础!

随着设计的发展,遥控器的核心功能得到巩固。逐渐地,遥控器不仅仅是简单的频道切换器,演变成扩展家庭娱乐领域的指挥中心。

经过二十年的迭代,Zenith Space Command的外形更符合当代遥控器。

然而,尽管它们可能很实用,但仍被视为奢侈品,显著提高了电视机的价格。随着1970年代接近尾声,只有约17%的美国家庭拥有电视遥控器。然而,随着新十年的到来,情况将发生变化。

1980年代的按钮狂热

八十年代带来了Apple Macintosh、MTV和《星球大战》。这是一个文化转变和技术创新的时代。录像机(VCRs)和许多其他消费电子产品与电视一起在世界各地的客厅中找到了位置。

这些新设备在丰富我们媒体体验的同时,也引入了一些新的设计问题。曾经只有一个遥控器的地方,现在有多个遥控器,事情慢慢失控了。

这标志着通用遥控器的出现。

试图用一块石头击中多个目标,笨重的通用遥控器是人类控制更广泛设备的最佳解决方案。它们确实解决了其中一些问题,尽管方式尴尬。

另一方面,几乎是对通用遥控器不便的回应,1980年代构想了一种不同类型的控制器——具有非常基本的布局和按钮组,它将在我们如何与电视互动以及我们的遥控器布局方面留下印记。这个设备有意或无意地产生了一个尚未被打破的导航模式——NES控制器。

D-pad主导地位

于1985年发布的任天堂娱乐系统(NES)立即大受欢迎。在全球销售了六千万台,它给游戏机行业留下了不可否认的印记。

NES控制器(由于它通过电缆连接到中央单元,并非真正的遥控器)向世界介绍了一个看似简单的控制方案。由六个主要动作组成,它给了我们方向键(D-pad)以及两个动作按钮(A和B)。

迷人而直观,这种导航模式将产生无数小时的游戏乐趣,但更重要的是,其基本设计将"渗透"到更广泛的行业——D-pad以及两个动作按钮将成为未来遥控器构建的基础。

世界继续疯狂旋转,曾经的奢侈品变得司空见惯。到十年末,电视遥控器更成为标准电视体验的组成部分,超过三分之二的美国电视拥有者拥有某种遥控器。

九十年代随着进一步的技术进步而来。电视机变得更强大,允许更精细的设置调整。这意味着创建可以完成这些任务的界面,随着它们的主机,遥控器也得到了更新。

八十年代笨重的矩形庞然大物消失了。随着人体工程学优先,它们被更舒适轮廓的设备所取代,更好地适应用户的手。曾经是数十个统一按钮的集合,这些当代遥控器引入了不同的形状和尺寸,允许仅通过触摸进行识别。

逐渐地,D-pad在我们的电视遥控器上找到了位置。随着这些设备的演进,它变得更加深入地嵌入其互动的核心。

机顶盒和智能功能在2000年代和2010年代出现,电视技术继续进步。一路走来,引入了许多附加功能。电视机变得更大、更亮、更薄,但其本质保持不变。

自诞生以来的岁月里,遥控器得到了创新,但所有尝试都回到了NES控制器的核心原则。未来的努力从未能取代,只能增强和强化这种模式。

经久不衰的模式

2013年,LG推出了他们的魔术遥控器(“如此神奇简单,孩子们会教你如何使用!")。这种独特形状的设备在LG电视机上实现了运动控制,允许用户像电脑鼠标一样指向和点击。

创新传统,这个设备为电视世界引入了新功能和新鲜视角。但如果我们看设备本身,我们会看到,尽管有差异,它仍然保留D-pad作为互动手段。

为了一个更好的例子,让我们检查Apple TV的第二代遥控器(第一代Siri遥控器)。作为行业颠覆者,Apple在遥控器的上半部分引入了触摸板。

虽然乍一看似乎Apple移除了方向按钮,但事实上触摸板只是该模式的现代化处理,仍然遵守经典D-pad的相同四个方向。你可以说它是一个带有额外噱头层的D-pad。

此外,触摸板并没有真正受到用户群的欢迎,加上遥控器的人体工程学有点问题。因此,Apple没有用他们的第三代遥控器进一步突破界限,而是做了完全的180度转变,重新引入了经典的D-pad集群,同时保留了前一代的触摸能力。

电视的遗产

让我们看一个旧的屏幕键盘。

《塞尔达传说》于1986年发布,允许玩家在游戏中注册他们的名字。使用NES控制器,玩家将在键盘上移动,逐个字符输入他们的名字。现在让我们看一个屏幕键盘的现代迭代。

注意到区别了吗?或者,更好地表述:你注意到相似之处了吗?多年来,我们引入了生活质量改进,但核心与四十年前完全相同。

布局一切

就像手机和电脑一样,电视布局基于网格系统。然而,这个系统在电视上更加明显和基础。查看标准电视界面,我们会看到它主要由水平和垂直列表组成,也称为架子。

这些网格可能填充卡片、字母字符或任何其他东西,在仔细检查后,我们会注意到我们的运动受到几个因素的限制:

  • 没有指针供我们的眼睛跟随,就像在电脑上那样
  • 无法像触摸屏那样直接与显示器互动

为了用遥控器导航的目的,引入了焦点状态。这意味着一个元素将始终被高亮显示供我们的眼睛锚定,它将是界面内任何后续运动的起点。

此外,从聚焦元素开始,我们可以注意到运动被限制为一次一个项目,几乎像跳石头一样。以这种线性方式导航,如果我们想从元素#1移动到元素#5,我们必须按方向按钮四次。

为了成功导航这样的界面,我们需要能够向左、右、上、下移动——我们需要一个D-pad。一旦我们落在所需的项目上,需要有一种选择或确认的方式,在错误的情况下,我们需要能够返回。为了这两个额外的互动,我们需要两个更多的按钮,OK和返回,或者更抽象地说,我们需要按钮A和B。

所以,要成功导航电视界面,我们只需要一个NES控制器。

是的,我们可以用触摸板和运动手势增强它,用语音控制扩充它,但这种不可动摇的互动基础将作为电视界面固有复杂性的最基本水平保留。任何进一步减少都会显著损害体验,所以多年来我们所能做的只是在此基础上构建。

D-pad和按钮A和B survived decades of innovation and technological shifts, and chances are they’ll survive many more. By understanding and respecting this principle, you can design intuitive, system-agnostic experiences and easily translate them across platforms.

结束思考

虽然在过去几年几乎专门为电视设计,我也经常向利益相关者教育本文概述的原则。试图解决他们对不同遥控器工作方式略有不同的担忧,我在NES控制器的简单性中找到了安慰,以及它如何以可理解的方式传达观点。

理解任何冒险的基本"进"和"出"在实际操作之前至关重要,电视也不例外。现在你理解了基础知识,去挖掘并开辟一些新天地吧。

在详细涵盖电视体验的底层互动模式后,是时候实践了。

在第二部分,我们将探索10英尺体验的构建块以及如何最好地在你的设计中利用它们。我们将回顾电视设计基础(屏幕、布局、排版、颜色和焦点/焦点样式),以及常见的电视UI组件(菜单、“架子”、聚光灯、搜索等)。我还将向你展示如何开始超越基础思考,并在为电视设计时遵守的约束条件下工作。

comments powered by Disqus
使用 Hugo 构建
主题 StackJimmy 设计