标签： 界面设计

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

经验二：操作区域内容的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本身的特性，我们对字体、字号、字色的设计上有了更多的自主性，可以更多的在上面做文章，那么，作为这方面先驱的游戏设计，当然也是我们可以借鉴的了。

作者：徽徽

文章来源：徽徽的UX世界