Axure（http://www.axurechina.cc/）是一款非常强大的原型设计软件，不需要编码就可以实现丰富的交互方式，能够实现逼真的网页原型设计，是很多产品经理的首选。那么今天，想给大家介绍一下，如何使用Axure实现原型在页面中保持左右/居中对齐的教程。如果对我们的软件感兴趣，可以点击下载Axure（http://www.axurechina.cc/download.htm）
安装成功之后，启动软件。
一、页面背景的设置：设置页面居中对齐；设置页面背景颜色（灰背景色值：#F5F5F5，黑背景色值：#121212，或自行选择）；导入手机壳为页面背景图片；设置页面背景垂直居中对齐；设置页面背景左右居中对齐；设置页面背景不重复。
二、内嵌框架（手机屏幕）的设置：在页面中拖入一个内嵌框架（手机屏幕，即显示原型的内容区，下同），命名为【Frame】，设置宽度为：375px，高度为：667px；选择内嵌框架（手机屏幕）默认打开的页面（在浏览器中预览时，该内嵌框架默认显示的页面）；隐藏内嵌框架（手机屏幕）的边框；框架滚动条选择【从不显示】。
三、添加页面事件-设置内嵌框架（手机屏幕）垂直居中对齐
前面已设置页面居中对齐。所以预览时，内嵌框架（手机屏幕）会兼容不同宽度的电脑屏幕，左右居中显示在手机壳中。为兼容不同高度的电脑屏幕，让内嵌框架（手机屏幕），垂直居中显示在手机壳中，接下来还要添加页面事件：
窗口尺寸改变时，移动内嵌框架（手机屏幕）的头部的纵坐标值（y坐标值）
=（页面高度-内嵌框架高度）/2
= (Window.height-frame.height)/2
= 内嵌框架（手机屏幕）与页面垂直居中对齐
完成后，可以尝试将页面放大或缩小，手机壳及原型内容始终会保持左右/垂直居中对齐。以上就是关于Axure软件实现原型在页面中保持左右/居中对齐的教程，希望对你有帮助。如果有更多感兴趣的内容，可以访问Axure中文网，了解更多资讯。
本篇文章来源于：http://www.axurechina.cc/news/1376.html
网友评论