802b4ba229
- VoiceController: Map.of() -> Collections.singletonMap() 兼容 Java 8 - ExploreController: 补齐 takeoutService.roll() 缺失的 taste/priceRange/allergies 参数 Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
164 lines
7.5 KiB
Markdown
164 lines
7.5 KiB
Markdown
下面以线框描述+关键标注的方式呈现“吃啥盲盒”核心页面的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
|
||
- **图标**：线性+面性结合，盲盒/食材使用自定义插画风
|
||
- **错误兜底**：定位失败时显示“手动选择位置”，无商家时显示“附近喵星人占领了，换片区域试试？”
|