如需查看图示、视觉示例与完整排版，请打开上方的学习单。
AI 作品集原型冲刺
九年级设计 • UX + HTML • 制作 / 测试 / 迭代
任务：让现有 HTML 作品集形成清晰的用户旅程，用真实用户测试，再指导 AI 修复一个观察到的用户体验问题。
你 = 用户体验设计师 / 项目经理；AI = 网页开发者
作品集不只是页面的集合，更是访客尝试完成的一系列操作。
| 1. 进入：这是谁？ | 2. 寻找作品：项目在哪里？ | 3. 查看：他们制作了什么？ | 4. 返回：我能返回吗？ |
| 网站已经能完成整个旅程了吗？哪些部分缺失或薄弱？ ________________________________________________________________________ ________________________________________________________________________ ________________________________________________________________________ |
首先复制整个网站文件夹。绝不要在唯一副本上试验。
| 备份文件夹名称： ________________________________________________________________________ |
建议给 AI 的开场指令：
| 我正在设计个人作品集网站，你是我的网页开发者。我负责用户体验和设计决策，你用 HTML、CSS 和 JavaScript 实现。这是现有网站。暂时不要重新设计，先识别现有页面、导航和主要板块，然后等待我的指令。 ________________________________________________________________________ |
让 AI 实现当前网站缺少的部分，由你决定需求。
| 项目 | 至少 3 张项目卡片，包含图片/占位图、标题和简短说明。 |
| 项目详情 | 至少一个项目展示问题、过程、结果及证据/图片。 |
| 导航 | 首页 • 项目 • 关于。用户不能陷入无法返回的页面。 |
| 你最先需要 AI 制作或改进什么？ ________________________________________________________________________ ________________________________________________________________________ ________________________________________________________________________ |
| 写出给 AI 的指令，具体说明用户应该能够完成什么。 ________________________________________________________________________ ________________________________________________________________________ ________________________________________________________________________ ________________________________________________________________________ |
添加一项真正改善作品集的交互，不要随意堆砌炫目特效。
| □ 项目筛选 | □ 可展开的过程说明 | □ 图片集 |
| □ 项目预览/弹窗 | □ 交互式时间线 | □ 下一个/上一个项目 |
| □ 修改前后视图 | □ 分类按钮 | □ 其他：__________ |
| 我的交互将通过……帮助用户。 ________________________________________________________________________ ________________________________________________________________________ ________________________________________________________________________ |
交换电脑，给测试者一个任务：
| 找到你认为我最好的项目，了解我做了什么，然后返回首页。 ________________________________________________________________________ |
网站作者保持安静，观察行为，不作解释。
| 他们首先点击了什么？ |
________________________________________________________________________ |
| 他们在哪里犹豫了？ |
________________________________________________________________________ |
| 他们是否点击了不可点击的内容？ |
________________________________________________________________________ |
| 他们迷路了吗？在哪里？ |
________________________________________________________________________ |
| 他们完成任务了吗？ | □ 是 □ 否 |
不要只告诉 AI“改得更好”，应使用刚刚观察到的证据。
| 我观察到的用户体验问题是…… ________________________________________________________________________ ________________________________________________________________________ ________________________________________________________________________ |
| 我给 AI 的具体修改指令： ________________________________________________________________________ ________________________________________________________________________ ________________________________________________________________________ ________________________________________________________________________ |
示例：“测试用户没发现项目图片可以点击。请让整张卡片可点击，并增加轻微的悬停反馈。不要更改其他布局。”
| 我的用户__________________________，所以我修改了__________________________，因为__________________________。 ________________________________________________________________________ ________________________________________________________________________ |