12 KiB
12 KiB
打卡详情页 - 一键打卡入口设计
更新日期：2025-11-20
版本：v2.2.1
核心优化：在打卡详情页增加"一键打卡"入口
🎯 优化目标
用户在查看打卡详情时，希望能快速复制该打卡内容，无需返回到列表页操作。
📱 三个主要入口
入口1：打卡历史页 → 直接复制 ⭐推荐快速打卡
我的饮食记录
┌──────────────────────────┐
│ 11月19日 早餐 │
│ ✅ 达标率92% ⭐高分 │
│ [📊 查看详情] │
│ [⚡一键复制打卡] ←入口1 │
└──────────────────────────┘
特点：
- ✅ 最快捷的方式
- ✅ 无需进入详情页
- ✅ 适合确定要复制的情况
- ✅ 30秒完成打卡
流程：
点击"⚡一键复制打卡"
↓
复制确认页（预览内容）
↓
打卡页（内容已填充）
↓
修改内容（可选）
↓
发布完成（+5积分）
入口2：打卡详情页 → 详细查看后复制 ⭐⭐⭐本次新增
我的饮食记录
[📊 查看详情] ←先点这里
↓
打卡详情页
┌──────────────────────────┐
│ 📸 完整照片查看 │
│ 📊 营养数据详情 │
│ 📋 菜品清单 │
│ ┌──────────────────────┐ │
│ │ ⚡一键复制打卡 ←入口2 │ │
│ └──────────────────────┘ │
└──────────────────────────┘
特点：
- ✅ 查看完整信息后决定
- ✅ 可以看到所有照片和数据
- ✅ 更了解打卡内容
- ✅ 适合需要详细查看的情况
流程：
点击"📊 查看详情"
↓
进入打卡详情页
↓
查看照片、营养数据、菜品清单
↓
点击"⚡一键复制打卡"
↓
复制确认页
↓
打卡页（内容已填充）
↓
发布完成（+5积分）
入口3：社区打卡详情页 → 借鉴他人 ⭐学习优质内容
社区广场 → 他人的打卡
[点击帖子查看详情]
↓
打卡详情页（他人的）
┌──────────────────────────┐
│ 查看他人饮食方案 │
│ 营养数据参考 │
│ ┌──────────────────────┐ │
│ │ 🎬一键借鉴打卡 ←入口3 │ │
│ └──────────────────────┘ │
└──────────────────────────┘
特点：
- ✅ 学习他人优质饮食方案
- ✅ AI自动调整用量（根据你的情况）
- ✅ 必须上传自己的照片
- ✅ 原作者也会获得积分
流程：
浏览社区打卡内容
↓
点击感兴趣的帖子
↓
进入打卡详情页（他人的）
↓
点击"🎬一键借鉴打卡"
↓
借鉴确认页（AI调整用量）
↓
打卡页（需上传自己的照片）
↓
发布完成
自己+5积分，原作者+2积分
🎨 UI设计对比
场景A：查看【自己的】打卡详情页
┌────────────────────────────────┐
│ 【快速操作】 │
│ ┌──────────────────────────┐ │
│ │ ⚡ 一键复制打卡 │ │
│ │ 快速复用这份饮食方案 │ │
│ └──────────────────────────┘ │
│ │
│ 点击后可以： │
│ ✅ 复制照片和备注到新打卡 │
│ ✅ 修改内容后重新发布 │
│ ✅ 可选生成AI视频 │
│ ✅ 获得5积分奖励 │
│ │
│ 💡 适用场景： │
│ • 今天吃的和之前某天一样 │
│ • 想复用高分打卡记录 │
│ • 快速打卡不想重新拍照 │
└────────────────────────────────┘
按钮样式：
- 颜色：绿色渐变（#4CAF50 → #45B649）
- 大小：宽度100%，高度56px
- 字体：18px，加粗
- 图标：⚡（闪电，表示快速）
- 圆角：12px
- 阴影：0 4px 12px rgba(76, 175, 80, 0.3)
场景B：查看【他人的】打卡详情页
┌────────────────────────────────┐
│ 【一键借鉴】 │
│ ┌──────────────────────────┐ │
│ │ 🎬 一键借鉴打卡 │ │
│ │ 学习这份营养方案 │ │
│ └──────────────────────────┘ │
│ │
│ 点击后可以： │
│ ✅ 复制菜品清单到我的打卡 │
│ ✅ 根据我的情况调整用量 │
│ ✅ AI生成适合我的食谱 │
│ ✅ 获得5积分奖励 │
│ │
│ 💡 适用场景： │
│ • 看到他人的优质打卡想学习 │
│ • 发现适合自己的饮食方案 │
│ • 需要新的饮食灵感 │
└────────────────────────────────┘
按钮样式：
- 颜色：蓝色渐变（#2196F3 → #1E88E5）
- 大小：宽度100%，高度56px
- 字体：18px，加粗
- 图标：🎬（摄像机，表示学习和记录）
- 圆角：12px
- 阴影：0 4px 12px rgba(33, 150, 243, 0.3)
💻 技术实现
1. 判断打卡详情页的场景
/**
* 判断打卡详情页的场景
*/
function getCheckInDetailScene(recordId, currentUserId) {
const record = getCheckInRecordById(recordId);
if (record.user_id === currentUserId) {
// 场景A：查看自己的打卡
return {
scene: 'self',
buttonText: '⚡ 一键复制打卡',
buttonColor: 'green',
buttonClass: 'copy-btn-self',
action: 'copyOwnCheckIn'
};
} else {
// 场景B：查看他人的打卡
return {
scene: 'others',
buttonText: '🎬 一键借鉴打卡',
buttonColor: 'blue',
buttonClass: 'copy-btn-others',
action: 'learnFromOthers'
};
}
}
2. 一键复制自己的打卡
/**
* 一键复制自己的打卡
*/
function copyOwnCheckIn(recordId) {
const record = getCheckInRecordById(recordId);
// 复制数据
const copiedData = {
photos_json: record.photos_json, // 照片URL数组
notes: record.notes, // 备注说明
voice_url: record.voice_url, // 语音备注（如果有）
copied_from_record_id: recordId, // 记录复制来源
is_copied: 1 // 标记为复制的打卡
};
// 保存到临时存储
wx.setStorageSync('tempCheckInData', copiedData);
// 跳转到打卡页
wx.navigateTo({
url: '/pages/check-in/check-in?from=copy&recordId=' + recordId
});
// 埋点统计
trackEvent('copy_own_check_in', {
record_id: recordId,
source: 'detail_page'
});
}
3. 一键借鉴他人的打卡
/**
* 一键借鉴他人的打卡
*/
function learnFromOthers(recordId, currentUserId) {
const record = getCheckInRecordById(recordId);
// 获取用户自己的营养计划
const myPlan = getNutritionPlan(currentUserId);
// AI自动调整菜品用量
const adjustedDishes = adjustDishesForUser(
record.actual_dishes_json,
myPlan
);
// 准备借鉴数据
const learnedData = {
dishes_json: adjustedDishes, // AI调整后的菜品清单
reference_record_id: recordId, // 参考来源
reference_user_id: record.user_id, // 原作者ID
is_learned_from_others: 1 // 标记为借鉴的打卡
};
// 保存到临时存储
wx.setStorageSync('tempCheckInData', learnedData);
// 跳转到打卡页
wx.navigateTo({
url: '/pages/check-in/check-in?from=learn&recordId=' + recordId
});
// 给原作者增加积分（+2分）
addPointsToUser(record.user_id, 2, 'content_learned', recordId);
// 埋点统计
trackEvent('learn_from_others', {
record_id: recordId,
original_user_id: record.user_id,
source: 'detail_page'
});
}
4. AI调整菜品用量
/**
* AI调整菜品用量（根据用户的营养计划）
*/
function adjustDishesForUser(originalDishes, userPlan) {
// 计算原始菜品的总营养
const originalNutrition = calculateTotalNutrition(originalDishes);
// 计算调整比例
const proteinRatio = userPlan.target_protein / originalNutrition.protein;
const energyRatio = userPlan.target_energy / originalNutrition.energy;
// 取平均比例
const avgRatio = (proteinRatio + energyRatio) / 2;
// 调整每个菜品的用量
return originalDishes.map(dish => {
const newAmount = Math.round(dish.amount * avgRatio);
return {
...dish,
amount: newAmount, // 调整后的用量
adjusted: true, // 标记为AI调整过的
original_amount: dish.amount, // 保留原始用量供参考
adjustment_ratio: avgRatio.toFixed(2) // 调整比例
};
});
}
📊 页面路径说明
| 页面 | 路径 | 参数 | 说明 |
|---|---|---|---|
| 打卡历史页 | /pages/check-in-history/history |
- | 显示用户的打卡记录列表 |
| 打卡详情页（自己的） | /pages/check-in-detail/detail |
?id={recordId}&type=self |
查看自己的打卡详情 |
| 打卡详情页（他人的） | /pages/check-in-detail/detail |
?id={recordId}&type=others |
查看他人的打卡详情 |
| 复制确认页 | /pages/copy-confirm/confirm |
?from={recordId} |
复制自己的打卡确认页 |
| 借鉴确认页 | /pages/learn-confirm/confirm |
?from={recordId} |
借鉴他人的打卡确认页 |
| 打卡页 | /pages/check-in/check-in |
?from=copy&recordId={id} 或 ?from=learn&recordId={id} |
填写打卡内容 |
🎁 积分规则
| 行为 | 积分 | 说明 |
|---|---|---|
| 一键复制打卡（自己的） | +5分 | 从历史记录快速复制 |
| 一键借鉴打卡（他人的） | +5分 | 学习他人的饮食方案 |
| 内容被借鉴（原作者） | +2分 | 自己的打卡被他人借鉴 |
📈 预期效果
| 指标 | 优化前 | 优化后 | 提升 |
|---|---|---|---|
| 详情页停留时长 | 15秒 | 30秒 | +100% |
| 从详情页发起的打卡 | 5% | 20% | +300% |
| 一键复制打卡使用率 | 25% | 40% | +60% |
| 打卡转化率 | 30% | 45% | +50% |
数据支持：
- 用户在详情页查看完整信息后，打卡意愿更强
- 详情页提供更多上下文，用户更愿意复制高质量打卡
- 减少操作步骤，提升转化率
💡 设计亮点
1. 场景区分 ⭐⭐⭐
- 智能判断是"自己的打卡"还是"他人的打卡"
- 不同场景显示不同的按钮文案和颜色
- 提供差异化的体验
2. 三重入口 ⭐⭐⭐
- 历史列表页：快速直接复制
- 详情页：查看后再复制
- 社区详情页：学习他人
3. AI智能调整 ⭐⭐⭐
- 借鉴他人打卡时，AI自动调整菜品用量
- 根据用户的营养计划个性化调整
- 降低借鉴门槛，提升使用率
4. 积分激励 ⭐⭐⭐
- 借鉴者获得+5分
- 原作者获得+2分
- 形成"创作-分享-学习"的正向循环
🚀 下一步优化
-
智能推荐复制
- 在详情页根据历史数据推荐"您可能也想复制这几条"
- 提供相似打卡记录推荐
-
批量复制
- 支持一次性复制一天的三餐
- 生成"一日食谱计划"
-
收藏夹功能
- 收藏优质打卡记录
- 从收藏夹快速复制
-
打卡模板
- 将高分打卡保存为模板
- 模板库供用户选择
文档版本：v2.2.1
更新日期：2025-11-20
产品名称：慢生活智能营养专家小程序
让每个打卡详情页都成为下一次打卡的起点！ ⚡🎬