Axure RP 9萌新修炼手册-第三章-基础应用(4)

AxureRP9教程 小楼一夜听春语 226℃ 0评论

第三节 发布原型

一、导出图片

制作好的线框草图,我们可以导出图片用于展示或者放入产品相关文档中。

在软件导航栏的【文件】菜单中,可以完成页面导出为图片的操作。(图3-80)

我们还可以直接在画布中选中需要导出为图片的所有元件或部分元件,通过快捷键或者上下文菜单进行复制,然后直接粘贴到文档或者聊天工具的对话窗口中(例如QQ)。

二、预览

预览功能主要是为了便于在原型的编辑过程中能够时时查看效果。

当然,如果在本机为他人演示原型也可以使用预览功能。

我们可以点击工具栏中的“预览”图标或者使用快捷键是<F5>键,通过指定的浏览器查看原型。

在导航栏的【发布】菜单中有【预览选项】可以进行浏览器的指定以及播放器状态的设置。(图3-81)

三、在线共享

Axure官方为我们提供了在线共享的功能。

通过在线共享功能,能够将原型文件上传到Axure云,生成可以在线访问的网页。

使用在线共享功能之前,我们需要先注册Axure账号。

点击Axure RP 9软件界面的右上方的【登录】按钮或者通过快捷键<Ctrl+F12>键打开登录注册界面。

然后,点击【注册】按钮进行注册。

输入注册的【邮箱】、【密码】并勾选【我同意Axure条款】后,点击【确定】按钮即可完成注册。(图3-82)

注:网络情况会影响注册响应时长。

当注册成功后,软件界面右上方的【登录】按钮文字会变为注册邮箱的前缀,此时就能够正常使用共享功能了。

我们可以点击工具栏中的“共享”图标或者通过快捷键<F6>键进行共享发布。(图3-83)

在发布窗口中,我们可以设置项目名称、选择服务器上的存放位置以及设置浏览密码。

默认勾选的【允许评论】选项,能够让他人在浏览原型时对原型发表评论。

另外,我们还可以在发布共享时对HTML页面进行设置:

页面:可以选择生成全部或部分页面。

说明:可以选择是否生成元件和页面的说明内容。

交互:可以设置情形的执行方式以及引用页面的打开方式。

字体:可以设置Web字体与字体映射。

当点击【发布】按钮后,软件会自动将原型文件上传到服务器,并生成访问原型页面的URL链接。

在软件界面的中下方我们能够看到发布状态和生成的访问链接。(图3-84)

发布后的项目可以访问Axure云(https://www.axure.cloud)进行管理。

在Axure云中,点击项目列表中的项目名称,能够打开项目的概览视图。(图3-85)

概览(OVERVIEW)页面中,能够呈现项目中所有已发布页面的缩略图。(图3-86)

当我们将鼠标指针移入某一个缩略图,可以进行预览(PREVIEW)或者检查(INSPECT)相应的视图。(图3-87)

在检查(INSPECT)页面中,我们点击视图中的元素,能够显示该元素的详细信息,包括尺寸、文字以及颜色等等。还能够获取该元素的CSS样式代码。(图3-88)

另外,Axure云还提供对原型页面的评论功能。能够撰写评论以及在页面中任意位置添加评论。(图3-89)

四、生成HTML文件

生成的HTML文件一般无需网络就可以直接通过浏览器打开查看原型。

如果在原型中使用了一些在线资源(例如字体、多媒体文件),则需要网络的支持。

我们可以通过生成HTML的功能,将原型生成为网页文件,发送给他人通过浏览器进行查看。

点击工具栏中的“HTML”图标或者通过快捷键<F8>打开生成HTML文件的配置界面。

在配置界面中,我们选择HTML文件的保存路径,点击【发布到本地】的按钮,即可完成HTML文件的生成。(图3-90)

如果有需要,也可以进行浏览器、播放器、页面、说明、交互以及字体的相关设置。

生成HTML文件后,如果对某个页面又进行了修改,我们可以在【发布】菜单中【重新生成当前页面的HTML文件】。(图3-91)


五、浏览器插件

使用谷歌浏览器或基于谷歌浏览器内核二次研发的浏览器打开生成的HTML文件时,如果打开的是名称为“index”的页面文件或者名称为“start”开头的页面文件,会要求安装浏览器插件。

浏览器插件下载地址:http://www.chanpinban.com/downloads/

安装浏览器插件,需要在谷歌浏览器中打开扩展程序。(图3-92)

在扩展程序界面中开启【开发者模式】,然后拖入浏览器插件文件,点击【添加扩展程序】按钮进行安装。(图3-93)

注:如果拖入无法安装,需要在开启开发者模式后,重新启动浏览器,再进行安装操作。

安装完成后,关闭【开发者模式】,点击【详细信息】按钮,在打开的界面中,开启【允许访问文件网址】选项。(图3-94)

到这里,我们就能够正常的在谷歌浏览器中查看原型了。

六、原型播放器

Axure RP 9重新构建了原型播放器,变得更加简洁实用。

播放器工具栏从左至右包含了一些功能按钮。(如3-95)

  • 关闭(×)按钮:可以隐藏或显示工具栏。
  • 列表按钮:可以开启或关闭页面列表。
  • 说明按钮:可以打开或关闭说明列表。
  • 更多按钮:包含显示热点(添加了交互的元件)、显示说明、100%视图尺寸、适 应宽度以及适应比例等选项。

注:适应宽度是指原型页面内容宽度缩放至浏览器宽度,同时高度等比缩放;适应比例是指原型页面内容尺寸等比缩放,以完整内容呈现在浏览器窗口中。

另外,在不同的发布方式中略有区别。

1、浏览生成的HTML时,工具栏中只带有“列表”、“说明”以及“更多”功能的按钮。(图3-95)

2、预览原型时,工具栏中还带有“调试”功能按钮,可以查看与重置变量,还能够对执行的交互进行跟踪。(图3-96)

3、查看在线共享的原型时,没有“调试”功能按钮,但可以为原型添加评论,评论内容持久保留。(图3-97)

评论可以在评论面板上的文本框中添加,也可以点击【Add comment on screen】按钮,在页面上进行添加。

在原型页面中添加的评论,可以在Axure云中进行管理。(图3-98)

【提示】图书案例源文件及素材,请关注微信公众号“chanpinban”后,回复“萌新手册”获取。


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

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

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


转载请注明:Axure原创教程网 » Axure RP 9萌新修炼手册-第三章-基础应用(4)

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

表情

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

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址