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

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

第5章         创建自适应视图

第1节         不同设备的原型尺寸

第2节         创建不同设备的视图

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

 

第5章         创建自适应视图

第1节          不同设备的原型尺寸

u0 Lancy:小楼老师,我好仰慕你呀!

 

u2小楼: 我也仰!

 

u0Lancy:小楼老师,你正经些好不好呀!我想问你不同的设备的原型尺寸是怎么界定的?

 

u2小楼:这个呀!我一说你就明白啦!

 

随着电脑屏幕分辨率的提升,Web端原型的尺寸也要随之改变。另外,因为各种移动设备的出现,原型不再是仅仅面向Web端,所以如何在移动端的多种设备上浏览原型,以及原型的尺寸如何设置,也是面临的新问题。

首先,先说Web端的原型尺寸。

因为Web端高度不固定,所以这里只讲宽度。

早些时候,电脑屏幕的分辨率宽度一般都是1024px,所以Web端原型的尺寸一般采用960px的宽度。但是,现在屏幕分辨率宽度基本都在1280px以上,显然再用960px 的宽度设计原型已经不太合适,所以,建议目前的Web端原型宽度为1200px。

然后,再说移动端的原型尺寸。

因为移动端有横屏与竖屏的切换,所以宽度与高度均需确定。

移动设备的快速发展,导致移动设备的屏幕分辨率多种多样,甚至同样分辨率的设备屏幕尺寸也不一样。那么,如何来确定面向某种设备的原型尺寸呢?

以小米4手机为例,这款手机分辨率为宽1080px*高1920px,屏幕尺寸5英寸。

以联想Y700笔记本电脑为例,屏幕分辨率为宽1920px*高1080px,屏幕尺寸15.6英寸。

通过上面两个例子进行对比,我们能够发现小米4手机的横屏分辨率和联想Y700笔记本电脑的分辨率是一样的。

那么,我们想一下,小米4手机屏幕上有一个图标,联想Y700笔记本电脑上也有一个图标,如果这两个图标在视觉上大小相同,它们的实际大小(px)一样吗?如果电脑上的图标尺寸为100px*100Px,手机上的尺寸大概是多少呢?

其实,答案很简单。把手机横过来,在电脑屏幕上比较一下,屏幕的宽度与高度基本上都是手机的3倍。

那么,也就是说电脑上尺寸为100px*100Px的图标视觉尺寸,与手机上300px*300Px的图标的视觉尺寸是趋近相同的。换句话说,同样物理尺寸的条件下,手机屏幕上的像素点数量是电脑屏幕上像素点数量的9倍(约)。这是一个关于密度的概念。

既然清楚这个对应关系,我们就能够知道在电脑屏幕上制作小米4手机的原型尺寸为:竖屏360px*640px,横屏640px*360px,即水平与垂直方向的数值均除以3。

不过,上面的例子是以5英寸的手机举例,如果是6英寸的手机,屏幕分辨率同样为宽1920px*高1080px时,原型的尺寸就可能会发生变化。就目前的情况来看,一般手机屏幕分辨率的尺寸是原型尺寸的3倍、2.5倍、2倍,有极少数手机是2.75倍。

下面简单的将目前各种主流手机的原型尺寸做一下介绍,均以竖屏尺寸为例。

安卓手机:360px*640px

苹果手机:320px*568px(iPhone5)、375px*667px(iPhone6)、414px*736px(iPhone6 Plus)

特别说明:iPhone6 Plus的物理分辨率为1080px*1920px,但输出分辨率1242px*2208px。也就是说iPhone6 Plus手机全屏截图得到的图片尺寸为1242px*2208px而不是1080px*1920px。所以需要以输出分辨率去推算原型尺寸。

第2节          创建不同设备的视图

u0Lancy:老师,你刚刚说的我明白啦!那也就是说,如果我需要适应多种设备的话就需要制作各种尺寸的原型。

 

u2小楼:一般来说是这样的,但是如果两个原型的布局一致,宽高比也一致,就使用一套就可以了。

 

u0 Lancy:那多个尺寸的原型是要每个都做在不同的源文件中吗?怎么让设备能够自动识别显示哪一套呢?

 

u2小楼:不用做成多个源文件,在Axure中有个功能叫自适应视图,就是用于满足这种需求的。

 

在导航菜单【项目】的选项列表中,点击选项【自适应视图】。(图5-1)

%e5%9b%be5-1

(图5-1)

在打开的窗口中,就可以设置支持各种原型尺寸的视图。默认情况下,会有一个基本视图,在没有与设备尺寸相匹配的视图时,将会显示基本视图。基本视图无需做任何设置,如果填写宽度和高度,只是在画布中出现相应的辅助线,而不会与该尺寸的设备相适应。(图5-2)

%e5%9b%be5-2

(图5-2)

         点击窗口中的【+】按钮可以添加新的视图,新的视图需要填写视图的名称、宽度和高度(可省略)。(图5-3)

%e5%9b%be5-3

(图5-3)

每种新增的视图都需要继承自基本视图或其它视图。我们可以管被继承的视图叫父视图,而继承于父视图的视图叫做子视图。在编辑视图内容时,默认情况下,父视图编辑内容时,子视图会同步改变,而子视图编辑内容时,父视图不会有任何改变。但是,父视图编辑内容时,如果子视图相应的内容已经发生改变,则不会再被父视图的编辑所影响。

u0 Lancy:老师,我按你说的设置了,但是去哪里编辑各个视图的内容呀?

 

u2小楼:嗯,设置完还需要为页面开启自适应视图的功能,才可以编辑多个视图。

 

每个页面都需要单独开启{自适应}功能,这个设置在检视面板的【属性】中。(图5-4)

%e5%9b%be5-4

(图54)


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

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

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

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


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

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

表情

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

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址