首页资讯智能艾灸机器人APP原型图

智能艾灸机器人APP原型图

来源：泰然健康网时间：2025年11月21日 16:24

医疗健康中医养生智能硬件健康管理用户界面移动应用原型设计 UI模板

这是一个智能艾灸机器人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> <style> * { margin: 0; padding: 0; box-sizing: border-box; font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; } :root { --primary-bg: #f5f7f8; --secondary-bg: #ffffff; --accent: #8da9c4; --accent-dark: #5a7d9a; --text-primary: #3a3a3a; --text-secondary: #5d5d5d; --border: #e0e5ec; --shadow: rgba(149, 157, 165, 0.1); --success: #a4c9a7; --warning: #f1d18a; } body { background-color: var(--primary-bg); color: var(--text-primary); line-height: 1.6; padding: 20px; min-height: 100vh; } .container { max-width: 1200px; margin: 0 auto; } header { background: var(--secondary-bg); border-radius: 16px; padding: 20px; box-shadow: 0 4px 12px var(--shadow); margin-bottom: 24px; display: flex; justify-content: space-between; align-items: center; } .logo { display: flex; align-items: center; gap: 12px; } .logo h1 { font-size: 24px; font-weight: 600; color: var(--accent-dark); } .user-profile { display: flex; align-items: center; gap: 16px; } .user-stats { background: #f8f9fa; padding: 8px 16px; border-radius: 50px; border: 1px solid var(--border); } .points-badge { background: linear-gradient(145deg, var(--warning), #f5c87a); color: #856404; padding: 4px 12px; border-radius: 12px; font-size: 14px; font-weight: 600; } main { display: grid; grid-template-columns: 1fr 300px; gap: 24px; } .panel { background: var(--secondary-bg); border-radius: 16px; padding: 24px; box-shadow: 0 4px 12px var(--shadow); margin-bottom: 24px; } .panel-title { display: flex; justify-content: space-between; align-items: center; margin-bottom: 24px; padding-bottom: 16px; border-bottom: 1px solid var(--border); } .panel-title h2 { font-size: 20px; font-weight: 600; color: var(--accent-dark); } .acupoint-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: 16px; } .acupoint-card { background: var(--secondary-bg); border: 1px solid var(--border); border-radius: 12px; padding: 16px; text-align: center; transition: all 0.2s ease; cursor: pointer; } .acupoint-card:hover { transform: translateY(-3px); box-shadow: 0 6px 16px var(--shadow); border-color: var(--accent); } .acupoint-card.selected { background: #edf3f8; border-color: var(--accent); color: var(--accent-dark); } .acupoint-card h3 { font-size: 16px; margin-bottom: 8px; } .acupoint-card p { font-size: 13px; color: var(--text-secondary); } .control-section { margin-bottom: 32px; } .slider-container { margin: 24px 0; } .slider-label { display: flex; justify-content: space-between; margin-bottom: 8px; } .slider-label span { font-size: 14px; font-weight: 500; color: var(--text-primary); } .slider { width: 100%; height: 8px; -webkit-appearance: none; background: #e0e5ec; border-radius: 4px; outline: none; } .slider::-webkit-slider-thumb { -webkit-appearance: none; width: 22px; height: 22px; background: var(--accent); border-radius: 50%; cursor: pointer; box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2); } .controls { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; } .btn { padding: 16px; border: none; border-radius: 12px; font-size: 16px; font-weight: 600; cursor: pointer; transition: all 0.2s ease; } .btn-primary { background: var(--accent); color: white; box-shadow: 0 4px 8px rgba(141, 169, 196, 0.3); } .btn-primary:hover { background: var(--accent-dark); transform: translateY(-2px); } .btn-secondary { background: white; color: var(--accent-dark); border: 1px solid var(--border); } .btn-secondary:hover { background: #f8fafc; border-color: var(--accent); } .btn:disabled { opacity: 0.5; cursor: not-allowed; transform: none; } .achievements { display: flex; gap: 12px; flex-wrap: wrap; } .badge { width: 50px; height: 50px; border-radius: 50%; background: #e0e5ec; display: flex; align-items: center; justify-content: center; position: relative; } .badge.earned { background: var(--success); } .badge i { font-size: 20px; } .history-item { padding: 16px 0; border-bottom: 1px solid var(--border); } .history-item:last-child { border-bottom: none; } .history-date { font-size: 14px; color: var(--text-secondary); margin-bottom: 4px; } .history-details { display: flex; justify-content: space-between; } .timer { font-size: 28px; font-family: monospace; text-align: center; background: #f8fafc; padding: 16px; border-radius: 12px; margin: 24px 0; } .robot-status { display: flex; align-items: center; gap: 10px; font-size: 14px; margin-bottom: 20px; } .status-indicator { width: 12px; height: 12px; border-radius: 50%; background: #ccc; } .status-indicator.active { background: var(--success); box-shadow: 0 0 8px var(--success); } .acupoint-details { margin-top: 16px; padding-top: 16px; border-top: 1px solid var(--border); } @media (max-width: 768px) { main { grid-template-columns: 1fr; } .controls { grid-template-columns: 1fr; } header { flex-direction: column; gap: 16px; } .user-profile { width: 100%; justify-content: space-between; } } </style> </head> <body> <div class="container"> <header> <div class="logo"> <h1>智能艾灸机器人</h1> </div> <div class="user-profile"> <div class="user-stats"> 欢迎回来，<strong>李艾灸</strong> | 总艾灸时间: <strong>32小时</strong> </div> <div class="points-badge"> <i class="icon-star">★</i> 860积分 </div> </div> </header> <main> <div class="content"> <div class="panel"> <div class="panel-title"> <h2>穴位选择</h2> </div> <div class="robot-status"> <div class="status-indicator active"></div> <span>机器人连接正常 | 剩余灸棒: 3/5</span> </div> <div class="acupoint-grid"> <div class="acupoint-card selected"> <h3>足三里</h3> <p>Zúsānlǐ</p> </div> <div class="acupoint-card"> <h3>合谷穴</h3> <p>Hégǔ</p> </div> <div class="acupoint-card"> <h3>内关穴</h3> <p>Nèiguān</p> </div> <div class="acupoint-card"> <h3>关元穴</h3> <p>Guānyuán</p> </div> <div class="acupoint-card"> <h3>中脘穴</h3> <p>Zhōngwǎn</p> </div> <div class="acupoint-card"> <h3>三阴交</h3> <p>Sānyīnjiāo</p> </div> </div> <div class="acupoint-details"> <h3>足三里 (ST36)</h3> <p>位置: 小腿外侧，犊鼻下3寸，胫骨前缘一横指处</p> <p>功效: 调理脾胃，补中益气，通经活络</p> </div> </div> <div class="panel"> <div class="panel-title"> <h2>艾灸控制</h2> </div> <div class="control-section"> <div class="slider-container"> <div class="slider-label"> <span>温度控制</span> <span id="tempValue">45°C</span> </div> <input type="range" min="40" max="60" value="45" class="slider" id="tempSlider"> </div> <div class="slider-container"> <div class="slider-label"> <span>时长设置</span> <span id="timeValue">15分钟</span> </div> <input type="range" min="5" max="30" value="15" step="5" class="slider" id="timeSlider"> </div> <div class="slider-container"> <div class="slider-label"> <span>艾灸强度</span> <span id="intensityValue">中度</span> </div> <input type="range" min="1" max="3" value="2" class="slider" id="intensitySlider"> </div> </div> <div class="timer" id="timer">00:00</div> <div class="controls"> <button class="btn btn-primary" id="startBtn">开始艾灸</button> <button class="btn btn-secondary" id="pauseBtn" disabled>暂停艾灸</button> </div> </div> </div> <div class="sidebar"> <div class="panel"> <div class="panel-title"> <h2>我的成就</h2> </div> <div class="achievements"> <div class="badge earned"> <i>★</i> </div> <div class="badge"> <i>+</i> </div> <div class="badge earned"> <i>✓</i> </div> <div class="badge"> <i>⌛</i> </div> <div class="badge"> <i>❤</i> </div> </div> </div> <div class="panel"> <div class="panel-title"> <h2>艾灸历史</h2> </div> <div class="history-list"> <div class="history-item"> <div class="history-date">2023年6月10日 09:30</div> <div class="history-details"> <span>足三里 | 15分钟</span> <span>+20积分</span> </div> </div> <div class="history-item"> <div class="history-date">2023年6月9日 18:45</div> <div class="history-details"> <span>合谷穴 | 10分钟</span> <span>+15积分</span> </div> </div> <div class="history-item"> <div class="history-date">2023年6月8日 15:20</div> <div class="history-details"> <span>关元穴 | 20分钟</span> <span>+25积分</span> </div> </div> </div> </div> <div class="panel"> <div class="panel-title"> <h2>今日任务</h2> </div> <ul> <li><input type="checkbox" checked> 完成一次足三里艾灸</li> <li><input type="checkbox"> 尝试一个新穴位</li> <li><input type="checkbox"> 完成15分钟以上艾灸</li> </ul> </div> </div> </main> </div> <script> // DOM元素引用 const startBtn = document.getElementById('startBtn'); const pauseBtn = document.getElementById('pauseBtn'); const tempSlider = document.getElementById('tempSlider'); const timeSlider = document.getElementById('timeSlider'); const intensitySlider = document.getElementById('intensitySlider'); const tempValue = document.getElementById('tempValue'); const timeValue = document.getElementById('timeValue'); const intensityValue = document.getElementById('intensityValue'); const timerDisplay = document.getElementById('timer'); const acupointCards = document.querySelectorAll('.acupoint-card'); // 变量状态 let isMoxibustionRunning = false; let timerInterval = null; let remainingTime = 0; let selectedTime = 15; // 默认15分钟 let selectedPoint = '足三里'; // 温度滑块更新 tempSlider.addEventListener('input', function() { tempValue.textContent = `${this.value}°C`; }); // 时间滑块更新 timeSlider.addEventListener('input', function() { const timeValues = ['5分钟', '10分钟', '15分钟', '20分钟', '25分钟', '30分钟']; timeValue.textContent = timeValues[this.value / 5 - 1]; selectedTime = parseInt(this.value); }); // 强度滑块更新 intensitySlider.addEventListener('input', function() { const intensityValues = ['轻柔', '中度', '强劲']; intensityValue.textContent = intensityValues[this.value - 1]; }); // 穴位选择 acupointCards.forEach(card => { card.addEventListener('click', function() { // 移除之前选择的穴位 document.querySelector('.acupoint-card.selected')?.classList.remove('selected'); // 添加当前选择的穴位 this.classList.add('selected'); selectedPoint = this.querySelector('h3').textContent; // 更新穴位详情区域 const detailSection = this.closest('.panel').querySelector('.acupoint-details'); detailSection.innerHTML = ` <h3>${selectedPoint}</h3> <p>位置: 穴位详细位置信息</p> <p>功效: 穴位功效说明</p> `; }); }); // 开始艾灸 startBtn.addEventListener('click', function() { if (isMoxibustionRunning) return; isMoxibustionRunning = true; this.disabled = true; pauseBtn.disabled = false; // 将分钟转换为秒 remainingTime = selectedTime * 60; updateTimerDisplay(); // 设置倒计时 timerInterval = setInterval(() => { remainingTime--; updateTimerDisplay(); if (remainingTime <= 0) { finishMoxibustion(); } }, 1000); }); // 暂停艾灸 pauseBtn.addEventListener('click', function() { if (!isMoxibustionRunning) return; if (this.textContent === '暂停艾灸') { clearInterval(timerInterval); this.textContent = '继续艾灸'; } else { this.textContent = '暂停艾灸'; timerInterval = setInterval(() => { remainingTime--; updateTimerDisplay(); if (remainingTime <= 0) { finishMoxibustion(); } }, 1000); } }); // 更新计时器显示 function updateTimerDisplay() { const minutes = Math.floor(remainingTime / 60).toString().padStart(2, '0'); const seconds = (remainingTime % 60).toString().padStart(2, '0'); timerDisplay.textContent = `${minutes}:${seconds}`; } // 完成艾灸 function finishMoxibustion() { clearInterval(timerInterval); isMoxibustionRunning = false; startBtn.disabled = false; pauseBtn.disabled = true; pauseBtn.textContent = '暂停艾灸'; // 添加积分和记录 addExperience(selectedPoint, selectedTime); // 显示完成提示 alert(`艾灸完成！穴位: ${selectedPoint}, 时长: ${selectedTime}分钟n获得积分: ${calculatePoints(selectedTime)}`); } // 计算获得的积分 function calculatePoints(minutes) { return minutes * 1.5; } // 添加经验和历史记录 function addExperience(point, minutes) { // 在实际应用中，这里会发送数据到服务器 // 这里我们只做UI更新演示 // 更新用户积分 const pointsElement = document.querySelector('.points-badge'); const currentPoints = parseInt(pointsElement.textContent.match(/d+/)[0]); const earnedPoints = Math.round(calculatePoints(minutes)); pointsElement.textContent = `★ ${currentPoints + earnedPoints}积分`; // 添加历史记录 const historyList = document.querySelector('.history-list'); const today = new Date(); const dateString = `${today.getFullYear()}年${today.getMonth()+1}月${today.getDate()}日 ${today.getHours()}:${today.getMinutes().toString().padStart(2, '0')}`; const newHistoryItem = document.createElement('div'); newHistoryItem.className = 'history-item'; newHistoryItem.innerHTML = ` <div class="history-date">${dateString}</div> <div class="history-details"> <span>${point} | ${minutes}分钟</span> <span>+${earnedPoints}积分</span> </div> `; historyList.insertBefore(newHistoryItem, historyList.firstChild); // 检查任务完成情况 checkTasks(point, minutes); } // 检查任务完成情况 function checkTasks(point, minutes) { const tasks = document.querySelectorAll('li input[type="checkbox"]'); // 完成一次足三里艾灸 if (point === '足三里') { tasks[0].checked = true; } // 完成15分钟以上艾灸 if (minutes >= 15) { tasks[2].checked = true; } } </script> </body> </html>

智能艾灸机器人APP原型图

推荐资讯

从出汗看健康出汗透露你的健康信号

早上怎么喝水最健康？

智能艾灸机器人APP原型图

推荐资讯

从出汗看健康 出汗透露你的健康信号

早上怎么喝水最健康？

从出汗看健康出汗透露你的健康信号