智能电视导航设计_javayuanhang的博客-程序员宅基地

技术标签: 移动  导航  智能电视  Android 智能电视应用开发  ui设计  Android  

随着国际市场上Google TV的发布和国内电视厂商纷纷推出定制Android TV的脚步,一时间智能电视平台成为了众多高科技企业争相抢占的新市场。较早的智能电视平台探索者有Google TV、Apple TV和Samsung Smart TV,还有传说中将要上市的iTV。

AD: 2013云计算架构师峰会精彩课程曝光

导航设计——遥控器和导航结构

说到TV的UI设计,就不得不从导航开始。如上文所述,TV用户较为被动,所以需要清晰高效的导航系统来帮助用户快速定位到想要看的内容。

导航方式与输入设备息息相关,智能电视最主要的输入设备还是遥控器,有时还辅以鼠标和键盘。下面的图例是Google TV和Apple TV的输入设备。

智能电视UI设计那些事儿

Google TV和apple TV的输入设备(图4)

从图中我们可以看出新的智能电视输入设备以十字方向键和OK键为核心,所以TV app的导航要基于上述方向键和OK键进行设计。

智能电视UI设计那些事儿

Xbox和PS3的导航界面(图5)

由于智能电视平台app较新,这里我们参考较为成熟的电视平台游戏系统来进行讨论,上图分别是XBOX和PS3的操作界面,这两款产品能被借鉴因为它们的操作方式和使用环境和智能电视系统较为一致。它们都用了十字导航的结构。这种结构的优点在于主导航和二级导航同时展开,并且与十字方向键完美契合,可以通过方向键在主导航和二级导航间快速切换。使用这种结构时,二级导航中的item只能进行单一操作,因为方向键受到了主导航占用。如果对二级导航中item进行多维操作,则需要确认展开下一级列表:

智能电视UI设计那些事儿

Google TV的导航界面(图6)

上图为Google TV的操作界面,它采用了左右分栏的模式,左边是导航,右边是一个二级内容的容器。这种结构的逻辑其实和前面所述的十字导航区别并不是很大,不同的是容器里面的信息更加扁平、直观和可视化,容器里面item操作的方向不会受到限制。但相应地,如果想把焦点从容器中移回到左侧导航需要更高的操作成本。

智能电视UI设计那些事儿

Samnsung SmartTV的导航界面(图7)

上图为最近发布的Samsung Smart TV,它采用了区块式的导航结构。这种结构中每个区块独立操作,信息组织更加扁平化,有的模块和widget概念比较相似,既是信息的呈现也可以作为操作的入口。不足之处是,各个模块中item的方向操作会有一定限制,不然会导致各个模块切换的操作成本增加。

智能电视UI设计那些事儿

Cover flow和list信息组织方式(图8)

另外还想介绍的两种信息展示方式,就是图8中的coverflow和list列表,这两种方式都采用了单方向导航。Cover Flow这种方式视觉冲击力较强,单屏信息承载有限,焦点的移动两种方式将在后文陈述; 右边这种列表方式视觉冲击力较弱,单屏信息量较大,但在TV平台处理List时候和PC上有所区别:TV app不需要滚动条,而且要控制List的长度,因为尽管遥控器方向键可以启用长按加速,不过始终无法达到像PC端鼠标拖拽滚动滑块控制浏览速度和定位的表现。

智能电视UI设计那些事儿

导航项的三种状态(图9)

在基于十字方向键上设计导航时,导航项一般存在三种状态,即“selected”,“focused”和“selected and focused“。导航上如果有类别项(category)和动作项(action)那么导航获得焦点时,焦点移动不会切换右边容器中内容。当导航上全部为类别项时,焦点可以和选中态一起移动,右边容器随焦点移动切换内容。

总而言之,导航设计原则如下:

导航设计的目标,是让用户快速定位,并且能够预测出操作结果。


文章转载:http://mobile.51cto.com/app-show-347762_1.htm

版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。
本文链接:https://blog.csdn.net/javayuanhang/article/details/12203735

智能推荐

购机基础知识储备_weixin_33697898的博客-程序员宅基地

1.intel 移动处理器系列型号 P, T ,L, U, SU 等代表什么? 答:P--PREMIUM--加强版(25W)   T--标准电压版(31W~39W)   L--低电压版(17W)   U--超低电压版(10W/9W)   SU--超低电压小封装版(UNDER 9W) 笔记本CPU的型号后面其他一些固定的字母的意思:   K (不锁倍频,可以超频使用)   M(代表...

创建CSS3警示框渐变动画_王爷的大房子的博客-程序员宅基地

来源:GBin1.com在线演示 在线下载 现代的网页设计技术已经允许开发人员在大多数浏览器中快速实现所支持的动画,其中消息警示是非常普遍的。由于默认的JavaScript警示框往往设计不佳和过于侵入式,这导致开发人员想到找出一个更友好的用户界面解决方案。在本教程中,我会解释如何可以将CSS3警示框放在页面主体的顶部,然后, 用户可以通过点击让警示框消失,最终从DOM中删除。作为一...

廖雪峰Java2面向对象编程-6Java核心类-6常用工具类_weixin_30345577的博客-程序员宅基地

1.MathMath提供了数学计算的静态方法序号方法描述1abs()返回参数的绝对值。Math.abs(-9)//92ceil()返回大于等于( >= )给定参数的的最小整数。Math.ceil(4.5)//5.03floor()返回小于等于(<=)给定参数的最大整数 。ath.floor(4.5)//4.04rint()以0....

JVM类加载原理学习笔记_lcyGo的博客-程序员宅基地

(1)类的生命周期包括了:加载(Loading)、验证(Verification)、准备(Preparation)、解析(Resolution)、初始化(Initialization)、使用(Using)、卸载(Unloading)七个阶段(2)当Java程序需要使用某个类时,JVM会确保这个类已经被加载、连接(验证、准备和解析)和初始化。(3)加载阶段:通过一个类的全限定名来获取

node学习--常用模块_weixin_30244889的博客-程序员宅基地

Node的用处在于它本身提供的一系列的功能模块,用于与操作系统互动。常用内置模块如下: path:处理文件路径 fs: 操作文件系统 child_process: 新建子进程 util: 提供一系列的实用小工具 http: 提供HTTP服务器功能 url:用于解析URL querystri...

xshell工具提示评估到期,请采购处理方式_Burgess_Lee的博客-程序员宅基地

正在使用的xshell 5不能使用,提示xshell 5评估期已过,重新安装还是不行。其实xshell 5有免费版的,即Home & school 版本。卸载原程序,下载安装免费版本的xshell 5即可。免费版本的链接:http://www.netsarang.com/download/free_license.html填写一个正在使用的邮箱,Home & school ...

随便推点

Python中list的extend方法_八九的博客-程序员宅基地_extend list python

List的extend方法是一个扩充列表元素内容的方法,在一定程度上其行为有点像append。只是在接受的参数以及最终的效果上有些差异。写如下示范代码:list1 = [1,2,4]list2 = [12,6]list1.extend(list2)print(list1)程序执行结果:[1, 2, 4, 12, 6]从上面的结果可以看出,list1通过extend扩充增加了list2的元素。继续修改代码如下:list1 = [1,2,4]list2 =[[12,6],123]lis

用 Python 解释 SpaceX 如何进行火箭回收_Python中文社区的博客-程序员宅基地

为了进一步了解非线性控制,我一直在尝试一种非常有效的方法,称为轨迹优化。设置完基本代码后,就可以很容易地将其应用于各种系统。这是在无人机上运行的一个有趣示例:无人机翻转表演在看完Stars...

剑指offer有用python版的吗_GitHub - Prolht/Sword-to-Offer: python版剑指offer的算法_weixin_39922769的博客-程序员宅基地

算法汇总[toc]收集地代码段给定一个没有重复数字的序列,返回其所有可能的全排列。from typing import Listimport itertoolsdef permute(nums: List[int]) -> List[List[int]]:return list(itertools.permutations(nums))nums = [1,2,3]permute(nums)面...

面试前整理: 数据通信这一块:持续更新。。。_weixin_30394333的博客-程序员宅基地

面试前整理:数据通信这一块:首先把我学到的关于数据通信这方面的知识总结一下,一是复习一下知识,二是对于接下来面临笔试面试环节做的一些准备。对于这篇文章,我也会持续的更新。把新学到的知识加进去,把错误的观点加以改进。。。持续学习吧。。。下面都是我觉的比较重要的知识点的总结,如果有人看见了与之相驳的观点,欢迎在下方留言区指正,大家共同学习,共同进步。。。数据通信1请说出几种动态...

MFC编程入门之十八(对话框:字体对话框)_weixin_30710457的博客-程序员宅基地

  在上一节为大家讲解了文件对话框的使用,本节则主要介绍字体对话框如何应用。  字体对话框的作用是用来选择字体。我们也经常能够见到。MFC使用CFontDialog类封装了字体对话框的所有操作。字体对话框也是一种模态对话框。  CFontDialog类的构造函数  我们先来了解CFontDialog类。它的常用构造函数原型如下:  CFontDialog(    LPLOGFO...