中文字幕无码av不卡一区,亚洲综合AV永久无码精品一区二区,黑人巨大白妞出浆,黄色高清无码免费看,久久久久免费精品国产,久久无码人妻丰满熟妇区毛片,欧美日韩国产综合草草,久久福利网站,亚洲一区二区三区中文字幕在线,av国内精品久久久久影院

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

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

本篇文章我主要是想講一下關于用Axure制作Web原型自適應電腦屏幕。

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

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

我就從這兩種“頁面排列”來講一下如何實現原型自適應電腦屏幕

1、頁面排列為“左側對齊”

?瀏覽器中效果

2、分析，“左側對齊”如何適應屏幕大??？

“左側對齊”的方式適應屏幕大小，就是說讓Web頁面中一些元件的長度能夠以“左側對齊”的方式鋪滿屏幕，其他元件不需要鋪滿的能夠居中顯示。

上面是我用“左側對齊”方式制作的Web原型，實現了在瀏覽器中適應電腦屏幕。

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

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

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

4、交互

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

頂部：

“head-back”鋪滿屏幕，我們為“head-back”添加“載入時”交互，設置當前元件寬為“windows.width”，高度不變，錨點為左上角。

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

頁面中“logo”在距離左側120的位置，所以我們選擇將“logo”轉化為動態面板，固定到瀏覽器。

頁面中“login”和“create”組合在距離右側120的位置，我們將組合轉化為動態面板，固定到瀏覽器。

菜單欄：

“menu-back”鋪滿屏幕，我們為“menu-back”添加“載入時”交互，設置當前元件寬為“windows.width”，高度不變，錨點為左上角。

菜單組合居中固定，距離左側200的位置，所以我們轉化菜單組合為動態面板，固定到瀏覽器中。

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

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

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

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

文字居中的方式：

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

總結一下：

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

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

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

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

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

本文由 @就這樣吧！ 原創發布于人人都是產品經理。未經許可，禁止轉載

題圖來自 Pexels，基于 CC0 協議