虎扑直播设计思路

   前言:虎扑一直觉得视觉做的不好,很多细节体验也不好,但是真离不开它,原因在于几年web端的经营,聚集了大量优质用户,这些用户的创造的氛围也是虎扑区别市面上其它app最重要的特点没有之一,而根据这个特点制作的赛后用户点评更是不能再赞,虽然有bug- -最新版本也撤离了这个非常重要个的功能。单论产品新浪直播要好的多(视觉也很赞很多数据能图像化),可惜还是选择虎扑,毕竟氛围无可替代。

  这是做ios图的时候设计思路

  ios视觉图

  这次根据虎扑改造在交互方面遇到最主要的问题有2个,1个是架构;第2个是如何利用更多区域浏览直播页。

  接下来会根据首页、新闻、视频、排行、数据这5个底部标签栏来讲述。遇到这2个问题会在下面描述。

  首页

  因为架构比较大,我只列举如何从首页到直播页看数据这块。

  分别涉及3个产品。虎扑、新浪直播、espn。先看3个产品首页:


  可见新浪和espn架构类似(新闻方面有所不同),都是直播和新闻一级,然后他们各个包涵各类比赛。虎扑是各类比赛一级,每个比赛包涵直播、新闻等。

  我遇到的问题是什么呢?因为一开始我一直倾向espn的架构,因为觉得各种球赛直播,在首页放满他们是最好的。

  但我一直在想哪里不对。直到我在找用户数据的时候发现——虎扑还是以看篮球为主的!!

  数据来自足球赛事新闻板块的评论,评论数很少上10的。。而篮球板块,基本轻松破100


  再想,虎扑,他本身就是以虎扑篮球出名的,以篮球为引导看其它赛事。篮球为主页,更适合它虎扑。

  这时候虎扑架构显得更加扁平。假设我要从首页去nba板块去.看数据,虎扑只需要1步,espn需要3步,新浪4步。

  我并不是说虎扑架构会比新浪和espn更好,是这种架构,更适合虎扑。所以最终还是用各类赛事为一级,包涵各类比赛的架构。

  首页1.2

  既然以NBA为主,那么主页第一个放nba,其它赛事与之切换。第二个问题,怎么切换赛事?


  1、侧边栏第一个被排除,因为facebook关于侧边拦讨论的那篇文章,第二也因为貌似虎扑以前就是放侧边栏各个赛事。

  2、下拉的比较简洁

  3、第三种比第二种更方便,但是视觉方面难做点,而且会出现top栏为一级,底部butter为二级的(top控制底部butter)奇怪交互(一般都是底部butter控制top)

  这种交互虽然很少见,但是我长期用下来。。。虽然奇怪,但是蛮好用的=w=所以我觉得有时候不必太过拘泥。就继续安虎扑的交互来做,只是视觉方面我难做了点,原虎扑设觉参照下图。

  比赛摆放

  虎扑是这样。来,比如我要找我队伍黄蜂的比赛,这时候眼球一般视觉流动是这样子——左右左右左右,或者上下:


  当然也有乱找乱动流,这个不表。在寻找自己的球队时候眼球要左右寻找,非常不方便,一条直线视觉流才是正确并且我认为是唯一的选择,所以我做的和新浪,espn是一样的,直线流。


  哦,这里说一下视觉想法。

  比赛聚集很多种类信息,思路——卡片。

  大量数据要看,所以——白底黑字

  配色方面,虎扑web主色是红色,但是app是黑色- - 品牌统一 啊。。

  我选择了黑色为主,红色为辅。

  直播页面

  这里我把底部标签栏变为了滑动tab,进去无限底部标签栏还是有点奇怪

  遇到问题2——如何利用更多区域去浏览信息

  虎扑红色区域,看信息区域少,有点压抑。


  新浪的交互是一种思路,新浪上滑后导航栏显示球队,可惜。。。根据

  上滑到这应该下滑返回,新浪下滑无法回来,经常误操作。。。

  我的想法是滑动时候直接把top栏顶走,到球队队徽那停下来,如果队徽的卡片高度设置为(128px,以iphone5为准),滑上去刚好顶替top,但是返回要保留。(下图是特别改的,我原设计图高度其实大于128px)


  直播采用了时间轴,不过后来想了一想,列表应该才是更好的做法(不打断快速浏览),所以后来在material的时候我改为了列表。但是不是太确定,所以ios还是时间轴+卡片

  ios时间轴


  直播页面房间解决思路

  最新版本增加了主持人房间这个功能,但是。。还这有用户需要,我说一下做的不好的地方吧,如图


  首先要考虑2种用户,一种是有选择主持人需求的,我不知道比重多少;一种是没有。

  无论哪种,我进入直播页面,我的心理预期是看最新战况,比赛稍众即逝,有点着急的心态。

  但是一进来,居然是莫名奇妙的几个图,下面写着奇怪的文字,我比较机智,第一次用2秒后就反应过来是主持人的房间。

  但是,你能保证这样的界面,全部用户都知道这是什么吗?这种也不符合心里预期。更泪流满面的是,只有一个房间时候,我还要无谓的操作点击。

  交互上来也增加了层级,还是重要页面的层级;增加了选择,交互要让用户尽可能不用思考,更少选择。它相当于一个对话框,《about face3》说过对话框的问题。何况这个对话框是一个页面。

  我每次去这个,房间都是乱选的。对我这类用户意义就是增加我使用难度。

  我的解决思路是,一进来,直接直播页面,如果你要选择主持人,去标题栏下拉切换。


  系统第一次进的默认房间是人气最高主持人,以后系统后台计算用户选择,算下来后用户进去默认用户选择过最多的那个主持人。当然后续可能还要制定一些规则比如第二人气等等,我只是提供一种思路。毕竟这种一个页面选房间的体验不好。

  新闻和视频页面等

  没什么好说,只是视觉上改动,新闻列表页没做,因为那一页视觉做的挺好的,稍微改动一下就可以达到网易新闻水准。


  排行


  东部西部是用按钮分开来的,但是因为导航栏占了滑动手势。这时候用tab表示很容易误操作。没有手势情况,大屏手机并不方便操作,还不如东部西部放在一页,下滑页面就是西部的排名更方便。


  数据

  必须吐槽一下这个左边按钮控制右边按钮的交互。明显他们是平行,怎么会出现左边按钮是一级,右边按钮是二级的行为呢?

  而且我要切换得分 、篮板、助攻等非常繁琐,需要不停按按钮。


  解决思路还是和排行一样,与其不停按按钮切换,还不如滑动来的方便

  按照得分-篮板-助攻这些关注度高低排列,让用户更少选择更少思考

  另外,常规赛数据变动不是非常大,数据不经常变的情况下,这个页面也很少人会看,我没记错哈登占了快一赛季了,就这几天才变为维斯布鲁克。

  应该是今日数据这个常变的放在第一眼展示处。常规赛与今日之间进行切换。


  最后说一下,做的这个东西嘛其实都是我个人想法,可能也有不对的地方。毕竟这是我根据个人想法和使用体验做。缺乏数据支持。但本质想根据自己想法做好一个产品的设计。

  文章很长,也不是大大们的文章看了会有收获哪种。如果你看完了,我很···荣幸,感谢观看。

时间: 2024-09-02 14:26:29

虎扑直播设计思路的相关文章

自定义View-仿虎扑直播比赛界面的打赏按钮

作为一个资深篮球爱好者,我经常会用虎扑app看比赛直播,后来注意到文字直播界面右下角加了两个按钮,可以在直播过程中送虎扑币,为自己支持的球队加油,具体的效果如下图所示: 我个人觉得挺好玩的,所以决定自己实现下这个按钮,废话不多说,先看实现的效果吧: 这个效果看起来和popupwindow差不多,但我是采用自定义view的方式来实现,下面说说过程. 首先从虎扑的效果可以看到,它这两个按钮时浮在整个界面之上的,所以它需要和FrameLayout结合使用,因此我让它的宽度跟随屏幕大小,高度根据dpi固

Android自定义View模仿虎扑直播界面的打赏按钮功能

前言 作为一个资深篮球爱好者,我经常会用虎扑app看比赛直播,后来注意到文字直播界面右下角加了两个按钮,可以在直播过程中送虎扑币,为自己支持的球队加油. 具体的效果如下图所示: 我个人觉得挺好玩的,所以决定自己实现下这个按钮,废话不多说,先看实现的效果吧: 这个效果看起来和popupwindow差不多,但我是采用自定义view的方式来实现,下面说说过程. 实现过程 首先从虎扑的效果可以看到,它这两个按钮时浮在整个界面之上的,所以它需要和FrameLayout结合使用,因此我让它的宽度跟随屏幕大小

新浪VS虎扑网,门户与垂直门户的殊死较量的2.0

中介交易 SEO诊断淘宝客 站长团购 云主机 技术大厅 [导读]新浪要以NBA频道社区化为范本,带动门户社区化转型;虎扑网,则要从封闭社区向开放门户转型.两者殊途同归.随着新浪和NBA新合作协议签署和商业化,两者在未来对用户的争夺也将变得更为激烈.这场战争到底是传统门户胜利,还是垂直门户笑傲江湖呢?你怎么看? 不出意料,在13年6月上一份为期三年的直播权合约刚刚结束以后不久,新浪就迫不及待地和NBA又谈下了一纸新的.范围更广泛的合作规划,并进一步提出了要以NBA频道的社区化为范本,来带动日显老迈

新浪为啥跟虎扑“过不去”?

4月7日晚临近11点,虎扑社会化媒体负责人Raymond Rong突然发表声明称 虎扑网在的微博账号"@虎扑篮球"因不明原因被新浪方面冻结,截止记者发稿,"@虎扑篮球"账号依旧处于冻结之中.据<商业价值>了解,虎扑方面目前仍在与新浪方面进行沟通, 但是新浪并未向虎扑透露冻结其账户的具体原因,只是表示会在14号解冻虎扑的账号.既然新浪尚未就此事做出官方说明,那不妨让我们猜想一下这一事件背后可能的因素.商业之争背后的根本原因当然都是利益冲突.表面上看,做微博

《虎扑看球》6.2.0首发2日下载火爆广受好评

<虎扑看球>6.2.0版本于昨日在百度移动首发.首发当日,新增下载用户高达10多万.截止发稿日期<虎扑看球>在安卓市场独家首发,百度手机助手精品排行,木蚂蚁首页大图推荐,N多市场等百家渠道,推荐排名仅次于<征途>口袋版.<腾讯手机助手>.据悉,<虎扑看球>6.2.0在内容上做了极大的突破,是近3个月来的一个新的里程碑.球迷.用户.嘉宾都可以对自己关注的赛事进行直播,并且能够给自己喜欢的主播送礼等功能.在彩票方面,篮彩足彩可以轻松投注,猜胜负猜比分

“产品经理”丁磊的易信设计思路

文/冀勇庆微信.飞信.有信.沃信--已经种类繁多的即时通讯(IM)市场上又出了个新产品:易信.8月19日,许久没有公开露面的网易CEO丁磊与中国电信董事长王晓初一起,隆重推出了"易信",双方将合资成立浙江翼信科技有限公司,开发和运营这款产品.众多周知,作为互联网老兵的丁磊有着非常好的产品感觉.据老冀了解,这些年来他虽然不怎么公开露面,但却参与了几乎所有的网易新产品的研发.这些年来大热的互联网新产品如微博.微信等,丁磊也都 长时间地"潜水"体验过.不过,如今即时通讯时

《虎扑看球》百度移动首发打造UGC模式第一步

<虎扑看球>于今日(12月10日)正式通过百度移动首发,用户即日起可通过百度手机助手.91助手.安卓市场等 应用市场下载体验.虎扑看球相关负责人称,本次更新的6.2.0版本是<虎扑看球>近3个月最重要的一个里程碑,是赛事直播UGC模式的第一步,将鼓励球迷用户来做UGC内容产出,让用户来做直播的体育类APP.据悉,本次<虎扑看球>的版本更新不仅对其整个规划具有非常大的战略意义,也是目前市场中唯一一款开放给球迷做直播的赛事直播软件.将之前针对赛事的单场官方直播,改版成球迷.

WIN8设计特性浅谈和腾讯微博MS首版设计思路分享

中介交易 SEO诊断 淘宝客 云主机 技术大厅 作者:dengxuecui(崔登学) miaotong(佟淼) 10月,一个收获的季节,微软的新一代操作系统window8悄然而至,同时,我们的微博客户端团队,也搭上了第一波win8应用的末班车,设计并推出了腾讯微博MS版本.本文将结合腾讯微博MS版本的设计过程以及对win8系统特性的认识,聊聊win8操作的平台的应用设计. 文章很长,请选择有价值的部分阅读,或许你敢把它读完呢- 本文索引: 1. Windows8-再构想 2. Win8的系统特性

求一个设计思路,关于登录地点

问题描述 求一个设计思路,关于登录地点 用C#做了一个程序,有前台后台,想在后台能够配置一共有几点登录地点 然后这些地点登录后,后台数据库可以有记录 解决方案 如果登陆点有固定的 IP,可以考虑使用 IP 做为每个固定点的登陆标志,再给每个登陆点分配密码. 这样每个登陆点使用自己的 IP 和密码登陆后台服务器,服务器就可以记录了.