专业知识分享案例研究 · 设计 · 体验

用户体验设计案例研究 | 电视上的电子竞技界面设计

2021-01-198 MIN READ原载于微信公众号 ↗

当今电脑游戏产业规模庞大。就制作预算和收益而言,它和电影行业不相上下。2018年发行的Red Dead Redemption 2首周末收益超过7.25亿美元。相比之下,同样是在2018年上映的Han Solo,首周末票房仅为8400万美元。不过,尽管电脑游戏已经发展成一个成熟的行业,但电子竞技才刚刚开始发展。

_世界经济论坛记者Alex Grey报道称,今年全球电子竞技观众将达到3.8亿人,其中包括1.65亿忠实的粉丝和2.15亿偶尔观看的观众。Forbes预测,电竞行业将在2018年的收入将达到9.05亿美元,在之后的两年内将超过10亿美元。_

在BraveGeeks,我们热爱游戏和电子竞技。对于我们来说,与朋友和同事在晚上一起观看LOL或DOTA比赛的直播是很平常的事。但是,尽管电子竞技发展迅速,但它仍然是一个非常年轻的行业。我们花了一些时间来思考电子竞技这个行业与传统体育竞技相比它到底缺少了什么。


01

发现 (Discovery)

我们有一个猜想, 电子竞技在客厅这个住宅的核心部分里仍然很少见。我们通常会在电视上观看传统体育竞技项目,如棒球、足球、曲棍球、板球和足球。于是我们想到: 电子竞技应该出现在电视上。

好吧,你说我们已经有了Twitch和YouTube。

没错,它们很棒。但它们是通用平台。Twitch主要面向个人流媒体,而YouTube则主要面向视频博主(以及其他所有人)。

在这些平台上你很难搜索自己喜欢的游戏的比赛直播或对自己喜欢的选手的采访。

为了制定、测试和最终确定我们的议题,我们对几位电子竞技迷进行了一系列采访。

我们提出了以下问题:

你会看哪些游戏的比赛?

你用什么设备观看比赛?

你在哪个网站或App上观看?

你用什么网址或App来了解电子竞技的相关新闻?

我们发现:

我们的受访者会在Twitch或赛事网站上观看比赛直播;

他们更喜欢在电视大屏幕上观看比赛,尽管他们为此要经常使用HDMI电缆将笔记本电脑连接到电视;

_他们中的大多数人都拥有具有智能功能(Tizen OS或Android TV)的大屏幕电视(32英寸或更大)、Apple TV、PS4或Xbox One;_

他们在赛事网站、专门的应用程序和社交媒体上找比赛相关的资讯和赛事排名;

他们对不止一个游戏的竞技比赛感兴趣,并且他们不会仅仅因为是电子竞技就观看任何比赛。

根据我们的研究结果,我们对我们的想法进行了如下改进。

我们想开发一款概念电视应用。它可以让你:

观看任何游戏的 **最新** 比赛;

观看与重要的比赛、喜爱的队伍和喜爱的玩家 **相关的新闻报道**;

个性化定制你所看到的内容:电子竞技是一个多元化的行业,不是每个人都喜欢所有的东西。

我们以前从未开发过电视的应用程序,但我们无法放弃尝试新事物的机会。我们决定创建一个展示项目。于是,探险开始了。


02

为电视进行设计面临的挑战 (Challenges)

为电视设计应用程序与为我们熟悉的网页和移动设备做设计不同。我们列出了以下挑战:

在电视屏幕上阅读大量文字令人不适;

电视屏幕可能离观众很远也可能很近;

电视可能会相当大;

这个应用应易于使用设备的返回键进行导航。

这些都给我们的设计带来了限制。

我们研究了Android TV、Apple TV和PS4(我们没有Xbox One)上的数十种应用来了解开发人员通常是如何解决我们发现的问题的,以下是我们的结论:

排版必须简单、大和整洁;

视频内容必须强调和文本内容必须弱化;

基本要素的放置方式应使观众不必转头就能看到它们;

用户应尽可能少打字:例如不要要求输入用户名/密码,不要使用传统的搜索和查询方式。

另一点是,尽管我们可以在多种平台上发布我们的电视应用(Apple TV,Android TV,Xbox One,TizenOS等),但平台之间风格上的差异并不大。我们得出的结论 ,针对一个平台开发的设计能够很容易地适配另一个平台。


03

安全区域 (Safe-zones)

为电视开发设计时最有趣的部分之一就是需要考虑安全区域。在探究这个问题的时候,我们发现我们应该排列所有的UI元素,使它们不在屏幕边框5%的范围之内。

这是因为电视有时仍会有过时的超屏显示,这意味着图像的边缘可能会被切断。无论在哪个平台(PS4,Apple TV或电视本身)上发布该应用程序,都可能发生这种情况。

我们推荐This Also这一系列专门写为电视设计的文章。这是一个很棒的系列,涉及很多细节。链接如下:👇

_(查看链接 ↗


04

设计语言 (Design language)

我们首先确定了我们应用程序的内容。经过一系列讨论,我们决定认为应用程序的内容的主要为:

_电子竞技比赛的直播和回放、_ _以视频方式播报的赛事资讯。_

然后,我们确定了要展示这些内容的上下内容。这些内容必须是电子竞技迷们共同感兴趣的重要领域。我们认为这些会是锦标赛和比赛队伍。


05

导航栏 (Navigation)

在采访过程中,我们发现了以下在开发应用程序的导航栏时必须解决的问题。

1.用户经常关注几种电子竞技游戏;

2.每个游戏都有很多内容,如果把不同游戏的内容混在一起就不对了。

尽管这通常会使应用程序复杂化,但我们还是决定采用 双重导航。我们在顶部放置了一个水平导航栏用于在游戏之间进行切换,在侧面放置了垂直导航栏用于在各页面之间进行切换。

用户可以轻松地在每个主页面中切换游戏。在用户无法切换游戏的内部界面上,我们会显示一个识别游戏的徽章。


06

锦标赛 (Championships)

锦标赛是电子竞技的主要赛事。用户需要既能观看比赛,又要能通过比赛赛图查看锦标赛进度。

用户可以关注锦标赛,他们在这样做时,最新的锦标赛资讯和比赛会出现在应用的主屏幕上。

为了在一个界面上容纳所有内容,我们不得不添加一个额外的侧边导航栏并将内容分为一个个模块。


07

队伍和选手 (Teams and Players)

在电子竞技中,队伍会有很快地组建起来或是解散的情况,队伍中的选手也会经常变换。因此,我们在应用中添加能够查看队伍的当前成员或特定选手个人资料的功能似乎并不是没有道理的。


08

主界面 (Home screen)

这个应用程序的主界面将最有趣和最新的信息集放到一处:当前锦标赛的直播和资讯。主界面还考虑了用户的偏好,并显示用户最喜欢的队伍、选手和锦标赛事。


09

酷炫的功能-防剧透模式 (No spoilers mode)

没有人喜欢被剧透。但是,我们应用的许多界面都显示比赛分数。于是我们决定在应用程序中添加一个特殊的防剧透模式。在该模式下,不会显示用户还没看到的比赛的比分。这些比赛的结果也不会显示在淘汰赛图中。


10

电子竞技酒吧模式 (eSprot bar mode)

电子竞技酒吧是粉丝们可以聚集在一起观看自己喜欢的游戏直播的地方。有时这些酒吧只有一个屏幕,有时酒吧的每张桌子都有自己的屏幕。

问题是,酒吧老板很难管理这些直播。即使只有一个屏幕时,老板也需要花费一些时间才能为你找到所需游戏的最新内容。当有很多屏幕时,这就变成一场真正的噩梦了。

针对这种情况我们设计了一种特殊的模式。电子竞技酒吧模式能让酒吧老板只让客人控制应用程序的某几个特定方面。在该模式下,应用会忽略任何先前创建的偏好,并显示所选游戏最新和最受欢迎的视频。酒吧顾客只能更改特定的视频和事件,他们只需点击遥控器上的按钮就可以切换到自己喜欢的游戏或锦标赛。而主界面、锦标赛界面和其他用户基础功能将被禁止。


11

总结 (In conclusion)

我们相信电子竞技很快就会在我们的文化中占据重要地位,与足球、橄榄球和篮球等体育运动一样。我们项目的目标是勾勒出我们的应用程序的概念,这个概念应用将不仅仅为电子竞技爱好者提供便利,还为了将电子竞技带入每个客厅。

我们欢迎对我们的概念提出的任何意见和批评。你会使用我们的应用吗?你如何看待电子竞技在家庭娱乐中的未来?


参考文章:

查看链接 ↗

作者:BraveGeeks

译者:太上老菌

原文请戳【阅读原文】

为尊重版权和译者

转载请联系我们

本文原载于微信公众号,正文与配图已转存至本站以便长期访问。 查看原文 ↗

有想具体聊聊的问题?把你的情况说一说。

联系咨询