运动健康APP原型图
健康APP 运动追踪 健康管理 移动应用 用户界面 原型设计 数据可视化
这是一个运动健康类APP的原型图设计模板，主要功能包括步数统计、卡路里消耗追踪、公里数记录、心率监测、血氧检测以及运动时长统计。界面展示了清晰的数据可视化趋势图，支持按周、月、年或自定义时间段查看历史记录。该原型图适合健康类应用开发者参考使用，提供了完整的数据追踪界面设计，包含目标设定、实时数据展示和历史趋势分析等功能模块。设计风格简洁直观，重点突出关键健康指标，可作为健康管理类APP开发的起点或灵感来源。
如果您发现该原型图存在问题，请点击以下按钮进行举报：
举报该原型图
<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>运动健康</title> <link rel="stylesheet" href="styles.css"> <link rel="stylesheet" href="https://gcore.jsdelivr.net/npm/chinese-fonts@1.0.0/dist/Noto-Sans-SC/font.min.css"> </head> <body> <div class="container"> <header class="header"> <h1>运动健康</h1> <button class="btn-history" id="showHistory">历史记录</button> </header> <div class="date-selector"> <div class="week-navigation"> <button class="btn-nav" id="prevWeek"><</button> <div class="week-range" id="weekRange">本周</div> <button class="btn-nav" id="nextWeek">></button> </div> <div class="day-selector" id="daySelector"> <!-- 动态生成周几按钮 --> </div> </div> <div class="stats-grid"> <div class="stat-card"> <div class="stat-value" id="steps">0</div> <div class="stat-label">步数</div> <div class="stat-progress"> <div class="progress-bar" id="stepsProgress"></div> </div> <div class="stat-target">目标: 8000步</div> </div> <div class="stat-card"> <div class="stat-value" id="calories">0</div> <div class="stat-label">卡路里</div> <div class="stat-progress"> <div class="progress-bar" id="caloriesProgress"></div> </div> <div class="stat-target">目标: 500千卡</div> </div> <div class="stat-card"> <div class="stat-value" id="distance">0</div> <div class="stat-label">公里数</div> <div class="stat-progress"> <div class="progress-bar" id="distanceProgress"></div> </div> <div class="stat-target">目标: 5公里</div> </div> <div class="stat-card"> <div class="stat-value" id="heartRate">0</div> <div class="stat-label">心率</div> <div class="stat-unit">次/分钟</div> </div> <div class="stat-card"> <div class="stat-value" id="bloodOxygen">0</div> <div class="stat-label">血氧</div> <div class="stat-unit">%</div> </div> <div class="stat-card"> <div class="stat-value" id="activeMinutes">0</div> <div class="stat-label">运动时长</div> <div class="stat-unit">分钟</div> </div> </div> <div class="chart-container"> <h2>步数趋势</h2> <div class="chart" id="stepsChart"> <!-- 图表将通过JS动态生成 --> </div> </div> </div> <!-- 日期选择模态框 --> <div class="modal" id="dateModal"> <div class="modal-content"> <div class="modal-header"> <h3>选择日期</h3> <button class="close-modal">×</button> </div> <div class="modal-body"> <div class="month-selector"> <button class="btn-nav" id="prevMonth"><</button> <div class="month-title" id="currentMonth">2023年11月</div> <button class="btn-nav" id="nextMonth">></button> </div> <div class="calendar" id="calendar"> <!-- 日历将通过JS动态生成 --> </div> </div> </div> </div> <!-- 历史记录模态框 --> <div class="modal" id="historyModal"> <div class="modal-content"> <div class="modal-header"> <h3>历史记录</h3> <button class="close-modal">×</button> </div> <div class="modal-body"> <div class="time-range-selector"> <button class="time-range-btn active" data-range="week">周</button> <button class="time-range-btn" data-range="month">月</button> <button class="time-range-btn" data-range="year">年</button> <button class="time-range-btn" data-range="all">全部</button> </div> <div class="history-stats" id="historyStats"> <!-- 历史统计数据将通过JS动态生成 --> </div> </div> </div> </div> <script src="script.js"></script> </body> </html>
相关知识
心理健康APP原型图
【APP原型】健康饮食管理 – AxureShop产品原型网
【图片】华为运动健康App运动数据如何同步到三方App
运动健康计步app
运动健康APP十大品牌(健身运动app排行榜)
运动健康app手机版
vivo运动健康app下载
运动健康app排行榜 经典的运动健康APP有哪些
健身记录APP，UI设计图标如何吸引运动达人心？
华为运动健康app怎么添加音乐图标
网址: 运动健康APP原型图 https://m.trfsz.com/newsview1663136.html
