智能电视UI/交互分析

智能机顶盒现状分析

智能机顶盒的概述

随着智能设备的流行和家庭带宽的提速,智能电视也逐渐流行。智能电视,可以理解为搭载智能操作系统的电视,智能电视的操作系统主要有苹果系统和Android系统,因为apple TV 在国内不可用,以及Android系统本身的开放性,国内的智能电视操纵系统主要以Android为主。而智能电视从硬件上来看,又有一体式的智能电视(例如,apple TV、Google TV、小米电视等),和普通电视+智能机顶盒(譬如,小米盒子、乐视盒子、PPBox等)的组合。

总体来说智能电视无论是那种硬件方式,其硬件配置都较高,智能系统基于Android 4.0并针对电视做了优化,大多都支持在线更新,基础的输入设备为按键类遥控器,下面简单介绍下国内较为流行的几种智能电视。

小米盒子/小米电视

搭载了特别针对电视的MIUI TV操作系统,配合了极简的11键遥控器,并内置小米应用商店,小米游戏商店,可以下载海量应用游戏。

乐视盒子/乐视超级电视

搭载了LetvUI,乐视盒子配备了9键遥控器(乐视超级电视还可以实现语音输入,体感操控),同时内置了LetvStore。

阿里系智能电视

阿里系智能电视,指的是搭载了阿里TV操作系统的智能机顶盒和智能TV,比如,酷开TV和“华数彩虹”互联网电视盒。阿里TV操作系统最大的特点是整合了阿里强大的购物和支付功能,主要的操作设备为遥控器,同样内置应用商店。

其他智能电视机顶盒

较为有名的还有海信智能电视(4K级显示器),PPTV的PPBox盒子,TP-Link的TP-Link mini大眼睛盒子,以及其他众多杂牌智能机顶盒。

智能机顶盒应用的开发者生态

国内智能电视,不同的智能电视操作系统都有各自不同的自带的应用商店,用户可以直接在应用商店下载安装应用,而作为开发者,则需要同时照顾到各类应用商店,下面列举了几个主流的应用商店:

智能机顶盒的交互特点及限制

智能电视和手机都是智能设备,大部分搭载的都是Android系统,但是两者使用场景,使用方式,都有很大的不同。

智能手机属于移动设备,有短距离、碎片化的特点,而智能电视的则有长距离、光线暗,操作心态较为被动的特点。

智能电视的尺寸,一般大于pc屏幕,用户与智能电视之间的视距较长,一般为2米~4米之间,因此智能电视的单屏信息量会少于pc,智能电视的操作需要简单而快速。而用户在使用电视的同时很可能会同时进行着其他的活动,譬如,同时吃零食、聊天,因此智能电视的多数应用都不会是“沉浸式”的应用

目前智能电视主要的输入控制设备仍是遥控器,遥控器形式各异,但是都趋于简洁按键数量大大减少,以十字方向和OK键为交互核心,再配合极具Android风格的“home”、“menu”、“back”三个按键。

而Android手机中,用户可以通过触屏、语音、摄像头、陀螺仪等输入,控件容易选中,导航较为高效,交互也更加直接。

相对而言智能电视交互方式仍然较为原始,操作成本较高,不适合导航复杂的应用,文字输入尤为困难。

ps3十字导航

上图,ps3的导航方式即为经典的十字导航,十字导航是智能电视的基本导航方式,十字导航结构的最大优点是,主导航和次级导航同时展开,在契合了遥控器十字转盘的同时,用户更加易于掌控。

智能电视的用户群体肯能会偏大,部分人群被没有足够的电脑,手机操作经验,因此适当的提醒与帮助十分有必要

未来的语音控制,体感操控可能会成为主流。

智能电视的UI特点

智能电视尺寸一般较大,使用遥控器控制,与用户有一定距离,因此其UI也有别于手机,平板,电脑。

交互方式决定了UI的布局,智能电视基本的导航方式为十字导航,因此UI的结构逻辑也需要符合这种导航模式

一个好的TV UI可以由结构化的区块式的布局配合一定的模式。

智能电视垂直方向的空间较为珍贵,其基本的UI布局为从左到右三栏式的布局。

智能电视基本布局

下面是在基本布局基础上的各种模式

书架式(Content Shelf or Cover flow)

content_shelf

网格式(Content Grid)

content_grid

列表式(Content List])

content_list

级联列表式(Cascading Content List)

cascading_content_list

扩展式(Extended Details)

extended_details

次级标签式(Sub-section Tabs])

sub-section_tabs

UI移植分析

智能电视分辨率的问题

主流的智能电视的长宽比例为16:9,分辨率有三种,

  • 高清电视(HD,720p):1280 x 720 px
  • 全高清电视(FHD,1080p):1920 x 1080 px
  • 4k电视:3840 x 2160 px

google-tv-dpi

4k超高清电视尚未大面积普及,目前智能电视UI可以按照1920 x 1080 px的尺寸来设计,推荐使用点九图来适配。

不同电脑与移动终端可选址像素显示,电视采用信号模拟的方式显示图像,电视机(即使是最先进的电视)的显示机制是基于扫描线。由于历史原因,电视制造商们必须在正常屏幕尺寸外预留空白边,它能够被电路寻址,却无法显示电视信号,也就是电视显示屏独有的“过扫描(踩边)”现象,请为你的UI界面提供额外10%空白区,。

智能电视UI界面提供额外10%空白区

应用图标的适配需要根据不同智能电视操作系统来确定,在此需要设计人员查阅各个系统的相关设计文档,下图是小米电视图标的规范

小米盒子应用商店_icon-visual-guide

因为智能电视的视距较大,控件的大小可以适当的放大,控件间的间距留白也建议扩大,避免视觉上的混淆,也留有空间做一些交互上的动画(譬如,选中放大,闪烁的效果)。

智能电视UI布局的方式介绍

国内智能电视搭载的仍然是Android系统,因此具体的XML布局并无差别,但是UI布局却和手机端的布局有很大的区别,切不可生搬硬套。

当然因为电视的不同的显示方式在颜色和字体上还需要特别注意:

颜色

  • 谨慎的使用纯白色(#FFFFFF)。纯白色在电视上显示会造成“颤动”或图片重影。将#F1F1F1 (hex) 或 240/240/240 (RGB);
  • 高饱和度颜色会导致显示失真,并且在高饱和度颜色向低饱和度颜色过渡时会产生边缘模糊;
  • 大范围渐变会导致带状显示,无法平滑过渡,尽量不要使用大范围的渐变色;
  • 电视可能拥有多种显示模式,包括标准、锐利、电影/剧场、游戏等等。请确保在各种模式中都测试你的应用。
  • 电视的使用环境一般光线较暗,可以适当增加阅读项和背景颜色间的对比,优先考虑可读性。

文本

  • 建议主文本不小22px,次文本不小18px,其他元素高不小34px;
  • 避免使用纤细字体或者有过窄、过宽笔划的字体。使用简单的无衬线字体并选用抗锯齿功能来增强易读性;
  • 为了增强易读性,可以设置比印刷文本更高的行高。

智能电视比电脑手机等更需要一个稳定快速的应用,智能电视的应用切不可影响到电视的其他功能,尤其是观影的功能。

智能电视用户心态上一般较为被动,在一个相对舒适,灯光昏暗,“后仰”的状态下使用电视,因此非游戏类应用需要尽量的减少与用户的主动交互

电视用户对电视发出的声音并不会刚到反感或干扰,因此可以使用声音作为帮助提示和操作反馈提示

智能电视主流的UI布局形式

智能电视在国内尚未得到大面积普及,不同盒子的系统UI相差不大。

tv_yunos

上图为阿里TV操作系统截图,可以看出是两栏基本布局,左边是主导航区,内容区域采用网格布局的模式。

tv_miuios

上图为小米MIUI TV操作系统的截图,使用标签式的布局作为基本布局,内容区域同样采用网格布局。

乐视智能电视操作系统

上图为乐视智能电视的操作系统UI截图,首页采用上下分栏的布局,上部分为cover flow的布局模式,突出了影视,下部分是导航区域,采用的也是网格布局,

需要注意的是,乐视系统中其他部分也采用了网格的布局,如下图示。

乐视智能电视操作系统2

可以看出的网格布局在智能电视中最为流行,其次是cover flow的布局方式。

网格布局操作非常符合十字导航的结构,大块区域内配有分类相关的图文,信息更加扁平化,直观,一目了然,用户更容易选择,在横屏的屏幕上也显得美观大气。

而cover flow的布局传承于苹果iPod,多用于影音类的列表的展现。

智能电视的导航交互方式分析

遥控器是智能电视的主要输入控制设备,应用与遥控器的十字键的配合的好坏直接决定了应用的好用与否,从小处着眼,先用十字导航开始。

智能电视的导航

导航项三种状态

因为智能电视特殊的导航方式,和其特定的应用场景,在交互过程中 导航项的状态非常重要,有三种状态,“selected”,“focused”和“selected and focused“。

  • “selected”状态指明了用户所处的页面,特别在多级导航中,selected”状态非常重要;
  • “focused”状态指明了十字导航焦点所处的位置,“focused”状态处于随时移动的状态,需要时刻提示用户光标焦点的位置,因此建议在UI提示的同时配合一定的动画(放大,闪烁等);
  • “selected and focused“状态可是焦点移动到已经选中的导航项上时的状态,此时的状态需要和“selected”状态区别开来;
  • 一言以蔽之,三种状态需要做到不丢失,易识别,有明显的区别

导航项对应内容的切换

智能电视无论从交互还是从UI来看,更加倾向于是电脑而不是手机等移动设备,因此智能电视在使用十字导航时候的焦点移动,就类似于电脑中使用tab键控制,其路径的控制则显得尤为重要,当然在此值的提醒的是,避免过度设计,有时候符合用户预期的设计更加易用

  • 在导航较为复杂的场景中,两组(上下,左右)方向键的控制会有所不同,一组方向键用于主导航间的切换,另一组用于次导航间的切换,这样内容容易切换,也方面浏览。
  • 当然在导航简单,单页控件较多的场景中,两组方向键也可不必分别对待,这样更加符合用户认知,也减少了用户的学习成本,同时也加快了控件的选择。

智能电视导航栏

上图所示了,同样布局中两种不同的内容切换方式:

  • 导航上如果有类别项(category)和动作项(action)那么导航获得焦点时,焦点移动不会切换右边容器中内容,切换内容需按OK键确认;
  • 当导航上全部为类别项时,焦点可以和选中态一起移动,右边容器随焦点移动切换内容。

两种方式各有利弊,第一种方式,用户需要多次按键,但是焦点移动不会有页面切换,可以快速选择想要的导航项,而第二种方式,按键成本低,适用于tab类导航间的切换,但是焦点移动就会有页面切换,如果多次切换应用消耗较高。

焦点移动

智能电视焦点移动

再到具体的焦点移动,上图中提倡使用图中绿色的路径,避免使用红色的对角线路径:

  • 焦点移动路径最好平直且区域对齐,根据十字键的特征绿色的路径符合用户的认知,可以更好的被用户感知和理解。
  • 高焦点移动要避免大范围转移,大范围转移的焦点会让用户感到焦点丢失,特别是在页面切换的时候,不能丢失焦点;

针对不同的UI模式,焦点的移动也可能不同:

  • 在书架式也就是Cover flow的模式中,需要注意的是,焦点固定在中间放正的页卡上,按左右键页卡移动,这也能也就避免了当列表中项目较多时,导航焦点一直停留在列表底部也就是屏幕边角(用户视线长时间停留边角)而造成的疲劳。
  • 而在其他的UI模式中,则是页卡不动,焦点移动,但移动到边缘页面时候再点击按键,页面就会加载更多,这点有点类似手机APP中的上拉刷新。
  • 在可能情况下,长按十字键,也可绑定事件,在这种情况下,焦点会快速移动,在控件较多的情况下,这样可以更加快速的定位。

智能电视普通控件,滚动等交互

除去用来导航分类的导航项之外,对于应用中其他“可点击”的元素,其 “hover” 状态也就是焦点移动到上面的状态需要特别对待,特别是对于一些按钮型的控件,其本身的样式较为醒目,即使焦点已经选中,但是“hover”的效果不明显,容易让人困惑,在此的建议是,可以设置更为醒目易识别的“hover”样式,若配合动画效果会更好

智能电视更多是属于“横屏(landscape)”的状态,因此其滚动的方向建议为从左到右,这样更加符合电视的尺寸比例,也更符合用户的操作预期。

智能电视遥控器中一般还有“home”,“menu”,“back”三个按键。

  • “home”键为系统级的按键,用来快速回到首屏。
  • “menu”键带有强烈的Android风格,可以用来放置应用中很少用到的功能,不推荐频繁使用。
  • “back”键用来返回应用上一层,或者关闭弹窗,取消键盘等,应用不建议过度依赖“back”键,在UI上应该提供明显返回控件

参考资料

xiaodao

0

Subscribe to cc log

Get the latest posts delivered right to your inbox.

or subscribe via RSS with Feedly!
comments powered by Disqus