Axure导出HTML后怎么打开

Axure 导出 HTML 并打开查看的详细步骤指南

Axure RP 是一款强大的原型设计工具，其核心功能之一就是将你的交互式原型导出为 HTML 文件，这样你就可以在浏览器中运行和演示它，无需安装 Axure 软件，这对于分享给团队成员、客户或进行用户测试至关重要,以下是详细的操作步骤和注意事项：

第一步：在 Axure RP 中准备并导出 HTML

1. 完成原型设计： 确保你的原型设计（.rp 文件）已经完成或达到你想要分享的状态，仔细检查交互、动态面板状态、链接等是否按预期工作。
2. 导航到发布菜单：
   • 在 Axure RP 软件顶部的菜单栏中，找到并点击 “发布” 菜单。
3. 选择导出选项：
   • 在“发布”菜单的下拉选项中，选择 “生成 HTML 文件…”，这是最常用的导出方式，会生成一个包含所有 HTML、JavaScript、CSS 和资源文件（如图片）的完整文件夹。
4. 配置导出设置（重要步骤）：
   • 点击“生成 HTML 文件…”后，会弹出 “生成 HTML” 的设置对话框，这里有几个关键设置：
     • 目标文件夹： 点击 “文件夹…” 按钮，选择一个你容易找到的位置（如桌面或特定项目文件夹）来存放导出的 HTML 文件。强烈建议新建一个空文件夹，因为 Axure 会生成很多文件。
     • HTML 文件名： 给你的 HTML 文件命名（我的产品原型），导出的主 HTML 文件通常会以此命名（如 我的产品原型.html）。
     • 页面： 选择你想要导出的页面范围（当前页面、所有页面或自定义选择）。
     • 浏览器： 选择你希望原型在哪种浏览器环境下预览（通常保持默认即可）。
     • “包含” 选项卡： 这里可以配置是否包含 Axure 的交互注释（页面说明、元件说明）、是否生成站点地图（sitemap.html）等,根据你的演示需求勾选。
     • “移动设备” 选项卡： 如果你的原型需要适配移动设备查看，可以在这里设置视口（Viewport）和缩放选项。
     • “高级” 选项卡： 通常保持默认设置即可，高级用户可在此配置生成选项、字体设置等。
5. 开始生成：
   • 配置好所有选项后，点击对话框底部的 “生成” 按钮。
   • Axure RP 会开始处理你的原型，并将其编译成 HTML、JavaScript、CSS 等文件，并复制所有用到的图片资源到你指定的目标文件夹中，这个过程可能需要几秒到几分钟,取决于原型的复杂程度。
6. 生成完成提示：
   • 当导出过程成功完成后，Axure 通常会弹出一个提示框，告诉你“HTML 生成成功”，你可以选择点击 “打开文件夹” 按钮直接跳转到存放导出文件的文件夹，或者点击 “确定” 关闭提示。

第二步：找到并打开导出的 HTML 文件

1. 定位导出文件夹：
   • 如果你在导出时点击了“打开文件夹”，文件资源管理器（Windows）或 Finder（Mac）会自动打开你指定的目标文件夹。
   • 如果没有自动打开，请手动导航到你之前选择的那个目标文件夹。
2. 识别主 HTML 文件：
   • 在导出的文件夹中，你会看到很多文件和子文件夹（如 data, resources），你需要找到主 HTML 文件来启动原型。
   • 主 HTML 文件通常有以下几种命名方式（取决于你的导出设置）：
     • 你指定的“HTML 文件名” + .html (我的产品原型.html)。
     • 如果你勾选了“生成站点地图”，start.html 或 sitemap.html 是入口文件（它列出了所有页面）。
     • 如果你只导出了一个页面，文件名通常是该页面名 + .html。
   • 最简单的方法： 寻找一个 .html 文件，其图标是你默认浏览器的图标（或者文件名看起来最像你的原型名称/首页名称）。index.html 也是常见的入口文件名。
3. 在浏览器中打开 HTML 文件：
   • 方法一（推荐）：
     1. 打开你常用的网页浏览器（如 Chrome, Firefox, Edge, Safari）。
     2. 在浏览器中，按 Ctrl+O (Windows/Linux) 或 Cmd+O (Mac)，或者通过菜单选择 “文件” > “打开文件…”。
     3. 在弹出的文件选择对话框中，导航到你存放 Axure 导出文件的文件夹。
     4. 找到并选中你识别出的主 HTML 文件 (如 我的产品原型.html, start.html, index.html)。
     5. 点击 “打开”，你的 Axure 原型就会在浏览器窗口中加载并运行了。
   • 方法二（直接双击 – 注意安全警告）：
     1. 在文件资源管理器（Windows）或 Finder（Mac）中，直接双击你识别出的主 HTML 文件。
     2. 重要安全提示： 现代浏览器出于安全考虑，可能会阻止直接打开本地 HTML 文件中的某些功能（尤其是涉及 JavaScript 或 Ajax 请求时），你很可能会在浏览器地址栏下方看到一个安全警告栏（Chrome 会显示 “此页面正在尝试加载来自您计算机上的脚本” 或类似提示，并有一个 “允许” 或 “加载不安全脚本” 的按钮）。
     3. 必须操作： 点击那个 “允许” 或 “加载不安全脚本” 的按钮，否则你的 Axure 原型的交互功能（如点击按钮切换面板、链接跳转等）将无法正常工作，浏览器这样提示是因为文件是从本地硬盘加载的，而不是安全的网络服务器。这是正常现象，点击允许是安全的,因为文件是你自己生成的。
     4. 点击允许后,原型应该就能正常交互了。

常见问题与解答 (FAQ)

• Q：导出的文件夹里文件好多，我该打开哪个？
  • A：优先寻找 start.html, sitemap.html, index.html 或者你自己命名的 [你的文件名].html,双击打开它们试试看哪个能正确显示你的原型首页或目录。
• Q：为什么在浏览器里打开后，原型看起来是空白的或者交互没反应？
  • A：最常见的原因是没有允许浏览器加载本地脚本，请仔细检查浏览器地址栏下方是否有安全警告，并点击 “允许” 或 “加载不安全脚本”，如果是在服务器环境（如本地搭建的服务器或上传到网站空间）,则不会出现此警告。
  • 检查导出设置是否正确,是否包含了所有需要的页面和资源。
  • 确保使用的浏览器是较新版本（Chrome, Firefox, Edge, Safari 的最新稳定版通常兼容性最好）。
• Q：我可以把导出的整个文件夹发给别人看吗？
  • A：可以！ 这是 Axure 导出 HTML 的主要目的之一，将整个导出的文件夹（包含所有子文件夹和文件）压缩成一个 ZIP 包，发送给对方，对方解压后，按照上面的“第二步”操作，在浏览器中打开主 HTML 文件即可（同样需要注意本地脚本允许问题）。
• Q：为什么直接双击 HTML 文件有时能打开有时不行？
  • A：这通常与浏览器默认设置或文件关联有关，最可靠的方式是始终使用方法一（通过浏览器的“打开文件”菜单） 来打开本地 HTML 文件，以避免潜在问题，双击文件时，系统会用默认浏览器打开，但如果默认浏览器设置不当或文件关联错误，可能无法正确加载脚本,通过浏览器菜单打开则更可控。

重要注意事项

1. 本地脚本警告： 这是最关键的一点，务必理解并告知查看者，在本地打开时必须点击浏览器提示的“允许加载不安全脚本”，交互功能才能生效，这不是病毒或错误,是浏览器的安全机制。
2. 文件完整性： 导出的 HTML 原型依赖于文件夹内的所有文件（HTML, JS, CSS, 图片）。切勿只发送或移动单个 HTML 文件,必须保持整个文件夹结构的完整。
3. 浏览器兼容性： Axure 生成的 HTML 使用了现代 Web 技术，确保使用最新版本的 Chrome, Firefox, Edge, Safari 等主流浏览器以获得最佳兼容性和性能，旧版浏览器（如 IE11）可能无法完美支持所有交互。
4. 服务器环境： 如果你将导出的文件夹上传到 Web 服务器（网站空间），通过 http:// 或 https:// 网址访问，则不会出现本地脚本警告，所有功能应能直接正常工作，这是分享原型的理想方式（例如使用 Axure Cloud 或自建服务器）。
5. 路径问题： 如果导出后移动了文件夹内的文件或文件夹结构，可能会导致资源加载失败（图片不显示、交互失效）,保持导出文件夹内部结构不变。

导出 Axure 原型为 HTML 并打开查看是一个标准流程：在 Axure 中通过 发布 > 生成 HTML 文件… 配置并导出到指定文件夹；然后在浏览器中（推荐使用“文件>打开文件”菜单）找到并打开该文件夹中的主 HTML 文件（如 start.html, sitemap.html, index.html 或你命名的文件）；最关键的是，如果浏览器提示安全警告，务必点击“允许加载不安全脚本” 以使交互生效,记住保持整个导出文件夹的完整性进行分享。

引用说明：

• 本文操作步骤基于 Axure RP 10 版本的用户界面和功能，核心流程在不同版本间（如 Axure 8, 9）通常类似,但菜单项位置或对话框细节可能略有差异。
• 关于浏览器安全机制（本地文件脚本加载警告）的解释，参考了现代浏览器（Chrome, Firefox, Edge, Safari）的官方安全策略文档中对本地文件处理的通用原则,具体提示文字可能因浏览器版本而异。
• Axure 官方文档提供了更详细的 HTML 生成选项说明：https://docs.axure.com/axure-rp/reference/generating-html/ (此为 Axure 官方知识库链接，具备高权威性)。