本文给大家分享的是：画APP原型时，设置手机壳为页面背景，内嵌框架为手机屏幕（原型的内容区）的情况下，保持手机壳、手机屏幕与页面之间，左右垂直居中对齐（兼容不同尺寸的电脑屏幕）
　　原型预览地址：https：6r8jg9。axshare。com
　　一、页面背景的设置
　　1。设置页面居中对齐；
　　2。设置页面背景颜色（灰背景色值：F5F5F5，黑背景色值：121212，或自行选择）；
　　3。导入手机壳为页面背景图片；
　　4。设置页面背景垂直居中对齐；
　　5。设置页面背景左右居中对齐；
　　6。设置页面背景不重复。
　　二、内嵌框架（手机屏幕）的设置
　　1、在页面中拖入一个内嵌框架（手机屏幕，即显示原型的内容区，下同），命名为【Frame】，设置宽度为：375px，高度为：667
　　2、选择内嵌框架（手机屏幕）默认打开的页面（在浏览器中预览时，该内嵌框架默认显示的页面）；
　　3、隐藏内嵌框架（手机屏幕）的边框；
　　4、框架滚动条选择【从不显示】。
　　三、添加页面事件设置内嵌框架（手机屏幕）垂直居中对齐
　　前面已设置页面居中对齐。
　　所以预览时，内嵌框架（手机屏幕）会兼容不同宽度的电脑屏幕，左右居中显示在手机壳中。
　　为兼容不同高度的电脑屏幕，让内嵌框架（手机屏幕），垂直居中显示在手机壳中，
　　接下来还要添加页面事件：
　　窗口尺寸改变时，移动内嵌框架（手机屏幕）的头部的纵坐标值（y坐标值）
　　（页面高度内嵌框架高度）2
　　（Window。heightframe。height）2
　　内嵌框架（手机屏幕）与页面垂直居中对齐
　　完成后，可以尝试将页面放大或缩小，手机壳及原型内容始终会保持左右垂直居中对齐。
　　原型预览地址：https：6r8jg9。axshare。com
　　本文结束了哈。
　　
　　作者：亮亮，公众号：Axure产品原型
　　本文由亮亮原创发布于人人都是产品经理，未经许可，禁止转载

Axure技巧：矩形框的透明度与填充色的透明度本文主要说明为什么通常情况下在Axure中使用命令SetOpacity改变一个矩形的透明度时，矩形框的透明度却不是想要的效果；以及如何解决这个问题。通常情况下，如何给一个……Axure教程：网页二级联动交互应该怎么做？本文用案例说明一下网页二级联动交互怎么做，主要是表单元件结合动态面板来实现步骤如下（1）准备下拉列表框选择一个表单元件，我们要选择的是“下拉列表框”，对表单元……用Axure写PRD：宠物APPV0。2。0通过撰写产品需求文档（PRD），能够锻炼到基本的产品能力，同时也是提高Axure操作能力的重要途径。文章为作者利用Axure撰写的Petpet的PRD，希望能够给你带来一些帮助……Axure教程：用Axure制作个人简历这次我找了我之前用Axure做的一个简历，给大家做一个分享。简历较为简约，可以自行添加内容。这个我之前在面试的时候有用过，对于产品经理、交互设计师当你用这个Axure做简历用时……Axure教程web端的验证码（普通验证码和滑块验证码）如何上一篇文章给大家分享了如何制作web端的注册和登录，没有看过的小伙伴“点击这里”。今天给大家带来了的是升级版本，如何制作“验证码”。为什么会出现“验证码”这种反人性的操作……Axure技能：自适应移动设备屏幕大小（进阶教程）《Axure新技能：自适应手机屏幕大小》相信不少人都已经看过，并对设置方法已经很熟悉了，但该教程只能适应iphone6的屏幕尺寸的比例，在iphoneX出来后屏幕比例改变了，旧……Axure常用元件及使用规范：Views篇（附源文件下载）作者对原型设计中的常用的一些通用元件进行了场景和规范整理，主要分为信息栏Bars篇、视图Views篇、控件Controls篇三章。本章主要介绍Views篇，但源文件已涵盖所有篇……Axure教程小白入门，制作web端注册登录做为一名年长又不出色的产品经理，这些年没有什么出彩的产品产出。最近在听过几本书之后，终于豁然开朗，发现了自己为什么会一直在没有产出的漩涡中沉沦。所以从今天起，作为一名产品小白开……Axure教程APP原型与页面左右垂直居中对齐本文给大家分享的是：画APP原型时，设置手机壳为页面背景，内嵌框架为手机屏幕（原型的内容区）的情况下，保持手机壳、手机屏幕与页面之间，左右垂直居中对齐（兼容不同尺寸的电脑屏幕）……Axure常用元件及使用规范：Bars篇（附源文件下载）作者对原型设计中的常用的一些通用元件进行了场景和规范整理，主要分为信息栏Bars篇、视图Views篇、控件Controls篇三章。本章主要介绍Bars篇，但源文件已涵盖所有篇组……Axure教程：QQ音乐播放页制作离上一次发文到现在，已经很久没有写了，趁着这两天心血来潮，临摹一个QQ音乐的播放界面，因为个人能力有些不足，在这里还要感谢Phoenix老师、牧逸的指导，我才能够把整……Axure：显示隐藏中的推动和拉动原理分享本文是关于Axure中，显示隐藏中的推动和拉动原理分享，一起来看看直接上推动和拉动元件的定义：注意点：被推动元件的坐标需显示元件坐标？推动的距离正……