SOTA Sync
全部文章
产品与应用2026-04-05

待办App产品拆解:RPG化的待办系统能走多远

PromptLLM 拆解一个任务/待办 App 的产品设计:RPG 游戏化框架(任务/角色/天赋/成就)、两页书交互、每日组合乘数奖励。问题是:用户真的需要这些吗?

PromptLLM 对一个任务/待办 App 做的产品拆解。

#核心游戏化框架

任务系统 :每日任务 + 长期任务,可设奖励(虚拟货币、经验值、收藏品)。奖励分 Common/Rare/Epic/Legendary 稀有度,通过抽卡/开箱/购买获得。任务完成后有迷你小游戏作为"检验门"。

角色系统 :RPG 属性——Strength、Wisdom、Charisma、Endurance、Agility。完成任务获得属性点,属性影响任务类型开放。天赋树解锁更高级能力。

经济系统 :虚拟货币(Gold),通过任务和奖励获得。每日/每周商店刷新,可购买收藏品和特殊物品。

经验值与等级 :XP 决定等级,解锁新内容和功能。

成就系统 :进度成就、类别精通、连续活跃天数、挑战成就。成就展示在中世纪大厅风格的 trophy room。

统计分析 :GitHub 风格的每周热力图、罗盘风格的类别分布饼图、难度分解柱状图、连续天数折线图。

#界面结构

主视图:两页书展开布局。左页 = 当前任务(可按类别筛选),右页 = 任务日志(已完成历史,作为日记条目)。导航标签:任务、角色卡、天赋、成就、奖励、设置。

任务创建:羊皮纸背景的"任务契约"模态框,羽毛笔光标,墨水效果,"签署并接受"按钮带签名装饰。

#交互动效

  • 悬停发光 + 点击下沉
  • 任务卡片悬停时浮起带阴影
  • 翻页过渡效果
  • XP 数字逐位跳动
  • 属性增长金色闪烁
  • 背景漂浮尘埃粒子
  • 蜡烛闪烁效果(微妙亮度变化)
  • 公告打字机文字效果

#技术栈

React + 函数组件,Context API 状态管理,CSS-in-JS,Framer Motion 动画,自定义 hooks(useQuests、useCharacter、useRewards)。

#响应式

桌面端全尺寸书页,平板单页滑动,手机简化卡片 + 底部导航。