首页分享灵宠伴侣APP原型图

灵宠伴侣APP原型图

来源：萌宠菠菠乐园时间：2026-03-26 02: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"> <title>灵宠伴侣 - 控制中心</title> <style> :root { --primary-bg: #f0f4f8; --secondary-bg: #ffffff; --text-primary: #2d3748; --text-secondary: #4a5568; --accent: #a78bfa; --accent-light: #c4b5fd; --border: #e2e8f0; --shadow: rgba(0, 0, 0, 0.05); --radius: 12px; --space-sm: 8px; --space-md: 16px; --space-lg: 24px; } * { margin: 0; padding: 0; box-sizing: border-box; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif; } body { background-color: var(--primary-bg); color: var(--text-primary); line-height: 1.6; min-height: 100vh; padding: var(--space-lg); } .container { display: grid; grid-template-columns: 240px 1fr 300px; gap: var(--space-lg); max-width: 1600px; margin: 0 auto; } /* 导航样式 */ .sidebar { background: var(--secondary-bg); border-radius: var(--radius); padding: var(--space-lg); box-shadow: 0 4px 6px var(--shadow); display: flex; flex-direction: column; } .logo { font-size: 1.5rem; font-weight: 700; color: var(--accent); margin-bottom: var(--space-lg); display: flex; align-items: center; gap: var(--space-sm); } .nav-item { padding: var(--space-md) var(--space-sm); border-radius: 8px; cursor: pointer; display: flex; align-items: center; gap: var(--space-sm); transition: all 0.2s ease; margin-bottom: var(--space-sm); } .nav-item:hover { background: var(--primary-bg); } .nav-item.active { background: var(--accent-light); color: var(--accent); font-weight: 500; } /* 主控制区样式 */ .main-content { display: flex; flex-direction: column; gap: var(--space-lg); } .pet-display { background: var(--secondary-bg); border-radius: var(--radius); box-shadow: 0 4px 6px var(--shadow); padding: var(--space-lg); height: 400px; display: flex; flex-direction: column; align-items: center; justify-content: center; } .pet-avatar { width: 200px; height: 200px; border-radius: 50%; background: linear-gradient(135deg, var(--accent-light), #ddd6fe); display: flex; align-items: center; justify-content: center; margin-bottom: var(--space-md); position: relative; overflow: hidden; } .pet-avatar::before { content: ""; position: absolute; width: 100px; height: 100px; border-radius: 50%; background: #ffffff80; top: 30px; left: 30px; } .pet-avatar::after { content: ""; position: absolute; width: 50px; height: 50px; border-radius: 50%; background: #ffffff80; bottom: 40px; right: 40px; } .pet-name { font-size: 1.8rem; font-weight: 600; color: var(--text-primary); } .controls { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-md); } .control-card { background: var(--secondary-bg); border-radius: var(--radius); padding: var(--space-lg); box-shadow: 0 4px 6px var(--shadow); display: flex; flex-direction: column; align-items: center; gap: var(--space-md); transition: transform 0.2s ease; } .control-card:hover { transform: translateY(-5px); } .icon-circle { width: 60px; height: 60px; border-radius: 50%; background: var(--accent-light); display: flex; align-items: center; justify-content: center; font-size: 1.5rem; color: var(--accent); } /* 状态面板样式 */ .status-panel { background: var(--secondary-bg); border-radius: var(--radius); padding: var(--space-lg); box-shadow: 0 4px 6px var(--shadow); display: flex; flex-direction: column; gap: var(--space-lg); } .panel-section { display: flex; flex-direction: column; gap: var(--space-md); } .status-bar { background: var(--primary-bg); height: 12px; border-radius: 6px; overflow: hidden; } .status-fill { height: 100%; border-radius: 6px; background: var(--accent); } .mood-80 { width: 80%; } .energy-65 { width: 65%; } .bonding-90 { width: 90%; } .action-list { display: flex; flex-direction: column; gap: var(--space-sm); } .action-item { padding: var(--space-md); background: var(--primary-bg); border-radius: 8px; display: flex; align-items: center; gap: var(--space-sm); cursor: pointer; transition: background 0.2s ease; } .action-item:hover { background: var(--accent-light); } .voice-control { display: flex; gap: var(--space-sm); } .voice-input { flex: 1; padding: var(--space-md); border: 1px solid var(--border); border-radius: 8px; outline: none; transition: border 0.2s ease; } .voice-input:focus { border-color: var(--accent); } .btn { padding: var(--space-md) var(--space-lg); background: var(--accent); color: white; border: none; border-radius: 8px; cursor: pointer; font-weight: 500; transition: background 0.2s ease; } .btn:hover { background: #8b5cf6; } h2 { font-size: 1.25rem; font-weight: 600; margin-bottom: var(--space-sm); } h3 { font-size: 1rem; font-weight: 500; color: var(--text-secondary); margin-bottom: var(--space-sm); } /* 响应式设计 */ @media (max-width: 1200px) { .container { grid-template-columns: 200px 1fr; } .status-panel { grid-column: span 2; } } @media (max-width: 768px) { .container { grid-template-columns: 1fr; } .status-panel { grid-column: 1; } .controls { grid-template-columns: 1fr; } } </style> </head> <body> <div class="container">  <div class="sidebar"> <div class="logo"> <span>灵宠伴侣</span> </div> <div class="nav-item active"> <span>控制中心</span> </div> <div class="nav-item"> <span>记忆相册</span> </div> <div class="nav-item"> <span>行为设置</span> </div> <div class="nav-item"> <span>语音库</span> </div> <div class="nav-item"> <span>关于</span> </div> </div>  <div class="main-content"> <div class="pet-display"> <div class="pet-avatar">  </div> <h1 class="pet-name">米菲</h1> </div> <div class="controls"> <div class="control-card"> <div class="icon-circle"></div> <h3>抚摸</h3> <button class="btn">开始互动</button> </div> <div class="control-card"> <div class="icon-circle"></div> <h3>喂食</h3> <button class="btn">开始互动</button> </div> <div class="control-card"> <div class="icon-circle"></div> <h3>玩耍</h3> <button class="btn">开始互动</button> </div> </div> </div>  <div class="status-panel"> <div class="panel-section"> <h2>宠物状态</h2> <div> <h3>心情指数</h3> <div class="status-bar"> <div class="status-fill mood-80"></div> </div> </div> <div> <h3>能量值</h3> <div class="status-bar"> <div class="status-fill energy-65"></div> </div> </div> <div> <h3>亲密度</h3> <div class="status-bar"> <div class="status-fill bonding-90"></div> </div> </div> </div> <div class="panel-section"> <h2>快捷动作</h2> <div class="action-list"> <div class="action-item">坐下</div> <div class="action-item">转圈</div> <div class="action-item">握手</div> <div class="action-item">跳跃</div> </div> </div> <div class="panel-section"> <h2>语音互动</h2> <div class="voice-control"> <input type="text" class="voice-input" placeholder="对爱宠说点什么..."> <button class="btn">发送</button> </div> </div> </div> </div> <script> // 交互功能脚本 document.addEventListener('DOMContentLoaded', function() { // 控制按钮交互 const controlButtons = document.querySelectorAll('.btn'); controlButtons.forEach(button => { button.addEventListener('click', function() { const action = this.closest('.control-card').querySelector('h3').textContent; alert(`开始${action}互动...`); // 这里可以添加与3D引擎的交互逻辑 }); }); // 快捷动作交互 const actionItems = document.querySelectorAll('.action-item'); actionItems.forEach(item => { item.addEventListener('click', function() { const action = this.textContent; alert(`执行动作: ${action}`); // 触发3D宠物执行相应动作 }); }); // 语音发送功能 const voiceInput = document.querySelector('.voice-input'); const voiceButton = document.querySelector('.voice-control .btn'); voiceButton.addEventListener('click', function() { if (voiceInput.value.trim() !== '') { alert(`发送语音: "${voiceInput.value}"`); // 这里可以添加语音发送逻辑 voiceInput.value = ''; } }); // 回车键发送 voiceInput.addEventListener('keypress', function(e) { if (e.key === 'Enter') { voiceButton.click(); } }); }); </script> </body> </html>

灵宠伴侣APP原型图

推荐分享

缅因猫能长多大一种体型较大的猫

警惕狗贩的骗人损招星期狗的症状特征

灵宠伴侣APP原型图

推荐分享

缅因猫能长多大 一种体型较大的猫

警惕狗贩的骗人损招 星期狗的症状特征

缅因猫能长多大一种体型较大的猫

警惕狗贩的骗人损招星期狗的症状特征