浅谈电视界面与操作模式

标签: 交互设计 智能电视 机顶盒 | 发表时间:2013-07-31 09:45 | 作者:dream
出处:http://www.boxui.com

随著互联网与生活越来越密不可分,联网设备也从原本的电脑,变换到了手机上。正当大家的生活离不开手机时,网络也等著进入大家最常接触的第三屏幕-电视。

一直以来都有许多厂商在智能电视上耕耘,早期的 IPTV, 中华电信MOD、一电视网乐通是这类,现在的 OTT(Over-The-Top)-Box,大家熟知的 Apple TV、Google TV以及大家可能比较陌生的 Roku、Boxee,透过 Netflix、Hulu、Amazon video等丰富的数位内容,达到新的收视体验。

因为电视拥有大尺寸,远距离观赏的特性,所以在界面的设计开发上,与电脑手机的浏览使用体验都有很大的不同。另外在加上控制器的外在限制,当在使用电视时,我们没有键盘滑鼠,要点击任何按钮,输入任何文字,只能依靠间单按键的遥控器,其中我们最能好好利用的按键,就是 上/下/左/右/确认,要怎麼利用这间单的互动设备,做出让使用者使用时不会「抓狂」的产品,将是我们需要好好研究的课题。

虚拟键盘的重新设计

相信可能已经满多人使用过一些运行 Android 的机顶盒,也有人称做客厅电脑的产品。当你打开浏览器想要输入网址时,跳出了虚拟键盘,你利用著遥控器一个一个字慢慢的输入,那种不耐烦几乎想放弃的感觉,应该很多人都有经验。万一你又不小心输入错误全部重来的时候,就留下了智能电视很难用的印象。

在电视上利用遥控器输入任何数字文字,本来就是一件极度困难的事情,这件事情最大的问题就是 Android 内建的 Qwerty 虚拟键盘,原本设计在手机与平板上,与实体键盘配置相同,让使用者凭著电脑是用经验,快速找到按键位置,达成输入目的。但是换成只有方向键加上确认键的遥控器,配上 Qwerty 虚拟键盘,大部分的时间都在浪费在移动按键上,况且英文键盘的配置,就是為了让每个手指点击的次数差不多,所以输入一个单字,需要四处移动按钮,自然使用者体验不佳。

在虚拟键盘的设计上,Opera TV 使用传统手机的英文输入法界面,使用时利用遥控器上的 0 ~ 9 数字键来完成输入,另外则是有将 A ~Z, 0 ~ 9 按键重新排列成 6乘6 的虚拟键盘。这两种方法都可以有效降低使用者按遥控器的次数。

导航界面

好的导航模式,是可以让使用者很轻鬆的找到想要的东西,在电视的界面上,建议设计成矩形按钮,并且拥有明显的焦点(focus)效果,让使用者清楚明白当下的操作位置。当设计出一个这合电视上阅读的互动界面时,我们即发现到电视上的画面有限,一页能显示的资料量大概只有 10 笔左右。在画面寸土寸金的情况下,Opera TV 选择将焦点固定在正中央,当按下左右按钮时,画面成水平卷动的方式,以获得较多的显示画面。

Apple TV 则是使用了垂直卷动的方法,刻意让最下层的按钮被画面底部切掉,让使用者知道下面还有内容,当移动到下方按钮时,则会有一个像下滚动的转场效果,让使用者不容易在使用的过程迷路。

还有一个同时利用到垂直以及水平卷动的 TV app -YouTube TV。这是一个完全用 web 方式开发的应用程式,只要到 https://www.youtube.com/tv 利用浏览器搭配键盘的方向键即可操作。当上下移动时会利用上下卷动的方式变化导航选单,左右移动时则利用水平卷动的方式选择影片连结,这个操作模式非常的直觉,可惜显示内容时只能利用单行的方式显示,能够显示的资料量有限

智能电视的未来的操作模式还有很多的可能性,最近三星推出了类似 Kinect 体感遥控的 Smart TV,也有利用类似 Wii Remote 的鼠标遥控,或者近期刚发表的 fan TV 更是将大家熟悉的触控方式带进了电视裡,未来与电视的互动方式会演变成什麼洋子,就让我们继续观察下去。

相关 [电视 界面 模式] 推荐:

浅谈电视界面与操作模式

- - 盒子UI
随著互联网与生活越来越密不可分,联网设备也从原本的电脑,变换到了手机上. 正当大家的生活离不开手机时,网络也等著进入大家最常接触的第三屏幕-电视. 一直以来都有许多厂商在智能电视上耕耘,早期的 IPTV, 中华电信MOD、一电视网乐通是这类,现在的 OTT(Over-The-Top)-Box,大家熟知的 Apple TV、Google TV以及大家可能比较陌生的 Roku、Boxee,透过 Netflix、Hulu、Amazon video等丰富的数位内容,达到新的收视体验.

处理交互内容的用户界面模式

- allow - 所有文章 - UCD大社区
网站和网页应用程序正在变得越来越富有交互性. 网站上的内容比印刷的副本好处在于如果我们希望的话,我们可以让用户与它们交互. 我们已经讨论过网站导航模式与及流行的网页内容表述模式. 现在让我们探索一些我们有交互性网站内容的UI模式. 就地编辑对于Web应用来说是一种有价值的UI,它允许用户创建或编辑内容.

移动应用界面设计模式 - 搜索、排序、筛选

- - 所有文章 - UCD大社区
去年年底,我们曾经学习过一篇“ 具有引导性的移动应用界面设计模式”,其英文原文来自O'Reilly动物园的一本新书,"Mobile Design Pattern Gallery",就是封面上是个大公鸡的那本儿. 今次这篇则是来自于本书的第四章——搜索、排序和筛选. 貌似国内引进版也由XX出版社在做着了,真心不关我事,自己走起.

黑暗模式:那些骗人的界面设计!

- - 互联网的那点事
腾讯科技 冰尘 8月31日编译. 哈里·布努(Harry Brignull)是英国一名用户体验设计师,拥有认知科学博士学位. 他同时也是Dark Patterns(黑暗模式)网站的创始人. 这家网站的作用,用他的话说就是“揭露网站欺骗性的用户界面设计手段”. 下面是国外媒体根据他今年4月份的一次演讲而整理的内容.

电视购物

- han - 新闻跟帖局
核心提示:日前,六部委发出通知,6月1日起,禁止生产含双酚A的婴幼儿奶瓶,9月1日起,禁止进口和销售含双酚A的婴幼儿奶瓶. 卫生部文件称,尚未发现双酚A对人体健康产生不良影响. 但是鉴于婴幼儿属于敏感人群,为防范食品安全风险,决定禁止双酚A用于婴幼儿奶瓶. [查看原文]分享网易新闻《卫生部:双酚A奶瓶9月起禁止进口和销售》的精彩跟贴 .

Roxy.com 界面設計

- 幻幽 or A書 - ㄇㄞˋ點子靈感創意誌
賞.化繁為簡.一頁網站的介面超魅力. 網站的背後 (6pics). 《 知名網站LOGO設計-字體 》. 測‧web designer‧必玩的網頁設計隨堂考. 丹麦 (@ibeiou). Elextrolux 伊莱克斯 (@ibeiou). 「周末影像」水中倒影 (@yunblue). ARTEK (@ibeiou) 无觅.

等死模式与穿越模式

- Rady - 左岸读书_blog
她去年本想考自己喜欢的研究生,结果失败,却出乎意料地遇到了一份不错的工作. 她害怕考了又考不上,浪费时间;但是不考又不安心,已经纠结半年了. 我问她,去年你每天花多少时间学习. 她说我去年每天大概4个小时,学了3个月,考前一周突击了一下,就差3分. 我又问她,现在你每天烦这件事情大概花你多少时间. 她说从过年到现在(6个月)每天都在想,上班下班都想,烦死了.

加州模式还是德州模式?

- kuangyue - 鲁克 - luke51 - 和讯博客
http://hexun.com/LUKEPOST > 复制 > 收藏 | 手机看个人门户. 路客邮报 LUKEPOST BLOG. 是否公开三公 外交部说的不算. 乘京沪高铁:有些事亲历才知道. 宝洁员工爆料:食品包装有玄机. 南京地税部门不能“趁火打劫”. 和讯个人门户 v1.0 | 和讯家园 | 意见反馈.

设计模式之代理模式(Proxy)

- - 博客园_首页
这段时间一直忙于期末考试,好久没来博客园了,现在好了,终于考完了,也该过上正常的日子了. 开学就是大四的学生了,时间过的可是真快啊,转眼间大学四年已经接近尾声了. 回想大学这三年,成绩还可以吧(年级前10%),参加过各种竞赛(acm,数学建模等等),学生会也呆过(打了一年的酱油),好哥们也有那么五六个(希望以后能在一个城市发展,大学期间的宝贵财富啊),另外所谓的大学生创新实践项目也搞了一个(就算开阔一下视野吧,大学能生有什么创新呢.

Apache的prefork模式和worker模式

- - 编程语言 - ITeye博客
apache常用的工作模式有prefork和worker模式. 运行命令httpd -l 或者apache2 -l ,输出的结果中如果含有prefork.c,那就是prefork模式,如果结果中含有worker.c,那就是worker模式. 原文: http://www.ccvita.com/339.html.