首頁 資訊 智能艾灸機器人APP原型圖

智能艾灸機器人APP原型圖

來源：泰然健康網(wǎng) 時間：2025年11月21日 16:24

醫(yī)療健康 中醫(yī)養(yǎng)生 智能硬件 健康管理 用戶界面 移動應(yīng)用 原型設(shè)計 UI模板

這是一個智能艾灸機器人APP的原型設(shè)計，展示了完整的用戶界面和功能流程。主要功能包括用戶登錄狀態(tài)顯示、穴位選擇（含詳細穴位位置和功效說明）、艾灸參數(shù)控制（溫度、時長、強度）、艾灸歷史記錄、用戶成就系統(tǒng)和任務(wù)提醒。該原型圖適合醫(yī)療健康類APP設(shè)計師參考，提供了中醫(yī)理療與現(xiàn)代科技結(jié)合的界面設(shè)計方案，包含詳細的中醫(yī)穴位信息展示方式和交互控制元素，可作為類似健康管理類APP的開發(fā)模板。

如果您發(fā)現(xiàn)該原型圖存在問題，請點擊以下按鈕進行舉報：
舉報該原型圖

<!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>內(nèi)關(guān)穴</h3> <p>Nèiguān</p> </div> <div class="acupoint-card"> <h3>關(guān)元穴</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>位置: 小腿外側(cè)，犢鼻下3寸，脛骨前緣一橫指處</p> <p>功效: 調(diào)理脾胃，補中益氣，通經(jīng)活絡(luò)</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>時長設(shè)置</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>關(guān)元穴 | 20分鐘</span> <span>+25積分</span> </div> </div> </div> </div> <div class="panel"> <div class="panel-title"> <h2>今日任務(wù)</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'); // 變量狀態(tài) 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'); // 添加當(dāng)前選擇的穴位 this.classList.add('selected'); selectedPoint = this.querySelector('h3').textContent; // 更新穴位詳情區(qū)域 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; // 將分鐘轉(zhuǎn)換為秒 remainingTime = selectedTime * 60; updateTimerDisplay(); // 設(shè)置倒計時 timerInterval = setInterval(() => { remainingTime--; updateTimerDisplay(); if (remainingTime <= 0) { finishMoxibustion(); } }, 1000); }); // 暫停艾灸 pauseBtn.addEventListener('click', function() { if (!isMoxibustionRunning) return; if (this.textContent === '暫停艾灸') { clearInterval(timerInterval); this.textContent = '繼續(xù)艾灸'; } 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; } // 添加經(jīng)驗和歷史記錄 function addExperience(point, minutes) { // 在實際應(yīng)用中，這里會發(fā)送數(shù)據(jù)到服務(wù)器 // 這里我們只做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); // 檢查任務(wù)完成情況 checkTasks(point, minutes); } // 檢查任務(wù)完成情況 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>

相關(guān)知識

艾灸機器人：智能化時代的健康新寵，還是智商稅？
山西技術(shù)團隊研發(fā)智能艾灸機器人，欲與“老中醫(yī)”試比高
智能艾灸儀「明松健康科技供應(yīng)」
年輕人都在搶的養(yǎng)生神器！智能艾灸儀究竟有多神奇
【人民日報健康客戶端 】機器人也能做艾灸！手法穩(wěn)定，療效更有保障
智能艾灸儀和普通艾灸儀的區(qū)別
智能電子健康艾灸儀的制作方法
醫(yī)院來了艾灸、按摩機器人“新員工”
艾灸器械制作企業(yè) 明松健康科技供應(yīng)
智能艾灸儀的功效和作用

網(wǎng)址: 智能艾灸機器人APP原型圖 http://m.u1s5d6.cn/newsview1855245.html

推薦資訊