APP原型与页面左右/垂直居中对齐

发布日期:2018-10-06    浏览量:16499

加入VIP社群,可终身免费下载本案例原型,及本站全部VIP原型,新增的原型不再收费。 查看VIP原型

本文给大家分享的是:画APP原型时,设置手机壳为页面背景,内嵌框架为手机屏幕(原型的内容区)
的情况下,保持手机壳、手机屏幕与页面之间,左右/垂直居中对齐(兼容不同尺寸的电脑屏幕)

原型预览地址:http://www.vip.pmyuanxing.com/手机壳/index.html

一、页面背景的设置

  1. 设置页面居中对齐;
  2. 设置页面背景颜色(灰背景色值:#F5F5F5,黑背景色值:#121212,或自行选择);
  3. 导入手机壳为页面背景图片;
  4. 设置页面背景垂直居中对齐;
  5. 设置页面背景左右居中对齐;
  6. 设置页面背景不重复。

二、内嵌框架(手机屏幕)的设置

  1. 在页面中拖入一个内嵌框架(手机屏幕,即显示原型的内容区,下同),命名为【Frame】,设置宽度为:375px,高度为:667px;
  2. 选择内嵌框架(手机屏幕)默认打开的页面(在浏览器中预览时,该内嵌框架默认显示的页面);
  3. 隐藏内嵌框架(手机屏幕)的边框;
  4. 框架滚动条选择【从不显示】。

三、添加页面事件-设置内嵌框架(手机屏幕)垂直居中对齐

前面已设置页面居中对齐。所以预览时,内嵌框架(手机屏幕)会兼容不同宽度的电脑屏幕,左右居中显示在手机壳中。为兼容不同高度的电脑屏幕,让内嵌框架(手机屏幕),垂直居中显示在手机壳中,接下来还要添加页面事件:

窗口尺寸改变时,移动内嵌框架(手机屏幕)的头部的纵坐标值(y坐标值)

=(页面高度-内嵌框架高度)/2

= (Window.height-frame.height)/2

= 内嵌框架(手机屏幕)与页面垂直居中对齐

完成后,可以尝试将页面放大或缩小,手机壳及原型内容始终会保持左右/垂直居中对齐。

原型预览地址:http://www.vip.pmyuanxing.com/手机壳/index.html

本文结束了哈。

作者:亮亮,QQ交流群:702834810,公众号:Axure产品原型

Axure产品原型

Axure产品原型官网(pmyuanxing.com)—— 专注于提升Axure产品原型的效率与体验!
为产品经理、交互设计师、UI设计师提供:Axure原型模板下载、APP原型下载、电商原型下载、APP元件库等整站原型的下载,以及Axuer教程和Axure视频教程的服务。
欢迎加入VIP社群,与小伙伴一起学习交流,共同成长!

合作伙伴

  • 微信公众号
  • QQ交流群

Axure产品原型:专注于提升Axure产品原型的效率与体验! ©Axure产品原型,版权所有 侵权必究  粤ICP备18031656号-1