首页 > 分享 > 宠物健康管理APP原型图

宠物健康管理APP原型图

萌宠菠菠乐园
2026-01-11 10:04

宠物APP 健康管理宠物饲养移动端设计数据监测宠物医疗宠物主人界面模板

这是一个专为宠物健康管理设计的APP原型图，主要功能包括宠物基本信息展示（品种、年龄）、健康数据监测（饱食度、运动量、饮水量、体温）、日常护理功能（喂食、散步、清洁、零食）以及提醒事项（驱虫、用餐、医疗预约）。界面采用直观的数据可视化设计，适合宠物类APP开发者参考使用，也可作为UI设计师的灵感来源。原型图展示了移动端宠物健康管理的核心功能模块和用户交互流程。

如果您发现该原型图存在问题，请点击以下按钮进行举报：
举报该原型图

<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"> <title>宠物伴侣 - 手表端</title> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"> <style> * { margin: 0; padding: 0; box-sizing: border-box; -webkit-tap-highlight-color: transparent; } :root { --primary: #8ECAE6; --secondary: #219EBC; --accent: #FFB703; --background: #F8F9FA; --surface: #FFFFFF; --text: #2B2D42; --text-secondary: #8D99AE; --success: #4CAF50; --warning: #FF9800; --danger: #F44336; --radius-full: 50%; --radius-md: 16px; --radius-sm: 8px; --shadow-sm: 0 2px 8px rgba(0,0,0,0.08); --shadow-md: 0 4px 12px rgba(0,0,0,0.1); } body { font-family: 'Segoe UI', system-ui, -apple-system, sans-serif; background: var(--background); color: var(--text); display: flex; justify-content: center; align-items: center; min-height: 100vh; padding: 16px; overflow: hidden; } .watch-container { width: 100%; max-width: 400px; min-height: 400px; background: var(--surface); border-radius: var(--radius-md); box-shadow: var(--shadow-md); overflow: hidden; display: flex; flex-direction: column; position: relative; } .watch-bezel { position: absolute; top: 0; left: 0; right: 0; bottom: 0; border-radius: var(--radius-full); border: 12px solid #f0f0f0; pointer-events: none; z-index: 10; } .status-bar { display: flex; justify-content: space-between; align-items: center; padding: 16px 20px 8px; color: var(--text-secondary); font-size: 14px; } .time { font-weight: 600; } .battery { display: flex; align-items: center; gap: 4px; } .main-screen { flex: 1; padding: 0 20px 20px; display: flex; flex-direction: column; overflow-y: auto; } .pet-header { text-align: center; padding: 16px 0; margin-bottom: 8px; } .pet-name { font-size: 24px; font-weight: 700; color: var(--text); margin-bottom: 4px; } .pet-type { font-size: 16px; color: var(--text-secondary); font-weight: 500; } .pet-avatar { width: 100px; height: 100px; border-radius: var(--radius-full); background: linear-gradient(135deg, var(--primary), var(--secondary)); margin: 0 auto 12px; display: flex; align-items: center; justify-content: center; color: white; font-size: 48px; box-shadow: var(--shadow-sm); border: 3px solid white; } .stats-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; margin-bottom: 24px; } .stat-card { background: var(--background); border-radius: var(--radius-sm); padding: 16px; text-align: center; box-shadow: var(--shadow-sm); } .stat-value { font-size: 24px; font-weight: 700; color: var(--text); margin-bottom: 4px; } .stat-label { font-size: 14px; color: var(--text-secondary); } .action-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-bottom: 24px; } .action-btn { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; background: var(--background); border-radius: var(--radius-sm); padding: 16px 8px; box-shadow: var(--shadow-sm); border: none; color: var(--text); font-size: 14px; font-weight: 500; transition: all 0.2s ease; } .action-btn:active { transform: scale(0.95); background: #e9ecef; } .action-btn i { font-size: 24px; color: var(--secondary); } .action-btn.feed i { color: var(--accent); } .action-btn.health i { color: var(--success); } .reminders { background: var(--background); border-radius: var(--radius-sm); padding: 16px; box-shadow: var(--shadow-sm); } .section-title { font-size: 18px; font-weight: 600; margin-bottom: 12px; color: var(--text); display: flex; align-items: center; gap: 8px; } .reminder-list { list-style: none; } .reminder-item { display: flex; align-items: center; padding: 12px 0; border-bottom: 1px solid #e9ecef; } .reminder-item:last-child { border-bottom: none; } .reminder-icon { width: 36px; height: 36px; border-radius: var(--radius-full); background: var(--primary); display: flex; align-items: center; justify-content: center; color: white; margin-right: 12px; flex-shrink: 0; } .reminder-info { flex: 1; } .reminder-title { font-weight: 500; margin-bottom: 2px; } .reminder-time { font-size: 14px; color: var(--text-secondary); } .nav-bar { display: flex; justify-content: space-around; padding: 12px 0; background: var(--surface); border-top: 1px solid #e9ecef; } .nav-btn { display: flex; flex-direction: column; align-items: center; gap: 4px; color: var(--text-secondary); font-size: 12px; background: none; border: none; } .nav-btn.active { color: var(--secondary); } .nav-btn i { font-size: 20px; } @media (max-width: 480px) { .watch-container { max-width: 360px; min-height: 360px; } .pet-avatar { width: 80px; height: 80px; font-size: 40px; } .action-btn { padding: 12px 4px; } } </style> </head> <body> <div class="watch-container"> <div class="watch-bezel"></div> <div class="status-bar"> <div class="time">14:30</div> <div class="battery"> <i class="fas fa-battery-full"></i> <span>98%</span> </div> </div> <div class="main-screen"> <div class="pet-header"> <div class="pet-avatar"> <i class="fas fa-dog"></i> </div> <h1 class="pet-name">豆豆</h1> <div class="pet-type">柯基犬 · 2岁</div> </div> <div class="stats-grid"> <div class="stat-card"> <div class="stat-value">98%</div> <div class="stat-label">饱食度</div> </div> <div class="stat-card"> <div class="stat-value">6.2km</div> <div class="stat-label">今日运动</div> </div> <div class="stat-card"> <div class="stat-value">72%</div> <div class="stat-label">饮水量</div> </div> <div class="stat-card"> <div class="stat-value">36.8°C</div> <div class="stat-label">体温</div> </div> </div> <div class="action-grid"> <button class="action-btn feed"> <i class="fas fa-utensils"></i> <span>喂食</span> </button> <button class="action-btn"> <i class="fas fa-walking"></i> <span>散步</span> </button> <button class="action-btn health"> <i class="fas fa-heartbeat"></i> <span>健康</span> </button> <button class="action-btn"> <i class="fas fa-bath"></i> <span>清洁</span> </button> <button class="action-btn"> <i class="fas fa-bone"></i> <span>零食</span> </button> <button class="action-btn"> <i class="fas fa-camera"></i> <span>拍照</span> </button> </div> <div class="reminders"> <h2 class="section-title"> <i class="fas fa-bell"></i> <span>提醒事项</span> </h2> <ul class="reminder-list"> <li class="reminder-item"> <div class="reminder-icon"> <i class="fas fa-pills"></i> </div> <div class="reminder-info"> <div class="reminder-title">驱虫药</div> <div class="reminder-time">15:00 · 今天</div> </div> </li> <li class="reminder-item"> <div class="reminder-icon"> <i class="fas fa-utensils"></i> </div> <div class="reminder-info"> <div class="reminder-title">晚餐时间</div> <div class="reminder-time">18:30 · 每天</div> </div> </li> <li class="reminder-item"> <div class="reminder-icon"> <i class="fas fa-video"></i> </div> <div class="reminder-info"> <div class="reminder-title">宠物医生预约</div> <div class="reminder-time">明天 10:00</div> </div> </li> </ul> </div> </div> <div class="nav-bar"> <button class="nav-btn active"> <i class="fas fa-home"></i> <span>首页</span> </button> <button class="nav-btn"> <i class="fas fa-chart-line"></i> <span>数据</span> </button> <button class="nav-btn"> <i class="fas fa-map-marker-alt"></i> <span>定位</span> </button> <button class="nav-btn"> <i class="fas fa-cog"></i> <span>设置</span> </button> </div> </div> <script> // 更新当前时间 function updateTime() { const now = new Date(); const hours = now.getHours().toString().padStart(2, '0'); const minutes = now.getMinutes().toString().padStart(2, '0'); document.querySelector('.time').textContent = `${hours}:${minutes}`; } // 初始化 document.addEventListener('DOMContentLoaded', function() { updateTime(); setInterval(updateTime, 60000); // 添加按钮交互效果 const actionButtons = document.querySelectorAll('.action-btn'); actionButtons.forEach(button => { button.addEventListener('click', function() { const action = this.querySelector('span').textContent; alert(`执行操作: ${action}`); }); }); // 导航按钮切换 const navButtons = document.querySelectorAll('.nav-btn'); navButtons.forEach(button => { button.addEventListener('click', function() { navButtons.forEach(btn => btn.classList.remove('active')); this.classList.add('active'); }); }); }); </script> </body> </html>