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

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

相关推荐

  • 译文 | 如何通过讲故事来简化用户体验设计

    原文来自UXPin Studio,原作者是Jessica Lowry,一位英国的用户体验设计顾问,笔者译来与大家共勉“用户乘坐飞机在一个茂密的森林上一边飞行一边寻找地面上的路径,他正在寻找的是一颗红色的种子。这颗红色的种子是被外人引入森林的,目的是用红色种子生长出来的植物来消灭其他植物。损失将会是无法接受的。但是红色种子有好几颗,用户需要在种子长成植物之前定位和移除它们。”

    2017-05-27
  • 由UI/UX设计师向产品设计师演变

    为了创造出伟大的产品,UI/UX设计师应该期待并成为能够生成和处理更多额外信息以获得最佳设计成果的产品设计师。

    2017-05-09
  • UI交互设计专业-第三十六期学员作品

    专业:UI交互设计班级:第三十六期学员学员:李银学校:湖南理工学院

    2018-03-12
  • 微信交互设计

    微信交互设计看点01一:交互设计(Interaction Design简称ID)在使用网站(软件、产品、各种服务)的时候,使用过程中的感觉就是一种交互体验。情感化交互设计意义:人机交互的发展趋势,会让用户感到更加亲切,自然.体现:交互界面(视觉),交互功能特质(感情),交互操作方式(惊喜)二:温暖感诉求(孤独和希望的对比||现实和理想的对比)登录页面====用心经营,寻找温暖感发现页面(朋友圈、扫一扫、摇一摇、附近的人)简单感诉求联系老...

    2018-03-17
  • 5个实用配图技巧,为产品带来优质体验

    图片不仅仅是装饰,更是强大的设计工具,可以帮你进行视觉传达,让你的产品脱颖而出。

    2017-05-12
  • 《用户体验要素》:一张图读懂用户体验五要素

    《用户体验要素》是一本讲产品的好书,作者为我们清晰地介绍了关于用户体验的五个要素,五个要素是按照产品的整个生命过程来描述的。产品设计五要素分别是:战略层、范围层、结构层、框架层、表现层。《用户体验要素》说这本书清晰,是因为五个要素很清楚,按逻辑步骤总结出来的。但,这也是这本书唯一清晰的地方了,因为,这本书在细节描述上还是很凌乱的。产品设计五要素对于读这本书而言,能够领会作者的思想就可以,不必要拘泥于具体的细节。原因有二:一是,这本书的细...

    2018-04-04
  • 视觉设计不懂业务时如何着手设计?

    信很多视觉设计师 会有这样经历,当接触到一个新的项目;如果是熟悉业务类型产品,设计起来轻松熟络,如果是一个陌生的业务类型,则需去摸索与尝试,找到合适的设计定位与视觉风格。当视觉对交互的业务性质、框架逻辑、层级关系不熟悉时候,视觉效果是画出来了却漏洞百出.

    2017-05-24
  • 对话式交互设计流程

    上一篇文章介绍了自然对话的基础概念,学习了谷歌对于人类自然对话的研究和理解。本文将通过一个简单的案例来介绍谷歌推荐的对话式交互设计流程,以及本人对该流程与常规的体验设计流程异同之处的对比分析。设计流程1.选择适合的使用场景对话式交互界面的使用场景通常是简单直观的。当考虑任务场景的时候会想到游戏,因为游戏是低风险的。但是游戏界面的设计必须要能够满足用户的期望,以免使用户感到无聊。猜数字的小游戏可以作为对话式界面设计的一个很好的例子,不要求...

    2018-03-31
  • 对交互有疑问的同学可以进行在线提问了

    目前PC端体验做的还可以,手机端暂时不支持,请登录电脑端网站进行提问! 提问页面入口    阿西答疑主题帖

    2016-04-12
  • 小编来告诉你交互设计是什么啦!

    什么是交互设计用户界面有两部分的设计:交互设计和视觉设计。交互设计的产出物是可交互的低保真原型,设计内容包括:信息架构、页面布局、流程跳转。1. 信息架构信息架构,是为了让用户在使用APP、软件、网页的时候,能够快速找到自己需要的信息、资料、功能,并且在使用的过程不会迷路。它有层级、有逻辑顺序、要能反映信息(功能)的重要程度和关系。信息架构的组成部分:组织系统:关注如何组织信息。比如小说,按篇幅,可以分为短篇、中篇、长篇;按年代,可以分...

    2018-04-12