用企鹅FM的实战案例，带你认识从0到1的设计过程

扫一扫
官方手机版

扫一扫
AI创作程序

扫一扫
木子公众号

扫一扫
AI公众号

xuan凯：没想到吧，你竟然可以通过企鹅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的设计有很大的帮助。

「国内人气最高的3个设计改版」

1. 百度首页丨国内人气最高的百度首页，原来背后的设计过程是这样的！
2. QQ 表情丨揭秘QQ 新版表情背后的设计故事
3. QQ 会员丨通过优化，我们将QQ会员付费用户数提高了5倍！

原文地址：腾讯ISUX

【木子设计网 原创文章 投稿邮箱：yuan@uisdc.com】

================关于木子设计网================
"木子设计网uisdc.com"是国内人气最高的网页设计师学习平台，专注分享网页设计、无线端设计以及PS教程。
【特色推荐】
设计师需要读的100本书：史上最全的设计师图书导航：https://www.muzisucai.com/。
设计微博：拥有粉丝量180万的人气微博@优秀网页设计 ，欢迎关注获取网页设计资源、下载顶尖设计素材。
设计导航：全球顶尖设计网站推荐，设计师必备导航：https://www.muzisucai.com/