Axure RP 8 入门手册 – 第4章(下)

AxureRP8.0教程 小楼一夜听春语 3994℃ 0评论

第5节          生成文件

u0小霏:老师,除了在线发布,以及APP中查看的这种方式,还有其它方式给别人查看吗?我听说可以传送文件给别人,就能够直接在电脑上查看原型。

 

u2小楼:嗯,你说的是生成HTML文件的方式。

 

Axure中能够将制作的原型输出生成为HTML文件,这个生成的文件内容可以发送给他人直接通过浏览器查看。

生成HTML文件的操作可以通过点击快捷功能中的发布按钮,然后在弹出的菜单中选择【生成HTML文件】的选项,打开生成配置的窗口。这一步操作也可以通过按下键盘上的<F8>键来完成。(图4-28)

%e5%9b%be4-28

(图4-28)

在生成HTML的窗口的【常规】设置中,需要设置HTML文件的保存位置,可以选择硬盘上的某个文件夹的路径,或者在某个路径的末尾输入“\文件夹名称”新建文件夹。例如,将生成的HTML文件保存至系统桌面的“TestFiles”文件夹中。如果系统桌面上没有这个文件夹,我们可以先通过点击路径输入框后面的【…】按钮选择保存到系统桌面,然后在路径末尾再加上“\TestFiles”,这样在生成时,软件会在系统桌面上新建一个名为“TestFiles”的文件夹,并将生成的HTML文件保存到该文件夹中。(图4-29)

%e5%9b%be4-29

(图4-29)

u0小霏:老师,我刚才生成了HTML文件,但是生成后我发现文件夹中有很多文件,到底把哪一些发给别人呢?

 

u2小楼:嗯,基本上要把这个文件夹所有的文件都发给别人。

 

u0小霏:啊?我的原型是做给客户看的,那么多文件,客户要打开哪个?

 

u2小楼:别叫那么大声!我给你简单说一下,你就明白了。

 

在生成的HTML文件夹中,会包含很多的内容,有文件夹以及HTML类型的网页文件。文件夹中的内容不需要去关注,浏览原型的关键在于几个HTML页面文件。以一个新建的RP文件为例,生成HTML文件包含图4-30中的这些内容。

特别说明:本书作者制作的汉化文件中,将index页与home页进行了合并,所以在生成的文件中不包含home页。其它汉化版本会可能同时包含home页与index页,并且index页打开时会包含工具栏。

%e5%9b%be4-30

(图4-30)

其中:

index:能够打开原型的起始页面。

start:打开的页面中包含工具栏,并展开页面列表,同时包含原型起始页面。

start_g_1:打开的页面中包含工具栏,但不展开页面列表,同时包含原型起始页面。

start_c_1:打开的页面中包含工具栏,工具栏为最小化状态,同时包含原型起始页面。

其它页面:例如page1~page3,能够打开原型中相同名称的页面。

通过以上内容能够看出,除了其它页面,剩余的四个页面分别对应了浏览原型时,工具栏设置的四个选项。(图4-31)

%e5%9b%be4-31

(图4-31)

u0小霏:哦,我明白了,老师。如果我不想让客户看到工具栏,就删除名称以start开头的几个页面,让客户打开index页面。如果想让客户看到工具栏,就删除另外两个名称以start页面,让客户打开start页面……

 

u2小楼:嗯嗯,但是千万要记住,index页面和其它自定义名称的页面都是原型的内容,是不可以删除的。

 

u0小霏:那我还有个问题,生成HTML文件时,一定把所有的都生成吗?如果有些页面不想给别人看到怎么办?

 

u2小楼:这个也在生成HTML的窗口中进行设置。

 

如果只想生成原型中的部分页面,只需要在生成HTML窗口的【页面】设置中进行相应的选择。例如只想生成page1页和page3页,就先取消【生成所有页面】的勾选,然后将page1页和page3页前面的复选框选中。不过因为page1页和page3页是index页的子页面所以在勾选时,index页也会被自动选中。(图4-32)

%e5%9b%be4-32

(图4-32)

如果不希望index页被选中,需要把page1页和page3页的层级调整到与index页平级或者更高的层级。(图4-33)

%e5%9b%be4-33

(图4-33)

u0小霏:老师,我发现即便不生成index页,在文件夹中还是会出现index页。

 

u2小楼:是的,index页是系统默认生成的一个页面。当原型中包含命名为index的页面时,它能够打开这个index页面,如果原型中没有命名为index的页面,它则能够打开生成的页面列表中排在上方第一位的页面。

 

第6节          浏览器插件

u0小霏:老师,玩蛋了!!!

 

u2小楼:……是完。

 

u0小霏:对不起!我太着急打错字了。老师,完蛋了!

 

u2小楼:靠……我还健在。

 

u0小霏: 老师,你别生气嘛!是这样的,今天我把做的原型发给客户,结果他打不开。

 

u2小楼:哦,他是什么浏览器?

 

u0小霏:是谷歌浏览器。

 

u2小楼:那就不用着急了,谷歌浏览器是需要安装插件才能正常浏览原型的。

 

使用谷歌浏览器浏览生成的HTML文件时,会要求安装浏览器插件。(图4-34)

%e5%9b%be4-34

(图4-34)

这个插件可以直接点击提示中,步骤1下面的粉红色【INSTALL EXTENSION】的按钮进行安装。(图4-34)

如果无法顺利安装(一般是无法下载),可以通过以下步骤解决。

%e5%9b%be4-35

(图4-35)

  • 在设置界面中找到扩展程序,点击打开扩展程序列表。(图4-36)

%e5%9b%be4-36

(图4-36)

  • 将下载到本地的插件文件放入到谷歌浏览器中界面,这时会显示提示“拖放以安装”。(图4-37)

%e5%9b%be4-37

(图4-37)

  • 在弹出的对话框中点击【添加扩展程序】按钮。(图4-38)

%e5%9b%be4-38

(图4-38)

  • 在添加好的扩展程序中勾选【允许访问文件网址】,并且保证【已启用】为已勾选的状态。(图4-39)

%e5%9b%be4-39

(图4-39)

完成以上步骤,谷歌浏览器就可以正常的浏览Axure生成的HTML文件了。

u0小霏:老师,你好厉害呀,真的是这个问题呢!

 

u2小楼:嘿嘿,我还有更厉害的。你想不想要?

 

u0小霏:不要,我怕! 不过,老师,让别人安装插件好麻烦啊!而且,有的客户浏览器也很老旧,有的居然用IE8或者IE9,导致经常出现莫名其妙的问题,没办法正常浏览。

 

u2小楼:我说的更厉害的就是能够解决这个问题!我有两个工具,你可以试一下。

 

作者为了解决浏览原型用户的浏览器环境的问题,做了两个简单的小工具。在这两个工具中分别内置了谷歌浏览器和火狐浏览器。生成HTML文件后,将所有生成的内容复制到任一工具中的Demo文件夹中(图4-40),删除不符合需求的打开方式(.bat文件),然后将工具文件夹所有内容发送给浏览原型的用户,用户无需安装浏览器以及插件,只需要鼠标双击打开相应的“.bat”文件就能够正常的浏览原型。

%e5%9b%be4-40

(图4-40)

工具下载地址:http://www.iaxure.com/menupage/download.html

特别说明:在后文中将会讲解文本框元件不同类型的设置,有些类型需要特定的浏览器才能够支持,所以在选择上述工具时,需要考虑原型中特定类型文本框对浏览器的要求。

第3节          工具栏介绍

u0小霏:老师,浏览原型时左侧工具栏里面的那些功能都是什么呀?都是英文,我看不懂啊!

 

u2小楼:变成中文就能看懂啦!

 

作者做了工具栏的汉化包,下载后替换Axure安装目录中的同名文件即可实现工具栏的汉化。

下载地址:http://www.iaxure.com/menupage/download.html

工具栏的页面面板中,除了可以点击页面列表中的页面名称切换显示页面,还有两个功能按钮。(图4-41)

一个功能按钮用于生成单个页面的共享链接,例如将原型共享到Axure服务器上时,获取到的是项目初始页面的访问链接,而在工具栏上,能够获取各个页面单独的共享链接。

另一个功能按钮,能够高亮显示原型页面中添加了交互的元件。

%e5%9b%be4-41

(图4-41)

工具栏的说明面板中,能够显示页面说明。还有三个功能按钮。其中,两个按钮用于翻页,另外一个蓝色按钮用于显示/隐藏页面中元件的说明图标。(图4-42)

%e5%9b%be4-42

(图4-42)

工具栏的调试面板中,能够时时监控到全局变量值的变化以及交互的执行情况。(图4-43)

%e5%9b%be4-43

(图4-43)

特别说明:本节中使用的工具栏汉化包仅在本地预览和生成HTML查看原型时有效,发布到AxureShare浏览时无效。


~~~~~~~~~~~~ 正文结束 下面没了 ~~~~~~~~~~~~

小楼老师再出新作,倾力打造Axure RP 8精品课程系列,以最短的时间高效完成学习目标,入门进阶与实战案例并重,是0基础的新手从入门到精通的必备课程。

《AxureRP 8 入门与实战 - 入门篇》------从零入门进阶的最佳课程------【点此查看详情】

《AxureRP 8 入门与实战 - 案例篇》------实战手册图书的同步视频------【点此查看详情】


转载请注明:Axure原创教程网 » Axure RP 8 入门手册 – 第4章(下)

喜欢 (38)or分享 (0)
发表我的评论
取消评论

表情

Hi,您需要填写昵称和邮箱!

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址
(1)个小伙伴在吐槽
  1. 下面总是没了,下面到底去哪里了?
    Henger2017-04-28 13:35 回复