首页 > 分享 > 宠物领养APP原型图

宠物领养APP原型图

萌宠菠菠乐园
2026-02-28 22:09

宠物APP 领养平台动物救助 UI设计移动应用用户界面前端模板

这是一个宠物领养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: 'PingFang SC', 'Helvetica Neue', Arial, sans-serif; } body { background-color: #fefaf6; /* 浅米色背景 */ color: #5a4a42; /* 深棕色文字 */ line-height: 1.6; padding-bottom: 80px; /* 底部导航栏的高度 */ } /* 顶部搜索栏 */ .header { position: sticky; top: 0; background: linear-gradient(to right, #ffa500, #ff8c00); padding: 15px 20px; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05); z-index: 100; } .search-container { display: flex; background-color: rgba(255, 255, 255, 0.9); border-radius: 30px; padding: 8px 15px; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05); } .search-container input { flex: 1; border: none; background: transparent; padding: 8px; font-size: 16px; color: #5a4a42; outline: none; } .search-container button { background: transparent; border: none; color: #ff8c00; font-size: 20px; cursor: pointer; display: flex; align-items: center; justify-content: center; } /* 分类入口区域 */ .categories { padding: 25px 20px 15px; text-align: center; } .section-title { font-size: 20px; font-weight: 600; color: #5a4a42; margin-bottom: 20px; text-align: left; position: relative; padding-left: 15px; } .section-title::before { content: ''; position: absolute; left: 0; top: 4px; height: 20px; width: 4px; background-color: #ff8c00; border-radius: 2px; } .category-container { display: flex; justify-content: space-around; margin-bottom: 10px; } .category-item { display: flex; flex-direction: column; align-items: center; width: 75px; } .category-circle { width: 60px; height: 60px; border-radius: 50%; background-color: #fff8f0; border: 2px solid #ffcc9e; display: flex; align-items: center; justify-content: center; margin-bottom: 8px; cursor: pointer; transition: all 0.3s ease; box-shadow: 0 4px 10px rgba(0, 0, 0, 0.05); } .category-circle:hover { transform: translateY(-5px); box-shadow: 0 6px 15px rgba(0, 0, 0, 0.1); border-color: #ff8c00; } .category-circle img { width: 30px; height: 30px; } .category-name { font-size: 13px; color: #5a4a42; font-weight: 500; } /* 瀑布流卡片区域 */ .pet-list { padding: 0 15px; } .masonry { column-count: 2; column-gap: 15px; } .pet-card { background-color: white; border-radius: 16px; overflow: hidden; margin-bottom: 15px; box-shadow: 0 5px 15px rgba(0, 0, 0, 0.06); transition: transform 0.3s ease, box-shadow 0.3s ease; break-inside: avoid; } .pet-card:hover { transform: translateY(-5px); box-shadow: 0 8px 20px rgba(0, 0, 0, 0.1); } .pet-image { width: 100%; height: 180px; object-fit: cover; } .pet-info { padding: 15px; } .pet-name { font-size: 18px; font-weight: 600; color: #5a4a42; margin-bottom: 5px; } .pet-meta { font-size: 14px; color: #8a7a72; margin-bottom: 8px; } .pet-tags { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; } .tag { background-color: #fff1e6; color: #ff8c00; border-radius: 20px; padding: 4px 10px; font-size: 12px; font-weight: 500; } /* 底部导航栏 */ .bottom-nav { position: fixed; bottom: 0; left: 0; right: 0; background-color: white; display: flex; justify-content: space-around; padding: 12px 0; box-shadow: 0 -4px 12px rgba(0, 0, 0, 0.05); z-index: 100; } .nav-item { display: flex; flex-direction: column; align-items: center; text-decoration: none; color: #8a7a72; font-size: 12px; transition: color 0.3s ease; flex: 1; } .nav-item.active { color: #ff8c00; } .nav-icon { font-size: 20px; margin-bottom: 4px; } .nav-item.active .nav-icon { color: #ff8c00; } /* 一些装饰元素 */ .heart-animation { animation: pulse 1.5s infinite; } @keyframes pulse { 0% { transform: scale(1); } 50% { transform: scale(1.1); } 100% { transform: scale(1); } } </style> </head> <body>  <header class="header"> <div class="search-container"> <input type="text" placeholder="搜索品种、地点或名字..."> <button type="submit"></button> </div> </header>  <section class="categories"> <h2 class="section-title">可爱萌宠</h2> <div class="category-container"> <div class="category-item"> <div class="category-circle"> <img src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23ff8c00'%3E%3Cpath d='M12 2l9.5 7.5v4.5h-2v10h-15v-10h-2v-4.5l9.5-7.5zm0 3.2l-7 5.3v3.5h3v9h8v-9h3v-3.5l-7-5.3z'/%3E%3C/svg%3E" alt="狗狗"> </div> <span class="category-name">狗狗</span> </div> <div class="category-item"> <div class="category-circle"> <img src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23ff8c00'%3E%3Cpath d='M12 2c-3.87 0-7 3.13-7 7 0 5.25 7 13 7 13s7-7.75 7-13c0-3.87-3.13-7-7-7zm0 9.5c-1.38 0-2.5-1.12-2.5-2.5s1.12-2.5 2.5-2.5 2.5 1.12 2.5 2.5-1.12 2.5-2.5 2.5z'/%3E%3C/svg%3E" alt="猫咪"> </div> <span class="category-name">猫咪</span> </div> <div class="category-item"> <div class="category-circle"> <img src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23ff8c00'%3E%3Cpath d='M19 2c-2.21 0-4 1.79-4 4 0 1.1.45 2.1 1.17 2.82l-1.42 1.42c-.78-.78-1.8-1.24-2.87-1.24h-5.28c-.63-1.1-1.82-1.85-3.2-1.85-2.01 0-3.6 1.79-3.6 4s1.59 4 3.6 4c1.38 0 2.57-.75 3.2-1.85h5.28c1.07 0 2.09-.46 2.87-1.24l1.42 1.42c-.72.72-1.17 1.72-1.17 2.82 0 2.21 1.79 4 4 4s4-1.79 4-4-1.79-4-4-4c-1.07 0-2.09.46-2.87 1.24l-1.42-1.42c.72-.72 1.17-1.72 1.17-2.82 0-2.21-1.79-4-4-4z'/%3E%3C/svg%3E" alt="其他"> </div> <span class="category-name">其他</span> </div> <div class="category-item"> <div class="category-circle"> <img src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23ff8c00'%3E%3Cpath d='M12 3c-4.97 0-9 4.03-9 9 0 4.17 2.84 7.67 6.69 8.69l1.31-4.48c-1.97-.68-3.35-2.54-3.35-4.21 0-2.76 2.24-5 5-5s5 2.24 5 5c0 1.67-1.38 3.53-3.35 4.21l1.31 4.48c3.85-1.02 6.69-4.52 6.69-8.69 0-4.97-4.03-9-9-9z'/%3E%3C/svg%3E" alt="最新"> </div> <span class="category-name">最新</span> </div> </div> </section>  <section class="pet-list"> <h2 class="section-title">领养推荐</h2> <div class="masonry">  <div class="pet-card"> <img src="https://images.unsplash.com/photo-1517423568366-8b83523034fd?w=300&h=200&fit=crop" alt="小金毛" class="pet-image"> <div class="pet-info"> <h3 class="pet-name">小金毛</h3> <div class="pet-meta">金毛寻回犬 · 3个月 · 公</div> <div class="pet-tags"> <span class="tag">亲人</span> <span class="tag">活泼</span> </div> </div> </div>  <div class="pet-card"> <img src="https://images.unsplash.com/photo-1533743983669-94fa5c4338ec?w=300&h=250&fit=crop" alt="布丁" class="pet-image"> <div class="pet-info"> <h3 class="pet-name">布丁</h3> <div class="pet-meta">英国短毛猫 · 1岁 · 母</div> <div class="pet-tags"> <span class="tag">安静</span> <span class="tag">温顺</span> <span class="tag">已绝育</span> </div> </div> </div>  <div class="pet-card"> <img src="https://images.unsplash.com/photo-1517423738875-5ce310acd3da?w=300&h=200&fit=crop" alt="豆豆" class="pet-image"> <div class="pet-info"> <h3 class="pet-name">豆豆</h3> <div class="pet-meta">柴犬 · 1岁 · 公</div> <div class="pet-tags"> <span class="tag">聪明</span> <span class="tag">忠诚</span> </div> </div> </div>  <div class="pet-card"> <img src="https://images.unsplash.com/photo-1519052537078-e6302a4968d4?w=300&h=250&fit=crop" alt="奶糖" class="pet-image"> <div class="pet-info"> <h3 class="pet-name">奶糖</h3> <div class="pet-meta">布偶猫 · 8个月 · 母</div> <div class="pet-tags"> <span class="tag">粘人</span> <span class="tag">漂亮</span> <span class="tag">已疫苗</span> </div> </div> </div>  <div class="pet-card"> <img src="https://images.unsplash.com/photo-1597623583640-3f20c94c4d21?w=300&h=180&fit=crop" alt="小灰" class="pet-image"> <div class="pet-info"> <h3 class="pet-name">小灰</h3> <div class="pet-meta">中华田园猫 · 6个月 · 公</div> <div class="pet-tags"> <span class="tag">健康</span> <span class="tag">活泼</span> </div> </div> </div>  <div class="pet-card"> <img src="https://images.unsplash.com/photo-1587300003388-59208cc962cb?w=300&h=220&fit=crop" alt="多比" class="pet-image"> <div class="pet-info"> <h3 class="pet-name">多比</h3> <div class="pet-meta">泰迪犬 · 2岁 · 母</div> <div class="pet-tags"> <span class="tag">小型</span> <span class="tag">可爱</span> <span class="tag">已绝育</span> </div> </div> </div> </div> </section>  <nav class="bottom-nav"> <a href="#" class="nav-item active"> <span class="nav-icon"></span> <span>首页</span> </a> <a href="#" class="nav-item"> <span class="nav-icon"></span> <span>发现</span> </a> <a href="#" class="nav-item"> <span class="nav-icon">❤️</span> <span>心愿单</span> </a> <a href="#" class="nav-item"> <span class="nav-icon"></span> <span>我的</span> </a> </nav> <script> // 简单的交互效果 document.addEventListener('DOMContentLoaded', function() { // 分类图标点击效果 const categories = document.querySelectorAll('.category-circle'); categories.forEach(category => { category.addEventListener('click', function() { this.classList.add('heart-animation'); setTimeout(() => { this.classList.remove('heart-animation'); }, 1500); }); }); // 宠物卡片点击效果 const petCards = document.querySelectorAll('.pet-card'); petCards.forEach(card => { card.addEventListener('click', function() { const petName = this.querySelector('.pet-name').textContent; alert(`你点击了${petName}的卡片，即将进入详情页`); }); }); // 导航栏点击效果 const navItems = document.querySelectorAll('.nav-item'); navItems.forEach(item => { item.addEventListener('click', function(e) { e.preventDefault(); navItems.forEach(item => item.classList.remove('active')); this.classList.add('active'); }); }); }); </script> </body> </html>