Axure9實(shí)操教程2-頁(yè)面尺寸

時(shí)間：2023-08-29 17:36:01 | 來(lái)源：網(wǎng)站運(yùn)營(yíng)

時(shí)間：2023-08-29 17:36:01 來(lái)源：網(wǎng)站運(yùn)營(yíng)

Axure9實(shí)操教程2-頁(yè)面尺寸：當(dāng)Axure9的工作界面中沒(méi)有任何元件/沒(méi)有選中任何元件時(shí)，右邊的樣式、交換、說(shuō)明則是針對(duì)當(dāng)前頁(yè)面：

---

頁(yè)面尺寸

頁(yè)面樣式最上面是頁(yè)面尺寸，頁(yè)面尺寸設(shè)置是很有用的，如果是做手機(jī)的原型，Axure9中有很多預(yù)設(shè)的手機(jī)界面尺寸，只需要選擇自己需要的尺寸即可，如果需要其他尺寸，還可以自定義設(shè)備。
如果是網(wǎng)頁(yè)原型，則可以選擇Web，系統(tǒng)默認(rèn)給出1024w，也就是寬為1024px，對(duì)于現(xiàn)在的電腦明顯小了很多，可以根據(jù)需要適量加大（我一般會(huì)使用1920）。

選擇手機(jī)界面后還可以手動(dòng)修改寬高。
工作界面被自動(dòng)調(diào)整為設(shè)置的大小，灰色是工作區(qū)以外，這里的東西在預(yù)覽或發(fā)布時(shí)是不會(huì)展示的。
在界面下端有一條虛線，表示到這里已經(jīng)是設(shè)置的高度了，如果元件超出這條虛線，預(yù)覽或發(fā)布后，界面上會(huì)出現(xiàn)滾動(dòng)條，下拉滾動(dòng)條就能瀏覽下面的部分。
但是，我們都知道現(xiàn)在的手機(jī)界面是不顯示滾動(dòng)條的，所以再放置元件的時(shí)候不要超出這個(gè)界限哦。
當(dāng)然，我們強(qiáng)大的Axure還是可以實(shí)現(xiàn)上下滑動(dòng)效果的，怎么實(shí)現(xiàn)？賣個(gè)小關(guān)子(●'?'●)……待我后面慢慢道來(lái)。


Web界面不會(huì)出現(xiàn)分割線，因?yàn)閃eb本來(lái)就沒(méi)有設(shè)置高度，是自適應(yīng)瀏覽器高度的。
那可以讓原型自適應(yīng)不同電腦上瀏覽器的尺寸嗎，答案是：當(dāng)然！
怎么實(shí)現(xiàn)？嘿嘿(●'?'●)……繼續(xù)往下看——自適應(yīng)視圖……

---

自適應(yīng)視圖

添加自適應(yīng)視圖：將自適應(yīng)視圖尺寸保存起來(lái)，新建頁(yè)面的時(shí)候，只需要選擇即可?？梢酝ㄟ^(guò)“預(yù)設(shè)”選擇一個(gè)系統(tǒng)自帶的尺寸，再進(jìn)行修改。注意：設(shè)置的自適應(yīng)視圖只在本文檔中有，如果重新創(chuàng)建一個(gè)文檔需要再次設(shè)置。


點(diǎn)擊“添加”在已創(chuàng)建的自適應(yīng)視圖下再新增子視圖，繼承父級(jí)視圖。一個(gè)父視圖可以建多個(gè)子視圖，可以多層嵌套；繼承可以設(shè)置當(dāng)前子級(jí)所繼承的父級(jí)視圖：


繼承：是指子級(jí)自適應(yīng)視圖繼承父級(jí)自適應(yīng)視圖工作界面的內(nèi)容（并不是所有元件樣式都會(huì)被繼承，比如文本標(biāo)簽的尺寸、位置屬性就不會(huì)被繼承）。
那么自適應(yīng)視圖有什么用呢？
答：好比一個(gè)網(wǎng)頁(yè)，我們?cè)陔娔X上、手機(jī)上、pad上都能打開(kāi)，但是電腦、手機(jī)、pad瀏覽器頁(yè)面的尺寸明顯不一樣啊，界面顯示的布局可能有變化，但是內(nèi)容都一致，這是就是自適應(yīng)的作用了。
現(xiàn)在我們來(lái)做一個(gè)網(wǎng)頁(yè)和手機(jī)端的自適應(yīng)顯示效果吧，come on！
1.首先我們來(lái)設(shè)置自適應(yīng)頁(yè)面，新建一個(gè)web尺寸作為父級(jí)，再創(chuàng)建一個(gè)手機(jī)尺寸：


2.創(chuàng)建好后進(jìn)入工作界面，藍(lán)綠色表示當(dāng)前選中的尺寸，即Web尺寸，在上面放置一個(gè)圖片（直接將任意圖片復(fù)制粘貼進(jìn)去），注意調(diào)整圖片大?。?br>

3.點(diǎn)擊手機(jī)自適應(yīng)視圖，我們可以看到子級(jí)的自適應(yīng)視圖中已經(jīng)有同樣大小的圖片了，但這種狀態(tài)，預(yù)覽后在手機(jī)自適應(yīng)視圖狀態(tài)下肯定是看不到圖片的，因此要對(duì)圖片進(jìn)行調(diào)整：


4.調(diào)整手機(jī)自適應(yīng)視圖的圖片位置和大?。?br>

5.我們可以看到此時(shí)父級(jí)和子級(jí)自適應(yīng)視圖中的圖片位置和大小已經(jīng)完全不同了，點(diǎn)擊預(yù)覽，則可以根據(jù)當(dāng)前瀏覽器自動(dòng)選擇最合適的自適應(yīng)頁(yè)面展示：


影響所有視圖選項(xiàng)，在默認(rèn)不勾選情況下，當(dāng)父級(jí)自適應(yīng)視圖中內(nèi)容發(fā)生的改變將會(huì)被繼承到子級(jí)（子級(jí)中已經(jīng)發(fā)生改變的除外，比如上圖中地球圖片的位置和尺寸），而子級(jí)自適應(yīng)視圖中的變動(dòng)是不會(huì)影響到父級(jí)的；勾選后，則子級(jí)自適應(yīng)視圖中的動(dòng)也可以影響到父級(jí)。

---

頁(yè)面樣式

可以設(shè)置頁(yè)面排列、填充顏色/圖片和低保真度。

頁(yè)面排列：是指設(shè)計(jì)內(nèi)容在瀏覽器中的排列顯示方式，一般選用默認(rèn)的居中對(duì)齊。

選則左對(duì)齊，預(yù)覽一下可以發(fā)現(xiàn)頁(yè)面內(nèi)容在瀏覽器中靠最左展示出來(lái)：

選擇劇中對(duì)齊，則預(yù)覽效果如下：

填充-顏色：是指頁(yè)面的背景色，比如將頁(yè)面背景色設(shè)置為灰色：

填充-圖片：是指頁(yè)面背景用圖片來(lái)進(jìn)行填充，填充圖片時(shí)，還可以設(shè)置對(duì)齊方式和是否重復(fù)，填充圖片的功能對(duì)制造類似QQ空間這樣的頁(yè)面很有用哦，寶寶們可以試試看：

插入一張圖片，默認(rèn)左上對(duì)齊，重復(fù)圖片：

其他選項(xiàng)，寶寶們自己試試就能只管的看出效果的，這里不再展示了。

Axure網(wǎng)頁(yè)頁(yè)面樣式可以自定義，將自己常用的頁(yè)面樣式保存下來(lái)，新建頁(yè)面的時(shí)候就可以直接使用啦。

---

本章就到這里了，大家一起來(lái)試試吧！