交互学堂
专注分享专业知识

将Axure移动端原型生成二维码教程(二维码支持微信等app扫描访问)

将Axure移动端原型生成二维码教程(二维码支持微信等app扫描访问)

使用Axure制作完成移动端原型以后,如果需要在手机上进行演示,该如何进行操作呢?普通的方法就是将原型文件上传到托管平台上面,然后生成一个URL链接发送到手机上用浏览器打开。如果能将URL链接生成一个二维码,直接用微信或QQ等应用直接扫描就能打开原型,这样访问体验能有很大的提升。所以今天这篇分享就是教大家如何将Axure制作的移动端原型生成二维码。


下面这个就是我用原型链接生成的二维码图片,直接用微信或QQ扫描这个二维码就能体验到效果。


将Axure移动端原型生成二维码教程(二维码支持微信等app扫描访问)

链接地址:http://www.axureux.com/demo/ResumeTemplatePro/mobresume3.html

01移动端原型的设计规范


为了达到在手机端访问原型时最佳的演示效果,我们在使用Axure制作移动端原型时需要遵守相关的设计规范。这部分我有在之前的分享《使用Axure打造最佳的移动端交互原型教程》中有过详细的介绍,大家可以访问网站上的教程分享栏目查看这篇文章,本篇分享的重点是关于生成二维码的方法,所以对设计规范不再进行展开的介绍。


关于移动端原型的设计规范重要的部分就是内容区域的定义,我个人推荐的内容区域宽度尺寸为375px,我所制作的所有移动端原型全部是按照这个尺寸设计的。大家在制作移动端原型时可以根据需要进行调整设计尺寸,但是一旦确定下来以后需要当作一个标准进行延续。

02移动端原型的导出设置


原型设计完成以后进行进行生成HTML的导出设置,这项设置主要是争对在移动端设备上的适配效果。设置位置:发布菜单—生成HTML-移动设备,在界面中勾选“包含视口标签”,设置宽度为:375,设置缩放为:no,其它选项为空就可以了。

将Axure移动端原型生成二维码教程(二维码支持微信等app扫描访问)

03将原型打包上传至托管平台

原型生成HTML文件以后我们需要打包上传至原型托管平台上,上传以后会生成一个对应的URL链接。关于原型托管平台我比较推荐国内的产品大牛,百度搜索“产品大牛”便可以找到这个平台。下面的这个演示链接就是我上传到产品大牛以后生成的。

产品大牛演示链接:http://www.pmdaniu.com/storage/51693/af729afa027d093d63fc46962c5f11be-2316/mobresume3.html


需要注意的是,HTML文件打包上传到产品大牛以后生成链接的默认结尾是start.html,我手动将它修改成了mobresume3.html。因为start.html是Axure生成HTML文件后的框架页面,我们在用URL链接生成二维码时是不能直接用这个默认地址的,需要用指定的页面链接来生成。例如你的原型的第一个页面的名称是moblie,那么需要将生成的链接地址的结尾由start.html改成moblie.html。如果你的原型中包含多个页面,你也可以将start.html改成任何想要直接跳转到的页面。

除了产品大牛这个原型托管平台之外,也可以使用Axure自带的原型托管平台Axshare。在Axure的发布菜单下有一个“发布到Axshare”的功能,通过快捷键F6也可以直接打开这个功能,点击发布按纽就可以将原型直接发布到Axshare了。如果你没有注册和登录Axshare,点击发布的时候会弹出一个登录界面,你只需要按步骤完成注册和登录就可以了。Axshare的托管服务是完全免费的,不过有时候在国内访问会有点慢。


将Axure移动端原型生成二维码教程(二维码支持微信等app扫描访问)

原型发布完成以后同样会生成一个URL链接,我们在生成二维码的时候不能直接用这个链接地址,也需要在链接后面加上对应的页面名称,原因跟上面描述的一样。

将Axure移动端原型生成二维码教程(二维码支持微信等app扫描访问)


Axshare演示链接:https://i5rs48.axshare.com/mobresume3.html


04将链接地址生成二维码

原型发布到托管平台并生成URL链接以后,最后一步将就是对应的URL链接生成为二维码。生成的方式有两种,一种是使用火狐浏览器的二维码插件进行生成,另一种是使用专门的二维码生成工具。

使用火狐浏览器的生成二维码的方式非常简单,使用火狐浏览器打开需要生成的链接地址,点击地址栏右边的二维码图标就可以将链接生成对应的二维码了。下面这个截图就是使用产品大牛的演示链接地址生成的效果,截图保存这个图片就可以用微信或QQ手机应用扫描进行访问了。火狐浏览器的这个二维码生成插件是自带的,其它浏览器我没有使用过,有的可能需要安装一个生成插件。

将Axure移动端原型生成二维码教程(二维码支持微信等app扫描访问)

使用专门的二维码生成工具的方式也很简单,百度“二维码生成器”就可以找到很多类似的工具,例如下面这个草料二维码生成工具,将链接地址粘贴进去,点击生成二维码就可以了。

草料二维码生成器:https://cli.im/

05Web型简历导航效果实现

  1. 如果你有自己的FTP空间也可以将原型打包上传以后用对应的链接来生成二维码,原理上是相同的。

  2. 如果你需要更新原型的内容,需要在原来的文件上进行更新,对应的页面名称也不能删除,否则生成的二维码也会失效。

  3. 只要原型的链接地址是固定的,二维码都是一直有效的。但是如果你使用托管平台生成的链接地址是动态的,那么生成的二维码可能会随时失效。

  4. 使用Axshare的链接生成的二维码在使用部分应用扫描时无法访问,具体原因未知。

交互原型模板及元件库分享平台

www.AxureUX.com

将Axure移动端原型生成二维码教程(二维码支持微信等app扫描访问)

长按二维码
关注AxureUX

赞(0) 打赏
未经允许不得转载:IAMUE » 将Axure移动端原型生成二维码教程(二维码支持微信等app扫描访问)

交互学院

在线学习交互设计课程1元秒杀Sketch入门课程

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏