移动应用

每日任务应用设计

每日任务应用设计将日常目标转化为三屏移动端任务旅程,包含示例 XP、分类卡片和任务详情。

OpenDesign设计与制作
官方
Level 游戏化日常任务移动应用,以三个不同屏幕呈现3 界面
深色手机框中的 Level 应用欢迎屏,采用奶油色衬线字体、橙色标题强调、原型标签,以及底部的下一步提示。 Level 日常任务屏,包含深色示例 XP 进度面板、六张柔和色彩的分类卡片,以及五个底部导航位置,其中包括中央加号控件。
任务应用欢迎屏 · 日常任务卡片

每日任务应用使用场景

  • 日常习惯规划将多样的日常活动整理到一个便于快速浏览的任务列表中。
  • 游戏化移动端流程将进度、奖励和分类转化为紧凑的手机屏幕。
  • 任务详情设计将一项活动拆分为按顺序排列且带有奖励的微任务。
  • 原型叙事展示一个想法如何从介绍推进到行动。

任务屏幕设计亮点

  • 三屏旅程从概念介绍推进到任务列表和任务详情。
  • 基于分类的卡片将 Body、Read、Listen、Nourish、Mind 和 Watch 分组展示。
  • 可见的进度模型将 Level 14 与示例 XP 和任务数量结合呈现。
  • 微任务拆解将力量训练转化为四个分别带有奖励的步骤。

每日任务应用设计

每日任务应用设计将 Level 呈现为一个移动端概念,用于把熟悉的自我提升活动转化为日常任务记录。创作出的标题“Daily quests for becoming a better human.”先确立了这一前提,随后界面引出下一步行动:“NEXT — TODAY'S QUESTS”。

欢迎屏使用深色表面、大字号编辑风格衬线字体、对“becoming”进行橙色强调,以及紧凑的等宽风格原型标签。这种构图让这一想法更像一段介绍,而不是操作型仪表盘。其取舍是有意为之的:富有表现力的标题占据了相当大的垂直空间,因此在过渡之前,只有简短的产品说明和下一步提示保持可见。

可见文案描述了赚取 XP 以及看着各个类别升级,但所提供的 HTML 是一个静态三屏设计。它呈现的是拟议的信息模型和完成状态,而不是实现任务选择、奖励更新或主题切换。数值为示例内容,不是已存储进度或健康结果的证据。

深色欢迎屏通过编辑风格的标题和下一步提示介绍日常任务。
深色欢迎屏通过编辑风格的标题和下一步提示介绍日常任务。

日常任务规划与奖励浏览

主页按照便于快速浏览的方式组织。“Good morning, Sam”位于 Level 14 进度面板上方,面板显示“1648 / 2480”,其后是“8 quests waiting · earn 430 XP today”。这些数值被呈现为示例数据,但它们的排列解释了预期优先级:先定位,其次查看进度,最后查看可执行工作。

随后,六张彩色卡片将一天划分为 Body、Read、Listen、Nourish、Mind 和 Watch。每张卡片结合一个单字母标记、分类名称、具体活动和 XP 徽标。例如,Body 将“20-min strength: pushups & planks”与“+90”配对,而 Watch 将“The Bear · S3 E4”与“+30”配对。分类网格让不同类型的活动可以相互比较,同时不假装它们属于同一种任务。

两列卡片布局支持快速选择和视觉多样性,而柔和色彩的填充用于区分分类。其取舍在于,较长标签会在固定卡片内换行,因此描述需要保持简洁。底部导航保持 Today 处于激活状态,并为 Library、中央添加控件、Stats 和 Profile 预留相邻目的地。

先看进度,再看活动

Level 面板将示例进度和每日 XP 机会置于任务卡片之前,为列表提供了清晰可见的激励框架。

混合活动类型

运动、阅读、收听、饮食、冥想和电视观看被置于同一套卡片系统中,展示了这一概念如何将个人日常视为一个整体。

紧凑的奖励信号

黑色胶囊形 XP 标签位于每张卡片的下边缘,在保持奖励位置一致的同时,允许活动文案换行。

从任务列表到微任务

三个屏幕构成了明确的顺序:深色欢迎屏确立概念,浅色主页呈现当天内容,详情屏展开一个选中的任务。过渡同时改变了主题和信息密度。主页视图支持对六个分类进行比较;详情视图则聚焦于一项力量活动及其完成结构。

详情屏将自身标识为“QUEST · 03 / 08”,并将活动标记为“BODY · STRENGTH”。其珊瑚色面板显示“+90 XP”、标题“20 minutes that change Wednesday.”,以及一段提到俯卧撑、平板支撑、一个自由项和无需器材的简短描述。重复出现的“11 times this month”是可见的示例历史,不是已测量结果的证据。

在“TODAY'S MICRO-TASKS”下,屏幕列出“Roll out the mat”、“3 × 12 pushups”、“3 × 45s plank”和“Wildcard: lunges”。第一行以勾选并带删除线的状态显示,其余各行使用空心圆。+5、+30、+30 和 +25 的 XP 数值位于右侧边缘。这种状态区分让读者无需离开任务详情,就能理解部分完成状态。

较大的“Start quest”按钮位于清单之后,形成明确的操作终点。对于拟议的交互流程而言,这种排序很有用,但该截图并不能证明按钮、清单或升级时刻已连接到持久化存储。它确实展示了预期的状态语言,以及任务奖励与更小任务奖励之间的关系。

力量训练任务详情屏展示了一个已完成的微任务、三个剩余任务、XP 数值和一个 Start quest 操作。
力量训练任务详情屏展示了一个已完成的微任务、三个剩余任务、XP 数值和一个 Start quest 操作。
三个静态屏幕及其可见提示
屏幕可见提示实现边界
欢迎介绍下方的下一步标签源文件没有点击处理程序。
今日八项任务、430-XP 标签下方的六张分类卡片所显示的卡片奖励合计为 340 XP;示例数据未对差额进行核对。
任务详情一个已勾选的微任务和三行剩余任务完成状态被展示出来,但不会由脚本存储或更新。

可见范围与能力边界

此设计示例 是一个由 OpenDesign 创作的三屏移动应用设计示例。它适合用于研究构图、示例数据层级、分类分组、屏幕过渡和完成状态标注。其移动端框架包含可见的 iPhone 状态栏和底部导航,但所提供的证据无法证明渲染屏幕之外的平台行为。

该设计提出了点击任务查看详情、完成任务、在第六个任务之后触发升级时刻,以及切换主题和布局等交互。这些描述解释的是预期概念,而不是经过验证的运行时能力。因此,在生产实现中,应使用产品数据和明确的状态规则替换 XP 总数、Level 14 状态、活动历史和日常任务数量。

如何在 OpenDesign 中创建每日任务应用设计

  1. 下载并安装 OpenDesign

    下载桌面客户端并完成安装与初始配置,然后为您的设计创建一个项目。

    下载 OpenDesign
  2. 设定移动端叙事

    创建三个不同的手机屏幕:深色的欢迎介绍页、浅色的日常任务列表页,以及聚焦任务详情的视图。让第一个屏幕保持编辑风格且简洁,再由后续屏幕承载操作层面的详细信息。

    建议提示词

    创建一个用于日常任务的三屏移动应用设计:深色欢迎屏,使用编辑风格的衬线标题;浅色主页,在六张分类卡片上方显示 Level 14 和示例 XP 进度,六个分类分别为 Body、Read、Listen、Nourish、Mind 和 Watch;以及一个Body 分类下的力量训练任务详情屏,包含微任务和 XP 数值。将所有数据视为示例数据;不要暗示存在后端持久化、健康功效或实时集成。

  3. 完善奖励系统

    使用所提供的关系作为设计参考:主页显示示例每日 XP 和分类奖励,而详情页显示一个任务总奖励及更小的任务奖励。检查活动名称换行时标签是否仍然清晰可读,并确保奖励数值不会遮挡活动名称。

  4. 检查状态与边界

    如力量训练详情屏所示,用一个已勾选且带删除线的任务表示部分完成,用空控件表示剩余任务。将拟议的升级、主题切换和任务完成行为,与可见的构图分开审查,因为此设计示例 未验证存储、服务或运行时连接。

  5. 导出并获取分享链接

    导出完成的设计稿,然后在 OpenDesign 中使用「Share」功能获取分享链接。在单独的浏览器窗口中打开链接,确认目标版本及其资源均可正常访问后,再将链接发送给他人。