可用性测试案例二报告-1403220218杨钰婷-运动APP界面设计.pptx
合集下载
可用性测试案例二报告-1403220106黎宇杰-运动APP界面设计.pptx
作业：
制作一个运动类app，包括图标和app首界面,遵守Android规范 （1280*720）
要求： 1. 针对特定目标人群如（运动达人、减肥、锻炼身体）设计； 2. 根据目标人群需求，确定功能
开始跑步、结束跑步、地图、配速、时间、公里数、分享、成绩单、 交友、跑步、勋章、跑步活动、个人资料设置……
3. 请将分析过程（如目标人群设定、色彩选择、主要功能等相关设计） 思路等设计过程，以及最终图标和首界面以PPT形式展示出来。 4.提交：PPT文档、PPT转mp4格式、psd、jpg格式，同时放在一个文件 夹，严格按照如下命名格式如下：
滤镜“风”效果
导航栏（搜索、设置、登录）
动态广告
APP首页：尺寸为1280*720，由上到下按照：导航栏— 内容区域—标签栏的顺序排版。
天气预报
内容区域
应用功能
标签栏（消息、动态之类）
功能应用
1、了解有关跑步的广告、动态； 2、得知当天天气状况； 3、设置跑步检测功能、模式； 4、在线社区交流； 5、超找有关跑步比赛消息。
运动APP设计说明
针对群体
该应用适合于一切用于跑步锻炼、有比赛想法的人群
跑步比赛
晨跑锻炼
色彩搭配
图标和首页都是以暖色调为主，采用橙色以及白—淡黄渐变效果设计
橙色
白—淡黄渐变
排版设计
ห้องสมุดไป่ตู้
图标：以运动状态的跑鞋剪影作为标志，比起普通的跑步动 作剪影更有内涵，同时加上滤镜“风”效果以及暖色系的搭 配，使得跑鞋运动感表现得更加强烈，激起用户使用欲望。
可用性测试案例二报告-1403220103温丰源-运动APP界面设计.pptx
R:235 G:37 B:36
主要功能
日历显示
开始与结束按钮 消耗热量
已跑距离 主页
详细的日历记录
分享
训练日记Biblioteka 已跑步数及目 标步数激励文字
持续时间
个人信息,如:本人 体重,身高以及训 练详细数据
设计思路
针对主要目标人群为年轻的减肥群体，界面 主要风格是扁平化，整体看起来会更简洁舒适， 让懒人的学习成本更低。图标设计也是简单的纯 色色块与文字，文字均选用使用黑体为主，APP 界面图标整体居中，动态文字及动态色块均以醒 目的红色为主。功能键均符合年轻人的使用习惯， 一切以简单为主，这样年轻减肥群体才有二次使 用的欲望。
运动APP界面设计
图标与页面展示
运动APP图标
运动APP界面设计
目标人群
此运动APP目标人群以减肥人士为主,以年轻人为主要目标客户
颜色选择
R:9 G:202 B:250
R:225 G:225 B:225
说明：
运动APP界面设计主色调为蓝绿色和纯白色，以及 浅灰，红色作为辅助颜色。蓝绿色能使APP更具活 力,更符合运动类APP主题,红色能起警示作用,有一 定激励使用客户的作用.
可用性测试案例二报告-1403220111江少敏-运动APP界面设计.pptx
• 干净的表面，速度的动感 • 立体的线条图，具有活力的渲染 • 简单直接的对完美的追求引诱着你和你们点开去健身
APP
•
、
运 动
界 面 设 计
状态栏 你的网速 你的时间点 你的电量
界面拆分
这一周内你的健身完成指标 圆满=完成当次指标 左右可滑动查看更早的记录 时刻充实着你的每一天 你是否有完成了一个目标 你努力向着完美靠近 是不是很想每天画上一个小圈圈 不想空出来
内容栏
上边
下边
上边
• 功能：返回、分享、 更多导航、运动开始 与结束、个人资料
• 数字代表：起点、已 完成路程、目标路程 （可依情况-+随时更 改目标路程）
• 动态显示：运动中、 完成目标量、心率
下边
贴心编排 健身所需：健美方法、 健身者心率以及健康指 数详情、健身者走过的 路线、适合健身者的健 康食谱 相辅相成，完成最终健 美目标
运动ＡＰＰ图标以及界面设计
1403220111 江减肥、锻炼身体 • 主要功能——开始跑步、结束跑步、公里数、地图、
分享、成绩单、个人资料设置等
•
APP
、
运 动
图 标 设 计
主要素材
具有运动速度感的图片
代表健身者向往的线条图
经过简简单单的处理和结合再处理
下方为标签栏
• 相关功能：天气查询、 时间提醒安排、路线 查询、音乐等
谢谢！
APP
•
、
运 动
界 面 设 计
状态栏 你的网速 你的时间点 你的电量
界面拆分
这一周内你的健身完成指标 圆满=完成当次指标 左右可滑动查看更早的记录 时刻充实着你的每一天 你是否有完成了一个目标 你努力向着完美靠近 是不是很想每天画上一个小圈圈 不想空出来
内容栏
上边
下边
上边
• 功能：返回、分享、 更多导航、运动开始 与结束、个人资料
• 数字代表：起点、已 完成路程、目标路程 （可依情况-+随时更 改目标路程）
• 动态显示：运动中、 完成目标量、心率
下边
贴心编排 健身所需：健美方法、 健身者心率以及健康指 数详情、健身者走过的 路线、适合健身者的健 康食谱 相辅相成，完成最终健 美目标
运动ＡＰＰ图标以及界面设计
1403220111 江减肥、锻炼身体 • 主要功能——开始跑步、结束跑步、公里数、地图、
分享、成绩单、个人资料设置等
•
APP
、
运 动
图 标 设 计
主要素材
具有运动速度感的图片
代表健身者向往的线条图
经过简简单单的处理和结合再处理
下方为标签栏
• 相关功能：天气查询、 时间提醒安排、路线 查询、音乐等
谢谢！
可用性测试案例二报告-1403220202周浩楠-运动类app界面设计.pptx
显示自己的热量记录与康的锻炼
THANK
在app上，包含了找活动、运动群、打擂台、找场馆、 找教练等功能。
找活动：在这里你可以查看附近的活动、赛事，一键 报名参加活动，在这里你也可以发起活动。 找场馆：还在为找不到场馆而心塞吗？在这里我们提 供了海量的体育场馆信息，附近场馆一目了然，并且 提供了地图导航功能，贴心、实用。
在APP上有清楚的记录自己的训练时间次数与消耗的热量，有助于更科学的锻炼
DO IT (android)
1.DO It可记录用户在运动时的各种数据，包括瞬时速度、平均速 度、距离、卡路里燃烧等情况，支持数种不同的传感器来测量用户 的心跳速率；用户可以透过耳机，让内建语音教练告诉用户目前的 纪录和运动的过程
运动库
如果您平时觉得自己运动闷想找附近的人一起切磋一 起运动或想找附近的运动场馆那么这款app是最适合 你的。
可用性测试案例二报告-1403220129彭斯妤-运动APP界面设计.pptx
计 思 路
色彩选择为绿色和白色，给人舒适，清新，接近大自然的 感觉，以深灰色为点缀不会显得突兀。
首页顶部有切换和分享功能，中间显示主要内容，底部分 为锻炼、发现、动态、我的四个部分。
切换运动功能
当前运动数据 近期数据对比
分享功能
运动状态显示面板 滑动可切换运动状态
锻炼：运动面板，显示当前 状态和数据
运动类APP首页 及图标设计
设计者：彭斯妤
运动类APP
1 目标人群：
锻炼身体的人群
2 色彩选择：
主要以绿色和白色为ห้องสมุดไป่ตู้，深灰色点缀
3 主要功能：
计步，跑步，骑行等锻炼功能，关注和分享等社交功能
运动类APP
设
将目标设为爱锻炼的人群，故在首页设置了计步、跑步和 骑行三个基本功能，下半部分显示近期数据对比。
发现：发现热门动态等 动态：自己和好友的动态 我的：个人中心和设置
设计成果
首页 图标
THANKS
可用性测试案例二报告-1403220149黄文雅-运动APP界面设计.pptx
首页展示
主要针对运动达人来设计，中间包括有个人中 心、行程表、跑友圈、主页等功能。 背景以黑色图，运用了颜色、渐变的特效。 界面色调以黑、蓝、紫为主。
设计过程
运动APP分为三小块。
一、顶部。这一列有侧栏的，让大家能快捷的回到主页，还有中间的文字展示了当前页面处于 的状态，也有更多图标。
二、主体。这一块涉及的范围就比较广了，分为三列。1、中间大大的图标显示的已完成的数值， 旁边显示了当前以消耗的卡路里。2、中间的图形表明用户是这个app的等级显示。3、分别有累 计距离、累计时间、累计消耗，都有图标跟文字的展示。
三、功能栏。分别有主页、行程表、开始跑步、跑友圈、个人中心。
图标展示
由于界面色调是以黑、蓝、紫为主的， 图标的设计就以外框
主要针对运动达人来设计，中间包括有个人中 心、行程表、跑友圈、主页等功能。 背景以黑色图，运用了颜色、渐变的特效。 界面色调以黑、蓝、紫为主。
设计过程
运动APP分为三小块。
一、顶部。这一列有侧栏的，让大家能快捷的回到主页，还有中间的文字展示了当前页面处于 的状态，也有更多图标。
二、主体。这一块涉及的范围就比较广了，分为三列。1、中间大大的图标显示的已完成的数值， 旁边显示了当前以消耗的卡路里。2、中间的图形表明用户是这个app的等级显示。3、分别有累 计距离、累计时间、累计消耗，都有图标跟文字的展示。
三、功能栏。分别有主页、行程表、开始跑步、跑友圈、个人中心。
图标展示
由于界面色调是以黑、蓝、紫为主的， 图标的设计就以外框
可用性测试案例二报告-50高羽德-运动类app界面设计.pptx
所有能
一键切换动作替换，让每一套训练更加适合你 生动全面动作示范，动作标准让训练加更效率 训练课程覆盖全面，不同难度伴随你逐步提升 科学测试体能结果，全面分析你的身体潜能 量身定制每日目标，火辣身材带你一起练出来
THANKS
JBULLS 运动
LOGO设计
LOGO的颜色以黑、白、红三种颜 色组成，外形是一只公牛，采用了 简约风的形式以三角形展现
界面设计
整体界面的颜色是以黑、白、红三 种颜色组成，两种颜色不会太过使 人眼花，图标的设计也是采用简约 的线条组成，这样可以让用户轻松 找到自己所需要的功能位置
适合龄层
本软件适合18到64岁成年人，每周 至少150分钟中等强度有氧身体活动， 或每周至少75分钟高强度有氧身体 活动，或中等和高强度两种活动相 当量的组合
可用性测试案例二报告-1403220220许超跃_运动类APP界面设计.pptx
• 这个是该APP的logo图标，是一个火柴人跑 步的姿势。含义是给用户灌输运动精神。 刚毅的眼神给人一种坚持不放弃的精 神。。。。提倡全民跑步，共同强身健体！
运动APP分析过程
这款APP色彩构图用 了淡绿色和淡蓝 色，整体看起来 清新自然，文字 采用了白色和黑 色。
这款APP是为一些热爱 跑步的人群而设计， 有且仅有跑步这一项 运动 ，功能一应俱
全，步数，路程，速 度，个人信息，成绩 单；更有可协助款APP主打是跑 步功能的，所有我把 主要的计步，速度等 功能放在了最中间最 显眼的位置。白色圈 圈下面有2个小的按 钮，分别是开始跑步 和停止跑步，用户可 以打开APP后就立马 开始运动了！
- 1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
- 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
- 3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。
3 图标设计
因为这款APP传达的理念是科学健 康、活力充沛地减肥，而不是靠一昧节 食或者无节制地疯狂运动来减轻体重。
所以在设计图标的时候特意采用 象征健康的绿色以及象征活力的黄色来 进行点缀。
4 结构分析
一共3个大标签，登陆进去默认显示“运动” 页面，左右分别是“发现”和“我的”。
处于对应所在页面的时候，底部对应标签颜 色变深，离开对应页面，底部标签颜色变淡。
这个版块主要显示用户运动的各种数据，点 击“GO”可进入选择跑步还是其他运动。
4 结构分析-“发现”页面
这个页面包含活动、减肥达人、减肥知识以 及与减肥相关的专区商城
4 结构分析-“我的”页面
这个页面包含个人资料、收藏教程、购买订 单、我的好友以及我的运动计划。
THANK YOU!
4 结构分析-“运动”页面-导航栏
该页面头部导航栏，左边是音乐设置按钮， 可以设置运动时想听的音乐；右边是搜索按钮， 可以搜索更多运动教程。
4 结构分析-“运动”页面-推荐版块
这个版块主要根据用户身体数据、兴趣爱好 以及使用习惯等来推荐适合用户的运动教程，点 击可直接进入。
4 结构分析-“运动”页面-数据版块
安卓系统运动 APP界面设计
设计者：杨钰婷
1、APP名称
4、结构分析
2、用户群体
பைடு நூலகம்3、图标设计
1 APP名称
APP名称定为“slim”，多译为“使苗条；减肥”；结合APP
的定位——致力于帮助人们减肥、健身，所以决定以它命名。
2 用户群体
APP面向的受众群体为需要减脂瘦身的肥胖人士，年龄层面侧向青壮年。