1、axure 教程(七) 如何输出网站/应用程序原型axure 发表于 232 天 3 小时 49 分钟前来源： 标签： Axure 教程 axure rpaxure 原型 auxre 下载这期 axure 教程主题主要是教授大家如何输出网站或应用程序的原型，进行实战，主要从以下 5 个部分进行教学：1. 什么是网站/应用程序原型 (HTML Prototype)?2. 输出网站原型/格式设定3. 展示与操作网站原型4. 分享原型档案给其它人5. 秘技(Quick Tips)1. 什么是网站 /应用程序原型 (HTML Prototype)?在 Axure 中完成有批注的 Wireframe 和
2、 Interaction 之后，您可以产生可交互且支持多种浏览器的 Web/AP 原型(HTML Prototype)。(注: AP 是 Application 的缩写，通常指的是应用程序)Axure RP 网站原型是由 HTML 和 Javascript 组成，可以在 IE 6(或以上的版本)、Mozilla 或 Firefox 中浏览。换句话说，观看网站原型的人仅需要一般浏览器，不需要安装 Axure RP。如下图范例所示。解除 IE 中的 Active X 警告讯息：使用 IE 开启在自己计算机里头的 HTML Prototype档案时，浏览器中可能会出现 Active X 警告讯息，想
3、要暂时解除 IE 中的警告讯息，请点选 IE 浏览器出现的 Active X 警示讯息，接着选择”允许被封锁的内容”，这样子就可以在IE 浏览器上看到自己计算机里头的 HTML Prototype 了。想要永久解除 Active X 警告讯息，请参考秘技一。2. 输出网站原型 /格式设定想要输出原型或设定(Configure HMTL Prototype)输出格式的话，请按下 Axure RP 软件上方主功能选单Generate菜单，选择Prototype(F5)。或是按下工具列中的Prototype钮，系统会开启Configure HTML Prototype对话框，并显示预设的原型输出格式
4、设定，您可透过这个对话框来设定输出原型的格式。格式设定中的选项可分成下面几区：General：在Destination Folder处输入网站原型的 HTML 档案的存放位置，因为Axure RP 的网站原型包含许多档案，最好指定一个 windows 档案系统内的档案夹来存放。Notes(网页说明)：选择和排序想要显示在网站原型中的网页层级说明。Annotations(物件批注)：选择和排序想要显示在网站原型中的批注字段。Interactions (交互)：指定交互的行为，例如：指定是否需要预设显示条件描述 (case)，或是只在多个条件存在的情形才显示。Distribution：选择是否产生
5、 CHM 檔。Advanced：选择是否将 Text Panel 转成影像，这是一个旧版本的功能，现在很少有需要这样处理。初次输出原型，您可以直接使用预设的设定值，除了指定输出的档案夹之外，不用费心去调整。或者当您完成网站原型输出格式的设定，只要按一下【Generate】钮就可将这个Prototype 输出了。如果您越来越熟练，您可以两个动作就完成网站原型的输出了，第一个动作是按下【F5】，接着再按下【Generate】。3.展示与操作网站原型Axure RP 输出的网站原型(HTML Prototype) 总共可区分成三个框架。左侧: Sitemap 框架您可以按 Sitemap 中的网页列
6、表，循序展示网站原型中的任何一个网页。如果您不需要显示左侧的 Sitemap，那么就应该底部: 网页说明(Page Notes)框架这个框架显示该网页的文字说明，这些文字说明来自于您写在网页批注(Page Notes)的文字。中间: 主框架主框架包含了 Wireframe 和流程图，Wireframe 是可以交互的，举例来说，按一下设定有网页连结的按钮，那么就会连结到所设定的网页。您也可以按一下加有附注的 Widget 旁边的黄色便利贴小 Icon 图示来检视批注。4. 分享原型档案给其它人因为 Axure RP 的 Prototype 是标准的 HTML、Javascript 和影像文件，所
7、以您的同事和客户不需要安装 Axure RP 或任何播放器就可以直接检视 Prototype。发布 Prototype 的方式有很多种，以下是三种不同的分享方式的介绍。a. 放到网站服务器第一种方式是发布网站原型的 HTML Prototype 到 Web Server 上，您只要将网址给客户或工作伙伴其它人，他们在他们的浏览器上浏览 Prototype。b. 压缩成 Zip 檔第二种方式是将包含 Prototype 档案的档案夹压缩成 Zip 档，然后将 Zip 档寄给相关的人。收到档案的人，将 Zip 档解压缩后，便可以直接在自己的计算机浏览 HTML Prototype，通常是开启 in
8、dex.html 或从 XXX_Start.html 档开始浏览 (XXX 指的是该 RP Project的名称)。c. CHM 檔第三种方式是产生包含 Prototype 的 CHM 档，就像 zip 档一样，这种方式让您可以档案的方式发布 Prototype，而且不需要安装任何软件来检视。CHM 是 Microsoft HTML Help 档的格式，所以大多数的 Windows 计算机已经安装了浏览器，使用者只要在档案上连续按两下鼠标左键就可以检视它。想要将 Prototype 输出成 CHM 档的话，请在Configure HTML Prototype对话框中，进入Distribute
9、区，勾选Create HTML Help File(.chm)选项。如果您目前已经安装的 Microsoft 系统中没有 HTML Help Workshop 的话，就必须安装它才能产生 CHM 档，您可从这里免费下载，一旦完成安装以后，所安装的数据夹中将会出现一个 hhc.exe 的档案，按一下 Locate hhc.exe 来告诉 Axure RP 这个程序在计算机中的位置。一旦 Prototype 和.chm 档产生之后，您将会在存放 Prototype 的数据夹中找到一个 .chm 档，您现在就可以将 .chm 档发布出去，让接收者在 HTML Help 检视器中检视。秘技(Quick
10、 Tips)秘技一. 只更新现在开启的页面到网站原型：当您设计网站原型的技巧越纯熟，网站项目会越来越大，导致输出网站原型的时间会随着项目而变大。万一您只是调整其中的某一页，却得等待整个网站重新全部输出，那就太浪费时间了。想要重新产生某一页网页，只要在 Axure RP 打开该页 Wireframe，接着按下 Axure RP主功能选单Generate菜单，选择Regenerate Current Page to Prototype(CTRL+F5)( 如下图 )。当您选择这个动作，或者直接按下热键 CTRL+F5，Axure RP 不会产生任何对话窗口，您只会感觉到鼠标指针闪了一下，此时，再回
11、到网站原型(HTML Prototype)上去 reload这一页，或 click 这一页网页名称，就会看到已经更新的页面了。秘技二. 关闭 IE 中的 Active X 警告讯息：使用 IE 浏览器在自己的计算机上开启存放于档案夹中的 HTML Prototype 时，浏览器中可能会出现 Active X 警告讯息，想要永久解除 IE 中的警告讯息，请点选 工具菜单中的Internet 选项，切换到高级标签页中，找到安全的设定中，勾选允许活动内容在我的计算机上的文件中运行*选项即可 (如上图)。秘技三. 嵌入外部 Flash 档案 Inline FrameInline Frame Widget 可用来加入 Axure RP 目前不支持的内容，例如：Flash 物件；只要在 Inline Frame Widget 上连续鼠标左键两下就可以让您指定想要加载到框架的网页，如果您要建立一个包含 Flash 对象的 HTML 文件，您可以将档案嵌入到 Inline Frame 中，这样他就可以在 Prototype 中呈现了。秘技四. 快速绘制网站架构图：以”Generate Flow Diagram”的功能，请看快速绘制网站架构图 (Sitemap)教学影片。IT 精华社区 QQ 群号：51995980 欢迎 IT 人士分享交流。IT 精华社区 欢迎转载 转载请注明出处
