交互原型概述
时长:
指导老师:Axure官网
困难程度:容易
使用交互式原型与他人分享和体验你的设计。在本文中,学习如何定制用户界面,生成和分享交互原型。
交互原型概述
交互原型能够简化设计、需求文档,获得用户反馈,识别并确定需求。在设计原型后,在原型上添加注释和交互,不用写一行代码就可以生成一个互动的、基于浏览器的原型文档。
Axure RP原型是由HTML、JavaScript、CSS和图像组成的文件,可以在现在正流行的web浏览器,例如:Firefox、ie、Safari 和Chrome上查看。用户能够轻松的分享原型文档,而无需安装阅读器,播放器等。如果用户需要对设计进行编辑,仅需要Axure RP软件就己经足够。
生成的代码不适合开发使用。然而,有一个API,能够在开发编程中访问AXURE RP文件中的数据,如果你想创建一个自定义访问器。了解更多的API。
配置和生成原型
有许多方法可以配置原型生成内容,如:选择生成的页面,添加标识及标题。一旦配置了原型生成项,只需点击一个按钮就可以生成HTML和JavaScript。
配置原型

打开生成原型对话框,在主菜单栏选择生成->原型或是在工具栏选择原型按钮。
常规:为生成的原型选择目标文件夹,设置打开浏览器。原型有很多文件,所以最好为其创建一个文件夹。原型在PCs电脑上的默认生成路径为:~/My Documents/My Axure RP Prototypes folder,Macs为:~/Documents/Axure/Prototypes folder
点击“使用默认”按钮,重置目标文件夹到默认路径。
页面:选择要生成原型的页面。默认情况下,这个值设为生成所有页面。
注释:选择并排序在原型中的页面注释。
标注:如果在原型中显示注释,选择和排序注释字段。也可以选择用部件标签来代替注释图标。
交互:设置始终显示用例描述或仅当事件有多个用例时,显示用例说明。
标志:可以为原型导入一个图像标志和编辑标题。
手机/移动设备:选择为移动设备的浏览插入一个视窗接口标记。视窗接口标记设置查看原型时移动设备的大小和缩放选项。
发布(仅适同于PC):设置生成一个CHM版本的原型帮助文档。
高级:设置将文字面板渲染为图片,字体大小使用点(Pt),不应用草图效果。
讨论(测试):设置在原型中启用AxShare(share.axure.com)的讨论。这个功能还在测试阶段。
生成原型

原型配置完成之后,点击“生成”按钮在目标文件夹创建所有的原型文件,并在指定浏览器打开原型。
在生成原型的文件夹中(即: ../我的文档/我Axure RP原型/[文件名称]),点击“start.html”文件,可以随时浏览原型。
提示:在第一次生成原型后,可以在主菜单栏选择“生成->在原型中重新生成当前页”重新生成原型的单页。刷新浏览器更新页面原型。当原型设计的文档较大时,这样可以极大的节省工作时间。
使用原型

生成的原型有两个部分:
Sitemap, Page Notes, and Discuss(左边):原型文档的左边有3个标签,Sitemap标签中包含页面主框架,点击框架内的页面链接打开页面。Page Notes标签可以查看添加在页面内的注释。Discuss标签内可以对原型进行讨论。
点击左边窗口右上角的灰色矩形可以收起左边窗口。要展开左边窗口可以点击窗口左上角的灰色矩形。想要窗口不出现,你也可以直接进入一个HTML的导航页。
主窗口(右边):包括线框图和流程图的交互。在Axure RP文档中的交互设置会在线框图交互中表现出来。带注释的部件旁边会有提示图标。点击图标显示对话框,可查看注释。
提示:如果你使用Internet Explorer,您可能会看到浏览器弹出警告信息:是否允许ActiveX内容显示。如不想显示这个警告,可以在浏览器主菜单:工具-> Internet选项。高级选项卡中,向下滚动到安全部分,点选“允许活动内容在我的计算机运行文件”选项。
分享和发布原型
用户可以不用安装AxureRP和阅读器,以多种方式分享和发布原型。
发送Zip文件
创建原型的zip文件:右击原型文件夹,选择“发送到->压缩文件夹(Zipped)”(PC系统)。或“压缩文件夹【文件夹名称】”(Macs系统)。这个操作能够创建一个原型压缩文档并将文件发送给用户。
用户接收压缩文档后,在电脑上解压并打开压缩文件,选择“取出所有文档”,或是将压缩文档内的原型文件夹拖到电脑桌面,就可以取得原型文件夹内的所有原型文档。
打开“start.html”文件,开始在浏览器中查看原型文档。注意:在压缩文件中是无法直接打开原型文档的;一定要将原型文档先从压缩文件中取出。
发布到共享服务器或Web服务器

发布原型到共享或web服务器,可以先在本地生成原型,然后再将文件移动到服务器,也可以直接生成到服务器(需求建立对服务器的访问)。可以使用FTP程序,如:Flash FXP将原型文件夹上传到服务器。如果你不知道公司是否有服务器设置,可以寻求IT人员的帮助。
所有文件上传后,可以将原型文档地址或原型链接发布给使用者。只要他们有服务器的权限,就能够在他们的浏览器中查看原型。
发布到AxShare

AxShare是Axure官网的原型共享服务器,它允许用户将自己的10个原型文档上传到服务器中进行管理(如要上传更多原型需付费)。用户可以将RP文件上传到AxShare服务器,原型生成后,服务器会提供一个原型分享的地址链接供其它人查阅。用户还可以免费在AxShare服务器上对自己的原型设置密码,保护原型文档。
在原型文档的sitemap标签中,还有一个Discuss标签。能够在用户的AxShare帐户中查看大家对原型的讨论。
更多细节请查看:http://share.axure.com/
发送CHM文件(仅PC系统)

CHM文档格式是针对微软的HTML帮助文件。大多数Windows电脑已经安装了播放器。如:zip文档,能够发布单个文件并且用户不需要安装任何软件就可以查看。因为用户不需要解压缩提取原型文件,所以对用户来说更加方便。
生成原型为.chm文件:打开生成原型对话框(F5),选择“发布”配置,选择创建HTML帮助文件(.chm)选项。当生成HTML的原型时会在原型文件夹内生成chm文件。
如果微软系统中没有将CHM文件生成为HTML的程序,可以在这里免费下载(点击“htmlhelp.exe”下载按钮)。程序安装完毕后,文件夹内会有一个己安装的hhc.exe文件。在生成原型对话框“发布”配置中,点击“定位hhc.exe位置”,配置hhc.exe程序在您电脑上的位置。