最专业的八方代购网站源码!

资讯热点
网易设计师:电视互动设计科学的基础

发布时间:2020-7-19 分类: 行业资讯

在过去一年左右的时间里,我有幸参与了电视大屏幕项目。在不断的试验,探索和设计中,我也获得了设计电视方面的一些经验,因此我分享了这些“关于电视交互设计的一些事情”并讨论了电视方面的设计。

 一. 硬件+远距离操控——基本交互

基于桌面数据研究和设计经验,基本交互总结如下:远程控制输入,导航和菜单,信息显示,控制放置和焦点状态。

 二. 遥控器输入

当我们用手指在手机屏幕上快速轻松地点击或滑动时,仍然使用遥控器执行主流电视屏幕和应用程序的操作。由市场上不同电视制造商生产的遥控器也具有不同形状和数量的按钮。下图显示了Apple,Google,Xiaomi,LeTV和ZTE机顶盒的遥控器。

△不同厂家的遥控器

尽管所有奇怪的形状和数量的按钮,几乎所有的遥控器都有几个相同的按钮:上,下,左,右,后和OK。它们也构成了遥控输入的基本交互模式。通过“上,下,左,右键”移动焦点位置,选择界面元素,按“OK”执行相关操作,按“返回”返回。

△遥控器的基本按钮

上图中还有一些按钮,例如数字键,菜单键,以及某些遥控器没有它们。这里,强调“菜单键”,例如先前的设计,它将不太常用的操作隐藏到菜单键中,然后在用户按下菜单键时调用操作(例如“长按” Android方面,“在iOS方面”。左侧幻灯片“等等)。后来发现并非所有遥控器都有此按钮,并且只能在后续版本中进行迭代优化。因此,在设计之前,您可能希望研究输入硬件以避免由“刻板印象”引起的不必要的凹坑。

遥控输入的特性决定了用户的效率和便利性大大降低。因此,在这种限制下,设计者只能以各种方式最小化这种不便。

 1. 减少用户输入

如果您不让用户输入,请不要输入。尽量让用户只进行“选择”输入,避免大量的“文本类型”输入。例如,在电视上的搜索功能中,及时关联和热搜词变得非常重要,如右图所示。

△键盘输入优化

 2. 优化输入模式

结合项目情况,尝试优化输入模式。例如,充分利用遥控器数字键输入,重新设计键盘以减少用户操作,如上图左图所示。

 3. 将输入转移

越来越多的产品开始转移并将一些输入引导到手机上进行操作,甚至直接将手机用作遥控器。例如,最常见的扫描码登录和电视助手类APP。输入传输可以大大提高用户的工作效率,但设计必须与特定场景相结合,以避免手机和遥控器之间过度的用户切换。

 4. 创新的输入方式

随着各种技术的发展,未来电视方面将有越来越多的输入方法,不仅限于遥控输入。如智能语音输入,我们还需要了解这些新技术,以帮助我们不断创新并为用户带来良好的体验。

 三. 导航和菜单

电视侧的大多数导航和菜单与手机和PC上的类似。但是,由于遥控器输入特性的差异,主要有以下几类。

  1. 十字

交叉导航在国内产品中相对较少,但由于其主导航和辅助导航同时启动,它可以完美匹配横向键,用户可以使用箭头键在主导航和辅助导航之间导航最有效的方式。切换如下图所示。但是,它最多显示两级菜单,即垂直菜单和水平菜单,这会浪费大量的界面空白,因此它通常不是特别适合大型和全面的国内产品。

△交叉导航

 2. 磁贴

磁贴广泛用于各种电视应用,一般包括主导航和二次磁贴。通常,辅助磁贴的呈现使信息更平坦,更直观和可视,并且与交叉导航相比,操作方向不受限制。但是,通常焦点从拼块向左/向上导航转移需要更多的操作成本,如下所示。磁条的信息显示可以充分利用界面空间,并将信息向前推进。因此,对于许多内容产品,磁条可以很好地应用于暴露内容并吸引用户进入。

△磁铁信息显示

 3. Tab

广泛应用于手机和PC,当然常用于电视终端,经常起到导航水平的作用,同时告知用户位置在哪里,引导用户在模块之间切换是非常好的,如下图所示。但是,Tab导航也有一些基本的设计要求,比如尝试不使用多层Tab,即使必须应用它,它也必须尽可能不同。此外,在“焦点”章节中,还提到了切换选项卡时的加载问题。

△标签导航

 4. 列表

该列表也是手机上最常用的菜单显示形式,也适用于电视方面。例如,在直播电视剧中,主要功能使用多层列表的表示形式,如下图所示。在电视方面,列表的样式也是变化的,例如纯文本列表(带按钮),图形列表(带按钮),显示列表(不可用)和水平列表(选择列表)。

△图形列表和显示列表

 5. 其他

电视产品上最常用的菜单和导航模式一般可归纳为上述四种,当然还有其他方式。随着多种设备的使用,越来越多的手机和PC端设计模式开始出现在电视上。更多产品界面不能仅使用一个菜单和导航模式,因为它们的功能复杂,通常是混合设计,如下图所示。然而,无论使用哪种导航和菜单类型,电视的大屏幕菜单和导航的设计目标是用户可以快速定位和预测操作的结果。因此,使用导航和菜单的灵活性使得用户不会丢失多功能界面信息尤为重要。

△其他类型的导航和菜单

 四. 信息展现

在前面的文字中,我在“电视”一词后面跟着“大屏幕”一词。电视屏幕比电脑大。由于这么大的屏幕,用户经常坐两三米远。因此,电视侧的信息设计具有两个显着的特征,设计用于大屏幕并且设计用于长距离,具有以下考虑因素。

1. 重视信息的识别性和简洁易懂

文字,图标和按钮,甚至是吐司提示,电视方面的识别问题比手机和PC更为突出。由于长距离,大屏幕和电视本身的随意性,用户的注意力更加分散。因此,界面中的信息和元素需要适当放大,至少要确保用户可以清楚地看到它距离两三米远。 ,如下所示。

△信息识别案例

 2. 提前露出信息和多露出点信息

如“远程输入”部分所述,提前显示信息可以在一定程度上减少用户输入并在产品级别吸引用户。然而,类似于移动电话的设计,有必要在信息暴露之后识别需要提前暴露的信息,如何暴露它以及对产品的稳定性和性能的影响。这些需要基于产品特性,并与产品,愿景和发展进行协商。 “更多信息”相对容易理解,主要是告知用户右侧/下方“还有一些内容,去看看”,如下图所示。

△信息显示案例

  3. 避免过多无模块信息的展示

与手机端相比,由于屏幕较大,类似于PC端,通常需要将屏幕划分为多个整齐排列的小屏幕进行设计,即模块化和区域设计信息呈现。这样,信息的布局可以更加规则,并且用户不容易在复杂信息中丢失,如下图所示。

△信息模块化案例

五. 控件位置

在早期设计电视产品时,控制位置的问题是一个非常容易犯的错误,如下图所示。在左侧的“添加库存”按钮中,当添加的库存太多时,您可能看不到该按钮,或者您需要大量按下该按钮以将焦点移至“添加库存”。右侧图像中的文本不知道如何导航,也不知道如何将焦点从文本移动到“查看故障单”按钮。这两种情况说明了按钮的位置,导致按钮丢失或操作效率低下。电视侧文本阅读还必须遵循焦点浏览原则,例如每行1个焦点或整篇文章中的1个焦点。如果是后者,则必须确保显示可见范围内的文本。因此,在电视的大屏幕上放置交互式控件需要充分考虑它是否符合电视的使用方式和用户的效率。

△控制位置情况

 六. 焦点状态

如上所述,“焦点”已经多次。它实际上是电视大屏幕用户体验的第一个元素,交互式描述中最常见的是“焦点如何”。无论是互动还是愿景,在与电视产品设计的初步接触中,由于“焦点”的设计错误,可能会出现用户体验问题。例如,焦点移动的顺序是不一致的(返回到哪里,焦点在界面上)让用户认识到。焦点不明显或风格不均匀,因此用户无法找到焦点等,如下图所示。

△非均匀聚焦风格

电视终端焦点也有各种不同的状态,如下所示。 “聚焦状态”通常由“笔划,缩放,突出显示等”进行,并且“按下状态”可以不必相同,或者与其他状态相同。

△对焦状态类型

可能需要简要描述“标记状态”和“半选状态”。 “标签状态”在PC端和移动端也很常见,例如Tab标签告诉用户位置在哪里。 “半选状态”是“聚焦状态”的情况,即,在移动到焦点之后,不需要加载或触发操作,并且触发按下“OK”,如下图所示。此状态在早期电视盒中性能不足,并且通常在切换切换时使用,因为如果在切换焦点时直接加载,则可能会导致卡纸。

△标记状态和半选状态

 七. 结语

我总结并总结了这些基本知识和考虑因素,虽然它们可以帮助我们快速了解电视大屏幕的基本互动知识,避免不必要的坑。但这还不够。需要在实际参与项目中快速学习和应用更多内容。因此,我将根据我参与的项目再次关注电视大屏幕的实际项目。欢迎您下次与您沟通和成长。

« 如何使用模板构建系统以及享受哪些好处 | 认识到代购源码网站优化5大坑百度关键词排名不混淆 »