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

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

相关推荐

  • 独家UED手机端 保险投注

    活动时间:2018年3月1日中午12:00至2018年3月31日上午11:59 (北京时间)针对于优惠期间内第一次使用头头移动平台的会员50%本金返还,高达RMB 88手机保险投注!活动详情:1.头头移动平台包括手机网页版版平(m.toutou158.com),UED手机端安卓版和iOS版;2.没有下载头头手机端安卓版和iOS版的会员可以进入官网www.toutou158.com下载;3.头头会员需在优惠期间通过头头手移动平台投注第一笔...

    2018-03-29
  • 全面了解iOS 11

    作者:沄海   UI得以迅速发展,苹果公司功不可没,他开启了移动化浪潮,拥有了世界各地超过十亿的设备,有潜力使任何想法或设计成为主流。这一次,苹果对之前对设计风格做了较大变动。 今天分析的两个版本分别是 iO…

    交互专题 2023-03-03
  • 百度高级UI设计师:规范、方法、一致性,真有那么重要?

    本文来自百度用户体验部高级UI设计师大牙的佳作,此文是她对自身工作的一种思考:一个遵从设计规范,按照所谓的系统设计方法,步步推导而来的解决方案,是否真的就是一个好的设计?你的答案是怎样?不妨一起来看看大牙的吧~

    2017-05-02
  • Axure RP 8 入门手册 – 第3章

    第3章元件功能概述第1节鼠标的操作第2节元件的使用第1节鼠标的操作麦子:老师,老师!小楼:干吗,干吗?麦子:不......小楼:呃......麦子:我想做一个页面,但是那些元件都怎么用啊?小楼:点住了拖到画布里面用呀!麦子:我知道是拖进去,但是我想要一个向左倾斜的圆形。小楼:你是仇人派来玩儿我的吗?圆形怎么倾斜?麦子:对不起,老师!少打个“椭”字。小楼:艹。在Axure中,如果需要一个椭圆形,可以放入一个矩形元件到画布中,然后,点击矩形...

    2018-04-05
  • 阿里设计师实战案例解读内容化设计

      前言 如果说好的产品是运营出来的,那么内容作为用户体验中的重要部分不容忽视。然而我们在设计中经常缺乏内容体验的意识。借着第十三届用户体验大会User Friendly 2016的分享,手淘的设计师和业内的同学们一起做…

    交互专题 2017-08-07
  • 【干货·基础】字体单位 pt如何换算成 px?或者px如何换算成pt?

    px:相对长度单位。像素(Pixel)。 pt:绝对长度单位。点(Point)。 1in = 2.54cm = 25.4 mm = 72pt = 6pc 具体换算是: Points Pixels Ems Percent 6pt 8px 0.5em 50% 7pt 9px 0.55em 55% 7.5pt 10px 0.625em 62.5…

    交互设计WiKi 2015-09-09
  • 如何让头脑风暴更有效率

    头脑风暴法是广泛用于团队的一个产生想法和解决问题的方法。然而,许多头脑风暴活动是有不完美的,最终并不能帮助激发思想上的创新。众所周知,传统的头脑风暴,团体在一起,把想法一个接一个的表达出来,通常这是…

    2014-11-10
  • [ISUX转译]设计追波风

     设计追波风 这些天气app中,只有一个试图解决用户的实际问题 现在的产品设计和交互设计界发生了一些奇怪的事情。一方面有着如 Ryan Singer 和 Julie Zhuo 这样能写出很赞的文章的人来推动我们设计水平的发展。另一…

    2015-04-16
  • 交互设计丛书分享:《从零开始做交互》告诉入门交互师具体操作的的一本书籍。

    内容简介   遇到很多的人来咨询我什么是用户体验设计师,什么是交互设计师,UI与UE设计师有什么区别?为什么一个新生派的交互设计师职位一上来就在IT界有8000起的薪资待遇? 那么说了那么多,怎么才能成为一个…

    2015-07-15