设计网页，可以按确定页面目标、整理内容、画线框、建立视觉样式、适配手机、连接交互的顺序推进。先让访问者知道这是什么、是否适合自己、下一步怎么做，再处理颜色和装饰。这样做出的页面更容易阅读，也方便后续开发。
以一个“周末烘焙体验课报名页”为练习：访问者需要了解能学到什么、时间地点、费用和报名方式；页面目标是让合适的人提交预约。可以用墨刀网页设计工具先搭出桌面与手机页面，并把报名过程做成可点击的原型，再和课程负责人确认内容与操作。
1. 明确目标：一个页面先服务一项主要任务
“做一个好看的网站”很难指导排版。更有用的目标是：“让第一次接触课程的人，在看懂安排后预约一个场次。”目标明确后，就能判断哪些内容值得放在首屏，哪些需要往后放，哪些可以删除。
烘焙报名页首先要回答四个问题：适合谁、能完成什么作品、何时何地上课、如何报名。品牌历史、完整师资履历和其他课程可以提供进一步了解的入口，无需在进入页面时同时展开。
| 页面类型 | 访问者的主要问题 | 适合的主要操作 |
|---|---|---|
| 产品介绍页 | 产品能否解决我的问题 | 开始试用或预约演示 |
| 活动报名页 | 活动是否适合我，如何参加 | 选择场次并报名 |
| 作品集页面 | 设计师做过什么，能力是否匹配 | 查看项目或联系合作 |
| 帮助页面 | 当前问题怎么解决 | 执行步骤或继续相关帮助 |
同一页可以有次要操作，但视觉上需要分清主次。例如“预约体验课”使用醒目的实心按钮，“查看课程安排”用文字链接。若两个按钮同样抢眼，访问者就需要额外判断先做哪一个。
2. 整理内容：把用户的问题变成页面区块
把已有资料列出来，并为每一项写清用途。课程照片用于展示作品和场地，课程安排用于判断时间是否合适，费用说明用于减少报名疑问。资料缺失时先标记待补，不要靠没有依据的“顶级师资”“全城第一”填满页面。
| 页面区块 | 放入的具体内容 | 访问者获得的答案 |
|---|---|---|
| 首屏 | 课程名称、适合人群、作品照片、预约按钮 | 这是什么，是否值得继续了解 |
| 课程收获 | 本次制作内容、带走的作品、基础要求 | 没有经验能否参加，能学到什么 |
| 时间与地点 | 可选场次、时长、地址及交通说明 | 是否能安排时间到场 |
| 费用与准备 | 价格包含项目、自备物品、取消规则 | 还需要准备什么 |
| 报名区域 | 场次、联系方式、提交结果与联系入口 | 怎样完成预约，提交后会发生什么 |
每个区块用能概括内容的标题，例如“零基础也能完成一份手工甜点”，比“我们的优势”更具体。正文先放决定用户是否继续的内容，补充细节放在后面；长段落按一个问题拆成几段，别把所有文字做成同样醒目的粗体。
3. 先画线框，确定阅读顺序和版面比例
第一版可以只用灰色矩形、文字和按钮。为桌面页画出顶部导航、首屏、课程卡片、安排、报名表单和页脚，重点确认区块顺序、内容宽度和留白。此时调整结构的成本比填满照片和装饰后再重排低。
烘焙页面可以采用左文右图的首屏：左侧说明“周末烘焙体验课”，副标题讲清适合零基础、课程形式和主要收获；右侧展示真实课堂或作品。课程照片承担说明任务，不能把关键信息只放在图片里的小字上。
线框阶段就放接近正式长度的中文。用真实的课程名、地址和按钮文字，才能看到标题是否换行、卡片是否高低不齐、按钮是否太窄。占位文字过短，正式内容放进来后往往需要重做布局。
一个可直接使用的首屏内容组合：标题“周末烘焙体验课”；副标题“从揉面到出炉，在老师指导下完成一份可带走的作品。零基础可参加，按场次预约。”；主按钮“选择上课时间”；补充信息放课程时长和地点。日期、费用等信息应由课程负责人确认后填写。
4. 统一色彩、字体和图片，让重点自然突出
确定结构后，再建立一套简单的视觉规则。烘焙课程可以从品牌和课程照片中选择一个主色，用在主要按钮与少量重点信息上；背景、正文、边框保持稳定，不必给每个区块更换一种颜色。
- 字体层级：用字号、字重和间距区分主标题、区块标题、正文与辅助说明。正文优先保证阅读，不要用装饰字体承担大量中文。
- 间距层级：同一组内容靠近，不同区块拉开。课程标题、介绍和按钮应看起来属于同一组；区块之间留出足够空间。
- 图片比例：同一排课程卡片统一比例；原图不合适时调整裁切，不拉伸人物和作品。手机端裁切后也要保留主体。
- 强调方式：一段内容只突出最重要的信息。价格、时间和报名按钮可以有不同层级，但不要都使用最大字号或高饱和底色。
同类按钮的圆角、内边距和文字对齐应一致。优先复用一个已经确认的卡片或按钮，再修改内容；临时为每个区块单独制作样式，页面很容易失去整体感。
5. 设计手机布局，重新安排内容而非整体缩小
桌面端的两列内容放到手机上，通常需要改成单列，并重新决定先后。烘焙页面在手机首屏先显示课程名称与简短说明，作品图按比例裁切，同时让预约按钮保持可见；详细安排放在后续区块，避免一张过高的大图把关键信息全部推到后面。
| 桌面布局 | 手机端处理 | 需要注意 |
|---|---|---|
| 左文右图首屏 | 按标题、说明、图片与预约操作的层级重排 | 标题自然换行，按钮完整可见 |
| 三列课程卡片 | 改为单列或适合内容的排列 | 不要把桌面卡片压窄后强塞三列 |
| 横向顶部导航 | 保留主要入口，其余使用可展开菜单 | 打开后能关闭，选项不会被其他悬浮元素遮住 |
| 两列报名表单 | 改为单列，标签放输入项上方 | 长地址、错误提示和键盘出现时仍能操作 |
预览时至少检查一种较窄和一种较宽的手机尺寸，并尝试把课程名改长、将地址换成两行、显示一条表单错误。遇到溢出时先调整容器与排列，不要为了塞下内容不断缩小字体。
6. 在墨刀里连接报名过程，补齐提交结果
建立网页原型项目后，用文字、图片、按钮和输入框组件搭出线框，再复用确认好的样式。将桌面页与手机页放在同一项目中，用清楚的名称区分，便于对照内容是否遗漏。
- 建立页面与状态。除了报名页，还准备选择场次、提交成功和提交异常的状态。先做最常走的一条路线：了解课程、选场次、填写信息、看到结果。
- 连接关键操作。为预约按钮、场次选项和返回入口添加交互，预览时从首页真实点击，检查每个按钮是否到达预期位置。
- 补充表单反馈。必填项缺失时指出具体字段；提交中给出等待反馈；失败时保留已填内容；成功时说明后续如何联系和查看预约。
- 分享并收集意见。通过链接分享原型，请负责人确认课程资料，请目标用户尝试找到时间、费用和报名入口。把问题记录在对应页面或组件上，再修改设计。
一次有用的试用可以只给任务：“找一个周末场次，并完成预约。”先观察对方从哪里开始、在哪一步犹豫、是否看懂提交结果，再决定改文案还是改布局。用原型演示表单反馈后，正式网站仍需开发实现数据保存、通知与其他服务连接。
设计交付前，确认页面完整而且能解释清楚
交付材料应包括桌面与手机稿、使用的图片和字体、按钮与表单状态、页面之间的跳转，以及尚未确定的业务规则。尤其要标清图片如何裁切、内容过长怎么排列、页面在不同宽度下如何变化。
保留一份课程资料的确认版本，并让标题、价格、日期、地点在各处保持一致。上线后再观察访问者是否找到主要内容、报名过程在哪一步中断，根据实际反馈继续调整。若需要进一步制作可点击页面，可继续了解墨刀原型的交互与分享能力，先把这一个页面的阅读和操作走通，再扩展成完整网站。
