移动应用

海洋生物图鉴 App 设计

Abyssal Log 将海洋标本收藏与潜水任务连接起来。每条未知记录都会说明揭示它所需的任务和剩余进度。

OpenDesign设计与制作
官方
深海探索与收藏4 界面
海洋生物图鉴 App 设计:当前标本与发现卡片 海洋生物图鉴 App 设计:潜水任务与发现条件
当前标本与发现卡片 · 潜水任务与发现条件

LLM Arena 2026年9月

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

适用方向

  • 标本收藏应用将可视化目录与实用的发现记录连接起来。
  • 基于任务的界面展示某个项目可用前仍需完成的工作。
  • 移动端学习产品将发现数据与较长的参考信息分开。

核心亮点

  • 精选标本一张图像引导用户查看稀有度、发现深度和观察时间。
  • 两种浏览方式通过海洋区域和稀有度整理同一套收藏。
  • 可量化的潜水任务定点停留、巡航和采样让每项任务的进度保持具体可见。
  • 明确的解锁条件未知记录会标明任务以及仍需完成的工作。

一款解释每次发现的海洋生物图鉴应用

Abyssal Log 从一件精选标本开始,而不是从密集的小卡片列表开始。在截图所示状态中,Atolla 水母名称下方依次列出学名、稀有度、发现深度和首次观察时间。View record 和 Dive 位于这些信息下方。一个操作可以深入查看当前记录;另一个操作则引导用户完成扩充收藏所需的工作。

页眉显示 11 / 18 已记录,下面的收藏同时包含已发现的生物和 Unknown 条目。因此,页面会在收藏完成前展示其整体规模。未知卡片并非只是装饰性的剪影:它们会标明任务和剩余条件,使未完成的记录具备实际作用。

完整的特色 Atolla 水母页面展示了标本图像、稀有度、发现深度、观察时间,以及记录和潜水操作。
完整的特色 Atolla 水母页面展示了标本图像、稀有度、发现深度、观察时间,以及记录和潜水操作。

将发现数据与参考信息分开

特色卡片和完整记录拥有相同的身份信息,但回答的是不同问题。卡片概述这次发现;记录则补充载具标签、深度范围、尺寸和描述。这种区分对于野外指南设计尤其有用,因为不应将某次单独观察与物种的一般属性混为一谈。

Atolla 水母记录中各字段的不同作用
字段截图中的示例在界面中的作用
发现深度1,560 m描述与此记录关联的样本目击信息。
深度范围1,000–4,000 m提供更宽泛的参考范围,而不是这次发现的深度。
首次观察11 Aug 2025 · 21:33将演示记录置于具体时间中。
载具ROV Ventana为样本目击补充背景,而不是改变标本身份。
尺寸伞部约 15 cm提供另一类独立的参考信息,并明确标出单位。

将未知标本转化为可执行的任务

Expeditions 页面包含七项任务,并使用不同的进度单位。Twilight zone station hold 已达到 3 / 3 次定点停留,并提供 Complete and unlock。Large cephalopod sonar trace 已达到 5 / 6 次巡航,并提供 Log a dive · +1。这些操作之间的差异让用户在点击前就能看见下一步。

这些单位很重要。三次定点停留、六次巡航和五次剖面观测并不是可互换的进度点。通过命名任务并保留其单位,界面赋予进度条可理解的含义。完成一次测量与解锁一条记录也是两个独立状态:就绪的任务仍会要求访客领取这项发现。

完整的任务页面对比了条件已满足的任务与仍在进行中的任务,同时保留每项任务的单位及其解锁的记录。
完整的任务页面对比了条件已满足的任务与仍在进行中的任务,同时保留每项任务的单位及其解锁的记录。

将锁定卡片与其条件关联起来

Unknown · 004 标明了 Twilight zone station hold,并说明 0 holds to go。随后,任务页面提供 Complete and unlock。关联这些标签有助于访客理解:即使测量已经完成,卡片仍可能处于未知状态,因为最终的解锁操作尚未执行。

为不同状态使用不同操作

Log a dive · +1 表达渐进式进度;Complete and unlock 表达进入收藏的状态转换。保持这些标签的区别,比在每张卡片上显示同一个按钮、让访客自行摸索其作用更有用。

为浏览提供独立控件

海洋区域和稀有度筛选器属于标本收藏,而任务进度属于 Expeditions。这样可以将查找现有记录与努力获得新记录区分开来。在添加搜索、空结果或更大的任务列表时,适配版本也应保留这种区分。

这款海洋应用原型展示了什么

Abyssal Log 是一款本地收藏与任务原型。源内容明确将观察时间戳和载具标识为演示记录。其生物学信息、稀有度等级和深度数值并非经过独立验证的科学参考资料。独立预览不包含实时远征信息流或云账户。所提供的图像会保留用于本地审阅,但在公开使用前,仍需单独核查再分发权限。

如何在 OpenDesign 中创建海洋生物图鉴 App 设计

  1. 下载并安装 OpenDesign

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

    下载 OpenDesign
  2. 定义标本与任务的关系

    从一个小型目录和一条清晰的未知记录揭示规则开始。将以下新设计提示作为实践起点,而不是对原作者创作过程的断言。

    建议提示词

    创建一款海洋生物图鉴 App 设计,包含十八个示例标本,其中十一个初始状态为已记录。使用深色移动端界面,配以青绿色强调色和一张大型精选标本卡片。显示常用名、学名、稀有度、发现深度和首次观察时间,并提供查看记录和潜水操作。下方提供区域和稀有度筛选器,同时保留未知记录的可见性。每条未知记录都应标明解锁它所需的任务和剩余条件。远征页面需要使用不同的进度单位,例如定点停留、巡航和采样。加入一个条件已满足但记录尚未领取的任务。对于这种状态,使用完成和解锁;对于未完成的任务,使用记录一次潜水。标本详情视图应将发现深度与参考深度范围分开。将观察数据和任务进度标注为虚构演示数据,并注明没有实时科学服务或云账户。

  3. 检查就绪、未完成和已领取状态

    要求 OpenDesign 为一个任务展示这三种状态。随着进度增加,显示的单位应保持一致。领取已完成的任务后,应只揭示一次预期记录,并更新已记录数量,同时不重置其他无关的发现。

  4. 检查手机上的记录可读性

    使用一个较长的学名和一个三位数的进度目标。确保标签、单位和操作清晰可读,不被底部导航遮挡。让标本图像适配其框架而不裁切主体,并允许较长的详情记录滚动查看。

  5. 导出并获取分享链接

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

OpenDesign 桌面客户端

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

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

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

支持 macOS 与 Windows