隨大屏幕分辨率普及，網頁設計在交互階段就必須考慮響應式方案，Axure7做爲我偏心的交互設計工具果真也沒讓你們失望的新增了Adaptive View功能，基於RP(Rapid Prototype)的思想能夠以最小工做量製做出直觀且基本上表達無誤的響應式設計方案。固然若是你們對Axure的Dynamic Panel和函數了如指掌的話，絕對也能夠製做出更逼真的Demo。api
【基礎篇】
Adaptive View的設置入口就在頁面標尺0座標上方，點它，在彈框裏就能夠添加設置各類分辨率的視圖了（下圖）less
Base頁：即初始頁，好比PC端網頁設計的話能夠本身定義爲1024×768之類的尺寸；這裏請注意：wordpress
Condition字段：包括」is greater than or equals」和「is less than or equals」兩個選項，與下方輸入的長寬值組成觸發響應的條件。函數
Inherit from字段：可選擇變形源的頁面，將在左側經過層級展現關係。工具
製做各分辨率視圖界面時，請務必根據inherit關係依次進行。這點請你們牢記！剛上手的同窗可能會感受疑惑：怎麼後一視圖的A元素刪掉了前一視圖的A元素還在，可是前一視圖的A元素刪掉了後面全部視圖的A元素都沒了？由於Base視圖的元素將直接出如今後續分辨率視圖中且事實爲同一元素，這是爲了提高設計師工做效率，base視圖完成後，在第二視圖只需簡單拖拽就能完成，而後第三第四視圖同理依次完成就好。佈局
我偏好從小往大設置，對應的觸發條件能夠設置爲例如圖中的：「當頁面尺寸大於等於1366(長) 768（高）時，從Base（1024×768）變形爲1366×768視圖」post
作每一個分辨率視圖時，建議在顯著位置寫好分辨率值便於檢驗demo（以下圖），動手試一下你可能就會問：「怎麼分辨率文字在全部視圖裏都變成了1920×1080？」道理仍是同樣，由於若是你是從Base添加的，那後續全部視圖的事實上爲同一元素，並且這驗證了文字內容不能隨視圖變化。因此怎麼辦？逐頁刪掉從新放文字元素上去就好。url
假設要作一個網頁，從1024變化至1366寬時內容（白色）區域寬度達到最大值，以後分辨率繼續變大時保持內容區寬度不變只改變左右padding（灰色左右間距）spa
完成後效果 http://6alxvx.axshare.com
雖然足矣表達設計師想要的響應式佈局，可是沒有實時的自適應效果，相信有追求的設計師絕對會內心不爽，那麼咱們繼續開坑改造，因而Axure的樂趣來了~設計
【進階篇】
準備工做
改造目標：
-
頁面能根據拖拽窗口實時自適應
-
內容區能在達到1366視圖中最大寬度後保持寬度，並保持居中位置
從新明確分段變形：
-
Base（1024×768）爲最小界面，再也不隨窗口繼續變小
-
1024-1366時，內容區寬度變大並在1366時達到最大值
-
1366+時，內容區寬度固定在最大值，內容區與標題欄footer信息保持對齊且在右側保持居中（只增長左右padding）
尚能利用的廢料：
上一demo中幾個關鍵視圖：Base（最小界面，不會由於拖拽改變大小）、1366（內容區最大寬度界面，分段變形轉折點）
明確這些後，咱們開始動手，首先能夠刪掉除了Base和1366的全部視圖。而後把界面上的背景部分（Menu高度，右側灰部長寬，標題和footer兩根分割線長度）儘可能拉大。雖然也能夠用函數來寫動態尺寸，可是本着RP思想，仍是決定儘可能節省工時偷懶一下爲好。
增長1025視圖（意思是1025-1366寬度範圍），inhert from Base。
可實時變形的內容區域
考慮到1024向1366變形時，內容（白色）區寬度會逐漸變大，咱們能夠把內容區白色方塊右鍵convert into dynamic panel（後面簡稱DP）命名爲frame1025（叫1025是由於觸發變形的寬度條件是1025px），而後在DPstate1中把白色方塊拉到很是大，保證變形至1366寬和無限高（基本1500就夠用）就好。
在頁面底部OnWindowResize項上雙擊
打開條件編輯窗增長交互行爲Set Size of Dynamic Panel以下圖。爲何是寬度Window.width-221？這個尺寸因頁面尺寸而異，很好算。因而內容（白色）區frame 1025就能夠隨鼠標拖拽窗口實時變形了。
保持頁面底部的footer
1024-1366段footer文字不會改變x值，只會隨頁面高度變化固底，最簡單的作法就是變成DP後右鍵選擇Pin to Browser，並設置與底部距離。（這裏我將分割線和footer文字羣組後變爲一個DP）因而1024-1366段改造完畢。
隨頁面寬度變化的居中位
在1366視圖，咱們的目標是讓內容區域、標題、footer文字固寬並隨頁面變寬始終居中。一樣，製做新內容區DP: frame 1366，在底部OnWindowResize增長交互行爲以下圖
注意Move 後的選項」to」和」by」的區別，move to是移動到絕對座標，move by是每次觸發條件的移動量。（若是選了move by，結果就會是每當窗口被拖拽，DP就移動一段距離直到跑出屏幕。）這裏咱們要選move to。
在1366+段，frame 1366仍會隨窗口高度變大，一樣在這裏增長交互行爲以下圖，因而內容區改造完成！
能作到以上部分的話，那麼繼續改造1366+段的標題和footer其實已經易如反掌了，用的方法其實徹底同樣，不是變形就是移動而已。