从第一页，到能交付的网站。

八篇上手教程，帮你把 FORMA 的模板、区块与动效，变成自己的作品。

01 / 五分钟做出第一个网站

• 打开「我的项目」，从 15 个起点里选一个（品牌工作室、产品、简历、课程、房产……）。
• 给项目起个名字，系统会自动创建首页结构并生成第一个不可变版本。
• 进入工作台，点击任一区块，在右侧属性面板改标题、介绍或联系邮箱。
• 在左侧「添加一个区块」，从 27 种区块类型里组合页脚、定价、时间线、推荐语等。
• 点「保存版本」，再「导出网站 ZIP」——解压后双击 index.html 即可预览。

02 / 编辑器里都能改什么

• 页面由导航、首屏、画廊、特性、定价、FAQ、联系、页脚等受控区块组成，可编辑文案、按钮、邮箱、主题色与留白，也能上移/下移、复制、隐藏或删除区块。
• 左侧侧栏显示当前页面的区块层级：单击选中、Shift 连续多选、Ctrl/⌘ 点选追加；选中后可批量移动、隐藏或删除。
• 工具栏里还有几个效率工具：查找替换（全站文案）、品牌（一键替换品牌词）、字数（统计区块与全站字数）、历史（回退到任意一步）。

03 / 用 Motion Lab 编排动效

• 进入 Motion Lab 可加载内置示例场景（发布标题、仪表盘级联、循环轨道、数据强调、悬停反馈、点击叙事）。拖时间轴播放、改速度/轨道宽度/景深等参数实时预览，最后导出独立 HTML。
• 动效与网站项目是两套互补的能力：网站项目负责静态结构与区块，Motion Lab 产出可嵌入的动画片段。两者都可导出无外部依赖的文件。

04 / 导出之后如何上线

• 导出的 ZIP 解压后是一组静态文件（HTML/CSS/JS），无需服务器即可离线打开。
• 把解压后的文件上传到任意静态托管：Nginx、对象存储、GitHub Pages、Vercel、Netlify。
• 联系、购买、表单等交互是本地演示，不会真正发送；上线前请接入你自己的后端或第三方表单服务。
• 绑定域名后，记得在托管平台配置 HTTPS，并检查标题、描述与社交分享图。

05 / 案例库怎么用

• 案例库是 42000 条程序化生成的概念案例：按 21 个行业分类，每条给出品牌名、站点类型、目标受众与交付物清单。
• 它不是真实客户项目，而是「结构参考」：遇到不知道怎么组织的页面，按分类筛几条，看别人的区块顺序与文案切角。
• 配合模板一起用更高效：先在案例库里定方向，再去模板库挑一套结构最接近的，改内容而不是拼结构。
• 案例详情页支持服务端渲染，可直接分享与收藏链接。

06 / 组件与素材的搭配

• 104 个原创组件按 effects / content / feedback / inputs / navigation 五类组织，可单独导出为 React + Vite 工程。
• 使用顺序建议：先用 content 类组件搭信息骨架（标题、特性、定价、FAQ），再用 effects 类加视觉节奏，最后用 feedback 与 inputs 类补交互。
• 素材库提供网站、界面、区块与动效四类样本，均可在线预览；商用前请替换为你自己的真实内容与图片。
• 组件与区块的区别：区块是建站画布上的受控单元，组件是可独立导出的代码包，两者可混用。

07 / 给设计师的进阶路径

• 先把主题色、字号与圆角三件事定死，再开始铺页面：一套约束比一百次微调更出效果。
• 作品集与品牌站优先保证图片质量与留白节奏，文字少而精；产品站则把证据（数据、案例、推荐语）压进前三屏。
• 动效是加分项不是必需品：只在首屏标题、关键 CTA 与数据强调三处用，其余保持安静。
• 导出前用三种屏幕宽度逐页预览，检查断点、溢出与加载状态，再点导出。

08 / 常见踩坑清单

• 把所有内容都塞进首屏：首屏只放一个价值主张与一个 CTA，其余内容向下沉淀。
• 导航层级过深：保持两级以内，重要入口放进顶部导航，次要入口收进页脚。
• 表单字段过多：只留必要字段，必填项标清，提交后给明确的成功反馈。
• 上线前忘换演示数据：联系邮箱、表单后端、社交分享图、占位文案都要逐项替换。
• 不做移动端预览：导出前至少在手机宽度下走一遍全站，很多布局问题只在窄屏暴露。

FORMA 是共享演示空间与工程基础版，不是完整商业平台。正式上线前请先完成你自己的安全审计，不要存放敏感数据。