可用性测试案例二报告-1403220218杨钰婷-运动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设计说明
针对群体
该应用适合于一切用于跑步锻炼、有比赛想法的人群
跑步比赛
晨跑锻炼
色彩搭配
图标和首页都是以暖色调为主，采用橙色以及白—淡黄渐变效果设计
橙色
白—淡黄渐变
排版设计
ห้องสมุดไป่ตู้
图标：以运动状态的跑鞋剪影作为标志，比起普通的跑步动 作剪影更有内涵，同时加上滤镜“风”效果以及暖色系的搭 配，使得跑鞋运动感表现得更加强烈，激起用户使用欲望。

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主题,红色能起警示作用,有一 定激励使用客户的作用.

• 干净的表面，速度的动感 • 立体的线条图，具有活力的渲染 • 简单直接的对完美的追求引诱着你和你们点开去健身
APP
•
、
运 动
界 面 设 计
状态栏 你的网速 你的时间点 你的电量
界面拆分
这一周内你的健身完成指标 圆满=完成当次指标 左右可滑动查看更早的记录 时刻充实着你的每一天 你是否有完成了一个目标 你努力向着完美靠近 是不是很想每天画上一个小圈圈 不想空出来
内容栏
上边
下边
上边
• 功能：返回、分享、 更多导航、运动开始 与结束、个人资料
• 数字代表：起点、已 完成路程、目标路程 （可依情况-+随时更 改目标路程）
• 动态显示：运动中、 完成目标量、心率
下边
贴心编排 健身所需：健美方法、 健身者心率以及健康指 数详情、健身者走过的 路线、适合健身者的健 康食谱 相辅相成，完成最终健 美目标
运动ＡＰＰ图标以及界面设计
1403220111 江减肥、锻炼身体 • 主要功能——开始跑步、结束跑步、公里数、地图、
分享、成绩单、个人资料设置等
•
APP
、
运 动
图 标 设 计
主要素材
具有运动速度感的图片
代表健身者向往的线条图
经过简简单单的处理和结合再处理
下方为标签栏
• 相关功能：天气查询、 时间提醒安排、路线 查询、音乐等
谢谢！

显示自己的热量记录与康的锻炼
THANK
在app上，包含了找活动、运动群、打擂台、找场馆、 找教练等功能。
找活动：在这里你可以查看附近的活动、赛事，一键 报名参加活动，在这里你也可以发起活动。 找场馆：还在为找不到场馆而心塞吗？在这里我们提 供了海量的体育场馆信息，附近场馆一目了然，并且 提供了地图导航功能，贴心、实用。
在APP上有清楚的记录自己的训练时间次数与消耗的热量，有助于更科学的锻炼
DO IT (android)
1.DO It可记录用户在运动时的各种数据，包括瞬时速度、平均速 度、距离、卡路里燃烧等情况，支持数种不同的传感器来测量用户 的心跳速率；用户可以透过耳机，让内建语音教练告诉用户目前的 纪录和运动的过程
运动库
如果您平时觉得自己运动闷想找附近的人一起切磋一 起运动或想找附近的运动场馆那么这款app是最适合 你的。

计 思 路
色彩选择为绿色和白色，给人舒适，清新，接近大自然的 感觉，以深灰色为点缀不会显得突兀。
首页顶部有切换和分享功能，中间显示主要内容，底部分 为锻炼、发现、动态、我的四个部分。
切换运动功能
当前运动数据 近期数据对比
分享功能
运动状态显示面板 滑动可切换运动状态
锻炼：运动面板，显示当前 状态和数据
运动类APP首页 及图标设计
设计者：彭斯妤
运动类APP
1 目标人群：
锻炼身体的人群
2 色彩选择：
主要以绿色和白色为ห้องสมุดไป่ตู้，深灰色点缀
3 主要功能：
计步，跑步，骑行等锻炼功能，关注和分享等社交功能
运动类APP
设
将目标设为爱锻炼的人群，故在首页设置了计步、跑步和 骑行三个基本功能，下半部分显示近期数据对比。
发现：发现热门动态等 动态：自己和好友的动态 我的：个人中心和设置
设计成果
首页 图标
THANKS

首页展示
主要针对运动达人来设计，中间包括有个人中 心、行程表、跑友圈、主页等功能。 背景以黑色图，运用了颜色、渐变的特效。 界面色调以黑、蓝、紫为主。
设计过程
运动APP分为三小块。
一、顶部。这一列有侧栏的，让大家能快捷的回到主页，还有中间的文字展示了当前页面处于 的状态，也有更多图标。
二、主体。这一块涉及的范围就比较广了，分为三列。1、中间大大的图标显示的已完成的数值， 旁边显示了当前以消耗的卡路里。2、中间的图形表明用户是这个app的等级显示。3、分别有累 计距离、累计时间、累计消耗，都有图标跟文字的展示。
三、功能栏。分别有主页、行程表、开始跑步、跑友圈、个人中心。
图标展示
由于界面色调是以黑、蓝、紫为主的， 图标的设计就以外框

所有能
一键切换动作替换，让每一套训练更加适合你 生动全面动作示范，动作标准让训练加更效率 训练课程覆盖全面，不同难度伴随你逐步提升 科学测试体能结果，全面分析你的身体潜能 量身定制每日目标，火辣身材带你一起练出来
THANKS
JBULLS 运动
LOGO设计
LOGO的颜色以黑、白、红三种颜 色组成，外形是一只公牛，采用了 简约风的形式以三角形展现
界面设计
整体界面的颜色是以黑、白、红三 种颜色组成，两种颜色不会太过使 人眼花，图标的设计也是采用简约 的线条组成，这样可以让用户轻松 找到自己所需要的功能位置
适合龄层
本软件适合18到64岁成年人，每周 至少150分钟中等强度有氧身体活动， 或每周至少75分钟高强度有氧身体 活动，或中等和高强度两种活动相 当量的组合

• 这个是该APP的logo图标，是一个火柴人跑 步的姿势。含义是给用户灌输运动精神。 刚毅的眼神给人一种坚持不放弃的精 神。。。。提倡全民跑步，共同强身健体！
运动APP分析过程
这款APP色彩构图用 了淡绿色和淡蓝 色，整体看起来 清新自然，文字 采用了白色和黑 色。
这款APP是为一些热爱 跑步的人群而设计， 有且仅有跑步这一项 运动 ，功能一应俱
全，步数，路程，速 度，个人信息，成绩 单；更有可协助款APP主打是跑 步功能的，所有我把 主要的计步，速度等 功能放在了最中间最 显眼的位置。白色圈 圈下面有2个小的按 钮，分别是开始跑步 和停止跑步，用户可 以打开APP后就立马 开始运动了！

用户界面的设计与可用性研究
用户界面五个要素分析框架
五个要素
用户界面的种类
身体 头脑 时间 环境 相 互 运 要素 要素 要素 要素 用要素
图形用户界面
产品的操作部位
产品外形 产品（系统）的使用说明书
26
用户界面设计的五个要素分析
用户界面的设计与可用性研究
• 图形用户界面（Graphic user interface简称 GUI）
用户界面学
用户界面研 究相关学科
用户界面设 计相关研究
可用性工程学
用户界面构造、分
类、菜单结构
用户认知研究
五个要素
因素、步骤、手 段、涉及学科
可用性评价方法 及目标
设计内容
设计要点
设计过程
评价与修正 通过要素建立的设计方法流程
4
用户界面构造及种类
用户界面的设计与可用性研究
人机系统示意图 大脑
视觉 触觉 听觉
用户界面的设计与可用性研究用户界面的设计与可用性研究用户的认知研究感觉视觉听觉触觉感觉器官皮肤及皮下组织刺激可见光一定频率的声波物对皮肤的作用识别色彩明暗对比度形状大小光洁程度位置远近运动方向等声音的强弱和高低声源的方向和位置等大小形状软硬光滑度温度人主视力直接与间接照听力各种声音大小感长度面积体积辨色力色调对比度亮度轻度干扰45db反馈声的设计形状感形状形状感知产品外形尺较大干扰65db紧急情况提醒物理特性感知软硬光滑冷热质地感知表面光洁程度柔软度响100db噪声的控制特殊触觉通信需求形状盲文辨别力可读性适应弱25db正常的使用人主要感觉与机的对应用户界面的设计与可用性研究用户界面的设计与可用性研究用户的认知研究用户认知和行为特性分析记忆知识表达和思维与理解10用户界面的设计与可用性研究用户界面的设计与可用性研究用户的认知研究用户生理心理个人背景和使用环境的影响用户界面设计与共用性设计无论是用户界面设计产品设计环境设计其工作的第一步就是对用户进行观察与研究这是开展下一步工作的基础也是整个设计的前提

运动APP
设计过程
产品定位
2
目标用户
有运动意识、独立性相对较强 的人群。
核心思想
促进人们加强运动。
3
产品功能能了解到今 天自己锻炼所消耗的热量、公 里、时间，帮助用户督促锻炼。
辅助功能
找场馆：帮助用户找运动的地方。 找伙伴：帮助用户找运动伙伴。 运动资讯：了解运动方面的知识。
页面下方的菜单栏是 APP的主要功能，方便用 户使用。
10
最终首界面设计
11
展示设计
12
13
THANKS
5
图标设计
6
组成元素
计时器：运动的人要 能量圈：运动能使人 有时间观念和紧迫感。 充满能量，身体得到
锻炼。
人型R字母：由人型变 化的R字母，人需要运 动，需要锻炼身体。
7
最终图标设计
8
首界面设计
9
以蓝色为主色调，首页 主要展示的是每日运动数 据，方便让用户了解每日 自己锻炼了多少。
页面上方的按键能让用 户方便使用APP的其他更 多的功能。

动时间和次数
有教学视频 指导动作
全部运动归类
主打 瑜伽 和 器械健身 真人视频教学 指导动作 记录时间 运动量
底部设计
设置自己喜好 所有的运动记录
一个帐号可同步
THANKS!
14多媒体3-2 1403220251
罗宝君
Android界面设计与制作PPT
运动app的图标设计 K=Keep
Android界面设计与制作
Android界面设计与制作
针对特定目标人群如（运动达人、减肥、锻炼身体）设计 色彩选择：黑白灰三个主打颜色 简单清晰清楚明了 主要功能：教学、记录、运动 有不同类型的运动 根据个人喜好、运动方式选取适合自己的运动

我的设计理念
• 图标的整体构成由运用了角度颜色渐变具有层 次感的圆角形状作为背景，透明的圆形加上有 速度箭头和立体感有奔跑状态的人组成。
• 图标的颜色用了大面积的绿色作为背景底色并 加上渐变效果，用透明白色和绿色加白色的渐 变色描绘圆形和箭头，立体感有奔跑状态的人 用简单的白色描绘，让整个图标有种奔跑，生 命和活力的感觉。
• 图标采用扁平化的设计形式，简单易懂，不会 产生的运动界面主要针对需要锻炼身 体人群。
• 页面的颜色采用绿色作主色调，用少面积 的白色和黑色作点缀，采用清新，养眼的 绿色来对页面进行渲染，突出健康和勃勃 生机的状态，生命力不断增强。
• 界面除了有步数的统计和位置等相关功能 的设定，还为锻炼身体的人群添加睡眠， 血压，血糖和体重的其他功能，这样能让 人们随时了解自身的身体情况。