Axure RP 8 入门手册 – 第5章(下)

AxureRP8.0教程 小楼一夜听春语 3250℃ 0评论

第3节          移动设备的浏览设置

u0Lancy:老师,你骗人!

 

u2小楼:啊?

 

u0Lancy:我按你说的做了几套不同尺寸的原型,但是在手机上查看时显示都不能铺满屏幕。

 

u2小楼:是不是和冬天的小鸡鸡一样?

 

u0Lancy:老师,你流氓!

 

u2小楼:我的意思是,是不是像冬天院子里的小鸡一样缩到角落里去了?

 

u0 Lancy: 老师,你……哼!是的呀!就像你的小鸡都在缩在左上角,好小!

 

u2小楼: 是我错啦!我忘记告诉你,除了做自适应视图,还需要在发布中进行【移动设备】的设置。

 

在生成HTML的设置窗口中,点击左侧列表中的【移动设备】,然后在右侧的界面中勾选【包含视口标签】。完成这个设置后,原型就能够自动被设备识别,正常显示了。(图5-5)

%e5%9b%be5-5

(图5-5)

设置内容中还包括以下几项:

  • 设备宽度设置

设置设备的视口宽度,默认为“device-width”,即设备宽度。此项一般保持默认不变。

  • 设备高度设置

设置设备的视口高度,可填写“device-height”,即设备高度。此项可以不填写。

  • 初始缩放倍数

指在移动设备上加载原型时,显示的初始尺寸缩放比例。可选数值为0-10,可为小数;比如:宽度为720的原型需要在宽度为360的设备上显示时,可以设置初始缩放比例为0.5,这样在360的设备上则能够显示全部内容。如果原型尺寸与设备尺寸一致,这里填写1或者1.0即可。

  • 最小缩放倍数

是指移动设备根据自身尺寸自动缩放原型尺寸的最小值。可选数值为0-10,可为小数。比如:最小缩放倍数设置为1.0时,用宽度360的设备查看宽度为420的原型,是没有办法缩小到1屏查看的,只能滚动页面才能看到全部内容,所以,如果想缩小原型的尺寸看到全部内容,要把最小缩放倍数设置为0.8以下才可以。

  • 最大缩放倍数

允许设备中原型缩放的最大倍数可选数值为0-10,可为小数。比如:原型尺寸为360*640,最大缩放倍数设置为1.5时,通过双指放大原型页面,最大尺寸为540*960。

  • 允许用户缩放

允许用户进行缩放的话,这里保持空白(blank)即可,不允许用户进行缩放的话,这里填写“no”。

  • 禁止页面垂直滚动

勾选此项时,当原型的内容高度超出设备高度时,无法通过垂直方向滚动页面显示超出部分的内容。

u0 Lancy:老师下面的那些是什么呀?

 

u2小楼:老师下面?

 

u0Lancy:少打个逗号啦!

 

u2小楼:嘿嘿!下面那些是iOS系统的设置。如果使用苹果的移动设备需要下面的这些设置。

 

移动设备设置的下半部分是iOS系统的专属设置,共有以下几项:(图5-6)

%e5%9b%be5-6

(图5-6)

  • 自动检测并链接电话号码

勾选此项,可自动识别原型中的电话号码,号码带下划线效果。点击号码则弹出呼叫该号码的提示框。

  • 主屏图标设置

设置原型页面链接添加到主屏幕时所显示的图标。图标大小为114px*114px。

  • 启动画面设置

设置不同设备的启动画面图片。启动画面是指从页面加载开始到结束的过程中显示的画面。如果加载过程较短则不会显示。

  • 隐藏浏览器导航栏

勾选此项后,从主屏幕图标打开时,能够隐藏浏览器的底部导航栏。

  • 设置状态栏样式

设置浏览器中浏览原型时状态栏的样式,默认为白色,可根据提示设置为黑色和灰色。

u0 Lancy:老师,主屏图标指的是什么?

 

u2小楼:这个是指iOS系统中把网址添加到主屏快捷方式时,所显示的图标。然后通过点击主屏的图标就能够浏览原型。

 

首先,我们开启【包含视口标签】的选项。

然后,我们在iOS专属设置中,设置{主屏图标}。同时,勾选【隐藏浏览器导航栏】。(图5-7)

%e5%9b%be5-7

(图5-7)

    完成上面两个设置后,就可以将原型文件发布到AxShare的服务器工作区中。

接下来,在iOS中(这里使用iPhone6 Plus举例),通过默认浏览器Safari打开发布后的获取的地址。点击浏览器下方导航栏中的功能列表图标。(图5-8)

%e5%9b%be5-8

(图5-8)

    在展开的列表中,点击【添加到主屏幕】的图标。(图5-9)

%e5%9b%be5-9

(图5-9)

    在弹出的界面中,为主屏图标添加一个名称,然后点击右上角的【添加】按钮,完成添加。(图5-10)

%e5%9b%be5-10

(图5-10)

    添加完成之后,在手机的主屏幕中就出现了我们设置的图标,点击该图标就能够打开原型进行访问了。(图5-11)

%e5%9b%be5-11

(图5-11)


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

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

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

《AxureRP 8 入门与实战 - 案例篇》------实战手册图书的同步视频------【点此查看详情】


转载请注明:Axure原创教程网 » Axure RP 8 入门手册 – 第5章(下)

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

表情

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

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址
(6)个小伙伴在吐槽
  1. 您这木有按照年份月份的目录列表吗 每次手动滑动也是有点麻烦0-0
    nononono2016-12-28 15:51 回复
  2. 从未见过如此流氓的小楼~
    时光会咬人2017-01-05 16:50 回复
    • ……有本事你尿完别走
      小楼一夜听春语2017-01-05 23:23 回复
  3. 亲爱的小楼老师! 我想在中继器里添加文本链接怎么做啊 我研究2天了 好烦恼 希望您看到了 可以教我 不胜感激!
    Atopos2017-01-05 22:51 回复
  4. 小楼老师,安卓手机是不是就没有添加图标到主屏幕了?
    2017-02-07 16:18 回复
    • 是的
      小楼一夜听春语2017-02-07 23:03 回复