查看原文
其他

从零到壹 | 企鹅电竞TV初试啼声

GLDesigners 腾讯GLDesign 2022-05-11


项目背景

从2016年开始,各大平台雨后春笋般涌现进军客厅领域,相比于虎牙、斗鱼,企鹅电竞在2019年首次进入客厅领域,起步还是比较晚的。


本次TV设计围绕着“聚”发力。从内容上我们将聚合精选的直播内容和赛事内容;从用户使用场景来讲TV能够满足一群志同道合的人聚集一起观看直播;从观看体验上更希望用户聚焦内容本身沉浸观看。



一、聚焦-分析TV特性

了解TV的交互方式是如何让用户聚焦于TV本身


1.TV独特性的交互方式 【远距离 + 遥控】 

和我们日常熟悉的手机、电脑的使用场景不一样,电视的屏幕与用户之间存在着一些距离,这也意味着我们无法触摸屏幕操作,不再具备掌控感。这样不但增加了操作的难度,也让用户在心理上产生距离感,从而更依赖于遥控器,这也意味着TV的交互方式需要考虑到远距离+遥控。


这样的方式用户又该如何聚焦于TV本身呢?这就需要提到两个设计要点:焦点设计和十字型线性交互



2.远距离需要焦点设计

客厅领域的使用场景由于都是远距离,所以在设计中要保证电视中的内容和控件在一定活动空间内,是可以被清晰阅读和操作的。这时候就需要焦点清晰的告诉用户现在定位在哪里。


在TV中,用户使用方向键导航时,提供高亮显示的焦点反馈。焦点态与其他界面元素要有明显的区别,这样当用户视线从电视移开又移回电视时,可以快速清晰的看到当前定位导航的焦点。



视觉上的焦点态,要考虑到效果醒目,尤其在白天,这就要求TV的焦点要非常的明显,而且不能太过于花哨,毕竟重点还是要放在内容上。对比以下三种效果,放大+阴影+高亮的焦点效果既保证了可见度,又不会让用户对内容注意力分散到选中效果上。



3.十字线性交互

同时客厅的远距离也不能让用户像玩手机一样随时随地,用手势就可以操作。反而操作起来需要一个媒介 - 遥控器。


移动的手势操作,PC的鼠标操作,TV的遥控操作,这三种设备的不同操作都是可以满足用户最底层的“浏览”、“确认选择”和“更多操作”的基本诉求。我们可以对比下三种设备的操作方式。


移动端:【浏览】手指在屏幕上下滑动;【确认选择】点击屏幕:【更多操作】长按

PC端:【浏览】滚动鼠标滑轮;【确认选择】鼠标左键;【更多操作】鼠标右键

TV端: 【浏览】上下左右按键;【确认选择】OK键;【更多操作】菜单键


由此可以看出,TV浏览时更依赖遥控器操作,由于这种受限的操作方式,所以焦点移动需遵循十字运动交互。这种操作路径只支持上、下、左、右的直线移动;不能够斜线移动。



其实这种看似简单粗暴的十字型线性交互让用户能够更聚焦于TV本身。当用户进行操作的时候,遥控器简单高效操作方式可以让用户更多的是聚焦在电视的屏幕,而不是经常低头看遥控器的按钮,打断操作的连续性,影响整个体验的流畅度,舒适度。


二、聚焦 - 设计执行

企鹅电竞TV从设计切入,如何让用户聚焦直播内容


1.首页-多端统一结构


首次开启tv设计我们从设计思路上更希望多端拥有一致化的体验。便于降低用户学习成本,快速聚焦于内容。主要从自动聚焦和快速聚焦两个点入手。


A.自动聚焦内容 - 进入应用自动播放直播

在视频类应用中视频的点击率依赖于外露的内容的吸引,尤其对于新用户来讲,如果6分钟没有看到兴趣直播就会流失,所以直播内容尽可能外露以此吸引用户。在电竞APP中,首屏自动播放的banner直播流是点击率最高的模块,在PC端首屏也拥有自动播放的直播流。所以TV端中决定继续沿用这个模块,打开应用就自动播放直播内容,减少用户思考和选择。并且相比于其他两种设备TV具有更大屏的特点,更能够吸引用户聚焦在直播内容。


B.快速聚焦内容 - 分类外露展示,快速查找内容

游戏分类是用户筛选直播常用的模块,移动端分类以每个游戏为维度作为一级导航,PC端直播流下方也单独将分类作为一个模块展示,在TV中也将游戏分类作为一级导航方便用户快速筛选。



2.直播间-便捷式操作

本次TV端的直播间设计更希望用户更沉浸更聚焦于直播内容,遵循“简洁”“高效”两个原则。


简洁:相比于PC/APP的直播间信息,TV直播间目前仅保留用户常用的弹幕设置,主播信息及关注,视频清晰度。减少操作维度让用户更专注内容。



高效:相比于APP直播间的寸土寸金,TV直播间中用户可以通过遥控器操作,不脱离直播间的同时快速选择其他直播内容或者查找历史观看。大大降低了操作成本。


点击左键从左边展示推荐直播,点击右键从右边展示历史记录;上下键快速切换直播间,每次切换直播间都会展示当前直播和预告下一个直播内容以及每个按键出的功能说明。



3.设计中遇到的问题

A.TV操作引导该一次性吗?

这里想要提下关于“是不是每次切换直播间都要出现按键功能说明”这个问题。刚开始的时候处理TV直播间按键操作提示更倾向像PC、移动的首次新人引导给予一次性的引导提示,但是从使用用户差异出发,TV不像手机,电脑一样属于个人物品,而是多人且在不同时段使用,一次性的引导会忽略非首次使用者体验。



B.获取焦点即执行 VS 获取焦点后按确认键再执行?

两者的区别在于是否需要再次按确认键才响应操作。在之前的TV设计中,由于即时执行容易出现卡顿,所以更多的是需要确认后才响应,而现在技术上已经可以解决这种卡顿问题。不过依旧需要结合具体情况选择使用。


举个栗子:在企鹅电竞TV中,首页使用的方式是获取焦点即执行,因为在首页用户更多的是找寻感兴趣的直播内容,用户上下按键可立即切换右侧直播内容。所以在这里推荐使用获取焦点即执行的方式,能够节省找寻成本。用户点击确认键即可进入直播间观看。


在直播间推荐列表中则需要用户按确认键再执行。因为直播间更多的是需要沉浸观看内容,所以在右侧出现推荐的内容时,用户上下按键也不推荐即时切换直播内容,而是需要确认后再执行。



三、总结

最后总结如何让用户在TV中聚焦内容

1.统一多端首页结构,降低用户迁移学习成本,快速聚焦内容

  • 自动聚焦内容 - 进入应用自动播放直播

  • 快速聚焦内容 - 分类外露展示,快速查找内容

2.直播间便捷操作,聚焦直播内容,沉浸观看

3.多人不同时段均可使用TV,引导要考虑到非首次使用用户

4.获取焦点即执行与获取焦点后按确认键再执行 这两种方式根据不同场景可选择使用。


四、未来方向

从企鹅电竞的最初设计到1.0版本出生的这个过程,也是我对TV类项目从陌生到熟悉的成长过程。还存在很多不足。


接下来的优化方向主要在两个方向:

1.TV反馈。可以多采取一些动画显得更加鲜活,TV更重要的是声音,所以声音给予辅助提示也是重要的方式,可以让用户有更强的感知和反馈。

2.语音。语音操作方式也将是接下来的探索方向,就像刚才文中讲到的搜索,用户用遥控搜索需要一个字母一个字母的选择,过程非常繁琐,如果使用了语音,大大降低了操作成本。


目前企鹅电竞TV已在当贝上线,感兴趣的同学可在电视应用中下载使用,多多支持啦~




您可能也对以下帖子感兴趣

文章有问题?点此查看未经处理的缓存