Axure9实操教程2-页面尺寸
时间：2023-08-29 17:36:01 | 来源：网站运营
时间：2023-08-29 17:36:01 来源：网站运营
Axure9实操教程2-页面尺寸：当Axure9的工作界面中没有任何元件/没有选中任何元件时，右边的样式、交换、说明则是针对当前页面：
页面尺寸
页面样式最上面是页面尺寸，页面尺寸设置是很有用的，如果是做手机的原型，Axure9中有很多预设的手机界面尺寸，只需要选择自己需要的尺寸即可，如果需要其他尺寸，还可以自定义设备。
如果是网页原型，则可以选择Web，系统默认给出1024w，也就是宽为1024px，对于现在的电脑明显小了很多，可以根据需要适量加大（我一般会使用1920）。
页面尺寸选择界面选择手机界面后还可以手动修改宽高。
工作界面被自动调整为设置的大小，灰色是工作区以外，这里的东西在预览或发布时是不会展示的。
在界面下端有一条虚线，表示到这里已经是设置的高度了，如果元件超出这条虚线，预览或发布后，界面上会出现滚动条，下拉滚动条就能浏览下面的部分。
但是，我们都知道现在的手机界面是不显示滚动条的，所以再放置元件的时候不要超出这个界限哦。
当然，我们强大的Axure还是可以实现上下滑动效果的，怎么实现？卖个小关子(●'◡'●)……待我后面慢慢道来。
iPhone8手机界面Web界面不会出现分割线，因为Web本来就没有设置高度，是自适应浏览器高度的。
那可以让原型自适应不同电脑上浏览器的尺寸吗，答案是：当然！
怎么实现？嘿嘿(●'◡'●)……继续往下看——自适应视图……
Web界面
自适应视图
添加自适应视图：将自适应视图尺寸保存起来，新建页面的时候，只需要选择即可。可以通过“预设”选择一个系统自带的尺寸，再进行修改。注意：设置的自适应视图只在本文档中有，如果重新创建一个文档需要再次设置。
添加自适应视图新增页面选择已有自适应视图点击“添加”在已创建的自适应视图下再新增子视图，继承父级视图。一个父视图可以建多个子视图，可以多层嵌套；继承可以设置当前子级所继承的父级视图：
自适应视图的父子级关系继承：是指子级自适应视图继承父级自适应视图工作界面的内容（并不是所有元件样式都会被继承，比如文本标签的尺寸、位置属性就不会被继承）。
那么自适应视图有什么用呢？
答：好比一个网页，我们在电脑上、手机上、pad上都能打开，但是电脑、手机、pad浏览器页面的尺寸明显不一样啊，界面显示的布局可能有变化，但是内容都一致，这是就是自适应的作用了。
现在我们来做一个网页和手机端的自适应显示效果吧，come on！
1.首先我们来设置自适应页面，新建一个web尺寸作为父级，再创建一个手机尺寸：
2.创建好后进入工作界面，蓝绿色表示当前选中的尺寸，即Web尺寸，在上面放置一个图片（直接将任意图片复制粘贴进去），注意调整图片大小：
web自适应视图放入图片3.点击手机自适应视图，我们可以看到子级的自适应视图中已经有同样大小的图片了，但这种状态，预览后在手机自适应视图状态下肯定是看不到图片的，因此要对图片进行调整：
手机自适应视图4.调整手机自适应视图的图片位置和大小：
调整后的手机自适应视图图片5.我们可以看到此时父级和子级自适应视图中的图片位置和大小已经完全不同了，点击预览，则可以根据当前浏览器自动选择最合适的自适应页面展示：
web端页面展示手机端页面展示（使用的oppo手机，与iphone8plus尺寸略有区别）影响所有视图选项，在默认不勾选情况下，当父级自适应视图中内容发生的改变将会被继承到子级（子级中已经发生改变的除外，比如上图中地球图片的位置和尺寸），而子级自适应视图中的变动是不会影响到父级的；勾选后，则子级自适应视图中的动也可以影响到父级。
页面样式
可以设置页面排列、填充颜色/图片和低保真度。
页面排列：是指设计内容在浏览器中的排列显示方式，一般选用默认的居中对齐。
选则左对齐，预览一下可以发现页面内容在浏览器中靠最左展示出来：
页面排列左对齐效果选择剧中对齐，则预览效果如下：
页面排列居中对齐效果填充-颜色：是指页面的背景色，比如将页面背景色设置为灰色：
填充颜色为灰色背景填充-图片：是指页面背景用图片来进行填充，填充图片时，还可以设置对齐方式和是否重复，填充图片的功能对制造类似QQ空间这样的页面很有用哦，宝宝们可以试试看：
插入一张图片，默认左上对齐，重复图片：
其他选项，宝宝们自己试试就能只管的看出效果的，这里不再展示了。
Axure网页页面样式可以自定义，将自己常用的页面样式保存下来，新建页面的时候就可以直接使用啦。
本章就到这里了，大家一起来试试吧！
在线咨询
