跟着电台动起来:如何设计跑步的垂直场景

没想到吧,你竟然可以通过企鹅FM来跑步?为什么在电台App要深度挖掘一个运动场景,交互设计师又是如何将痛点和需求转化为市场蓝海,在设计的过程中怎样将场景垂直的特色表现出来······关于这些,我有一些想法与大家分享。


没想到吧,你竟然可以通过企鹅FM来跑步?为什么在电台App要深度挖掘一个运动场景,交互设计师又是如何将痛点和需求转化为市场蓝海,在设计的过程中怎样将场景垂直的特色表现出来······关于这些,我有一些想法与大家分享。

跟着电台动起来:如何设计跑步的垂直场景

企鹅FM3.1上线了“跑步听”,我们内部都把它叫做“跑步电台”。跑步电台有独立入口,里面是企鹅FM联合专业运动主播精心准备的跑步节目,最大的特色在于:跑步电台会计算用户的实际跑步步频与节目目标步频之间的匹配度,来进行智能提醒,从而陪伴用户科学而轻松的跑步。

用户真的有通过电台App来跑步的需求吗?

这是我们在规划这个产品功能时的第一个问题。即使在音乐类软件都已经上线了跑步相关功能的当下,我们依然发问——真的有人,通过电台App来跑步吗?

如果仅仅是针对现在电台类App,那需求一定是微乎其微,不同于音乐统一的内容属性,电台类内容属性太丰富——音乐时间短,小说时间长;相声很搞笑,新闻很严肃······这些内容决定了他们天然就不能像音乐一样随机重组。

有时候我们需要退一步来思考需求。

产品经理提出这种需求的初衷是什么——最初产品经理的出发点其实是怎样针对场景重组内容,让优质的节目得到更多的曝光,让用户可以对某一个功能入口产生粘性。所以这个需求的出发点更多是对于业务的一种探索。

而之所以选择跑步这个场景,跟现在社会上健身这个“势”是分不开的。健身俨然已是全面风潮,约跑、晒跑成为了朋友圈一道新风景线。据说2017年中国马拉松将超500场,比2011年的22场呈井喷之势。另一方面智能手机的定位和记录体能指数功能,是能让场景闭环的基础。

跟着电台动起来:如何设计跑步的垂直场景

回到跑步电台这个需求本身,跑步电台应该是推荐优质的跑步类内容的整合,本质上还是用来服务于电台节目的。这些内容指向的目标用户也是相对明确的:想要科学合理地跑步的跑者,偶尔跑步的小白用户。

跟着电台动起来:如何设计跑步的垂直场景

如何在市场中突围?

所谓知己知彼,百战不殆。我们向内寻求需求的本质,向外应该去关注整个市场的竞品,从而形成自己的“蓝海战略”——一条基于用户痛点寻求差异化创新突围之路。

跟着电台动起来:如何设计跑步的垂直场景

我们寻找了许多竞品,现有市场落脚在三种内容形态上:

  1. 专业健身指导课程(绿色)
  2. 专业跑步记录软件(橙色)
  3. 运动场景的音乐推送(蓝色)

当我们以 x轴(专业—业余) 与 y轴(陪练—指导) 画出产品机会定位图,然后把这三类产品放进去的时候,我们可以看到,在“业余+指导”的定位区间是明显的市场缺口。再回看需求:推荐优质的跑步类内容的整合,两者内外结合,我们可以这样对产品进行定义——

我们提供给用户适合跑步时收听的内容,而不同于普通的跑步歌单,我们推出的是完整的有声教程,能够直接指导用户科学的跑步,并且监督用户按照要求和目标步频来进行运动。

针对这份产品定义,我们再去分门别类的定义产品功能:

  1. 内容形式:以专辑的维度推荐。例如:某跑步课程为一个专辑,其中分三个节目(环节),前五分钟慢,中十五分钟快,后十分钟慢。
  2. 提醒:当你的步频低于或者高于目标步频时针对步频一次提醒,每公里针对跑步里程提醒。
  3. 计分:根据用户实际跑步步频与节目的目标步频之间的匹配度进行计分。

形式不仅追随内容

跑步电台是一个内容与产品形态强相关的产品。在这种深度垂直场景的设计,我们的设计仅仅追随内容是不够的,需要去有张力地表现内容,让目标用户快速了解到这是一个针对跑步的运动场景,激发他运动的欲望······为此我们设计了全新的专辑卡片、运动播放界面、运动成果页和分享页,支持运动状态的语音提示。

1、落地页/精品感与运动力

作为企鹅FM推出的第一个深度垂直功能,我们追求精品感+运动力,我们要让用户感受到运动电台里的节目可靠而优质,进而想要尝试。左图是原有app可以承载的产品形态,将信息拆分成右边三类信息,我们再来重组。

跟着电台动起来:如何设计跑步的垂直场景

怎样去打造精品感?我们可以类比奢侈品的橱窗,回想一下奢侈品的临街橱窗,一定不会像开架货品一样挤在一起,它会有高低错落的展台,它会在展台上打造许多细节。精品,是需要重点、层次和细节的。类比到我们的设计,我们采用卡片的形式,其实这并不是最高利用率的方案,但它让用户聚焦到我们最精品的内容(重点)、给用户探索的空间(层次)、围绕卡片我们可以加入很多企鹅FM这个品牌独有的元素(细节)。

PS:接下个版本中,我们希望加入更多动感的元素,比如魔法色。

跟着电台动起来:如何设计跑步的垂直场景

2、播放页/针对动态场景打造

我们的节目,有一个统一的衡量指标,就是步频,用户的实际跑步步频越是接近节目的节奏,那么用户的得分越高。

我们拆分现有的播放页,可以看到针对跑步这个动态场景有的需要增加:步频、步频匹配度、目标步频、结束跑步、跑步的时间/距离/配速······而有的需要删掉:评论、定时、列表、语速、音效······有的元素有的需要突出:步频与步频匹配度。

跟着电台动起来:如何设计跑步的垂直场景

跟着电台动起来:如何设计跑步的垂直场景

下图前后对比可以看到,跑步电台的播放界面有更多运动元素,更聚焦在步频这个要素上,运动相关组件的重要级更高,更具针对性地运用颜色。可以想象一下,用户只要在跑步过程中看到最大的数字(107处)是金色就知道自己达标了。

跟着电台动起来:如何设计跑步的垂直场景

跟着电台动起来:如何设计跑步的垂直场景

3、结束页/让用户拥有成就感

虽然人人都知道运动对身体好,但这并不是一个轻松的活动,我们希望用户运动完之后我们能够给他们成就感,激励他们继续投入到运动中去。这也是我们构建更系统的激励体系的基础。

所以我们把用户的跑步过程以可视化图表的形式记录下来,用户可以真切地看到自己已经完成的跑步。同样的,我们希望用户分享出去的时候也是一张可视化的图表。而展示的卡片我们特意选择了在社交平台上展示效率最高的正方形。

跟着电台动起来:如何设计跑步的垂直场景

设计中的得与失

企鹅FM的“跑步听”功能从开始设计到上线只有一个月的时间,从最初大家懵懵懂懂抱着试试看的心态到真的对这个功能有信心,有一些思考希望与大家分享:

  1. 影子采访(shadow use)在垂直场景的设计中极其重要。垂直场景针对的用户和行为比较明确,定性研究相对定量研究更重要,我在设计过程中启发我最多的就是shadow use,我潜入跑步的群和用户一起跑步,看他们跑步过程中需要哪些功能,跑完之后什么样的信息会给他们带来成就感。如果是访谈用户可能会虚构自己的需求和感受,而shadow use让设计师得到的信息皆为真实。
  2. 在进行卡片式模块设计时,可以采用元素拆分并重构组件的方法:就是把所有已有的+缺失的+需要的元素拆分出来,再根据现在的用户需求重新搭建组件,然后再把组件放到模块中去。
  3. 产品功能从0到1比从1到100难得多,从0到1我真的是两眼一抹黑,但这个功能开发完成之后我们马上就可以分门别类地提出许多优化方案。设计师如果能够多尝试从0到1的设计过程,对于从1~100的设计有很大的帮助。

 

作者:xuan凯

来源:https://isux.tencent.com/run-with-fm.html

原创文章,作者:Catherine,如若转载,请注明出处:https://www.iamue.com/25800/

(0)
CatherineCatherine
上一篇 2017-05-12 09:02
下一篇 2017-05-12 11:05

相关推荐

  • 从地方性视角谈民宿的定位(二): 找到有趣而唯一的内核

    ▲点击关注我们,挖掘土壤的内涵近些年来,随着旅游的快速发展尤其是大众旅游市场的迅速兴起,旅游与地方的关系引发越来越多的关注和讨论。“地方性”一方面作为旅游目的地吸引力的内核被重视,另一方面又因其趋于淡化而引起对地方可持续发展的担忧和对旅游发展的批判。▋什么是“地方性”?事实上,地方性不是绝对的现实,而是话语与知识生产的过程。全球化进程必将是均质化与地方性凸显相互伴生的过程。虽然在全球化背景下,旅游产业的发展由于多种要素的作用,会带来社会...

    2018-03-10
  • 交互设计的5个常见错误

    交互设计从来都不容易。它包括了用户行为的深度分析,和一丝不苟的规划。随着新技术和交互设计模式的出现,事情并不会变容易。 艳丽的图片、顺畅的鼠标悬停效果和意外的动画,不再那么容易引起用户注意了。但难题却…

    2015-11-09
  • 撕逼时,要不要说“我觉得…”?

    你可能也碰到过类似的场景,一个撕逼的场景:“考虑到用户的使用场景,用户到这个页面,更关注信息B,而不是A,我觉得,这个页面,更应该突出信息B…”。反驳的声音说:“你觉得,只是你的个人感受、猜测而已,真实的场景和情况,并不是你觉得的那样…”

    2017-05-21
  • 学交互设计,怎样选择到适合自己的学校?

    欢迎关注弗斯特国际艺术教育出国留学选择学校,哪些会成为你的考虑因素?学校名气超大,排名都是top级?明星校友超多,都是艺术大佬?学校位置超好,正居于市中心?校园环境超美,好似旅游学习?不得不说这些会成为许多学生和家长,在选择目标院校时经常考虑的一些因素。排名、明星校友、地理位置,可以作为参考依据。BUT!这些不能是最终的决定因素,最重要的还是自己对专业的最终追求。交 互 设 计 详 解交互设计又称互动设计,英文名称为Interactio...

    2018-04-03
  • 聊天的未来不是人工智能 ,及时交互才是关键

    作为Kik首席执行官,对于即将到来的聊天机器人革命,我思考了很长时间。一年半前,我们率先推出了一个基本版聊天机器人平台,之后,数百万Kik用户和这个机器人进行了对话。其他消息应用(比如Telegram和Slack)也在开发自己的聊天机器人,此外有传言称,Facebook将会在四月12日举办的f8大会上为Messenger推出自主开发的机器人平台。可能是有史以来第一次,聊天机器人能实现你和你周围世界的即时互动。最近,我亲身经历过的一件事,可能最好说明这一切。我的所有操作如下
    打开聊天应用 > 扫码> 输入“2”> 输入“百威”> 选择卡号。搞定!这种即时交互,只有聊天机器人能够做到。你不需要下载App应用,也不需要创建新账号,还有最重要的,你不用学习了解一款新应用里的操作界面了!只需扫码、聊天就能满足需求。这种体验,就像是我在手机上按了一个按键,三分钟之后一辆Uber出现在我面前。如今,科技行业喜欢把它称为O2O模式——在一款App里预订到实体产品或服务。而现在,你甚至不再需要一款App应用,只需用聊天的方式,就能满足自己的日常生活需要。

    2017-05-26
  • 原创服装设计师APP产品概念

    这是针对原创服装设计师的APP,作者感觉现在很少有专门针对他们分享自己作品和交流的平台。这是作者模拟出来的一个产品的概念图,还有很多不足,慢慢优化... 我们不光有原创,同时也是原创的搬运工。  

    2015-01-23
  • 前辈经验!聊聊新人设计师最容易遇到的12个问题

    身为设计师,我越来越意识到只有整个设计师圈子的能力和氛围都起来了,我们每一个小分子才可以好起来,大家学习的积极性也比我大学时期(07年-11年)好太多,那时的我都完全没有要逛设计论坛学习的意识,所以当我看到谁年纪轻轻就已经那么牛逼了,我就很后悔,当年我为什么就没有逛论坛自我学习的意识呢,要不然我早就走向人生巅峰了,当年自己怎么那么井底之蛙,资源有限,信息闭塞,也没有人叮嘱我要怎么去做,也没人给我指出问题所在。现在有这么多好的学习平台和机会,而我也确实看到了很多设计师存在的问题,所以我总结下来,希望对大家有所帮助,不要像我当年那样活在自己的世界里,落后别人一大截。

    2017-05-26
  • 电视交互设计的一些事 | 设计基础15

    两年前,我总结过《Apple Watch交互的一些事》,简单的分享了下手表小屏幕的交互设计。而在过去一年多的时间里,我有幸参与了电视端大屏幕的项目,在不断的尝试、探索和设计中,也收获了一些关于电视端的设计经验,因此将这些“电视交互设计的一些事”分享出来,共同探讨电视端的设计。✨硬件+远距离操控——基本交互基于桌面资料研究以及设计经验,总结了基本交互主要包含以下几个关键内容:遥控器输入、导航和菜单、信息展现、控件摆放和焦点状态。一、 遥控...

    2018-01-30
  • APP框架之提示框架

    某日和iOS开发聊天,说到iOS规范里没有安卓中的Toast形式的提示。我有点惊讶,仔细回忆iOS的交互规范,似乎是有。后来找来书确认了下,竟然是没有。遂把这个框架整理了下,在文中同时也强调下Android的交互规范的差…

    2016-09-29
  • 百度UED:让上帝讲真话——聊聊用户访谈几个细枝末节的问题

    来源:百度UED由于商业产品的特殊性,我们的用户是我们的客户,就是我们常说的上帝。那么,与上帝沟通需要注意哪些技巧呢?本文所讨论的技巧并非访谈技巧类的“技术流”文章,也非方法论,主要讲获取客户真实情况的访谈准备、数据收集及数据整理过程。我们在做调研时,希望了解上帝沟的目标、需求及行为。但在我们的调研中,往往发现这样的现象:1. 客户不配合我们的调研,不愿意跟我们讲话?2. 客户跟我们聊,却发现,答非所问,无论如何我们都没法在同一个平面对...

    2018-01-31