桌面应用

旅行规划仪表板设计

在 Halcyon Cove 规划六站一日行程,将已保存地点、地图位置与步行时间相互关联。

OpenDesign设计与制作
官方
单日城市规划3 界面
旅行规划仪表板设计:完整城市地图、地点库与当日计划
评测示例 · Claude Opus 5截图 1 / 3

LLM Arena 2026年9月

案例说明
模型
Claude Opus 5
设计任务
可拖放的城市一日游规划器
输出结果
桌面应用

适用场景

  • 行程规划围绕地点、营业时间与游览时长来安排一日行程。
  • 基于地图的仪表板将位置选择与可见的停靠点序列相关联。
  • 旅行产品原型在接入实时旅行服务之前测试规划交互。

核心亮点

  • 三个关联视图地点库、城市地图与行程三者共享每一次选择操作。
  • 六个具名时间段从 Breakfast 到 Evening 的命名结构为全天行程提供了清晰可辨的框架。
  • 上下文地点抽屉无需离开规划界面即可查看营业时间并移动停靠点。
  • 可见的路线通行耗时步行时间估算揭示相邻停靠点之间的通行成本。

将地点与时间相连接的旅行仪表板

Daybreak Atlas 将 Halcyon Cove 的一个虚构日程分解为三个关联视图。已保存地点位于左侧,插画风格城市地图居中,The Day 时间轴延伸至右侧。地图回答停靠点属于哪里,时间轴回答何时前往。保持二者同时可见,便于比较选择某个地点所带来的影响。

地点库不仅仅是名称列表。Gullwing Bakery 的营业时间窗口为 6:30am–11am,加入路线后会被标记为 In Breakfast。同一地点随即出现在 Breakfast 时间段中,附带游览时长以及 View 和 Remove 操作控件。这种重复的标识是浏览与规划之间的纽带:卡片改变了角色,但名称不变。

完整规划工作区将已保存地点库、插画地图与当日时间轴相互关联。所捕获的 Hidden Gardens 路线填满了全部六个时间段。
完整规划工作区将已保存地点库、插画地图与当日时间轴相互关联。所捕获的 Hidden Gardens 路线填满了全部六个时间段。

分别呈现营业时间、游览时长与通行时间

这款旅行规划仪表板设计最具价值的部分在于其对时间的处理方式。营业时间窗口、游览时长与步行估算描述的是不同类型的限制条件,不应被压缩为一个模糊的时长。本示例将每项时间信息放置在其所服务的决策点附近。

所捕获路线中展示的三类时间信息
时间信号显示位置读者可据此判断
6:30am–11amGullwing Bakery 卡片与地点抽屉场所在预定游览时间段内是否营业。
35 min visitBreakfast 时间段中的面包店在该停靠点应预留多少时间,与前往途中的时间分开计算。
~10 min walkVerdant Steps Garden 之前前往下一个停靠点需要额外增加多少过渡时间。
62 min walkingHidden Gardens 的 The Day 摘要通行时间在这条六站路线中如何累积。

从推荐路线到精心规划的行程

Surprise Me 功能提供一条起始路线,而非要求用户自行填满六个空时间段。在所捕获的 Hidden Gardens 状态中,路线从 Gullwing Bakery 依次经过花园、午餐地点和阅览室。这为用户提供了一个具体可编辑的起点,但它仍然只是一个建议,并不代表这是经过优化或地理位置准确的路线。

选中 Gullwing Bakery 后将展开其完整地点抽屉。现有城市地图与路线在抽屉后方保持可见,而时间段控件则提供了拖放操作之外的明确替代方式。
选中 Gullwing Bakery 后将展开其完整地点抽屉。现有城市地图与路线在抽屉后方保持可见,而时间段控件则提供了拖放操作之外的明确替代方式。

一个地点,多个实用入口

已保存地点卡片和地图图钉均可打开详情。抽屉中整合了描述、营业时间、典型游览时长与最佳匹配时间段。因此,从地图出发的用户与浏览地点库的用户能够做出同样的排期决策。

具名目的地让移动操作更具可预期性

抽屉显示当前分配的时间段,并以按钮形式提供 Breakfast、Morning、Lunch、Afternoon、Sunset 和 Evening 选项。这使地点移动成为一个可见操作,而非需要自行探索的手势。正式版本应在确认操作前,对替换已占用时间段的情况同样予以明确提示。

  1. 从完整示例开始

    选择一个 Surprise Me 主题,并结合地图阅读其停靠点序列。检查所提出的主题是否真正反映在实际地点分类中,而不仅仅体现在标签名称上。

  2. 移动前先检查

    打开一个地点,将其营业时间窗口与可用时间段进行对比,然后使用具名时间段将其移动。观察时间轴和路线中由此产生的变化。

  3. 从整体角度回顾全天行程

    在使用 Lock the Day 之前,将已填充时间段的数量与总步行时间进行对比。这比将完成按钮视为可行行程的证明更能提供有意义的最终复核。

这款旅行规划原型展示了什么

Halcyon Cove 及其场所和步行估算均为演示内容。该作品是一个本地前端原型,而非实时地图、预订服务或多用户规划工具。其原有的本地存储功能在隔离的 Show Preview 环境中不可用,因此不应依赖该环境中保存的进度。Claude Opus 5 是随所有者导出文件附带的标签,并非经独立验证的基准测试结果。

如何在 OpenDesign 中创建旅行规划仪表板设计

  1. 下载并安装 OpenDesign

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

    下载 OpenDesign
  2. 描述三个相互关联的视图

    向 OpenDesign 提供一座虚构小城,并说明地点在库中、地图上及时间轴中各自的呈现方式。在添加装饰细节之前,先定义地点的共享标识。以下提示词是受本案例启发而创作的新设计练习,并非其原始生成提示。

    建议提示词

    为一座虚构的海滨城市创建旅行规划仪表板设计。使用温暖的纸张色背景,左侧为简洁的地点库,中央为插画风格地图,右侧为当日时间轴。提供六个具名时间段:早餐、上午、午餐、下午、傍晚和晚上。每个示例地点需包含营业时间窗口、典型游览时长及分类。点击地图图钉或地点库卡片时,应打开同一个地点抽屉。允许用户通过明确的时间段按钮以及拖放操作来分配地点。显示相邻停靠点之间的预计步行时间,与游览时长分开显示,并在当日摘要中显示合计时间。包含一个推荐路线初始状态和一个最终回顾状态。将地点和路线估算标注为虚构演示数据;不得暗示提供实时地图、预订、协作编辑或云端持久化功能。

  3. 追踪一项变更在仪表板中的同步更新

    让 OpenDesign 将一个地点移至另一个时间段,并将该变更同步反映到卡片标签、已选地图图钉和时间轴上。对比变更前后的状态。确保各处的地点名称和时长保持一致,并说明目标时间段已有停靠点时应如何处理。

  4. 测试一条不符合条件的路线

    使用一个在其分配时间段开始前已关闭的示例场所,然后检查设计如何解释这种不匹配。在较小屏幕上,确定哪个面板优先显示,并保证另外两个面板仍可访问,而不是将三列桌面布局硬塞进手机视口。

  5. 导出并获取分享链接

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

OpenDesign 桌面客户端

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

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

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

支持 macOS 与 Windows