揭秘大厂的产品细节解析

嗨，小编又和大家见面了，接着上一篇《用户体验-以keep为例》从产品五层次分析了keep的产品，下面将体验者的角度挖掘一下keep的优秀的交互细节和视觉表现。

体验日记目录：

1、社区板块

2、计划板块

3、商城板块

4、数据板块

5、视频训练播放

6、视频播放反馈

7、跑步页面

8、跑步记录页面

9、直播课程

10、社区课程

11、练动作

12、冥想

13、硬件设备

14、金刚区交互

产品体验日记：

1.社区板块

产品体验：

keep的社区板块，我个觉得是做得比较好的，交互和布局方式也是比较新颖。以发布社区体验为例，keep的发布社区流程分为发布状态-选择图片-编辑图片-动态发布。整个流程基于用户的发布用户体验出发，充分考虑到用户发布是的体验需求，我觉得这块的用户体验做得不错。

设计思考：

①发布动态——keep的发布动态的和点赞图标采用的小喇叭的形态，喇叭形状运用就很容易让用户想到日常的生活场景，将其运用在社区板块图标能够拉进于用户之间距离。keep发布动态的采用的是常驻悬浮的图标方式，颠覆了传统的发布“＋”号，这种新型交互方式也能达到常驻效果，让能够吸引用户点击进行动态发布，也是符合keep的产品战略“社区用户运营”。

②选择图片——keep社区的选择图片的上方设置了图片的展示小入口，能够让用户更加清晰的知道自己选了哪个图片，选择了多少张图片，这样小细节也是非常nice。

③编辑图片——编辑图片区域，keep从用户角度出发，设置的可以发布在线美好图片，同一滤镜的操作，一方面缓解了用户发布P图的困扰，另一方面从产品层也能提高用户发布图片的质量，提高社区转换率。

④动态发布——keep的共同发布，出了日常的动态标题、内容和图片外，为了增加帖子的热度添加了热门话题入口。

2.计划板块

产品体验：

keep的计划板块，主要功能为用户的自定义计划、计划日常、训练计划、饮食计划和推荐的训练计划几大板块组成，在计划板块的几个交互细节也是值得我们思考。

设计思考：

①计划日期交互——keep的日程计划采用的侧拉滑动的形式选择计划日期，当用户滑动到其他日期是，顶部标题会弹出“回到今日”的快捷入口。

②下拉交互——当用户进行下拉互动的时候，keep将日期栏和训练饮食栏进行一个下拉头部置顶的交互，方便用户进行快速的点击。

3.商城板块

产品体验：

keep的商城板块为内部自营的商城系统，主要是keep内部产品的商城售卖（这也是keep2020大改版的商业转换战略，从以往以健身课程、会员为主的商业转换转变成智能硬件设备），那么keep的商城系统的部分交互细节也是值得我们参考的。

设计思考：

①商城首页—keep的商城首页金刚区的图标采用的写实图标设计，一方面考虑内部商城金刚区主要是展示自研发产品，另一方面从设计层面写实的图标更能够清晰准确的传达商品信息。

②商品详情交互——keep的商品详情页设计也跟淘宝和京东类似，这边就不做太多介绍了。另外发现了右上角设置了回到首页的快捷入口，这样的交互方式能够让用户快速切换到首页，而避免了以往繁琐的返回多个页面的操作，大大介绍的用户的决策和浏览时间。

③商品列表——因为这个是keep的内部商城，目前为止的硬件设备种类是有限的，因此keep也结合了自身产品需求对于产品选择设置了快速选择分类入口，在下拉浏览交互上，将硬件设备的一级分类进行置顶操作，也能方便用户快速进行分类选择。

4.数据板块

产品体验：

keep作为一个智能运动产品，用户的运动数据的记录和数据表格页面也是比较重要的环节，keep的数据页面也是做得比较人性化和比较新颖的，对于用户数据的呈现形式很清晰，交互也是比较有创意。

设计思考：

①运动周报—运动周报的展示是每一个运动产品一个必备的数据页面，而keep的周报数据展示以统计图列表展示，这样的展示方式比传统的数字展示对比更加直接，另外在布局设计上keep的数据表格的展示也是采用了纵横的交错分布，让看似单调的表格页面层次更加丰富。

②步数数据——keep的步数数据的记录采用的是侧拉的统计图的交互，这样的交互方式也是比较新颖的，一方面能够看到一月的步数记录，另一方面也能够利用统计图的方式，让数据之间形成对比。

③数据页面交互——keep的数据页面的交互有一个小细节很到位，关于所有运动种类和运动日期的切换巧妙的运用了icon箭头切换的方式，让用户能够同时快速的看到日期的运动数据和运动种类运动的数据。

5. 视频训练播放

产品体验：

keep的课程有很多，视频播放种类大概3种。本次为训练模式下的课程视频播放，主要是动作的步骤训练，keep的训练视频的交互方式也是做得比较有人性化，我们一起探索一下吧。

设计思考：

①启动视频下载—keep步骤视频播放由于视频量太多，后台无法缓存因此都需要用户进行缓存后再进行观看，因此会出现启动视频缓存页面，缓存页面同时设置了缓存条交互，让用户可以知道缓存进度。

②课程播放——keep的课程播放进度条有上下两组，首先先说一下下方的进度条，设计者巧妙的将进度条和停止快进组合在一起，让用户既能看到进度条又加大点击触碰区域。keep的课程快进区别于平常的视频，平常视频的快进以时间/秒为单位，而keep的快进则以课程的每一节/次为单位。上方的进度条的断点显示的是每一节的时长。

（然后说一下课程部分数字，这里分别有两组数字。1/20：表示的是整个视频有20小节，1表示现在进行第一小节动作；4“：表示的是当前这一小节的具体进度时间，进展播放4”。）

③查看讲解——讲解的入口为视频播放右上角，用户可点击查看运动讲解查看每一小节运动的详情

④分析页面——keep手机截图分享页面自动会生成分享截图，同时keep还暖心匹配运动情感化文案，添加继续训练和返回训练的快捷入口。

6. 视频播放反馈

产品体验：

①情感交互弹窗提醒——keep的交互情感化提醒是做得很棒的，当用户想要退出训练，都会弹出交互情感化弹出，引导用户进行集训训练。

②训练反馈——用户没退出训练视频，下方都会弹出训练视频后的反馈弹窗，一方面是用户对视频的评价，另一方面从产品层面也能第一时间收集用户反馈数据。（但是过分提醒有时候会给用户造成负担）

③训练评论区——keep的课程视频下发设置评论区，用户评论最多显示三行（三位用户评论）

7. 跑步页面

产品体验：

keep的跑步训练计时页面，作为一个智能运动产品，跑步公里和时长的记录是必不可少的。下面是keep跑步记录的首页，进入首页之前先引导用户选择跑步路线-设定跑步目标-切换跑步场景-开始跑步，充分从用户体验行径角度出发进行交互功能的设置。

设计思考：

①设置目标——用户可根据自我的距离、时长、热量、配速在跑步前为自己设置个人训练目标。

②跑步页面——跑步页面的交互比较丰富，从上往下分析，顶部设置了跑步路线图。中部为跑步启动按钮，交互细节用户切换户外跑和跑步机，底部背景插画也换更换，让界面更具有场景化。下部为跑步的指导页面，用户可通过上拉进行跑步指导详情的查看。

8. 跑步记录页面

产品体验：

keep的跑步过程页面，的交互细节做得很到位，充分考虑的人在显示跑步在遇到的问题，设置人性化交互，例如跑步锁屏，地图跑等。

设计思考：

①跑步暂停界面——跑步暂停界面有个交互细节很到位，当用户要结束训练时候，需要长按红色按钮，红色按钮会出现结束进度显示，需要长按3s左右，这样的退出交互一方面延迟的结束跑步退出时间，利用交互心理学方式挽留用户继续跑步，另一方面也符合keep的自律坚持的品牌定位。

②锁屏交互——keep从用户跑步情景角度出发，设置了快捷锁屏的入口。

③跑步过程页面——跑步过程页面设置了跑步中暂停的一个入口，方便用户跑步过程中的情景暂停。

④地图跑——keep从用户场景出发，设置了地图跑的场景。

9. 直播课程

产品体验：

keep的直播课程的页面在布局上采用的横屏构图，将直播时长数据放置在视频居中下方；直播互动放置在视频左侧，可进行侧拉伸缩；奖励提醒放置在视频右侧。这样的交互布局最大程度保持的居中的视频播放的面积，同时也满足直播的信息承载。

弊端：个人觉得左侧的直播用户数据面积过大，建议进行缩小或者使用渐变半透明形式。

10. 社区课程

产品体验：

keep的社区课程，主要为社区运用的健身博主开设课程。整体课程采用横屏的布局。（是课程播放的横屏版）

①播放交互——keep的社区视频播放的播放交互放置在视频居中，目的是方便用户进行视频的暂停，其中左右快进为上下运动小节。

②查看讲解——横屏的查看讲解放置在视频的右下方的图标形式，展开是侧拉渐变的课程章节的详情，用户可根据需求进行章节的快速选择。

③悬浮活动——在社区课程中，考虑到用户运营，为了激活社区群体，keep贴心的是设置了悬浮活动，例如打卡，节日等，一方面能够增加博主的互动影响力，也能够利用活动运营方式活跃运动社区。

④结束课程提醒——keep的提醒做的是非常贴心，特别是在结束课程方面，利用情感化的弹出语言来挽留用户继续进行训练。

11. 练动作

产品体验：

keep的动作练习板块做得非常智能，结合了健身人的动作练习场景，设身处地的为健身人群定位。

①动作列表——动作库的列表介绍，同时提供了人数训练数据，激发用户共同进入训练。

②目标选择——用户可根据时间和数量为训练制定目标，系统会根据设置目标自动计算时间。

③动作练习——动作练习结束采用的滑动完成交互，这样交互比自动结束好，因为从健身场景角度出发，部分用户可能提早或者坚持时间长的完成训练，这种交互就能让用户自主决定训练完成。

④动作库——keep的动作库还贴心的为用户介绍做不同的动作训练，对应的训练肌肉部位。

12.冥想

产品体验：

冥想是keep近期新增的功能，主要是满足用户睡前冥想的需求。keep对于冥想的界面设计，考虑环境和情景，界面设计和其他界面有所不同，界面设计上多采用暗色风景的图片进行页面设计，从而营造一种冥想的分为，在冥想训练交互动效也加入了水滴的动效，从而营造一种氛围感。

13.智能硬件

产品体验：

keep2020调整的大的商业布局，关闭线下多个门店，转变商业策略将以为以会员和训练课程为主的盈利方式，转变成智能硬件设备，现在已经推出keep的动感单车、跑步机、健步机器等硬件产品。在硬件设备的上，keep也增加了新的功能入口。

①动感单车主页——主要分为硬件介绍、硬件连接和绑定、地图骑行、硬件课程等，通过页面布局引导用户去购买硬件设备。

②能力测试——在开始骑行之前，keep还增加了FTP的权威骑行测试，根据用户的调研信息，合理智能化的为用户推荐训练课程和计划。

③硬件连接——因为是智能硬件产品，因此需要进行硬件产品的蓝牙连接，连接后就可以跟着视频一起学习。

④训练课程——keep针对每款硬件设备都进行的硬件课程的直播课程，让用户在脱离教练和健身房情况下也能够居家训练。

14.金刚区交互

产品体验：

keep的金刚区列表同样也设置了可自主调节的功能，但是区别于支付宝的金刚区图标调节，keep的图标位置调整要进二级页面后点击顶部右侧的调节icon才能进行位置调节。（这样的交互细节也是非常贴心）

总结：

本文以keep为例进行产品用户体验的探索，keep作为智能运动的龙头企业，在APP的改版设计上还是做得非常不错的，值得我们去深入研究。这也是作为项目前期的一个竞品调研的过程，当然竞品调研不止keep这个产品，还有国内外几十个，本次将以keep为例进行产品的体验记录。