LLM Arena 2026年9月
案例说明- 模型
- Claude Fable 5.1
- 设计任务
- 创建 Second Spring，这是一种可通过指针培育植物的互动式森林修复体验。
- 输出结果
- 网站
适用场景
- 自然保护活动将环境故事与具体的参与方式相连接。
- 互动式编辑内容先通过操作引出主题，再进行说明。
- 非营利组织原型在不连接支付系统的情况下探索支持和志愿参与方式。
主要亮点
- 会淡去的生长效果随指针生长的苔藓使开场场景具有响应性和临时性。
- 金额与行动的关联三个示例金额分别对应不同的修复活动。
- 彼此独立的参与路径支持对话框和野外活动日表单提供不同的后续步骤。
探索自然保护网站
1 / 4
围绕倒木构建的互动式自然保护网站
Second Spring 以一根倒下的原木开场，而不是捐款表单。一根树枝从大号衬线体标题下方斜穿屏幕，页面外缘则由叶片环绕。在木头上移动指针会长出一片临时苔藓。在截图中的状态中，界面显示苔藓覆盖率为 20%；该数字描述的是屏幕效果，而不是已恢复的栖息地。
这一构图让每个层次各司其职。浅色的中央区域确保标题清晰易读，带纹理的树皮标示出交互表面，窄小的控件行则集中放置旋转、降雨、减少动态效果、重置和捕捉操作。访客无需先研究控件，也能理解基本的互动邀请。
值得触碰的表面
原木是页面上体积最大、最有触感的视觉主体。其斜向位置引导视线横穿屏幕，并为指针提供一个容易识别的目标。将效果限制在木头上，可使交互与主题建立联系；如果动画在各处跟随光标，所讲述的故事就不会如此具体。
无需记分板的反馈
苔藓覆盖率以克制的文字形式显示在场景控件旁。它确认交互确实产生了效果，同时不会与活动标题争夺注意力。由于生长效果随后会淡去，若将该百分比视为累计成就，就会歪曲这项体验。静止状态标签有助于区分未进行操作与场景失效。
掌控场景氛围
旋转和降雨设有独立控件，因此运动与天气不必成为不可分割的单一效果。捕捉主视觉画面时暂停了旋转，但降雨仍在继续。这对于探索型场景很有用：访客可以查看某个区域，而不必失去使其独具特色的全部氛围。
将支持金额与具体活动相连接
支持部分将三个价格转换为三种不同类型的工作。每一栏都按照相同顺序呈现：金额、活动、简短说明和操作。这种重复结构让各个选项便于比较，而活动名称则可避免这些数字沦为随意划分的价格档位。
这些单位有意设置为不同类型，因此页面并未建立单价与影响之间的比较关系。真实活动需要证据来支持这些关联。在此，每个按钮都显示 Support (simulated)，本地确认信息也会再次说明没有发生任何支付。该设计适合在接入任何交易系统之前，测试人们如何理解这些选项。
| 金额 | 所述活动 | 设计含义 |
|---|---|---|
| £15 | 一平方米的枯木栖息地 | 基于面积的示例为最低金额选项提供了具体单位。 |
| £35 | 五株本地树苗 | 基于数量的示例表明这是一项不同的活动，而不只是增加栖息地面积。 |
| £75 | 一小时的野外修复工作 | 基于时间的示例使劳动力与实体材料一同清晰呈现。 |
从林地故事到志愿者表单
主视觉之后，四条观察内容分别介绍土壤、水、真菌和林冠。它们以连贯的图文阅读顺序呈现，而不是通过培育苔藓解锁的奖励。页面明确说明，阅读内容并不取决于交互进度。因此，即使有人跳过场景，也能看到相同的说明和参与选项。
先解释对象
第一条观察将枯木与林地联系起来。随后，水、真菌和林冠围绕同一对象拓展主题。这让阅读内容始终与访客已经看过的原木相关联，而不是突然切换到一段无关的活动陈述。
提供捐款以外的参与方式
Give a morning 位于支持选项之后，以独立的志愿者表单呈现。表单要求填写姓名、电子邮箱并选择野外活动日。日期选择器列出枯木调查、树苗种植和苔藓监测步行活动，因此选项描述的是具体活动，而不是一个未加说明的日期。
明确展示表单边界
模拟报名提示位于字段上方，用户可以在输入信息之前阅读。这比隐藏在页脚中的免责声明更为重要。对于真实服务，同一区域还需要如实说明信息将发送到何处，以及接下来会发生什么。
这款自然保护原型展示了什么
本地预览展示了渲染后的互动场景、可配置的动态效果、图文内容以及模拟参与界面。£15 支持对话框已在本地打开并确认。没有因此发生任何支付、电子邮件发送或修复工作。野外活动日名称和支持金额均为虚构示例；场景中的苔藓覆盖率不应被报告为环境影响。
如何在 OpenDesign 中创建互动式自然保护网站设计
将一种交互与活动主题相连接
从一个承载故事的物体入手。在本例中，倒木将开场交互与后续的林地说明联系起来。在要求添加次要装饰效果之前，先明确静止状态、指针响应以及恢复静止的方式。
建议提示词为一个名为 Second Spring 的虚构项目创建互动式自然保护网站设计。采用浅绿色的杂志式版面，边缘饰以叶片，中央放置衬线体标题，并设置一根斜向倒下的原木。指针在木头上移动时，应显示随后会淡出的临时苔藓。在场景下方用紧凑的一行放置旋转、降雨、减少动态效果、重置和捕捉控件。接着提供关于土壤、水、真菌和林冠的四条简短观察，然后用三个插图式支持选项展示标注清楚的虚构金额。另设一份志愿者表单，包含姓名、电子邮箱和野外活动日选择器。所有支持和报名响应都应保留在本地，并明确显示为模拟操作。不得暗示苔藓覆盖率用于衡量已恢复的栖息地，也不得暗示支付功能或电子邮件发送服务已连接。在无动态效果的情况下，仍须保持文字易读、控件可用。
在不启用效果的情况下检查阅读路径
禁用动态效果，并按照从标题到支持选项和志愿参与的顺序浏览页面。即使不生长任何苔藓，重要说明也应保持可用。检查窄屏下的内容顺序、字段标签和捐助选项对应的单位；即使跳过视觉场景，整个体验仍应合理易懂。
使每项确认信息与对应操作相称
分别优化支持对话框和志愿者响应。模拟确认应只确认本地操作，不应承诺提供收据、完成预约或开展修复工作。测试重置和重复交互，确保第二次访问不会继承第一次访问中可能引起误解的反馈。
导出并获取分享链接
导出完成的设计稿，然后在 OpenDesign 中使用「Share」功能获取分享链接。在单独的浏览器窗口中打开链接，确认目标版本及其资源均可正常访问后，再将链接发送给他人。
