Transcription
这里有一个真实的网站，它现在就在互联网上运行。它拥有简洁的布局。它拥有现代的排版、流畅的动画，并且在桌面和移动设备上都能完美运行，而五分钟前，它还不存在。所以，整个网站都始于一张空白画布，并且是使用人工智能构建的，没有模板，没有代码，也没有任何预制布局。所以，在接下来的 30 分钟里，你和我，我们将使用 Framer 构建一个这样的网站。它是一个设计优先、无代码的网站构建器，内置了人工智能。因此，Framer 不会强迫你使用僵化的模板，而是会帮助你使用纯粹的语言生成和塑造真实的布局，这就是为什么像 Perplexity、Miro 和 Visual Electric 这样的公司团队都在使用它。它专为真正的专业网站而构建，而不仅仅是快速实验。我们将从零开始，一直到一个完全发布的网站，你可以与全世界分享。在此过程中，我将向你展示使用 Framer AI 构建的真实示例。我将分解重要的功能，并将一步一步地引导你完成确切的过程，这样你就可以跟随，即使你以前从未构建过网站。Framer 目前也处于一个非常好的位置。2026 年的最新更新增加了诸如年度计划中的免费自定义域名或改进的 AI 生成以及不断增长的组件市场等功能，这使得在一个地方从想法到上线网站比以往任何时候都更容易。所以，如果你一直想构建一个看起来专业的网站，而无需学习编码或应对笨拙的工具，那么，这就是为你准备的教程。那么，让我们开始吧。首先，我在下面的描述中添加了一个 Framer 的特殊链接。所以，一定要去看看并跟随。在我们开始构建之前，让我们快速处理掉那些枯燥但必要的事情。我们将查看 Framer 的计划，进行注册，并确保你没有为不需要的东西付费。这部分很快，我们很快就会开始构建网站。所以，让我们来谈谈 Framer 的计划以及如何注册，因为这通常是人们首先想知道的事情。Framer 提供了一个坚实的免费计划，非常适合学习工具和构建网站的真实草稿。你最多可以获得三个页面，一个 Framer 子域名，以及所有核心功能，这足以跟随本教程。当你准备好让你的网站上线时，付费计划将解锁自定义域名、无限页面和更高级的功能。所以，如果你选择年度计划，Framer 还包含一个免费的自定义域名，该域名于 2026 年初添加，可以为你节省一些额外的钱。所以，现在最简单的方法就是从免费计划开始，构建所有内容，然后等到你的网站真正准备好上线时再升级。当你登录 Framer 时，你将在此画布上着陆，这里几乎所有的工作都在这里进行。这是你的主要设计空间。在左侧，你会找到你的页面、图层和组件。在右侧，你将看到你所选内容的全部属性和样式选项。在顶部这里，有一个工具栏，其中包含工具、预览选项和发布按钮。你还可以随时在桌面、平板电脑和移动设备视图之间切换，这使得在构建网站时很容易看到它在不同屏幕尺寸上的外观。Framer 与传统的网站构建器不同，因为它首先是设计。它不会强迫你使用僵化的模板，而是给你很多视觉自由。一开始有一个小的学习曲线，但权衡是你获得了更多的控制权，它开始感觉不像一个网站构建器，而更像一个也能发布网站的专业设计工具。正如我之前提到的，Framer 今年通过在年度计划中包含免费自定义域名做出了一个很好的改变。所以，当你准备升级时，你不必再单独购买域名了。域名设置是通过 Hover 处理的，而且相当直接。如果你关心品牌形象，并希望你的网站感觉更正式，这会让升级变得容易得多。现在，如果你曾经打开过一个设计工具，却对着空白页面感到不知所措，那么这一部分会让你感觉很熟悉，而且是好的方面。Framer 的 AI 设计旨在帮助你更快地从一个想法到一个可用的东西，而不会剥夺你的控制权。它处理了很多设置和结构，这样你就可以花更多时间进行完善，而花更少的时间从头开始。所以，让我们分解一下那些真正能让网站构建产生差异的 AI 功能。一切都始于一个提示。你只需要描述你想要什么，Framer 的 AI 就会利用这个描述为你生成整个网站布局。所以，你越具体，结果就越好。所以，不要说一些含糊不清的话，比如“给我做一个网站”，你应该提及行业、风格以及网站的实际用途。例如，使用像“为健身教练设计一个干净的登陆页面，具有大胆的排版和行动号召部分”这样的提示，AI 会有更多的工作。另外，包含网站是为谁设计的，这会产生巨大的影响。如果第一个版本不太对，这是完全正常的。你可以重新生成网站。你可以比较不同的选项，然后选择最接近你心中所想的那个。每个版本在布局、图像和排版方面都会感觉略有不同。选择正确的版本后，你就可以继续完善它。整个过程是实时发生的。所以，你实际上可以看到 AI 在构建部分、图像和文本。Framer 的 AI 在作品集、商业登陆页面和小型电子商务网站方面效果尤其好。这些都对提示的反应略有不同。所以，根据你所要求的内容进行定制会有所帮助。对于作品集，专注于你的作品和整体美学。对于商业网站，描述你的产品和你想要针对的客户类型。对于电子商务网站，提及产品类别和布局偏好有助于 AI 生成一个从一开始就有意义的结构。所以，现在是这样。你也不限于生成完整的页面。Framer 的 AI 还可以创建单个组件，如联系表单、图像库、客户评价部分，以及更多内容。同样，只需描述你需要什么以及它应该做什么，AI 就会为你生成一个风格化的响应式组件。一旦它到位，你就可以像在 Framer 中的任何其他内容一样调整属性，所以你永远不会被 AI 给你的东西所束缚。它确实感觉更像一个设计助手，而不是一个自动化工具，它已经理解了良好的布局和结构。这使得构建更复杂的页面速度大大加快，而无需一遍又一遍地重新创建相同的元素。Framer 的 AI 不仅仅停留在布局和结构上。它还可以帮助写作本身。你可以要求它生成标题、正文，甚至建议如何改进部分的排列。如果你对你的品牌声音有所指导，无论是更正式、友好，还是介于两者之间，它都能很好地匹配语气。文案作为起点效果最好。一些小的编辑通常会让你听起来更像你自己。AI 建议和手动调整之间的这种平衡，使得内容感觉很精致，而又不会失去个性。有时你不想担心颜色或字体，但你只想让布局正确。所以，线框图工具就是为此而设计的。这将允许你快速地构建部分，移动事物，并弄清楚页面的结构。一旦你对布局满意，你就可以将该线框图转换为完整的设计并继续构建。这在与客户或团队成员合作时尤其有用，因为现在每个人都可以专注于页面的结构，而不会被视觉细节分心。好了，关于功能的谈论够多了。是时候从头开始一起构建一个网站了。如果这是你第一次这样做，别担心，我能搞定。我们将一起构建一个完整的网站。我将把它分解成小步骤，这样会感觉很容易。所以，对于第一部分，这基本上就是回答一个简单的问题。我们在这里到底在构建什么？对吧？Framer 的 AI 在有明确方向时效果最好。所以，这里的目标不是完美，而是足够具体，以便它知道你的目标是什么。决定你想要创建的网站类型，它可以是作品集、商业登陆页面或在线商店。在这个演练中，我将构建一个健身教练登陆页面。然后，我们需要在提示中描述一些关键内容。行业、整体风格以及网站应包含的主要部分。行业有助于指导图像。风格会影响颜色和排版等内容，列出部分可以确保没有重要内容被遗漏。提及网站是为谁设计的也会有帮助。在这种情况下，我的目标是那些想要个性化培训的忙碌的专业人士，这为 AI 提供了更多的上下文。你不必过度思考，但这里的一些细节确实很有帮助。所以，这是我将使用的确切提示。构建一个现代健身教练登陆页面。目标是 25 至 45 岁的忙碌专业人士，他们想要个性化培训和简单的日常练习。风格应该是干净、充满活力和自信，而不是攻击性。使用大胆的排版、强烈的对比和大量的空白。按此顺序包含以下部分。英雄部分，具有清晰的价值陈述和预订免费咨询的主要行动号召。关于部分，解释教练的方法、资历和成果。服务部分，概述一对一辅导、在线课程和营养指导。转型或客户评价部分，提供社会证明。简单的定价或工作流程部分，以减少阻力。行动号召部分，鼓励预订或联系。优先考虑移动设备。使用高质量的健身图像，感觉真实且易于接近。语气应该是激励、友好和实用的。设计应优先考虑清晰度、转化率和信任度。一旦提示输入，剩下的就是点击生成。所以，让我们看看会发生什么。现在，在点击生成后，你将在此处看到一个进度指示器，同时网站正在构建中。你实际上可以看到一切实时组合在一起。某些生成会比其他生成花费更长的时间，具体取决于提示的详细程度。所以，如果需要一些时间，这是完全正常的。偶尔，生成可能会失败或超时。如果发生这种情况，你可以再次运行它。这种情况很少见，Framer 通常会毫无问题地处理重试。生成完成后，Framer 将提供几个不同的布局选项供你选择。在这个阶段，不要太担心颜色或文案。让我们只关注整体结构和流程，然后选择感觉最强大的版本。请记住，你随时可以交换部分或将它们混合在一起。所以，事情开始变得有趣了。你可以尝试不同的布局选项，在版本之间交换部分，并开始将它们对齐，使其感觉一致。不要担心破坏任何东西。你随时可以撤销和重做，它们是你最好的朋友。所以，自由地实验。将 AI 生成的网站视为起点而不是最终产品也会有帮助。结构已经有了。个性化来自于你如何定制它。如果布局感觉合适，那么就可以通过添加自己的内容来使其成为你的。此时，布局已经存在，但它仍然可能感觉有些通用，这是正常的。在这里，你开始替换你自己的文字、你自己的图像和你自己的风格。所以，这个网站实际上感觉像是你愿意署名的东西。用你自己的文案替换占位符文本，并上传反映你品牌的图像。Framer 使交换图像变得像拖放一样简单，所以你可以轻松地进行实验。你随时可以调整颜色以匹配你的调色板，更改字体以适应你的风格，并微调间距，直到一切感觉合适。不要忘记添加你自己的徽标和你其他地方使用的任何品牌图标。细节决定成败。好了，就这样。我们刚刚将一个通用的布局变成了一些个人化且可识别的东西。请记住，大多数人会先在手机上看到你的网站，而不是在笔记本电脑上。即使 Framer 会自动为你创建移动版本，我们仍然需要花点时间检查一下外观。所以，使用移动预览来翻阅不同的屏幕尺寸，看看布局如何保持。有时图像需要调整大小，或者文本需要重新定位，以便在小屏幕上更容易阅读。检查纵向和横向视图并清理任何感觉拥挤或尴尬的东西也是一个好主意。移动流量通常会大大超过桌面流量。所以，这比看起来更重要。在构建了结构并添加了内容之后，细节将变得更加重要。所以，间距、排版和运动是引导人们浏览页面并使一切感觉有目的性的因素。好消息是 Framer 会为你提供微调这些细节的工具，这样你的网站不仅看起来不错，而且实际上能清晰地传达信息。这里也开始变得更有趣了，因为 Framer 给了你很多关于外观的控制权，而不会让你觉得太复杂。排版面板允许你探索不同的字体并设置清晰的层次结构。因此，标题、正文和按钮都感觉有目的性。颜色选择器可以轻松地构建调色板，你甚至可以使用吸管直接从图像中采样颜色，这有助于保持一切一致。间距的作用比大多数人预期的要大。那里的微小调整可以让页面感觉拥挤或精致。如果你在多个页面上工作，早期设置一个简单的设计系统可以节省你的时间，并使网站感觉连贯而不是随机。一点点运动可以让网站感觉更有活力。Framer 还很容易添加微妙的动画，比如滚动时部分淡入或元素滑入到位。按钮和图像上的简单悬停效果也有助于使网站感觉交互式和响应式。你绝对应该在这里尝试这些，但保持微妙通常效果最好。过多的动画可能会让人分心或减慢速度。Framer 还会通过标记性能问题来帮助你保持正轨，因此在添加足够的动画使其感觉精致的同时，你的网站仍然会流畅运行。可重用组件也是一个巨大的时间节省器。一旦网站开始增长，你就可以只构建一次按钮，设置几个变体，主按钮、次按钮、轮廓按钮，然后到处重用它。如果你以后需要更改文本、颜色或图标，你可以做到，而不会破坏你网站的一致性。所以，将组件组织在一个库中可以使事情变得更容易，尤其是在处理多个页面或项目时。它有助于保持一切一致，并避免你一遍又一遍地修复同一件事。在某个时候，你会注意到某些页面比其他页面更容易处理。这很大程度上取决于布局的设置方式。Framer 会根据你正在构建的内容提供几种不同的布局处理方式。自动布局有助于元素在不同屏幕尺寸下自然地调整大小和适应，这对于响应式设计非常有用。网格在需要更多结构和精确对齐时很有用，尤其是在更复杂的页面上。堆栈可以垂直或水平地组织事物，并使间距更容易管理。你不需要过度思考使用哪一个。只需选择对你正在处理的页面有意义的内容，并根据需要进行调整。当布局行为正确时，其他一切都会顺理成章。所以，构建一个网站是一回事，但保持它的更新通常是事情失败的地方。添加新内容，在不破坏布局的情况下进行更改，或者让其他人帮忙而不至于弄得一团糟，很快就会变成一种令人沮丧的体验。所以，在这里我将向你展示如何处理这方面的事情，这样你的网站就可以随着它的增长而易于管理，而不会变成维护的头痛。首先，让我们谈谈 Framer 内置的 CMS。这个工具可以让你在一个中心位置管理博客文章、作品集项目或产品等内容。你无需逐页编辑所有内容，而是可以创建集合，定义标题、图像和其他元数据的字段。然后将这些字段直接连接到你的页面。当你更新 CMS 中的内容时，它会在实时网站上的所有其他位置自动更新，这使得管理动态内容更加容易，而无需接触任何代码。一旦你开始使用集合，Framer 就可以自动为你创建页面。你可以为博客文章、作品集作品或产品等内容设置单独的集合，并为每个集合设置自己的布局。这样，每个项目都遵循相同的结构，而无需你从头开始设计每个页面。当你将一个集合连接到页面模板时，Framer 会为每个你添加的条目生成一个动态页面。随着你的内容增长，网站也会随之增长，而无需额外的设置或维护。这是一种扩展网站的简单方法，同时保持一切一致且易于管理。在编辑 Framer 中的内容方面，它感觉更直接，你可以直接点击实时预览，直接在页面上进行更改，然后立即看到所有内容在整个网站上更新。所以，无需在面板之间来回切换，也无需猜测外观。只需点击，输入，即可完成。这也有助于简化协作。人们可以直接在页面上留下评论和建议，因此反馈始终与实际内容相关联，而不是存在于长消息线程中。与旧的工作流程相比，这是一种更顺畅、更快捷的更改方式，而不会中断你的工作流程。在 Framer 中与其他人的合作也相当直接。你可以邀请团队成员直接在项目上发表评论和分享反馈。权限设置可以让你控制谁可以编辑什么，这样就不会意外更改内容。Framer 还保留版本历史记录，这使得回滚更改或查看项目随时间演变变得容易。由于一切都实时更新，每个人都能看到正在发生的更改。无需再导出屏幕截图或来回发送静态模型来获取反馈。现在，问题是，因为大多数项目开始时并不复杂，但通常会变得复杂。所以，一旦你构建了更大的网站，添加了真实的功能，或者处理了客户项目，你可能需要比基本工具更多的控制权，对吧？别担心，因为 Framer 有方法可以在你需要时超越核心工具，而不会将一切变成一个开发项目。有时内置工具可以满足你大部分需求，但并非全部。Framer 允许你添加自定义 CSS 来进行精细的样式设置，插入 JavaScript 来实现更高级的行为，以及嵌入 HTML 来引入第三方服务。你不需要经常使用代码，但当你使用时，保持代码的组织性会产生很大的影响。Framer 还允许你将自定义代码转换为可重用组件，这有助于在项目增长时保持项目整洁和易于管理。另一个好处是 Framer 不会试图将你锁定在其自己的生态系统中。你可以连接你已经使用的工具，如 Google Analytics 进行跟踪，联系表单的电子邮件通知，或社交媒体嵌入。如果你在销售产品，Stripe 或 PayPal 等支付系统可以轻松集成。你还可以使用 API 或 Webhook 将 Framer 连接到 Mailchimp 等营销工具。一旦这些地方连接起来，网站就不再仅仅是页面的集合，而是开始像一个真正的后台工作系统一样运行。我们都知道，如果没人能找到，一个看起来不错的网站也帮不了多少忙。Framer 还将为你提供处理 SEO 所需的基础知识，而无需将其变成一个单独的项目。你可以设置页面标题和元描述，控制页面在社交媒体上分享时的显示方式，并添加 alt 文本，以便搜索引擎和辅助功能更容易理解图像。Framer 还负责处理站点地图等事宜，并允许你根据需要调整 robots.txt 文件。还有一个内置的 SEO 预览，可以让你轻松地看到你的页面在搜索结果中可能如何显示，并及早发现问题。性能速度比大多数人预期的要重要得多。幸运的是，Framer 为我们处理了很多性能方面的工作，但仍然需要注意图像大小、文件格式以及我们添加的自定义代码量。保持轻量级非常有益。在后台，Framer 使用全球内容分发网络并支持懒加载，因此无论访问者来自哪里，页面都能快速加载。当性能稳健时，网站使用起来感觉更好，并且随着流量的增长而保持稳定。好了，就这样，一切都已构建和完善。所以，我们的最后一步是让它上线。我们正在设置的一切都在编辑器中安全地进行，但这是大多数人真正关心的时刻。让网站上线第一次可能会让人望而生畏，即使一切都已准备就绪。但好消息是 Framer 使这部分相当直接，而且你不会做任何不可逆的事情。如果你使用的是年度计划，Framer 允许你申请一个免费的自定义域名，这样你就无需单独购买。设置是通过 Hover 进行的，它会一步一步地引导你完成整个过程。你将连接你的域名，设置 DNS 记录，然后给它一些时间。有时需要几个小时才能完全传播。如果你已经拥有域名，连接方式相同。Framer 为我们提供了清晰的说明和故障排除技巧，以防出现问题，这使得整个过程比听起来要轻松得多。所以在你公开任何内容之前，请确保在预览模式下进行最后一次检查，并像访客一样点击浏览网站。所以，检查链接，滚动浏览每个页面，并确保在桌面和移动设备上看起来都正确。当你准备好时，发布就像点击发布按钮一样简单。Framer 会显示一个快速确认，然后将网站推送到线上。草稿和已发布的版本是分开处理的，因此你可以在不影响实时网站的情况下继续进行更改。如果你需要将网站下线或回滚某些内容，你可以同样轻松地取消发布它。Framer 还支持暂存环境和计划发布，这在你计划发布或协调更新时很有帮助。你可以提前准备好一切，然后在你想要的时候让它上线。一旦你的网站上线，请确保了解人们在上面实际做什么。你可以连接 Google Analytics 来跟踪你的访问者、流量来源和一般行为。Framer 还有一个内置的分析仪表板，可以让你轻松地查看按钮点击次数、转化率以及人们如何浏览你的页面。如果你想更深入地了解，你可以设置自定义事件和目标来跟踪对你最重要的操作。在这样做时，请记住隐私，并确保你正确处理 cookie 通知和 GDPR 要求。在网站上线后，你的目标是保持一切顺利运行，而无需不断地照看它。Framer 会自动备份你的项目，所以如果出现问题，你总是可以轻松地回滚到以前的版本。对于较大的更改，复制网站并单独测试更新是避免破坏实时内容的简单方法。版本历史记录可以让你更容易地跟踪随时间发生的变化，基本的正常运行时间监控也有助于及早发现问题，而不是首先从用户那里听到它们。所以，一点点的维护可以大大保持网站的稳定。好了，现在你已经看到了 Framer 的功能，而 Framer 令人信服的很大一部分来自于人们实际如何使用它。你会看到用户的故事，他们发布了一个网站，突然获得了比他们预期的更多的关注。一篇 Reddit 帖子讲述了一个客户在切换到 Framer 网站后获得了太多的潜在客户，然后难以跟上所有回复。老实说，这没有什么神奇的，大多数时候它只是归结为几件简单的事情。网站看起来很干净。点击什么很清楚，而且加载速度很快。这种组合很有效。Framer 网站往往更定制化和有目的性，即使没有人手动编码它们。这通常是让人们最惊讶的。看到这样的东西可以让你更容易地信任自己的设计选择。这就是 Framer。它让你能够快速行动，构建看起来专业的网站，然后跳过网页设计通常带来的所有摩擦。你不需要编码，不需要大预算，也不需要等待几周才能发布真实的东西。有一个小的学习曲线，但回报是比大多数构建器提供的更多的创意自由。所以，如果你好奇，就打开 Framer 玩玩，探索一下。免费计划足以让你有所感受。我会在下面的描述中留下链接。感谢你的观看和今天投入的时间。下次见。