Axure教程｜APP原型與頁面左右垂直居中對齊

水平居中怎麼設定

本文給大家分享的是：畫APP原型時，設定手機殼為頁面背景，內嵌框架為手機螢幕（原型的內容區）的情況下，保持手機殼、手機螢幕與頁面之間，左右/垂直居中對齊（相容不同尺寸的電腦螢幕）

一、頁面背景的設定

1。 設定頁面居中對齊；

2。 設定頁面背景顏色（灰背景色值：#F5F5F5，黑背景色值：#121212，或自行選擇）；

3。 匯入手機殼為頁面背景圖片；

4。 設定頁面背景垂直居中對齊；

5。 設定頁面背景左右居中對齊；

6。 設定頁面背景不重複。

二、內嵌框架（手機螢幕）的設定

1、在頁面中拖入一個內嵌框架（手機螢幕，即顯示原型的內容區，下同），命名為【Frame】，設定寬度為：375px，高度為：667px；

2、選擇內嵌框架（手機螢幕）預設開啟的頁面（在瀏覽器中預覽時，該內嵌框架預設顯示的頁面）；

3、隱藏內嵌框架（手機螢幕）的邊框；

4、框架捲軸選擇【從不顯示】。

三、新增頁面事件-設定內嵌框架（手機螢幕）垂直居中對齊

前面已設定頁面居中對齊。

所以預覽時，內嵌框架（手機螢幕）會相容不同寬度的電腦螢幕，左右居中顯示在手機殼中。

為相容不同高度的電腦螢幕，讓內嵌框架（手機螢幕），垂直居中顯示在手機殼中，

接下來還要新增頁面事件：

視窗尺寸改變時，移動內嵌框架（手機螢幕）的頭部的縱座標值（y座標值）

=（頁面高度-內嵌框架高度）/2

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

=內嵌框架（手機螢幕）與頁面垂直居中對齊

完成後，可以嘗試將頁面放大或縮小，手機殼及原型內容始終會保持左右/垂直居中對齊。

本文結束了哈。

本文由 @亮亮 原創釋出於人人都是產品經理，未經許可，禁止轉載