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