保留
指出一项在修改后应保留的优点。
9 年级 · 作品集设计
作品集 V2：一致的整体设计
完善作品集的设计规则、层级与导航，再邀请用户测试。
当前项目 · 作品集 V2
让每一页都像同一个网站
继续改进已制作的作品集，保留可用的用户旅程，突出重要内容并去除干扰。你做设计决策，AI 将其应用于 HTML。
保留现有内容改进设计不添加新功能
确保这条旅程始终可用
- 01首页
- 02项目
- 03项目
- 04返回
每完成一组修改，都检查所有页面和链接。
评估作品的提交位置
在对应作业中提交两部分
对于 Toddle 中的每一项项目作业，请提交完成的学习单及与之对应的新网站版本。作品集 V2 应提交至 “作业 3：作品集 V2”。
一般的 “网站上传” 区域仅用于练习和试验。在该区域上传不计入项目评估。
查看最终提交清单 ↓从现有作品集开始
制作 V2 副本并检查用户旅程
- 保持 V1 不变。 为 V2 建立独立工作副本，包含关联文件。
- 打开首页 → 项目列表 → 项目 → 返回。检查页面样式、导航、按钮和主要焦点。
- 问自己：这些页面像同一个网站，还是不同设计拼接在一起？
- 现在截取 V1 首页截图，最后将与 V2 比较。
在学习单中记录决策
保留 1 项 / 修复 3 项 / 删除 1 项
写明要保留、修复或删除的具体内容及所在页面。例如：“项目详情页使用了不同的标题字体。”
修复
写出三个明确问题，并说明各自出现在哪里。
删除
选择一项要移除的干扰，可计入第 6 阶段的三项删除内容。
先决定，再写提示词
为全站编写五条规则
以现有最好的样式为起点，在学习单中写下选择。使用精简配色、一到两种字体，并让相同功能的元素采用一致样式。
- 1
背景
为全站选择一种背景颜色或样式。
- 2
颜色
选择文字颜色和强调色，确保文字在背景上易于阅读。
- 3
标题
选择页面标题和板块标题的字体与字号，相同作用的标题应一致。
- 4
按钮与卡片
确定形状、边框和内边距。内边距是内容与其边缘之间的空间。
- 5
导航
确定导航出现的位置、标签内容，以及访客如何返回上一页。
请 AI 应用你的选择
提供当前 HTML 及关联的样式文件，复制提示词，并将每处方括号内容替换为自己的规则和决策。
修改提示词
检查我现有的作品集。不要从头重新设计或添加功能。将以下规则应用于首页、项目列表和项目详情：[粘贴我的五条规则]。保留内容、可用的“首页 → 项目列表 → 项目 → 返回”旅程和有用交互。统一间距。修复这三个问题：[粘贴修复 3 项]。保留这项优点：[粘贴保留 1 项]。说明修改内容，以便我检查。
发送提示词前，请替换方括号中的文字。
检查 AI 实际改了什么
检查一致性
预览每个更新的页面，使用清单比较首页、项目列表和项目详情中的同类元素。
- 导航
位置、标签和行为相同。所有返回链接都可用。
- 字体排印
相同作用的文字使用相同字体和标题字号。
- 颜色
配色和强调色含义一致，文字保持易读。
- 组件
相同功能的按钮和卡片具有一致的外观与行为。
- 间距
统一外边距、板块间隔和内边距，去掉随意的空隙。
至少再发送一次后续 AI 提示词，修正第一次尝试。自行检查结果，并在学习单中记录后续修复。
“卡片现在一致了，但项目详情页的空隙明显更大。请将其板块间距调整为与项目列表一致，同时保持文字易读。”
帮助访客知道该看哪里
突出重要内容
视觉层级指观看者先注意到什么、再注意到什么、最后注意到什么。用大小、位置、对比和空间引导注意力。
你是谁，以及你创作什么
让通往项目的路径容易找到。
项目作品与清晰标题
让访客容易选择要打开的项目。
项目标题与最有说服力的成果
帮助访客理解你的角色和过程，并能够返回。
找出主要焦点，检查每个页面。如果装饰或次要文字更吸引注意力，就调整页面，直到预期内容足够突出。
为重要内容留出空间
删除三处干扰
删除三项无助于访客的内容，例如重复文字、泛泛的 AI 文案、多余图标、特效、空板块或无意义按钮。你的删除 1 项可计入这三项。
在学习单记录三项删除内容，每删一项都问： “页面现在更清楚了吗？” 保持关键内容、导航和有用交互正常运行。
了解访客理解了什么
进行同伴五秒测试
写下你的预期第一焦点以及同伴姓名。只展示首页五秒，然后隐藏。
不要先解释设计，逐一提问，用简短语句记录同伴原话，然后交换角色。
- 网站是关于什么的？
- 你首先注意到什么？
- 你记住了什么？
- 这是怎样的人或设计师？
- 接下来你会点击哪里？
根据证据选择最终修改
改进、复测、比较
- 找出你的意图与同伴理解之间的一处差异。如果他们理解了页面，就利用他们记住的内容强化该焦点。
- 记录同伴证据以及你的最终修改。请 AI 进行针对性修改，再检查结果。
- 重新测试“首页 → 项目列表 → 项目 → 返回” 以及有用交互，确认修改没有破坏它们。
- 将网站及所有关联文件保存为 Portfolio_V2，并保留 V1。
“同伴先注意到动画而不是作品，所以我删除动画，并让项目预览更突出。”
确保前后对比公平
将 V1 和 V2 截图放入学习单，展示相同的首页视图，并保持相同窗口大小和滚动位置。调整图片尺寸以适应版面。
完成解释： “V2 更好，因为……” 指出可见的修改，解释它如何帮助访客。
提交前
学习单 + 对应的网站版本
打开 “作业 3：作品集 V2” ，在 Toddle 中附上两部分。
- 1
完成的作品集 V2 学习单
包括保留 1 项 / 修复 3 项 / 删除 1 项、五条设计规则、后续修复、三项删除内容、同伴回答、最终修改、可比较的 V1 和 V2 截图，以及解释。
- 2
对应的 Portfolio_V2 网站
包含网站所需的全部 HTML、CSS、图片及其他关联文件。提交 V2 截图所展示的版本，再打开一次并检查完整旅程。
此要求适用于每一项具体项目作业： 将完成的学习单与对应的新网站版本一起提交。一般的 “网站上传” 区域仅用于练习和试验，并且不计入项目评估。
打开 Toddle，提交两部分 →本课资料
相关作业
- 作业 3：作品集 V2
请务必提交学习单和最新版本的作品集网站
查看日历中的作业 →
提交平台： Toddle。具体提交内容见上方作业说明。
在线阅读学习资料正文
作品集 V2
让它像一个统一的产品
V1 的用户旅程已可用。现在让每页风格关联，突出重要内容并去除干扰。你做设计决策，AI 将其应用于 HTML。
50 分钟 • 使用现有作品集 • 今天不添加新功能
姓名 ____________________________ 班级 __________ 日期 ______________
0–5 分钟：拼接感检查
打开“首页 → 项目列表 → 项目 → 返回”。它像一个网站，还是不同 AI 想法拼接在一起？检查页面样式、导航、按钮和主要焦点。
保持 V1 不变，制作 V2 工作副本。现在截取 V1 首页，供第 3 页使用。
5–10 分钟：保留 1 项 / 修复 3 项 / 删除 1 项
写明页面和问题。例如：“项目详情页使用了不同的标题字体。”
保留 1 项 _________________________________________________________________
修复 1 _________________________________________________________________
修复 2 _________________________________________________________________
修复 3 _________________________________________________________________
删除 1 项 _________________________________________________________________
10–18 分钟：制定设计规则
从现有最好的样式出发，写出简短规则，再使用第 2 页提示词让 AI 应用规则。
| 规则 | 我的全站规则 |
| 背景 | 一种背景样式或颜色： __________________________ |
| 颜色 | 文字：__________ 强调色：__________ 采用易读的对比度。 |
| 标题 | 字体：__________ 页面标题：____ 板块标题：____ |
| 按钮与卡片 | 形状、边框和内边距： ___________________________ |
| 导航 | 位置、标签与返回行为： ___________________ |
使用精简配色、1–2 种字体，并让相同功能的元素采用相同样式。
应用规则
复制提示词，将方括号内容替换为自己的规则，提供当前 HTML 及关联样式文件。
检查我现有的作品集。不要从头重新设计或添加功能。将以下规则应用于首页、项目列表和项目详情：[粘贴我的五条规则]。保留内容、可用的“首页 → 项目列表 → 项目 → 返回”旅程和有用交互。统一间距。修复这三个问题：[粘贴修复 3 项]。保留这项优点：[粘贴保留 1 项]。说明修改内容，以便我检查。
18–28 分钟：一致性检查
预览更新的网站，检查每个页面，至少发送一次后续提示词，修正 AI 的第一次尝试。
| 检查项 | 哪些应保持一致 |
| □ 导航 | 位置、标签和行为相同，返回链接有效。 |
| □ 字体排印 | 相同作用的文字使用相同字体和标题字号。 |
| □ 颜色 | 配色和强调色含义一致，文字易读。 |
| □ 组件 | 相同功能的按钮和卡片具有一致的外观与行为。 |
| □ 间距 | 统一外边距、板块间隔和内边距，避免随意的空隙。 |
后续提示示例：“卡片现在一致了，但项目详情页的空隙明显更大。请将其板块间距调整为与项目列表一致，同时保持文字易读。”
我的后续修复 _________________________________________________________________
28–35 分钟：信息层级检查
信息层级指观看者先注意到什么、再注意到什么、最后注意到什么。用大小、位置、对比和空间引导注意力。
| 页面 | 先让这一点清晰 | 再让这项操作容易 |
| 首页 | 你是谁，以及你创作什么 | 找到进入项目的路径。 |
| 项目 | 项目作品与清晰标题 | 选择要打开的项目。 |
| 项目详情 | 项目标题与最有说服力的成果 | 理解你的角色和过程；返回。 |
找出每个页面的主要焦点。如果装饰或次要文字更显眼，就调整页面，直到预期内容突出。
35–40 分钟：删除三项内容
删除三项干扰：重复文字、泛泛的 AI 文案、多余图标、特效、空板块或无意义按钮。“删除 1 项”可计入这三项。保持关键内容、导航和有用交互正常运行。
删除 1 __________________ 2 __________________ 3 __________________
每删一项都问：“页面现在更清楚了吗？”
40–46 分钟：同伴五秒测试
轮流进行。只展示首页五秒，然后隐藏。不要先解释设计，逐一提问，并用简短语句记录同伴原话。
同伴 ____________________；我的预期第一焦点 ____________________
网站是关于什么的？ _________________________________________________________________
你首先注意到什么？ _________________________________________________________________
你记住了什么？ _________________________________________________________________
这是怎样的人或设计师？ ______________________________________________________
接下来你会点击哪里？ _________________________________________________________________
46–50 分钟：修改与保存
根据意图与同伴回答之间的一处差异选择最终修改。如果他们理解了页面，就利用他们记住的内容强化该焦点。请 AI 进行针对性修改，再检查结果。
同伴证据 _________________________________________________________________
我的最终修改 _________________________________________________________________
示例：“同伴先注意到动画而不是作品，所以我删除动画，并让项目预览更突出。”
□ 重新测试“首页 → 项目列表 → 项目 → 返回”及有用交互。□ 将网站与关联文件保存为 Portfolio_V2，保留 V1。□ 在下方添加 V2 截图，提交 V2 与完成的学习单。
V1 和 V2 证据
粘贴相同首页视图，保持相同窗口大小和滚动位置，调整图片尺寸以适应版面。
| V1 修改前 | V2 修改后 |
| 在此粘贴 V1 截图 | 在此粘贴 V2 截图 |
V2 更好，因为…… __________________________________________________
________________________________________________________________________