第5章         创建自适应视图

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

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

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

 

第5章         创建自适应视图

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

 Lancy：小楼老师，我好仰慕你呀！

 

小楼： 我也仰！

 

Lancy：小楼老师，你正经些好不好呀！我想问你不同的设备的原型尺寸是怎么界定的？

 

小楼：这个呀！我一说你就明白啦！

 

随着电脑屏幕分辨率的提升，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节          创建不同设备的视图

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

 

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

 

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

 

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

 

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

（图5-1）

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

（图5-2）

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

（图5-3）

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

 Lancy：老师，我按你说的设置了，但是去哪里编辑各个视图的内容呀？

 

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

 

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

（图54）

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

小楼老师再出新作，倾力打造Axure RP 8精品课程系列，全新的套路，经典的姿势，更舒爽，更润滑，更紧致，更销魂，想体验这种欲罢不能的学习感觉？快从下面进入！

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

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

转载请注明：Axure原创教程网 » Axure RP 8 入门手册 – 第5章（上）