重新思考电视平台的用户界面设计 _原型设计

本文概述

电视用户界面基本成分简介
显示器
导航
版式
扫描线
颜色
基础

电视用户界面基本成分简介如今, 绝大多数消费者都在切断付费电视的束缚, 但这并不意味着他们已经避开大屏幕来消费其内容。根据尼尔森发布的数据, 美国成年人的观看习惯发现, 仍有92％的观看者仍在电视屏幕上观看。这些是巨大的数字。

在美国成年人中, 超过92％的观看仍在电视屏幕上进行。

在过去的几十年中, “ 看电视” 的含义发生了很大变化。我们不再局限于用遥控器和电缆盒填充屏幕。我们使用的是智能电视, 或者使用Roku, Amazon Fire和Apple TV等播放器进行流式传输, 或者使用Xbox和Playstation等视频游戏机进行连接。这些设备中的每一个都提供了比老式的屏幕指南更强大的用户界面。
通过基于订阅的在线服务(例如Hulu, Netflix或Amazon)付费观看广播或VOD节目的费用占全球在线受访者的26％(Nielsen)。这是一个很大的数字。但是, 有72％的受访者确认, 他们仍然需要通过传统的电视连接观看内容。
这是否意味着传统的电视连接将继续存在？
我们所有人似乎都认为, 在那里的剪线钳将代表更高的数目。尼尔森(Nielsen)报告称, 在2015-16年度, 美国预计将有1.164亿家庭收看电视。这是一个庞大的数字, 该报告还发现, 其中约有950万个家庭已转换为免费的OTA电视。在所有流媒体服务中, Netflix(60.7％)似乎领先于游戏, 其次是Amazon Prime Video(49.4％)和Hulu(26％)。我相信人们切断电话的最大原因之一就是我们只想为使用的东西付费。
与计算机甚至手机相比, 为电视设计UI仍然是一个相对较新的领域。它也是一个根本不同的平台, 我们消费内容的方式也不同。电视设计需要一系列独特的考虑因素, 包括屏幕尺寸和观看者距离, 技术限制以及使用环境。用户处于” 后仰” 体验, 平均坐着10英尺, 用户界面和体验需要反映这一点。与触摸屏平板电脑和电话相反, 电视上的交互是通过使用遥控器或视频游戏控制器的D-pad(方向控制板)完成的, 这增加了复杂性。

文章图片
显示器电视不像平板电脑和手机。
随着时间的流逝, 电视已经发生了很大的变化, 从笨重的笨拙的家具变成了挂在墙上的时尚简约显示器。当电视占据整个客厅时, 他们使用的技术会在电视机上产生不一致的图像, 尤其是在边缘附近。为了弥补这些问题, CRT电视受到了过度扫描。这只是意味着图像会稍微放大, 因此边缘不会超出查看区域的范围。
传统上, 广播公司会预料到这一点, 并希望避免将其关键信息显示在屏幕边缘附近。为了解决此问题, 他们创建了一个标题安全区域以显示不失真的文本, 并创建一个可以安全显示图像的动作安全区域。

文章图片
由于无法控制的原因, 过扫描仍然是一件事情……即使在你的新HDTV上也是如此。电视之间的过扫描量不一致。为确保你的所有主要信息(例如标题和重要操作)都是安全的, 请将其保留在安全范围内。
当前没有针对安全行动领域的设定” 标准” ；它主要由平台本身定义。 Google的安全区域保持狭窄, 而Apple的安全区域则更大一些。根据我在网络上的多次搜索, 这些区域的距离将占中心电视屏幕的85％至95％。为了满足你可能正在使用的所有不同平台的要求, 我建议使用一个60px顶部和底部边距和90px侧边距的安全区域。这意味着你的所有主要信息都需要适合该区域, 以便容纳所有电视屏幕并满足每个平台的要求。
要开始新的电视用户界面设计, 请创建一个新的1920 x 1080画布。边距(安全区域)的边(左和右)应为90像素, 顶部和底部应为60像素。你可以在这里免费下载文件。

文章图片
导航上下左右如何塑造电视界面。
作为设计师, 我们要针对的硬件将定义一些设计模式。在移动设备上, 我们轻扫, 点击, 长按, 拉动等操作。标签和菜单被用作我们设备上的导航模式。电视提供了一块巨大的画布, 如果处理不当, 很容易变得过于复杂。看到长行内容以使用户可见的内容数量最大化已成为电视UI的标准元素。

文章图片
与我们用手指控制的移动设备不同, 大多数电视用户界面都是由D-pad控制的, 并且在离屏幕一定距离的地方使用。无论是在遥控器上还是在游戏板上, D-pad都将导航限制在四个方向：上, 下, 左和右。
每个平台也都有自己的既定惯例。例如, 在Xbox上, 触发器提供了” 向上翻页” 和” 向下翻页” 控件, 而保险杠则用于在内容视图之间切换。每个平台上还有许多” 资深用户” 按钮, 这些都是经验丰富的游戏玩家会熟悉的按钮。

文章图片
电视用户界面中的另一个关键元素是焦点状态。由于无法触摸屏幕或使用鼠标, 用户必须导航到要选择的元素。当用户在应用内导航时, 应突出显示不同的UI元素, 以指示导航元素处于焦点。

文章图片
为电视设计时, 聚焦和突出显示状态非常重要。焦点状态是突出显示可选组件并表示用户当前在屏幕上的位置的元素。显示焦点的形式可能有所不同；但是, 取决于组件, 一致性始终是关键。清晰可见的焦点有助于用户快速识别其当前的屏幕位置并简化导航。当用户暂时从电视上移开视线然后返回视线时, 应自动清除当前为导航选择的选项。屏幕上的每个项目都必须是光标可以访问的, 并且应该始终清楚光标下一个可以移动的位置。
设计示例可能会让用户怀疑他们在应用程序中的位置。这些示例没有提供足够的视觉指示(聚焦状态)。用户应该能够始终清楚地看到自己的位置, 而不必上下移动。你应该可以将视线从电视机上移开并返回, 仍然知道自己的位置。

文章图片

文章图片
版式从十英尺远处读取。
电视应用程序通常被称为十英尺体验, 该术语指的是你与电视之间的共同距离。与其他设备(例如移动设备和台式机)相反, 电视被设置为更” 靠后放松” 的环境。在这种距离下, 我们需要对UI的处理方式与在Web或移动设备上有所不同。

文章图片
电视屏幕通常比移动设备和台式计算机的显示器大, 但观看距离更大。易读性成为一项重要功能, 这意味着必须相应调整文本和其他元素的大小。根据你的年龄, 18px可能是最小的可读大小, 并且仅适用于非必需标签, 例如眉毛标签。即使这样, 作为一般的经验法则, 你选择的字体大小也不应该小于24点。这就是我认为可容纳每种类型用户的最小字体大小。

文章图片
电视上好的排版的关键是要不断进行测试。监视器上的薄型, 小型显示器看上去干净整洁, 但是一旦放在电视机上, 它可能会显得过分鼓起来或变得难以理解。
扫描线什么是扫描线？
与台式机, 手机和平板电脑屏幕不同, 电视屏幕上的图像由奇数和偶数扫描线组成。电视以奇数和偶数扫描线之间快速交替的相位渲染这些线。落在单个扫描线上的任何单个像素(或像素线)都会闪烁。为了避免屏幕上的项目闪烁, 应始终将行数保持为偶数且不小于2像素。在进行跨平台项目并准备从触摸设备(移动设备和平板电脑)转移设计时, 需要考虑这一点, 你经常会发现自己为电视创建了1px边框按钮。
避免这些模糊的线条或形状的另一种方法是确保你的设计始终是像素完美的。下面的示例是使用不均匀数创建的线条的一个很好的示例。如你所见, 我们可以清楚地看到这种效果, 并且它使眼睛不舒服。

文章图片
(链接到原始GIF https://cl.ly/0w3L0h2n1K3U)
颜色电视显示器有限制。
首先要记住的是, 电视的伽玛值远高于台式机, 平板电脑和手持设备。描述伽玛如何影响图像质量的最好方法是, 伽玛表示灰度中每个步骤之间的亮度差异级别, 或者” 快速” 的黑色如何变亮。我们认为两倍的光只是亮度的一小部分。电视的不同品牌和型号在亮度, 显示和其他设置方面差异很大。像类型一样, 颜色应该尽早测试, 并且经常在电视上测试。
选择颜色时应遵循的一些准则：晚上或在黑暗的房间里看电视时, 明亮的色彩可能会使眼睛变得刺眼。避免在大型元素或背景中过度使用饱和色(尤其是红色)和大量使用白色。纯白色会产生光晕和其他视觉干扰。选择白色时, 建议选择一个＃f1f1f1十六进制值, 以避免闪烁。为了提高可读性, 请确保在元素之间创建足够的对比度

文章图片

文章图片
通常的规则是避免在高对比度的颜色(尤其是深色旁边的明亮颜色)之间形成尖锐的边缘, 并避免使用” 热” 颜色, 例如非常饱和的红色和黄色。与较不饱和的颜色或较冷的颜色(如蓝色和绿色)相比, 它们更容易流血。
始终在实际的电视上测试色彩, 以了解你的色彩选择如何转换为大屏幕。如果可能, 请在多台电视上预览你的应用程序, 因为电视型号之间的颜色可能会发生巨大变化。只需从电视机上连接HDMI电缆并进行测试。
基础小事情要考虑。
这些元素应用于指导你的整体设计。设计电视UI时, 最大的考虑因素是简单和轻量级的交互。
尽管交互设计的许多基本原理和最佳实践仍然适用, 但与计算机或移动设备不同, 电视以更轻松的方式使用。电视上的用户界面应清晰, 简单且直观。设计要求简单明了, 信息密度低。元素必须足够大且间隔足够远, 以便可以从远处读取。为每个屏幕呈现一组清晰的操作或选项。

文章图片

文章图片
此设计干净简洁, 使用了不错的大卡片处理。焦点状态是通过与干净设计的其余部分对齐的缩放和阴影实现的。元数据也仅在悬停时可见, 这使用户可以专注于当前卡。

文章图片

文章图片
You.i TV的产品设计
突破传统电视设计的极限。这为许多其他人使用的通常的16 x 9卡处理提供了一种替代的电影方法。与许多其他服务相比, 方法是将菜单置于屏幕底部

文章图片
You.i TV的产品设计
突破传统电视设计的极限。将新闻放在最前沿, 用户一次专注于一条新闻, 而不是一排又一排的内容。

文章图片
You.i TV的产品设计
儿童用户界面应直观, 有趣且易于使用。这种设计表明, 与专注于1× 1、2× 3甚至16× 9卡的传统网格系统相比, 公司能够将其设计推向更高的水平。
首先将最重要的内容或选项放在屏幕上, 以便用户轻松查看和浏览。必须删除不必要的屏幕级别。进入不同的级别并再次走出去必须很容易并且显而易见。
设计电视应用程序时, 最关键的因素是为用户操作提供清晰准确的导航。如果导航不明确, 用户将感到困惑和不安全。
简而言之, 用户应始终准确知道他们在应用程序中的位置。请记住, 用户仅使用基本控件进行导航。必须清楚移动, 返回, 回车和其他基本导航功能。用户应该能够通过这些操作使用他们想要的操作。

文章图片
特纳电视音高
重点是突破传统电视设计的界限。寻找新颖的方法来展示用户可用的广泛内容, 同时使其直观易用。
作为设计师, 我们的工作是创建和设计用户界面, 使用户能够以清晰易懂的方式访问内容。我们不能期望用户会适应新习惯, 以便他们能够看到我们的内容。相反, 我们必须调整我们的用户界面, 以便有人可以在黑暗中操作这些人, 而他们的输入设备非常有限, 因此他们没有给我们足够的意图。这是一个很大的挑战, 但潜在的回报是巨大的。设计愉快！
【重新思考电视平台的用户界面设计】? ? ?
在srcmini设计博客上进一步阅读：