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

axure商城

写在开头:

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

 

开始原型设计

一、确定原型尺寸

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

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

 

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

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

右键点击矩形框

 

转换为母版

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

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

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

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

 

 

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

 

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

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

打开后选择“移动设备”

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

四、发布到Axure Share网站

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

 

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

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

五、用移动端进行查看

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

 

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

 

10

评论:

2 条评论,访客:2 条,站长:0 条

0%好评

  • 好评:(0%)
  • 中评:(0%)
  • 差评:(0%)

最新评论

  1. 许天杰
    许天杰发布于: 

    Xu Tianjie许天杰许天杰 微信电话:15810307266 QQ号码:815855695/1029751486

发表评论