“左側(cè)對(duì)齊”的方式適應(yīng)屏幕大小，就是說讓W(xué)eb頁面中一些元件的長度能夠以“左側(cè)對(duì)齊”的方式鋪滿屏幕，其他元件不需要鋪滿的能夠居中顯示。

上面是我用“左側(cè)對(duì)齊”方式制作的Web原型，實(shí)現(xiàn)了在瀏覽器中適應(yīng)電腦屏幕。

3、元件準(zhǔn)備（元件的大小，顏色看自己具體需求，我就不詳細(xì)寫了）

頂部制作：從元件庫中拖動(dòng)一個(gè)矩形作為背景，命名“head-back”。再拖動(dòng)兩個(gè)文本標(biāo)簽、登錄、注冊(cè)、命名“l(fā)ogin”和“create”組合到一起。添加一個(gè)Logo圖片，命名“l(fā)ogo”。

菜單欄制作：從元件庫拖動(dòng)一個(gè)矩形作為背景，命名“menu-back”，再拖動(dòng)一個(gè)小矩形，命名“menu”設(shè)置好大小以及交互樣式，復(fù)制、粘貼做出菜單，再拖動(dòng)一個(gè)矩形作為菜單下劃線，命名“menu-line”設(shè)置高度為“2”，寬度為“menu”的寬度。

4、交互

通過預(yù)覽原型我們能知道，頂部和菜單欄是固定在瀏覽器的最上面，并且背景框都是鋪滿狀態(tài)，其他元件要么居中，要么對(duì)稱。

頂部：

“head-back”鋪滿屏幕，我們?yōu)椤癶ead-back”添加“載入時(shí)”交互，設(shè)置當(dāng)前元件寬為“windows.width”，高度不變，錨點(diǎn)為左上角。

并且“head-back”固定在頁面最上面，不隨頁面滾動(dòng)移動(dòng)，所以我們將“head-back”轉(zhuǎn)化為動(dòng)態(tài)面板，固定到瀏覽器。

頁面中“l(fā)ogo”在距離左側(cè)120的位置，所以我們選擇將“l(fā)ogo”轉(zhuǎn)化為動(dòng)態(tài)面板，固定到瀏覽器。

頁面中“l(fā)ogin”和“create”組合在距離右側(cè)120的位置，我們將組合轉(zhuǎn)化為動(dòng)態(tài)面板，固定到瀏覽器。

菜單欄：

“menu-back”鋪滿屏幕，我們?yōu)椤癿enu-back”添加“載入時(shí)”交互，設(shè)置當(dāng)前元件寬為“windows.width”，高度不變，錨點(diǎn)為左上角。

菜單組合居中固定，距離左側(cè)200的位置，所以我們轉(zhuǎn)化菜單組合為動(dòng)態(tài)面板，固定到瀏覽器中。

僅僅這樣設(shè)置，達(dá)到了固定在瀏覽器中的目的，但是菜單組合并沒有居中，而且大小也沒有適應(yīng)屏幕，沒有達(dá)到我們的要求。所以我們需要為菜單組合添加“載入時(shí)”的交互，設(shè)置組合載入時(shí)寬度為“windows.width-400”。（減去400是因?yàn)榫嚯x左側(cè)200，那么距離右側(cè)也要200才能居中顯示，這樣菜單長度也能跟著屏幕大小變化）

打開瀏覽器預(yù)覽，我們能看到頂部和菜單欄已經(jīng)完成了我們的要求，下面我簡單說一下，因?yàn)榛径际峭ㄟ^這種方式來完成

圖片居中顯示我們有兩種方式：

• 第一種：直接轉(zhuǎn)換為動(dòng)態(tài)面板，固定到瀏覽器中，但是對(duì)于網(wǎng)頁滾動(dòng)的時(shí)候，這種方法顯然不適用，
• 第二種：我們給圖片添加“載入時(shí)”交互，“設(shè)置尺寸”寬“windows.width-400”高“600”（高和寬看具體網(wǎng)頁中的設(shè)計(jì)）減去值一般為距離X軸坐標(biāo)的2倍。

文字居中的方式：

因?yàn)閳D片可以通過設(shè)置尺寸來控制它居中，但是文字顯然不能通過這種方式，我們可以通過移動(dòng)來達(dá)到這一目的，為文字添加“載入時(shí)”用例，“移動(dòng)”文字，X坐標(biāo)為“windows.width/2-LVAR1.width/2”（窗口大小除以2得到中心位置X坐標(biāo)，但是文字也是有長度的，所以再減去文字長度的一半）Y坐標(biāo)為“This.y”。

總結(jié)一下：

用Axure制作Web原型，要使原型在預(yù)覽時(shí)能和我們平時(shí)預(yù)覽網(wǎng)頁時(shí)的效果一樣，需要做到以下幾點(diǎn)：

1. 如果是有背景框的，通過“windows.width”將背景框鋪滿屏幕。
2. 需要固定在網(wǎng)頁某個(gè)地方，只需要將其轉(zhuǎn)換為“動(dòng)態(tài)面板”，固定到瀏覽器窗口，設(shè)置好相關(guān)數(shù)值就行了。
3. 如果元件是從某個(gè)X坐標(biāo)開始居中，而且不用固定僅僅是居中，那么需要在Axure中將元件放到X坐標(biāo)，再通過“windows.width-2X”使元件居中，同時(shí)長度也會(huì)隨瀏覽器窗口變化。
4. 單個(gè)元件居中，載入時(shí)設(shè)置移動(dòng)，X坐標(biāo)“windows.width/2-LVAR1.width/2”（窗口大小除以2得到中心位置X坐標(biāo)，但是文字也是有長度的，所以再減去文字長度的一半）Y軸坐標(biāo)“This.y”。

原型下載鏈接：https://pan.baidu.com/s/1nGJVFo15pDEmzcWMWFot9g 密碼：h1hd

剛接觸的建議先把基礎(chǔ)學(xué)好，因?yàn)檫@個(gè)看起來簡單，但是操作起來比較麻煩，但是可以下載原型，然后自己去琢磨。

哪里看不懂，或者有更好的意見歡迎下方評(píng)論交流

本文由 @就這樣吧！ 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理。未經(jīng)許可，禁止轉(zhuǎn)載

題圖來自 Pexels，基于 CC0 協(xié)議