智能电视导航设计_智能电视设计特点高效的导航,低效的导航清晰的焦点控制模糊的焦点控制-程序员宅基地

技术标签: 移动  导航  智能电视  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

智能推荐

matlab 高斯一阶导,高斯函数及其各阶导数-程序员宅基地

文章浏览阅读1.6k次。[使用Matlab进行拟合是图像处理中线条变换的一个重点内容,本文将详解Matlab中的直线拟合和曲线拟合用法。关键函数:fittypeFit type for curve and surface fittingSyntax在图像处理中经常要用到高斯函数,高斯滤波是典型的低通滤波,对图像有平滑作用。高斯函数的一阶、二阶导数也可以进行高通滤波,比如canny算子中用到的是高斯函数的一阶导数,LOG算..._matlab仿真高斯函数导数

vue 普通列表间隔无限滚动_vue实现表格单行有间隔的平滑滚动播放效果-程序员宅基地

文章浏览阅读512次。vue 普通列表间隔滚动实现原理:表格上滑一行数据的高度,如何将第一行数据删除放入到数组尾部,实现循环滚动效果。利用 setInterval 控制滚动的间隔时间。(记得离开页面时一定要销毁 setInterval)transition 里设置的时间要和setTimeout里的相同, 避免滑动过程中数据删除出现错误。滚动过程中每行的背景颜色会随着滚动变化,在数组中加入固定的 key(可随意命名) 字段,实现间隔行颜色不相同(index不能使用,会随滚动变化)。@mouseover 鼠标移入,@mo_vue实现表格单行有间隔的平滑滚动播放效果

darknet测试yolo_darknet 测试-程序员宅基地

文章浏览阅读318次。YOLO: Real-Time Object Detection_darknet 测试

有了市场,自研操作系统才会被真正的用起来_系统真正用起来-程序员宅基地

文章浏览阅读964次。10月23-25日,“长沙 · 中国 1024 程序员节”盛大举行,以开源为主议题,聚焦开源技术及生态建设、操作系统及硬件创新、开源社区及商业化发展等多个重要话题。大会吸引到上千名开发者现场参加,500万+程序员线上线下关注互动。齐聚岳麓,共话开源未来中国工程院院士倪光南,中国第一代程序员、“WPS之父”求伯君,西安邮电大学教授陈莉君,deepin创始人、统信软件总经理刘闻欢,华为openEuler负责人江大勇,阿里操作系统团队负责人马涛,SylixOS嵌入式操作系统创始人韩辉,RT-Thread创始._系统真正用起来

哲学家不会吃饭了,我们快来帮帮他们(C语言、进程通信)_哲学家进餐问题c语言实现-程序员宅基地

文章浏览阅读272次。哲学家不会吃饭了,我们快来帮帮他们皮老师课堂开课啦皮老师:同学们,今天我们来讨论讨论哲学家吃饭问题,哲学家吃法问题是由大名鼎鼎的Dijkstra提出的,大家看黑板,看看什么是哲学家吃饭问题。每个哲学家面前一碗面条子,每碗面间有一根筷子哲学家就会干两件事,吃饭、思考哲学家吃饭的时候要依次把左右两侧的筷子拿起来(不分次序)才能吃面吃完了把筷子放回去继续思考皮老师:如何才能不发生死锁呢?张三同学抢答:拿不到筷子就等着呗,等别旁边的吃完了不就拿到了么?皮老师:假如五个人都同_哲学家进餐问题c语言实现

Android Studio编译错误:Suggestion: use tools:overrideLibrary="xxx.xxx.xxx" to force usage_androidstudio suggestions-程序员宅基地

文章浏览阅读6.3k次。Suggestion: use tools:overrideLibrary="xxx.xxx.xxx" to force usage_androidstudio suggestions

随便推点

WinCE下串口蓝牙模块的调试-程序员宅基地

文章浏览阅读144次。 拿到模块后,先请ZWEI帮忙把模块飞到板子上,最后的情形有点像蜈蚣跟蜘蛛在打仗,而且难分难解。 飞完线后用串口调试助手发送AT#指令,以确认蓝牙模块和串口都能正常工作。结果,运气不太好,发出去的指令就好像石沉大海了一样。 又请ZWEI用示波器量了一下RXD和TXD,信号都正常。把TXD和RXD短接,用串口调试助手自发自收,也不成功。串口调试助手,应该是没问题的,久经考验..._wince车载dvd用着用着会自己切换音源

sparkSQL sparkSQL整合hive(spark on hive)-程序员宅基地

文章浏览阅读851次,点赞2次,收藏4次。sparkSQL整合hivesparkSQL整合hivesparkSQL整合hive步骤示例数据库保存在本地和数据库保存在HDFS应用场景sparkSQL整合hivesparkSQL整合hive,即spark on hive。本质是把hive当做数据源,使用spark作为计算引擎来处理数据。sparkSQL整合hive步骤把hive安装目录下conf文件夹里的hive-site.xml拷贝到集群每一个spark安装目录下对应的conf文件夹中目的:让spark知道存放hive表的元数据的M

爬虫 自动化工具-mongo-多线程爬虫_broeser-程序员宅基地

文章浏览阅读347次。一、selenium框架1、selenium介绍# 介绍: 1.selenium是一个web自动化测试用的框架. 程序员可以通过代码实现对浏览器的控制, 比如打开网页, 点 击网页中的元素, 实现鼠标滚动等操作. 2.它支持多款浏览器, 如谷歌浏览器, 火狐浏览器等等, 当然也支持无头浏览器. # 目的: 在爬取数据的过程中, 经常遇到动态数据加载, 一般动态数据加载有两种, 一种..._broeser

如何更改nrf51822的主服务uuid与特性的uuid不一样_nrf52840 服务 读 写uuid计数不一致-程序员宅基地

文章浏览阅读775次。最近有一个CSDN的好友给我留言,询问如何设置主服务uuid和特性uuid不一样,如下图:我以为这个问题很简单,网上应该一大堆,但是搜索一下,却发现没有这样的文章,于是,把自己的代码给分享出来,供大家学习。废话就少说,这里直接把代码复制下来。大家可以通过对比软件对比一下就行。使用的是SDK11的,串口服务ble_char,uint32_t ble_char_init(ble_char_t * p_char, const ble_char_init_t * p_char_init){ uin_nrf52840 服务 读 写uuid计数不一致

第十五届蓝桥杯嵌入式省赛真题题目和答案-程序员宅基地

文章浏览阅读242次。该题目是本人考完之后写的第十五届蓝桥杯嵌入式省赛真题题目和答案,有些答案也不完全确定,仅供参考,

子类继承父类重写父类的属性值问题_c# 子类修改父类的属性值为什么父类属性值没变-程序员宅基地

文章浏览阅读2.6k次,点赞2次,收藏8次。案例一试想一下代码的执行结果package com.syc.test;public class A { public static void main(String[] args) { FatherClass father = new FatherClass(); System.out.println(father.info); SonClass son = new ..._c# 子类修改父类的属性值为什么父类属性值没变

推荐文章

热门文章

相关标签