Axure7響應(yīng)式進(jìn)階

【基礎(chǔ)篇】

Adaptive View的設(shè)置入口就在頁(yè)面標(biāo)尺0坐標(biāo)上方，點(diǎn)它，在彈框里就可以添加設(shè)置各種分辨率的視圖了（下圖）

Base頁(yè)：即初始頁(yè)，比如PC端網(wǎng)頁(yè)設(shè)計(jì)的話可以自己定義為1024×768之類的尺寸；這里請(qǐng)注意：

Condition字段：包括”is greater than or equals”和“is less than or equals”兩個(gè)選項(xiàng)，與下方輸入的長(zhǎng)寬值組成觸發(fā)響應(yīng)的條件。

Inherit from字段：可選擇變形源的頁(yè)面，將在左側(cè)通過層級(jí)展示關(guān)系。

制作各分辨率視圖界面時(shí)，請(qǐng)務(wù)必根據(jù)inherit關(guān)系依次進(jìn)行。這點(diǎn)請(qǐng)大家牢記！剛上手的同學(xué)可能會(huì)感覺疑惑：怎么后一視圖的A元素刪掉了前一視圖的A元素還在，但是前一視圖的A元素刪掉了后面所有視圖的A元素都沒了？因?yàn)锽ase視圖的元素將直接出現(xiàn)在后續(xù)分辨率視圖中且事實(shí)為同一元素，這是為了提升設(shè)計(jì)師工作效率，base視圖完成后，在第二視圖只需簡(jiǎn)單拖拽就能完成，然后第三第四視圖同理依次完成就好。

我偏好從小往大設(shè)置，對(duì)應(yīng)的觸發(fā)條件可以設(shè)置為例如圖中的：“當(dāng)頁(yè)面尺寸大于等于1366(長(zhǎng)) 768（高）時(shí)，從Base（1024×768）變形為1366×768視圖”

做每個(gè)分辨率視圖時(shí)，建議在顯著位置寫好分辨率值便于檢驗(yàn)demo（如下圖），動(dòng)手試一下你可能就會(huì)問：“怎么分辨率文字在所有視圖里都變成了1920×1080？”道理還是一樣，因?yàn)槿绻闶菑腂ase添加的，那后續(xù)所有視圖的事實(shí)上為同一元素，而且這驗(yàn)證了文字內(nèi)容不能隨視圖變化。所以怎么辦？逐頁(yè)刪掉重新放文字元素上去就好。

假設(shè)要做一個(gè)網(wǎng)頁(yè)，從1024變化至1366寬時(shí)內(nèi)容（白色）區(qū)域?qū)挾冗_(dá)到大值，之后分辨率繼續(xù)變大時(shí)保持內(nèi)容區(qū)寬度不變只改變左右padding（灰色左右間距）

完成后效果  http://6?alxvx.axshare.com

雖然足矣表達(dá)設(shè)計(jì)師想要的響應(yīng)式布局，但是沒有實(shí)時(shí)的自適應(yīng)效果，相信有追求的設(shè)計(jì)師絕對(duì)會(huì)心里不爽，那么我們繼續(xù)開坑改造，于是Axure的樂趣來了~

【進(jìn)階篇】

準(zhǔn)備工作

改造目標(biāo)：

• 頁(yè)面能根據(jù)拖拽窗口實(shí)時(shí)自適應(yīng)
• 內(nèi)容區(qū)能在達(dá)到1366視圖中大寬度后保持寬度，并保持居中位置

重新明確分段變形：

1. Base（1024×768）為最小界面，不再隨窗口繼續(xù)變小
2. 1024-1366時(shí)，內(nèi)容區(qū)寬度變大并在1366時(shí)達(dá)到大值
3. 1366+時(shí)，內(nèi)容區(qū)寬度固定在大值，內(nèi)容區(qū)與標(biāo)題欄footer信息保持對(duì)齊且在右側(cè)保持居中（只增加左右padding）

尚能利用的廢料：

上一demo中幾個(gè)關(guān)鍵視圖：Base（最小界面，不會(huì)因?yàn)橥献Ц淖兇笮。?366（內(nèi)容區(qū)大寬度界面，分段變形轉(zhuǎn)折點(diǎn)）

明確這些后，我們開始動(dòng)手，首先可以刪掉除了Base和1366的所有視圖。然后把界面上的背景部分（Menu高度，右側(cè)灰部長(zhǎng)寬，標(biāo)題和footer兩根分割線長(zhǎng)度）盡量拉大。雖然也可以用函數(shù)來寫動(dòng)態(tài)尺寸，但是本著RP思想，還是決定盡量節(jié)省工時(shí)偷懶一下為好。

增加1025視圖（意思是1025-1366寬度范圍），inhert from Base。

可實(shí)時(shí)變形的內(nèi)容區(qū)域

考慮到1024向1366變形時(shí)，內(nèi)容（白色）區(qū)寬度會(huì)逐漸變大，我們可以把內(nèi)容區(qū)白色方塊右鍵convert into dynamic panel（后面簡(jiǎn)稱DP）命名為frame1025（叫1025是因?yàn)橛|發(fā)變形的寬度條件是1025px），然后在DPstate1中把白色方塊拉到非常大，保證變形至1366寬和無限高（基本1500就夠用）就好。

在頁(yè)面底部OnWindowResize項(xiàng)上雙擊

打開條件編輯窗增加交互行為Set Size of Dynamic Panel如下圖。為什么是寬度Window.width-221？這個(gè)尺寸因頁(yè)面尺寸而異，很好算。于是內(nèi)容（白色）區(qū)frame 1025就可以隨鼠標(biāo)拖拽窗口實(shí)時(shí)變形了。

保持頁(yè)面底部的footer

1024-1366段footer文字不會(huì)改變x值，只會(huì)隨頁(yè)面高度變化固底，最簡(jiǎn)單的做法就是變成DP后右鍵選擇Pin to Browser，并設(shè)置與底部距離。（這里我將分割線和footer文字群組后變?yōu)橐粋€(gè)DP）于是1024-1366段改造完畢。

隨頁(yè)面寬度變化的居中位

在1366視圖，我們的目標(biāo)是讓內(nèi)容區(qū)域、標(biāo)題、footer文字固寬并隨頁(yè)面變寬始終居中。同樣，制作新內(nèi)容區(qū)DP: frame 1366，在底部OnWindowResize增加交互行為如下圖

注意Move 后的選項(xiàng)”to”和”by”的區(qū)別，move to是移動(dòng)到絕對(duì)坐標(biāo)，move by是每次觸發(fā)條件的移動(dòng)量。（如果選了move by，結(jié)果就會(huì)是每當(dāng)窗口被拖拽，DP就移動(dòng)一段距離直到跑出屏幕。）這里我們要選move to。

在1366+段，frame 1366仍會(huì)隨窗口高度變大，同樣在這里增加交互行為如下圖，于是內(nèi)容區(qū)改造完成！

能做到以上部分的話，那么繼續(xù)改造1366+段的標(biāo)題和footer其實(shí)已經(jīng)易如反掌了，用的方法其實(shí)完全一樣，不是變形就是移動(dòng)而已。