下面以线框描述+关键标注的方式呈现“吃啥盲盒”核心页面的UI草图。整体采用**活力橙+暖黄**主色调，圆角卡片、盲盒机质感、轻拟物图标，营造“开盒惊喜”的氛围。 --- ### 1. 盲盒大厅（首页） ``` ┌──────────────────────────┐ │ 上午 11:30 📍 定位 │ <-- 状态栏/定位按钮 ├──────────────────────────┤ │ │ │ 🎁 今天吃啥？ │ <-- 大标题，圆体 │ 开个盲盒 │ │ │ │ ┌─ 外卖盲盒 ────────┐ │ │ │ 🛵 │ │ │ │ 开个外卖盒 │ │ <-- 主按钮，带微动效 │ │ 随机高质量外卖 │ │ │ └──────────────────┘ │ │ ┌─ 冰箱盲盒 ────────┐ │ │ │ 🥬 │ │ │ │ 开个冰箱盒 │ │ │ │ 有啥食材做啥菜 │ │ │ └──────────────────┘ │ │ ┌─ 探店盲盒 ────────┐ │ │ │ 🍜 │ │ │ │ 开个附近盒 │ │ │ │ 发现隐藏好店 │ │ │ └──────────────────┘ │ │ │ │ “今天宜尝试酸辣口味” │ <-- 每日一言 └──────────────────────────┘ ``` **说明**：三个入口设计成盲盒机器视觉卡片，点击后触发开盒动效。上角定位按钮可手动切换位置。 --- ### 2. 外卖盲盒结果页 ``` ┌──────────────────────────┐ │ ← 返回 📤 分享 │ ├──────────────────────────┤ │ 🎉 你抽到的外卖是… │ │ │ │ ┌────────────────────┐ │ │ │ [商家头图] │ │ │ │ 🌟 4.8 月销999+ │ │ │ │ 川味小厨 │ │ │ │ ¥32/人 · 1.2km │ │ │ │ 30-40分钟送达 │ │ │ │ “水煮鱼绝了！” │ │ │ │ [招牌菜1][2][3] │ │ │ └────────────────────┘ │ │ │ │ ┌─ 去美团下单 ──────┐ │ │ └────────────────────┘ │ │ 🔄 再开一个 │ <-- 换一家 └──────────────────────────┘ ``` **说明**：商家信息卡片居中，招牌菜可横滑。吸底按钮为主操作，弱化“换一家”防止无限循环。 --- ### 3. 冰箱盲盒-食材录入页 ``` ┌──────────────────────────┐ │ 冰箱里有什么？ │ │ │ │ ┌──────────────────┐ │ │ │ 🔍 输入食材名称 │ │ <-- 输入框，带语音icon │ └──────────────────┘ │ │ 常用：🥚鸡蛋 🍅西红柿 🥩鸡胸 🧅洋葱 │ │ ➕ 自定义 │ │ │ │ 📦 我的常备调料 │ │ ✔️油 ✔️盐 ✔️酱油 ✔️醋 │ │ ✔️料酒 ✔️生抽 ➕添加 │ │ │ │ ┌─── 开盒做饭！───┐ │ │ └──────────────────┘ │ └──────────────────────────┘ ``` **说明**：标签化快速输入，可语音录入。常备调料默认勾选，减少重复输入。按钮文案呼应“开盒”。 --- ### 4. 冰箱盲盒-菜谱推荐列表 ``` ┌──────────────────────────┐ │ 为你找到3个菜谱 │ │ │ │ ┌─ 菜谱卡片 ────────┐ │ │ │ 西红柿炒蛋 匹配度95%│ │ │ │ 🥬 缺：小葱 │ │ │ └──────────────────┘ │ │ ┌─ 菜谱卡片 ────────┐ │ │ │ 鸡肉沙拉 匹配度80%│ │ │ │ 🥬 缺：生菜、沙拉酱 │ │ │ └──────────────────┘ │ │ ┌─ 菜谱卡片 ────────┐ │ │ │ 煎鸡胸 匹配度90%│ │ │ │ 🥬 缺：黑胡椒 │ │ │ └──────────────────┘ │ │ │ │ 🔄 换一批菜谱 │ └──────────────────────────┘ ``` **说明**：卡片突出匹配度，用绿色高亮匹配，黄色标注缺失食材。优先展示全匹配菜谱。 --- ### 5. 菜谱详情页 ``` ┌──────────────────────────┐ │ [成品图] ⭐难度2 │ │ 西红柿炒蛋 ⏱ 10分钟 │ ├──────────────────────────┤ │ 🥚 用料 │ │ 鸡蛋2个 西红柿2个 盐 糖 │ │ 小葱(家里缺) → 加入购物单│ │ │ │ 📝 步骤 │ │ 1. 鸡蛋打散，加盐搅匀 │ │ 2. 西红柿切块备用 │ │ 3. 热油炒蛋，盛出 │ │ 4. 炒西红柿出汁… │ │ │ │ 🔖 计时器 📋 购物清单 │ └──────────────────────────┘ ``` **说明**：用料缺货高亮并支持一键加入购物清单。步骤清晰，可内置简单计时器。 --- ### 6. 探店盲盒结果页 ``` ┌──────────────────────────┐ │ 🎊 附近发现一家宝藏店 │ │ │ │ ┌────────────────────┐ │ │ │ [店铺头图] │ │ │ │ 🏮 藏巷·居酒屋 │ │ │ │ ⭐4.6 · 2.3km │ │ │ │ 人均 ¥120 │ │ │ │ “三文鱼厚切超满足”│ │ │ │ 🥘 招牌：鹅肝寿司 │ │ │ └────────────────────┘ │ │ │ │ ┌── 导航过去 ───────┐ │ │ └────────────────────┘ │ │ 🗺 查看详细点评 │ │ 🔄 再开一个 │ └──────────────────────────┘ ``` **说明**：强调推荐语和招牌菜，导航为主要操作，跳转外部地图；可查看详情跳大众点评。 --- ### 全局元素 - **颜色**：背景米白(#FFFBF4)，主色橙(#FF6A3D)，文字深灰(#333)，高亮绿(#4CAF50) - **圆角**：卡片16px，按钮24px - **字体**：微信默认中文字体(苹方/雅黑)，标题加粗，大小16-20px - **图标**：线性+面性结合，盲盒/食材使用自定义插画风 - **错误兜底**：定位失败时显示“手动选择位置”，无商家时显示“附近喵星人占领了，换片区域试试？”