TV App设计经验谈——10个可向游戏界面设计学习的地方

来源: 徽徽的UX世界

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内容所固有的特色。

wow

经验二:操作区域内容的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栏(前景)和主要内容(背景)的关系还可以优化,这两部分内容的融合看起来非常的生硬。

google tv

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

游戏是为普通用户设计的,也是为新手和专家设计的,正因为如此,游戏的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本身的特性,我们对字体、字号、字色的设计上有了更多的自主性,可以更多的在上面做文章,那么,作为这方面先驱的游戏设计,当然也是我们可以借鉴的了。

作者:徽徽

文章来源:徽徽的UX世界