01活动报名
让想参加的人，顺利报上名
主题、时间地点与参加条件先讲清楚。表单只保留必要信息，提交后告诉用户是否成功、接下来如何参加。
活动介绍 → 报名填写 → 报名结果
适合你的 H5 场景
同样是手机上的一页，
要完成的事各不相同。
H5 页面通常指在手机浏览器中访问的网页。设计时，先想清楚访客为什么点进来，以及看完以后要做什么；再决定信息顺序、页面长度与主要按钮。
02品牌宣传
把品牌故事，变成有顺序的浏览
用主视觉建立印象，用产品亮点和案例解释价值。咨询、预约或进一步了解的入口，应出现在读者需要的位置。
认识品牌 → 了解产品 → 预约咨询
03促销与互动活动
玩法有吸引力，规则也要看得懂
设计优惠、抽奖或邀请活动的参与页面，补齐规则入口、资格提示与结果状态，让运营和研发先确认完整体验。
查看玩法 → 参与操作 → 结果与下一步
01 / 搭建页面
先把内容摆对，
再把细节打磨好。
用文本、图片、按钮和卡片组织页面，从空白画布或已有 H5 原型模板开始。先完成核心内容，再统一颜色、间距和按钮样式，避免每一屏都重新搭建。
首屏先回答“为什么参加”
活动标题、主要价值、时间地点和报名按钮形成清楚的层级。规则很长时，保留可查看的入口。
长页面有重点，也有节奏
介绍、安排、参与方式分组呈现。图片服务于内容，不要让用户连续划过大幅装饰才能找到操作。
同一套元素，贯穿不同页面
复用表单、提示和按钮的样式，让报名页、详情页与结果页看起来属于同一个活动。
02 / 连接交互
好看的页面，
还要接得住每一次点击。
以“城市漫游”活动报名为例：从介绍页进入表单，填写信息，再到报名结果。用页面跳转、弹窗和组件状态把这些操作连接起来，预览时就能讨论流程是否完整。
未填写完整
在对应字段旁提示原因，让用户知道要改哪里。
正在提交
设计等待反馈和按钮状态，说明重复点击如何处理。
提交未成功
保留已填内容，提供明确的重试或联系入口。
活动已结束
替换报名按钮，说明结束状态和可继续浏览的内容。
03 / 在手机上看体验
信息放得下，
操作点得到。
按目标手机宽度设计页面，再通过原型预览检查阅读和操作。点击、滑动、弹窗与返回都有明确去向，才能把静态版面变成可以体验的方案。
检查真实内容，而不只是占位文字
把完整活动名、较长说明和必要规则放进去，检查换行、图片裁切与页面高度。
把表单与底部按钮一起考虑
为键盘弹起、长页面滚动和操作区遮挡补充布局说明；输入后仍能找到提交入口。
动效帮助理解，返回保持方向
用合适的交互反馈说明变化。打开详情后能回到活动页，关闭弹窗后仍清楚自己在哪里。
一份画布不会自动解决全部机型适配。先确认目标屏幕、关键内容与交互，再由开发在真实浏览器和设备上检查实现效果。
也需要桌面网页？查看网页设计 →04 / 用 AI 探索第一稿
说清活动，
让第一版有个好起点。
把受众、目标、页面内容和交互状态写在同一份需求里。选择场景，整理一份可复制的 H5 设计需求，再用墨刀 AI 起稿并继续修改。
你的 H5 设计需求可编辑名称 · 可复制使用
为「城市漫游」设计移动端 H5 活动报名原型。
目标：让访客看懂活动安排并完成报名。页面包含活动介绍、时间地点、议程、报名表单和结果页。表单只保留姓名、联系方式与人数。
交互：设计必填提示、提交中、成功、失败重试与活动结束状态。失败时保留已填内容，结果页提供返回活动的入口。
布局：突出活动主题和报名按钮，采用适合手机阅读的单列结构。检查长标题、图片裁切、键盘遮挡与底部操作区。
交付：使用样例内容，生成可预览的页面与交互说明；不接入真实用户数据、支付或业务接口。
已有 HTML 文件或代码？可以通过 HTML 导入继续编辑。AI 组件保留 HTML 交互，也可以按需要转为原型中的可编辑元素，再检查转换后的布局与效果。
了解 HTML 导入与可视化编辑 →
05 / 一起预览与确认
把方案讲清楚，
让团队接着往下做。
把原型链接分享给运营、设计与研发，围绕具体页面评论和修改。先对齐体验，再确定正式活动需要实现哪些规则。
运营核对活动信息、参与条件、文案与结果提示，确认用户能否理解下一步。
设计确认页面层级、视觉样式和交互反馈，统一不同状态下的组件表现。
研发结合页面标注、图片素材与交互说明，确认表单校验、接口、权限和异常处理。
原型分享用于演示和评审。正式 H5 的域名部署、真实报名、支付、抽奖结果与数据统计，需要由开发或对应业务平台实现。
开始之前，也可以看看
从有用的模板与方法继续。
调查问卷：手机运营活动
参考已有表单布局，调整问题、页面顺序和提交反馈，适配自己的活动。
查看表单模板梳理 H5 页面设计流程
从目标、内容到页面结构与交互，先理顺设计顺序，再开始搭建。
阅读 H5 设计指南按任务选择 H5 原型工具
结合原型表达、交互预览与协作需求，判断工具是否适合当前阶段。
查看工具选择方法常见问题
关于 H5 页面设计，
你可能还想知道。
不会写代码，也能设计 H5 页面吗？
可以用墨刀的组件、模板与交互设置搭建 H5 原型，不必先写前端代码。先表达页面结构和操作流程，再通过预览确认方案；这与正式 H5 的开发、部署是不同阶段。
H5 原型可以直接作为正式活动上线吗？
原型链接适合演示、评审和方案确认。正式活动需要处理真实数据、域名、接口、权限和浏览器兼容，报名、支付或抽奖等业务也需要相应实现与测试。
H5 页面尺寸应该怎么选？
先按主要用户的手机屏幕宽度建立画布，例如以 375 或 390 像素宽作为设计起点，再检查更窄和更宽屏幕下的内容安排。画布宽度是设计依据，并不等于最终页面已自动适配全部设备。
可以从 AI 初稿或已有 HTML 继续设计吗？
可以用墨刀 AI 生成初稿并继续对话修改。已有 HTML 可进入可视化编辑；导入原型后可保留为含 HTML 交互的 AI 组件，也可按需要转换成原生可编辑元素。转换后应复核布局、素材与交互。
活动模板里的抽奖、领券能直接运行业务吗？
原型模板和交互可以用来表达活动页面、参与流程与结果状态。真实中奖规则、库存、优惠券发放或交易，需要业务系统支持，不能把原型预览当作已完成的运营后台。
从下一次活动，开始一份更清楚的方案
让 H5 创意，在点击中成形。
从一个页面、一个关键操作开始，逐步完成你的移动端体验。
搭建页面 · 连接交互 · 预览分享 · 团队确认