TV App的设计借鉴游戏界面设计的经验

文章描述:TV App设计经验谈——10个可向游戏界面设计学习的地方.

TV App的设计,相对来说是一个全新的领域,有哪些领域可供我们借鉴?

游戏主界面有2种形式,全屏的和窗口的,全屏的独占式游戏主界面曾经是唯一的形式,也是玩家游戏时关注的重点,游戏内的其他模块,比如个人信息、物品栏、地图、公告、技能等,都在固定位置以悬浮的方式,占据屏幕的边角,并且这些模块是可以缩小和隐藏的;而需要及时处理的通知,以及一些需要复杂操作的模块,如物品的交易,技能的升级等,则以弹出窗口的形式出现,他们通常占据屏幕不到1/3的空间,并且可以立即关闭。

大家熟悉的TV也一样,画中画之类的玩意儿虽然新鲜,但是使用场景少,使用频率低,用户在使用TV的时候,也是用独占式的全屏,而电视台标、频道号、字幕、滚动广告等,通常也是在TV屏幕的边角,在TV本身的设置中,频道号也是可以隐藏的;另一方面,因为内容提供商——电视台的盈利模式缘故,这些滚动广告不可隐藏或缩小,甚至用户需要忍受他们TV的全屏,都被广告所占据,当然,用户也可以选择——换台。

与TV不同,电脑APP天生就不是独占式全屏的,天生就是为多任务设计的;而手机、Pad上的App,却是天生独占式全屏的,但是它与TV App的不同之处在于,它们的屏幕要小得多,在家用电视屏幕开始不断增加到40寸及以上时,3.5寸、7寸、10寸的手机屏和Pad屏,大约就是足球和鸡蛋的关系。而相对来说,游戏在电脑、TV上,已经有了至少十多年的经验,不管是曾经的《传奇》,还是曾经的小霸王游戏机,抑或是Wii或者X-box 360,在大屏幕的独占式界面设计上,显然游戏更有经验,所以,TV App的设计,个人认为,可以更多的借鉴游戏界面设计的经验。

经验一:游戏主界面最大化

对玩家来说,当他们游戏时,注意的重心在画面的背景,也就是游戏内容本身上,它们是持续的,动态的Flow,而诸如个人信息、物品栏等游戏组件,虽然是界面的前景,却是断续的,可隐藏的、辅助的;游戏画面风格很大程度上影响了玩家的游戏选择,而游戏画面风格更大程度上是由游戏主界面的背景——游戏内容决定的;对于TV App来说,它同样应该具有游戏主界面背景所具有的特征:全屏、动态、持续,而这些特征,恰恰是TV内容所固有的特色。

经验二:操作区域内容的Global,Context和Customizable

在游戏的不同场景,这些位于游戏主界面前景的内容并不相同,比如玩家在游戏内闲逛时,以及在游戏中战斗时,他所希望看到的信息和他想要进行的操作是不一样的,比如说,在闲逛时,Social的部分可以范围大一些(通常在屏幕左下角以及玩家游戏角色头顶上),而在战斗时,玩家战斗状态相关的信息就更重要了,这时Social的内容应该以自动和不打扰为主,否则玩家就该骂娘了。

此外,就像上文中提到的,以及上图中《魔兽世界》所示的,这些游戏组件在内容、显示区域、显示大小上应该是可定制的,从而最大的发挥它的“辅助”价值。

在TV App的设计中,我们对TV App用户的使用期望仍然是“沉浸”(也是“Flow”),在游戏中,通过游戏剧情、游戏角色之间的关系、游戏角色与场景之间的关系、游戏角色与游戏NPC之间的关系等等,来实现使用户“沉浸”;而在TV App中,尤其是电商TV App中,引发用户沉浸的肯定不是迷宫一样的导航,机器人一样的搜索,而是用户与商品之间的关系,用户与用户之间的关系等等,这也就决定了我们的信息架构,我们的Home,Category,Search,Product Detail, Shopping Cart,Check out等等,他们的内容、结构和关系要打散了重新组合,并且千万要理清自己的“辅助”位置。

经验三:图标式操作

图形化是一个显而易见的趋势,并不止是游戏如此,只是游戏图形化的更彻底一些,对于大屏幕的TV App来说,这个不用多说。

经验四:分屏展示(没有全屏幕的上下滑动)

这个是从游戏中获得的经验,但是它不符合在TV上使用Google搜索、浏览网页的场景(虽然不知道多少人会在TV上这么用),部分内容的上下滑动(注意:不是全部内容)是可以接受的,比如说一些TV App的Global/Context Menu的设计是通过遥控器上的五向键的一些操作从底部滑上来的,个人认为,屏幕底部用类似前景的方式呈现一些可操作的内容,跟游戏中的可隐藏的物品栏和公告栏等是异曲同工的,另外,如下图所示,下图的App栏(前景)和主要内容(背景)的关系还可以优化,这两部分内容的融合看起来非常的生硬。

经验五:定义快捷键并用可见的方式展示

游戏是为普通用户设计的,也是为新手和专家设计的,正因为如此,游戏的Settings里面有一堆的快捷键并且这些快捷键大多数都是可以自定义的,那些游戏专家,除了敏捷性等生理机能外,更多的是熟能生巧(仅限于劲舞团之类的休闲游戏);对于TV App来说,定义快捷键并用可见的方式展示的优势在于,它能兼顾新手、普通和专家用户,另一方面,它减少了键盘/遥控器操作的复杂性。

经验六:2D vs. 3D

游戏的发展历程是从文本到图像,从2D到3D,我相信,软件,硬件的发展都是服从于这个规律,并且为之服务的,而由于TV本身的大屏幕优势,以及3D电视的出现,并且相信会逐渐普及,3D的TV App相信会成为主流,而游戏领域在3D引擎技术的领先使用,决定了游戏在3D的界面设计领域有更多的经验可以供我们借鉴,比如说《魔兽世界》如何去吸引那么多中国的女玩家,去克服3D带来的方向迷失以及眩晕感,使她们同男性玩家一样,能够很好的享受这个游戏的。

经验七:用地图来导航

游戏的信息架构同样复杂,但是在游戏设计中,使用了地图这样一种图形化的方式来实现导航的目的,而在Web中,我们看到的站点导航是什么呢?大多是一堆树形结构。在TV App设计时,我们是否也可以借鉴游戏的这种导航方式,用图形化的方式来达到导航的目的,当然,地图只是一种形式。

经验八:多账号、多角色、多关系

对游戏来说,一个玩家通常会有一个主要角色,多个小号,多个辅助角色,而对于一个游戏角色,也有多种不同的关系,比如好友、师徒、夫妻、帮派、国家、主人和宠物等等,在游戏中,这个游戏角色更多的是一个Public的角色,而游戏也是为了Public,为了Social的目的而设计的,而在Web上,在SNS出现之前,我们看到的更多的账号是非常Personal的,它们很少去处理这些Account之间的关系。另一方面,对于Mobile,对于Pad来说,更多的时候也是一个非常Personal,非常private的设备,而TV,确是服务于Home和Family的,它也需要处理不同的角色,不同的关系,这同样也决定了,TV App的设计需要从游戏设计中取经,借鉴他们处理多账号、多角色、多关系的经验。

经验九:文字简洁

这个不言而喻,在Web上,在Mobile和Pad上,我们可能看到满屏的文字,它尤其适合阅读场景,但是在TV上,如果看到满屏的文字,这绝对是一个灾难,乔布斯式的Presentation为大众所喜欢,原因之一也是因为,它言简意赅;TV App的设计要想达到文字简洁的效果,需要学习借鉴的,不能仅仅是乔布斯式的Presentation,因为不管是PPT,还是Keynote,虽然演讲人试图把Presentation变成一个或者一个个连续的故事,但是这依赖于演讲人本身的努力,但是从PPT和Keynote本身来说,虽然它可以自动播放,但是它仍然是非连续的,甚至是静态的;而相对来说,游戏设计在这方面又更有经验了,我们可以学习它如何在有限的空间里,呈现不同类型的,多种多样的信息。

经验十:用字体、字号、字色的设计来表现信息架构

仍然是以上面的《魔兽世界》的图为例,或者是上面《泡泡战士》的图,我们都可以看到,它们用字体、字号、字色的设计,对不同类型的信息进行了区分。在Web上,由于技术、兼容性等原因,字体、字号、字色的设计等应用得相对较少,所以我们在浏览网站时,看到的经常是千遍一律的宋体,黑色字,但是在TV App领域,因为App本身的特性,我们对字体、字号、字色的设计上有了更多的自主性,可以更多的在上面做文章,那么,作为这方面先驱的游戏设计,当然也是我们可以借鉴的了。

时间: 2024-07-30 10:15:26

TV App的设计借鉴游戏界面设计的经验的相关文章

TV App设计 10个可向游戏界面设计学习的地

TV App的设计,相对来说是一个全新的领域,有哪些领域可供我们借鉴? 游戏主界面有2种形式,全屏的和窗口的,全屏的独占式游戏主界面曾经是唯一的形式,也是玩家游戏时关注的重点,游戏内的其他模块,比如个人信息.物品栏.地图.公告.技能等,都在固定位置以悬浮的方式,占据屏幕的边角,并且这些模块是可以缩小和隐藏的;而需要及时处理的通知,以及一些需要复杂操作的模块,如物品的交易,技能的升级等,则以弹出窗口的形式出现,他们通常占据屏幕不到1/3的空间,并且可以立即关闭. 大家熟悉的TV也一样,画中画之类的

App设计VS Web设计:互相学习到了什么

我们通常将http://www.aliyun.com/zixun/aggregation/9086.html">App设计和Web设计看作两个完全不同的领域. 由于Web App的出现,彼此之间的界限似乎变得模糊了,不过我们依旧尝试对比App设计和Web设计.即使是同时工作于这两方面的设计师也常常将它们区别对待. 其实这两方面可以互通互补.每类设计都有自己的优点和缺点,往往也需要在其它方面进行补充. 下面是App设计和Web设计间可相互借鉴的六点. 1.避免功能泛滥 App设计师们清楚,额

布丁徐磊:APP需作场景化设计 NFC是电子凭证趋势

徐磊于2001年参与创立北京同方微电子有限公司,历任CTO.副总裁.期间,在RF-ID(射频识别).NFC(近距离无线通讯技术)等领域实现了超过10亿单位产品销售,包括08年北京奥运会全部电子门票项目.2010年4月徐磊加入创新工场,任战略发展部总经理,参与早期点心OS等项目运营及投资.同年11月,徐磊与包炬强等5名创始团队成员共同创立布丁--北京步鼎方舟科技有限公司,着力于拓展移动互联网O2O业务. 日前,徐磊接受了投资界记者的采访,对于创业,他表示:第一,创业团队需要非常关注自己的用户或者客

浅谈游戏界面设计中的视觉语言

前言 游戏界面设计(Game Interface Design 简称GID),是指将游戏用户能够进行交互功能的视觉元素,进行规划.设计的活动.视觉语言(Language of Vision),源于科学的造型理论,在造型艺术领域里,这种可以传达情感.理念和信息的形象及图形.文字.色彩等元素所构成的视觉样式,被称为视觉语言. 游戏界面作为用户参与游戏,体验游戏娱乐性的通道,直接影响着用户对游戏的印象, 一款优秀的游戏界面,应注重视觉语言的设计,始终遵循"以人为本"的设计理念,使用户在游戏过

WP7应用开发中交互设计和UI设计的几点建议

文章描述:WP7交互特性浅析及APP设计探究. Windows phone7是无线领域的新生力量,但是迟迟没有进入中国市场.Mango(注意WP7和mango不是一个概念)的发布带来了中文的操作系统,也让人们看到了该系统的无限可能.在此,我结合自己在进行相关应用设计的经验以及自己对WP7系统认识和理解,浅谈一下这一特别系统的交互特性. 本文索引: 涅磐重生的WP7(以及它的历史简介) WP7对比iOS和Android WP7设计风格 WP7内容和结构框架及特有名词解释 WP7交互特质分析 WP7

界面设计师经验分享:界面设计与交互设计

文章描述:从商业角度看,聊聊为什么企业需要界面设计与交互设计? 我是学商科出身的,所以我有个常用的思维方式,做一件事情会思考对企业的价值.对客户的价值,成本和收益是什么.感觉业界流行的是如何做好界面设计和交互设计的博客与书籍,但很少能够看到"企业为什么需要界面设计与交互设计"这种话题的文章. 好像显而易见做界面和交互设计是为了用户体验,其实不是这么简单可以一言即止,还是有多个层面来看,其产生的价值和意义. 1.为了客户第一印象和形象 "食色"是人的天性,食物需要颜色

网页设计要在设计布局之前决定色彩方案

文章描述:网页设计要在设计布局之前决定色彩方案. 网页设计吸引人的地方在哪里?是图片还是对内容的布局?或者说是网站的内容决定了网站的价值.所有这些因素都会发挥其作用,但正是配色方案决定了设计是否出彩. 有经验的专业人士会告诉你很多诀窍,比如说,一种配色方案可能适合一种设计,但未必适合于另一种:配色方案选择应该在布局内容之前还是之后?今天我们就要找到这些问题的答案,本文中,你也能找到很多免费资源供你选择配色方案. 请注意:这个话题内容很广,单这样一篇小文章是无法涵盖所有内容的.因此,我提供了相关资

用户体验:关于设计理论和设计术语

网页制作Webjx文章简介:关于设计理论和设计术语. 这几日的工作,涉及到很多会议. 也就涉及到很多人,很多意见,很多碰撞,很多思辨. 关于项目本身的不再多说,目前也不适合分享. 倒是有一些题外话,虽然和具体项目无关,但是会影响我们工作和沟通的效率.据我来看,也是很有意思的话题. 其中有些话: 功能性导航.全局性导航,我们是不是太扣字眼了?用户真的会关心什么是功能性导航,什么是全局性导航吗? 我们用这些原则来指导我们的工作,是不是太僵化了? 我们为什么先分析别的网站去找出这些规律,真的有用吗?我

互联网产品设计:设计原则和设计易用性

概念不能成为我们设计产品的索套,即使设计出人头马面.挂羊头卖狗肉,只要满足了用户需求.在设计中不是犯了什么原则错误,而是排版的方式没有在什么地方见到过:但提出来的问题一定要重视. 概念VS功能:在几次产品会议中,经常会听到同事说XX产品就应该像XX的样.不能没有YY.ZZ功能.感觉有些太概念化. 虽然一个成型的产品,例如SNS就应该有好友关系.日志等功能,如果没有这些功能可能就没有人说它是SNS了.但是,当我们需要设计一个产品的时候,是否需要先套概念,明确做什么东西后,然后再根据自己的需要修改这