运动类APP是大家手机中必备的一款软件。如果说谁手机里没有任何涉及运动类APP,那只能说真的与时代脱轨了。近些年随着物质生活条件的改善,人们开始越来越重视自己的身体,所以也越来越多的人会进行身体锻炼。

尤其是像我们这种设计师,每天的工作就是坐在电脑前做产品定位分析、用户调研、业务需求分析、目标用户画像、用户需求分析、原型设计,交互设计文档等等。日常的运动更是必不可少。当然,今天不是来和大家说运动的重要性。接下来要做的是带领大家一起来分析和欣赏当今最佳一款运动类APP-Keep的设计,谁叫我这么热爱工作,每天沉迷于工作不能自拔呢,哈哈。希望对交互设计感兴趣的设计师朋友们有所用处。

首先,和大家来简单介绍一下这款最佳运动类APP-Keep。Keep是一款具有社交属性的运动健身类产品。用户可以充分利用碎片化的时间,随时随地选择适合自己的健身课程进行真人同步训练。从2015 年 2 月上线至今,注册用户量已过1亿。在中国手机应用运动类APP指数排名第一(数据取自艾媒北极星)。那到底是什么样的设计造就了如此好的用户体验,从而吸引大量用户注册使用呢。接下来和大家一起一探究竟。

1.产品定位

基于健身教学视频的运动类APP,并融合社区、活动挑战、商城、饮食等功能模块,通过提供用户互动及运动装备购买,力求打造线上健身平台的闭环。

2.用户分析

①性别占比

根据艾媒北极星给出的统计数据来看,在使用用户中,男士比例为33.91%,女士比例为66.09%。

②年龄占比

根据艾媒北极星给出的统计数据来看,用户年龄集中在30岁以下。

3.特色功能介绍

相比其他的运动类APP,在Keep中有一系列形式多样的健身计划、还通过推荐健身搭配饮食来满足用户的其他需求,让用户在健身过程中享受乐趣。

真人同步训练,记录训练:以视频全程语音督导,自动同步进度。每次训练都会预留休息时间,不需要用户去想,只需跟着视频语音来锻炼,对于用户来说,具有很强的冲击力和趣味性。

发布个人动态:分享健身成果,拍照记录每一天的变化,分享给好友相互鼓励,让健身不再孤独。

徽章:通过训练可获得相应等级徽章并一键分享到不同渠道,让用户产生攀比心理,制造目标,促使用户去完成任务获得徽章。

课程表:针对不同人群,制定不同锻炼任务,以日历的方式显示每天的任务,每次到锻炼时间会及时提醒。切实做到量体裁衣。

4. 信息架构分析

5. 原型设计分析及实现技巧

提到原型设计,原型工具就必不可少了。有人说,我可以使用手绘啊,这个在此不多做评价,有兴趣的可以看看我之前的文章(纸上原型设计 VS 桌面原型工具设计,你更喜欢谁?)。当然,个人更推荐使用原型设计工具。目前市场上的原型设计工具琳琅满目,在这里,根据个人多年设计经验,推荐大家使用国产Mockplus做原型设计。其上手之快,操作之便捷,效率之高,也只有你身体力行后才能够体会了。

废话不多说,先来尝鲜小编以Mockplus制作的运动类APP-Keep的原型。

成品原型图:

原型在线演示地址:

https://run.mockplus.cn/tTUqShHAXPfczBUr/index.html

原型微信扫码演示地址:

原型设计解读及实现技巧:

从界面中,我们可以看出,此APP中有4个底部导航菜单(运动、发现、社区、我)。在运动、社区这两个页面的布局均是通过点击标签组切换至不同页面。此外,在单独页面中,内容的布局很多都是一致的。这些在Mockplus中均有封装好的组件和图标,可快速设计出原型。

① 底部导航菜单栏设计

使用“带文字图标”组件,直接在图标库中填充对应图标。布局好之后,直接将其添加至个人的组件库,其余页面直接复用。

②菜单内的页面切换

直接使用标签组配合内容面板,轻松拖拽鼠标即可实现页面切换。(详情见:http://doc.mockplus.cn/?p=387

③页面内内容布局设计

内容页的布局均是一样的,我们只需做好一个,然后直接将其转换为快速格子,快速实现重复布局。而里面的内容及图片,可直接使用自带的填充功能。(详情见:http://doc.mockplus.cn/?p=2811

运动类APP在市场上还有很多,如小米运动,悦动圈,咕咚等。对交互设计感兴趣的朋友可以选择几款APP使用Mockplus做出交互原型。相信可以为你后期快速将产品构想变为可视界面奠定坚实基础,一起加油吧,设计圈的骚年们!

最佳运动类APP-Keep设计与欣赏的更多相关文章

  1. “乐”动人心--2017年10款最佳音乐类APP设计盘点

    在上下班的路上,听几首自己喜欢的音乐来打发无聊的等公交车和地铁的时间是现代年轻人的常态.音乐作为最能鼓动人心的"语言",也成为了人们在互联网生活里占比例最高的消费活动之一,一款好看 ...

  2. 聊聊Web App、Hybrid App与Native App的设计差异

    目前主流应用程序大体分为三类:Web App.Hybrid App. Native App. 一.Web App.Hybrid App.Native App 纵向对比 首先,我们来看看什么是 Web ...

  3. APP界面设计之页面布局的22条基本原则

    移动 APP 页面布局(Layout)是我们设计 app 界面的时候,最主要的设计任务.一个 app 的好与不好,很大部分取决于移动 APP 页面布局的合理性. 下图为 APP 最原始的布局模型. 页 ...

  4. 超赞!聊聊WEB APP、HYBRID APP与NATIVE APP的设计差异

    编者按:这3类主流应用你都了解吗?设计师除了要有视觉功夫,对不同形式的APP也应当了然于胸,今天百度的同学写了一篇非常全面的总结,帮你迅速搞定3类主流APP的设计方法,附带一大波避雷针,带你巧妙跳过A ...

  5. Web App、Hybrid App与Native App的设计差异

    目前主流应用程序大体分为三类:Web App.Hybrid App. Native App. 一.Web App.Hybrid App.Native App 纵向对比 首先,我们来看看什么是 Web ...

  6. 聊聊Web App、Hybrid App与Native App的设计差异(转)

    目前主流应用程序大体分为三类:Web App.Hybrid App. Native App. 一.Web App.Hybrid App.Native App 纵向对比 首先,我们来看看什么是 Web ...

  7. [转帖]聊聊Web App、Hybrid App与Native App的设计差异

    聊聊Web App.Hybrid App与Native App的设计差异 https://www.cnblogs.com/zhuiluoyu/p/6056672.html 编者按:这3类主流应用你都了 ...

  8. E丢丢App重设计总结

    E丢丢学习App是华夏大地教育可以有限公司旗下的一款产品,专为提升学历者打造,它整合了线上+跟踪的 (E平台)功能,方便工作人员随时随地管理账号.跟进学员:同时还可以随时了解教育行业的新闻资讯.一对一 ...

  9. Android App的设计架构:MVC,MVP,MVVM与架构经验谈

    相关:http://www.cnblogs.com/wytiger/p/5996876.html 和MVC框架模式一样,Model模型处理数据代码不变在Android的App开发中,很多人经常会头疼于 ...

随机推荐

  1. Ajax异步提交造成变量undefined

    在使用jQuery的get方法或post方法向后台发ajax请求时,在其中定义一个变量htmlcollectionlst,但是在循环结束后却发现是undifined $.get("GetPl ...

  2. [Android] TextView长按复制实现方法小结(转载)

    这是别人写的,既然别人总结过了,那我就不花时间研究这个了,但往后会补充一些使用经验之类的 原文地址:http://blog.csdn.net/stzy00/article/details/414778 ...

  3. PHP伪原创同义词替代代码示意

    PHP伪原创同义词替代代码示意很多网站后台都是支持PHP,虽然用同义词百度能够识别,但至少比原封不动好些,没有AI原创NLP原创度高,但也有一定的效果.下面就是PHP代码实例: <?phpreq ...

  4. RedHat 更新CentOS Yum源(转)

    经测试,可用.转自:https://www.cnblogs.com/tangsen/p/5151994.html 一.随笔引言 1.1随笔内容: 1.RedHat 配置Centos yum源 2.yu ...

  5. linux下主从同步和redis的用法

    前言 mariadb其实就是mysql mysql已经被oracle收购,它即将闭源,马上要开始收费了因此还想免费试用开源的数据库mysql,就在centos7上,将mysql分支为mariadb 操 ...

  6. RocketMq --consumer自动实现负载均衡

    这边使用一个producer和两个consumer是实现负载均衡. 看一下代码示例 package com.alibaba.rocketmq.example.message.model; import ...

  7. 微信小程序开发——点击按钮获取用户授权没反应或反应很慢的解决方法

    异常描述: 点击按钮获取用户手机号码,有的时候会出现点击无反应或很久之后才弹出用户授权获取手机号码的弹窗,这种情况下,也会出现点击穿透的问题(详见:微信小程序开发——连续快速点击按钮调用小程序api返 ...

  8. 在IDEA中使用MyBatis Generator逆向工程生成代码

    本文介绍一下用Maven工具如何生成Mybatis的代码及映射的文件. 一.配置Maven pom.xml 文件 在pom.xml增加以下插件: <build> <finalName ...

  9. PAT L3-001 凑零钱(01背包dp记录路径)

    韩梅梅喜欢满宇宙到处逛街.现在她逛到了一家火星店里,发现这家店有个特别的规矩:你可以用任何星球的硬币付钱,但是绝不找零,当然也不能欠债.韩梅梅手边有104枚来自各个星球的硬币,需要请你帮她盘算一下,是 ...

  10. ubuntu下nginx的常用操作

    1.安装不多说了,我是使用apt-get进行安装的,直接键入 apt-get install nginx 2.启动nginx. 首先找到nginx的主运行程序(相当于windows下的nginx.ex ...