移动应用

深海探索图鉴 App 设计

Abyssal Atlas 将标本收藏与潜航队列相连。了解锁定记录、两行筛选器和进度计数如何说明下一步要探索什么。

OpenDesign设计与制作
官方
深海探索与收藏4 界面
深海探索图鉴 App 设计:当前标本与发现卡片 深海探索图鉴 App 设计:包含探险队列的潜航面板
当前标本与发现卡片 · 包含探险队列的潜航面板

LLM Arena 2026年9月

案例说明
模型
Grok 4.6
设计任务
深海生物卡片收藏应用
输出结果
移动应用

适用场景

  • 收藏应用设计将已发现和未发现的记录集中在一个可浏览的收藏中。
  • 探索游戏界面将任务与其能够揭示的条目关联起来。
  • 移动端野外指南将标本概览与详细记录分开。

核心亮点

  • 两个独立筛选器深度分区和稀有度提供了进入档案库的不同方式。
  • 可见的锁定记录未知卡片会显示揭示其内容所需的探险任务。
  • 两种进度指标档案完成度与任务队列分别计数。
  • 紧凑的标本详情详情视图增加了描述和更精确的发现时间。

把图鉴浏览与探索任务连起来

Abyssal Atlas 使用 Atlas 和 Dive 两个标签页,将收藏与扩充收藏的操作连接起来。Atlas 显示当前标本和可滚动浏览的档案。Dive 列出与未发现记录相关联的有名称的探险任务。这种结构既为用户提供了当下可浏览的内容,也给出了前往另一页面的理由。

初始页眉显示“7 of 13 specimens archived”和“54% logged”。这些内容描述的是整个档案的进度。SPECIMEN 02 / 13 描述的则是当前显示的记录。保持这些标签可见十分重要:用户正在查看第二个条目,但已经收集了七个标本。

让未发现记录也具有浏览价值

锁定记录不会从档案中消失,而是仍然作为档案的一部分。未知卡片保留其编号位置,并带有诸如 Twilight Trawl 这样的探险任务名称。这赋予空缺位置实用意义:它既不会过早揭示标本,又能告诉用户下一步可以尝试什么。

收藏页面在双列照片网格上方显示深度分区与稀有度胶囊选项行。卡片 01 至 04 显示“ARCHIVED”状态;物种名称和稀有度徽章直接显示在卡片缩略图上。
收藏页面在双列照片网格上方显示深度分区与稀有度胶囊选项行。卡片 01 至 04 显示“ARCHIVED”状态;物种名称和稀有度徽章直接显示在卡片缩略图上。

保持收藏规模稳定

已归档条目和锁定条目共同构成同一个收藏。读者无需前往单独的成就页面,即可了解整体规模。由于锁定卡片使用任务信息而非物种名称,它们既传达了边界,也指出了前进路径。

将栖息环境与稀有度分开

两行胶囊选项分别按深度分区和稀有度进行筛选。它们是针对同一收藏提出的不同问题,而不是相互竞争的导航栏目。缩写标签能够节省手机屏幕空间;改编为野外指南时,应向尚不了解这些术语的读者解释 Meso 和 Bathy 等词。

区分浏览位置与进度

选中的标本编号、已归档数量和百分比应保持一致,但不能相互替代。筛选可见卡片又是另一项操作。在正式产品界面中,当用户缩小列表范围时,不应悄然改变全局进度指示器的含义。

在标本记录与潜航队列之间切换

吸血鬼乌贼概览显示其俗名和学名、稀有度、深度及首次发现日期。打开记录后,会增加简短描述、深度分区标签,以及与日期并列的时间。因此,详情视图提供了新增信息,而不是仅仅放大同一张卡片。

Dive Board 初始包含六项探险任务,并单独显示“0 / 6”任务队列计数。每个条目都会在 Log this expedition 操作之前列出潜航名称、深度分区和目标。档案计数仍显示在上方。这两个总数让用户既能了解自己拥有的收藏,也能了解可以逐项完成的队列。

完整的吸血鬼乌贼详情记录,显示档案图片、青绿色拉丁学名、包含“Rarity / Depth / Sea zone”的三列元数据行、生物学描述,以及带时间戳的首次发现信息行。
完整的吸血鬼乌贼详情记录,显示档案图片、青绿色拉丁学名、包含“Rarity / Depth / Sea zone”的三列元数据行、生物学描述,以及带时间戳的首次发现信息行。
让每个计数始终对应其各自的对象
标签记录值计数对象
已归档标本7 of 13档案中已经可见的记录。
记录进度54%以四舍五入方式表示的同一档案完成度。
当前标本02 / 13所选标本的位置,而非完成率。
任务队列0 / 6当前显示的探险周期中已完成的项目数。

使用示例记录的本地探索原型

这是一个在本地运行的收藏与解锁演示,并非实时探险服务。深度、目击日期、稀有度等级和生物学描述均为源内容,不是经过独立验证的科学参考数据。此独立预览不提供账户或云同步功能。源图像为本地审查而保留;在公开再分发之前,需要另行核查相关许可。

如何在 OpenDesign 中创建深海探索图鉴 App 设计

  1. 下载并安装 OpenDesign

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

    下载 OpenDesign
  2. 定义档案及其解锁循环

    为 OpenDesign 提供一组固定的示例收藏,并明确每项任务与其锁定记录之间的关系。以下提示词描述了一个受本案例启发的新设计练习。

    建议提示词

    为一个虚构的深海档案库创建深海探索图鉴 App 设计,其中包含十三个标本,初始已发现七个。采用带青绿色强调色的深色移动端界面,并设置两个底部标签页:Atlas 和 Dive。Atlas 显示当前标本卡片、俗名与学名、稀有度、深度和首次发现日期,下方接收藏网格。锁定条目仍需可见,并保留固定编号以及可将其解锁的探险任务名称。分别添加深度分区和稀有度筛选行。详情页应增加描述和精确的发现时间,而不是只重复卡片内容。Dive 显示六项有名称的探险任务,每项包含目标、状态和在本地记录的 Log 操作。将档案进度、任务完成度和当前记录位置相互区分。使用明确标注的示例记录,不要暗示存在真实潜航、科学验证或云账户。

  3. 追踪一项任务进入收藏的过程

    让 OpenDesign 展示一项探险任务的就绪、进行中和已完成状态,然后显示其目标记录。检查档案计数是否只变化一次、同一张卡片是否保持原有位置,以及重复执行已完成的操作是否无法虚增进度。

  4. 明确筛选标签与空结果状态

    同时选择一个深度分区和一个稀有度。要求在没有匹配记录时显示明确的空状态,并提供清除筛选条件的方法。将档案总数与筛选结果数分开,并为缩写的科学术语提供易于理解的说明。

  5. 导出并获取分享链接

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

OpenDesign 桌面客户端

一套设计系统,让每一次创作都保持品牌一致

在完整的 Vibe Design Workspace 中,用同一套品牌规则生成网页、PPT、可交互原型、数据看板、图像与 HTML 视频。连接本地 Codex、Claude Code、Cursor 等编程助手,即可免费创作。

  • 覆盖网页、PPT、原型、数据看板、图像与视频
  • 140+ 设计系统,以及完整模板与技能库
  • 连接本地 Codex 与 21+ 款编程助手 · 免费使用
免费下载

支持 macOS 与 Windows