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

没想到吧,你竟然可以通过企鹅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

相关推荐

  • APP设计:那些打动人心的设计点(二)

    上周写了一篇文章《APP设计:那些打动人心的设计点》,总结了八个APP的小设计点,这些小设计点不是针对APP的核心业务和功能的设计,但会给用户带来一点小便利和小惊喜,就像电影最后的彩蛋,让人期待而心动。紧接着上篇,我们继续说说那些打动人心的APP设计。

    2017-05-05
  • 交互设计真的很难学吗?

    头几年的时候提到交互设计,大家的脑海里面都会莫名的飘过一张流程图。现在重新提起来交互设计,甲方+老大都会先问你这个产品的场景是什么?为什么大家都开始注重场景,场景究竟是个什么东东?今天给你介绍点干货。…

    2017-08-04
  • 我对QQ音乐的体验:关于探索音乐的故事。

    作为一名两年的QQ音乐app用户,当初我使用它的原因在于精美的界面设计和众多高质量的音乐资源。而现在,我每天都有听歌的习惯,这个我常用的软件也成为了不能缺少的部分。我接下来从探索音乐的角度分析QQ音乐手机客户端的一些功能和体验,仅代表个人观点。

    2017-06-02
  • 交互设计师的60日计划第十七天

    #交互设计师的每日#20150815 雨天和大学最好的朋友的离别,最后一顿饭吃了王品台塑,果然一分价钱一分货。以用户体验为招牌的海底捞告诉我们要排队2小时等位…但是贵的王品台塑不仅立刻有位,服务也要比海底捞更胜一…

    2015-08-20
  • 译文 | 车载系统交互设计畅想Part3:主动性辅助面板-场景式车载助理

    在第一篇章中,我通过对智能汽车车载中控仪表的重新设计来减少驾驶中过多信息对驾驶员的注意力干扰。我的设计思路是通过多维度的交互操作来帮助驾驶员完成一些简单的操作任务,同时保证双手不离开方向盘。通过更多最对新手驾驶员的采访研究与测试,我又在第二章节中针对消除驾驶过程中的焦虑情绪做了分析与方案设计。在本章节中,我试图总结前两章节的研究发现,并设计一套针对智能驾驶的主动控制系统。

    2017-04-30
  • 关于2017年设计趋势的13个预言

    在未来,当对微小细节的关注渗入用户体验设计的每一寸土壤;当对像素级完美的追求成为设计的基本要求;当将简单便捷的设计理念融入用户的日常生活,那么我们就能够帮助用户体验全新的生活。 在2016这一年,全世界笃信…

    交互专题 2017-08-07
  • 内部教程!超实用6步透视网易设计规范(附完整PDF下载)

    这是一份不可多得的网易干货资料,更是一份非常标准的设计规范准则!产品经理&视觉设计必看!

    2016-08-29
  • 未来交互:Facebook首次公开内部机器学习平台,启动AI帝国

      Facebook 现在在信息推荐、过滤攻击言论、推荐热门话题、搜索结果排名等等已经使用了大量人工智能和深度学习的技术。在Facebook上,还有许多试验能够从机器学习模型中获利,但是目前,对于很多没有深厚机器…

    2016-05-11
  • 【用户体验.春节特辑】我的家史馆,我的“义务”馆(总第267期)

    亦可访问www.koushutianxia.com了解详情编家谱   修家史   留视频建祠堂   亲互动   传万代总第267期使用我的家史馆APP以来,起初家谱树状图深深吸引了我,在不断完善添加家族成员的同时,越来越觉得只是单纯的成员图像和姓名显得很单薄,已不能满足我对家族每个成员的情感。想到我的后代、我的子孙后代将来看到的只是家族长辈的照片、姓名,这和见到一些陌生的照片姓名难道不一样吗?越想越觉得应该让家族人物更丰富起来。之后就仔...

    2018-02-21
  • 【读书笔记】方寸指间——实战指导手册

    导航设计 标签式:能让用户直观地了解到App的核心功能。根据逻辑和重要性控制在5个以内,通过视觉表现用户的当前位置,页面之间的切换快速又不容易迷失,简单高效。 桌面式:类似于手机桌面各个应用入口的导航方式…

    2015-07-17