本篇文章作者主要講的是關(guān)于用Axure制作Web原型自適應(yīng)電腦屏幕，一起來看看~

用axure制作原型，很多剛?cè)腴T的小白（包括我），制作原型的時候首先從制作App原型開始的，因為有固定的原型尺寸供我們參考，下面總結(jié)的移動原型尺寸與配置，大家可以參考一下。

本篇文章我主要是想講一下關(guān)于用Axure制作Web原型自適應(yīng)電腦屏幕。

先來體驗一下效果：https://nc9f9h.axshare.com

在新建一個空白axure文件的時候，我們從檢視頁面這一欄能看到“頁面樣式”這一設(shè)置，首先頁面排列默認從“左側(cè)對齊”，我們也可以修改“水平居中”，這一設(shè)置主要是我們按F5在瀏覽器中預(yù)覽時，頁面中的元素在瀏覽器中的對齊方式。

我就從這兩種“頁面排列”來講一下如何實現(xiàn)原型自適應(yīng)電腦屏幕

1、頁面排列為“左側(cè)對齊”

?瀏覽器中效果

2、分析，“左側(cè)對齊”如何適應(yīng)屏幕大??？

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

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

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

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

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

4、交互

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

頂部：

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

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

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

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

菜單欄：

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

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

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

打開瀏覽器預(yù)覽，我們能看到頂部和菜單欄已經(jīng)完成了我們的要求，下面我簡單說一下，因為基本都是通過這種方式來完成

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

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

文字居中的方式：

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

總結(jié)一下：

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

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

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

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

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

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

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