axure商城

2、移动端查看 —— Axure使用交互

写在开头:

相信许多产品新人在用Axure做完原型之后,都会遇到过这样一个问题:想在手机移动端做展示,但是却因为各种原因无法正常显示出来,本次教程就以 iphone 6 作为材料进行讲解(因为本人用的就是iphone 6,其他品牌机可以按照下面原型尺寸进行设计试用)

 

开始原型设计

一、确定原型尺寸

就像ios系统的iphone一样,虽然所分的系列、分辨率不同,可原型尺寸却很有规律(原型尺寸即为在Axure中要画出的图形大小范围)

下图为目前市面上比较常用的机型系统以及原型尺寸

2、移动端查看 —— Axure使用交互

 

(1)首先,打开Axure软件,在画板上用矩形框画出需要机型的原型尺寸,以我的手机为例,先画出375*667的矩形框。(最好是画在0,0的位置,要是不愿意画在零点处,也可以画在y=0的任意处。注意:要保证矩形框的y=0)

(2)点击创建好的矩形框,把它命名为手机屏幕,并右键点击它,选择转化为母版。

2、移动端查看 —— Axure使用交互

右键点击矩形框

 

2、移动端查看 —— Axure使用交互

转换为母版

提示:可以设置新母版的名称为“手机屏幕”,拖放行为为固定位置。选择固定位置可以有效的增强设计画面的整齐度,为原型的设计做好铺垫。

灵活使用母版也可以大大提升工作效率、节约时间,这样就不需要每画一张图就要重复一遍所有的操作。

二、设置页面排列水平居中

当完成上述创建操作后,就可以在矩形方框内开始你的原型设计了。当设计完内容后,点击画板空白处,确保右侧功能栏上面的对象为检视:页面,选择“样式”一项,并在下面的页面排列一项中选择水平居中

 

2、移动端查看 —— Axure使用交互

 

注意:如果原型不止当前这一页,之后每页的原型图的页面都要设置排列水平居中。

 

三、设置生成HTML的移动设备

当完成上面的步骤后,键盘点击F8或者点击屏幕右上角的“发布”按钮,选择生成HTML文件。

2、移动端查看 —— Axure使用交互

打开后选择“移动设备”

2、移动端查看 —— Axure使用交互

并选中“包含视口标签”,点击生成按钮即可

四、发布到Axure Share网站

首先你需要创建一个账号,点击屏幕右上角的“共享”按钮,按照上面流程完成注册以及登录步骤,这样你就拥有了一个可以分享原型的账号以及专属的原型浏览网址。

 2、移动端查看 —— Axure使用交互

可以设置名称、密码以及存放的文件夹

2、移动端查看 —— Axure使用交互

注意:点击“发布”会生成一个原型页面链接,可以选择“不加载工具栏”,不加载或者加载会生成两个不同的网址,可以根据需求进行设置。

五、用移动端进行查看

发送网址到移动端,然后使用手机浏览器或者用微信打开网址,即可正常浏览原型设计。

 

至此,移动端展示讲演结束,期待与您的交流沟通!

 

给TA打赏
共{{data.count}}人
人已打赏
案例教程

1、雷达效果 —— Axure实用交互

2018-10-10 16:08:26

案例教程

Axure神奇操作实例-通过循环模拟弹幕

2019-11-3 12:51:42

axure商城
0 条回复 A文章作者 M管理员
    暂无讨论,说说你的看法吧
个人中心
购物车
优惠劵
今日签到
有新私信 私信列表
搜索