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

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

将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

原创文章,作者:交互精选,如若转载,请注明出处:https://www.iamue.com/36045/

(0)
交互精选交互精选
上一篇 2018-03-23
下一篇 2018-03-24

相关推荐

  • Axure案例练习-点评打分效果

    现在,外卖也好,购物也好,打车也好,点评打分是网站常见的用户互动的功能,一般都是1~5分之间评分,分值对应几颗星或者几颗心,当用户点击确定之后打分就完成了。下面我就以大众点评网为例,制作了打分效果。做之前,我们先来分析一下,点评共涉及到6个状态:没有打分的时候、一颗星的时候、二颗星的时候、三颗星的时候、四颗星的时候、五颗星的时候。根据之前的学习,知道点评区域是一个动态面板,这个动态面板有六个状态,当鼠标分别悬停时,切换出不同的状态。我们...

    2018-04-29
  • 语音交互中的“等待体验”研究

    文 | 叨叨来自雷锋网(leiphone-sz)的报道雷锋网按:本文来自百度人工智能交互设计院,通过实验的方式,研究了语音交互中用户对于智能音箱的“等待体验”。雷锋网编辑在不改变原意的基础上做了精编。回顾人机交互发展史,人类先后经历了基于命令行的CLI 时代,基于鼠标键盘的GUI时代,基于触摸的初级NUI时代。后面每一个阶段比前一个阶段更自然,学习成本更低,综合效率更高。进入AI时代,人工智能给机器带来三种能力:感知能力、认知能力、自然...

    2018-01-30
  • 用户体验方法论的演变

    用户体验工作流程令人困惑,即使对大多数设计师而言也是如此。最初Donald A. Norman创造了用户体验设计的概念:“我发明了这个词,因为我认为人机交互和可用性太窄了。我想涵盖该系统的所有方面,包括工业设计图形,交互界面,面对面交互和使用手册。从那时起,这个词被广泛传播,以至于它开始失去意义。”而到2016年,Don Norman开始谈及对于这个词的误解有多严重。在彻底了解现代用户体验之前,我们需要回顾20世纪90年代以来设计和开发...

    2018-03-07
  • 这样学Axure,效果更好,面试更容易拿高薪|1433人的经验贴

    众所周知,Axure是产品经理必备的工作软件。但为什么要学好Axure,仅仅是因为它是必备的软件?为了不错过更好的发展机会BAT对于产品工作2-3年的面试者,均要求熟练使用Axure。别等要用时,才发现自己没有!别让Axure阻碍你的高薪产品路。怎样学Axure,效果更好?想学好Axure,不让Axure阻碍自己的发展,却苦于这些问题?没人监督指导,自学还没到一个周,就想放弃按教程操作,却出不了效果,又不知错在哪里难的知识内容看着费劲,...

    2018-04-20
  • 『设计|交互设计』2018年交互设计趋势解析

    本文转载自:设计前沿2018年交互设计趋势解析2018视觉趋势Pantone 2018流行色:紫外光色Pantone 官方翻译为「紫外光色」,紫外光色是强烈挑动思绪与深思的紫色调,传达独创性、创造力及前瞻性思维,为我们指向未来。彩通:18-3838 紫外光色颜色代码:#5f4b8bRGB:R 95,G 75,B 139CMYK:C 71,M 73,Y 7,K 8从2017年下半年开始,紫色配色的作品开始很多,所以2018年这个色也是一个...

    2018-04-25
  • 《用户体验可视化指南》视频讲书(4)

    这是《用户体验可视化指南》书中第一章的最后一个视频了。继续上个视频继续介绍几种共线图,这次横向比较各种共线图的差异,使用它们的原则和好处。点击视频观看(大约14分钟,推荐室内安静、有wifi环境下播放)兰静同学听后分享这节内容是第一章的精华,一定一定一定要边听边看书本,最好多看几遍。主要分为2个部分:在这节视频中,结合书本第3个大模块中的内容,详细讲解了这5类常见共线图的差异和各自的特色。闭上眼睛想一想,要是还想不起来服务蓝图、体验地图...

    2018-04-07
  • 小欣浅谈 | 用户体验为什么如此重要

    前言说到我们日常所使用的那些产品和服务,我们对它们的情感可谓爱恨交织。它时而让我们为之欢呼雀跃,时而让我们感到挫败沮丧。时而让生活变得简单明了,时而使生活复杂无常。即使这样,我们每天还要和不计其数的产品打交道。而我们的产品开发人员,注意力的重点往往在95%以上都放在产品本身,而用户使用过程中的体验却常常被忽视。而这部分,常常成为一个产品投入市场后的隐形“杀手”。|糟糕的用户体验以我们办公室的饮水机为例:加水的按键分为“高\中\低”三档,...

    2018-04-16
  • UED专访 | 李冀:建筑设计的唯一性与多样性

    📌 编辑 | XK P.S建筑行业之所以能百花竞放是因为有人独树一帜,自成一派有人匠心筑梦,执著务实在各展所长的事务所里李冀的原地工作室像潜生的植物一样有着自己的节奏与坚守静默地成长着……©UED我们常说懂一个作品应是知其然并知其所以然。本次我们专访内容围绕李冀及其原地建筑事务所作品展开,以长白山河谷别墅群等作品为切入点,尽可能多地去探究建筑建造过程的一些原由故事,倾听设计师还原当时的设计思路,了解作品从无到有精细入微的生长。也许你会因...

    2018-02-08
  • 唯品会实习|面向19/18届,地点广州

    公司介绍唯品会(NYSE:VIPS)VIP.com成立于2008年,以“全球精选 正品特卖”为品牌宗旨,在中国开创了“精选品牌、深度折扣、限时抢购”的时尚特卖模式,在线销售服饰鞋包、美妆、母婴、居家、生活等全品类名品。招聘岗位商务助理(18/19届)■岗位职责:1. 负责跟进预上线商品的所有商品资料;2. 负责检查货品清单正确性、完整性、准确性、规范性,交接正确的资料给相关部门;3. 负责申请标准的档期,走档期流程并落实档期日期;4. ...

    2018-03-06
  • 2018年04月07招聘岗位

    诚聘:通辽澳鼎医疗器械公司诚聘:工作人员要求:40岁到50岁之间的女性,能长期工作的,有爱心,有孝心,家庭没有负担的,高中以上文化程度,语言表达能力好待遇:中午有工作午餐,每个周日休息,节假日休息,基本工资1800元,满勤奖200元,年底奖金不少于12000元。联系人:闫经理。联系电话,15247572846,15374967717不能长期工作的勿扰!招聘服务员工资底薪2500加提成收银员2700元加提成招聘电话:8663888,157...

    2018-04-08