- 相關(guān)推薦
Axure7交互設計響應式方案
您對Axure7設計響應式方案(交互設計)了解多少，下面我們一起來(lái)了解一下吧。就跟隨百分網(wǎng)小編一起去了解下吧，想了解更多相關(guān)信息請持續關(guān)注我們應屆畢業(yè)生考試網(wǎng)!
隨大屏幕分辨率普及，網(wǎng)頁(yè)設計在交互階段就必須考慮響應式方案，Axure7作為我偏愛(ài)的交互設計工具果然也沒(méi)讓大家失望的新增了Adaptive View功能，基于RP(Rapid Prototype)的思想可以以最小工作量制作出直觀(guān)且基本上表達無(wú)誤的響應式設計方案。當然如果大家對Axure的Dynamic Panel和函數了如指掌的話(huà)，絕對也可以制作出更逼真的Demo。
【基礎篇】
Adaptive View的設置入口就在頁(yè)面標尺0坐標上方，點(diǎn)它，在彈框里就可以添加設置各種分辨率的視圖了
這里請注意：
Base頁(yè)：即初始頁(yè)，比如PC端網(wǎng)頁(yè)設計的話(huà)可以自己定義為1024×768之類(lèi)的尺寸;
Condition字段：包括”is greater than or equals”和“is less than or equals”兩個(gè)選項，與下方輸入的長(cháng)寬值組成觸發(fā)響應的條件。
Inherit from字段：可選擇變形源的頁(yè)面，將在左側通過(guò)層級展示關(guān)系。
制作各分辨率視圖界面時(shí)，請務(wù)必根據inherit關(guān)系依次進(jìn)行。這點(diǎn)請大家牢記!剛上手的同學(xué)可能會(huì )感覺(jué)疑惑：怎么后一視圖的A元素刪掉了前一視圖的A元素還在，但是前一視圖的A元素刪掉了后面所有視圖的A元素都沒(méi)了?因為Base視圖的元素將直接出現在后續分辨率視圖中且事實(shí)為同一元素，這是為了提升設計師工作效率，base視圖完成后，在第二視圖只需簡(jiǎn)單拖拽就能完成，然后第三第四視圖同理依次完成就好。
我偏好從小往大設置，對應的觸發(fā)條件可以設置為例如圖中的：“當頁(yè)面尺寸大于等于1366(長(cháng)) 768(高)時(shí)，從Base(1024×768)變形為1366×768視圖”
做每個(gè)分辨率視圖時(shí)，建議在顯著(zhù)位置寫(xiě)好分辨率值便于檢驗demo(如下圖)，動(dòng)手試一下你可能就會(huì )問(wèn)：“怎么分辨率文字在所有視圖里都變成了1920×1080?”道理還是一樣，因為如果你是從Base添加的，那后續所有視圖的事實(shí)上為同一元素，而且這驗證了文字內容不能隨視圖變化。所以怎么辦?逐頁(yè)刪掉重新放文字元素上去就好。
假設要做一個(gè)網(wǎng)頁(yè)，從1024變化至1366寬時(shí)內容(白色)區域寬度達到最大值，之后分辨率繼續變大時(shí)保持內容區寬度不變只改變左右padding(灰色左右間距)
雖然足矣表達設計師想要的響應式布局，但是沒(méi)有實(shí)時(shí)的自適應效果，相信有追求的設計師絕對會(huì )心里不爽，那么我們繼續開(kāi)坑改造，于是Axure的樂(lè )趣來(lái)了~
準備工作
改造目標：
頁(yè)面能根據拖拽窗口實(shí)時(shí)自適應
內容區能在達到1366視圖中最大寬度后保持寬度，并保持居中位置
重新明確分段變形：
Base(1024×768)為最小界面，不再隨窗口繼續變小
1024-1366時(shí)，內容區寬度變大并在1366時(shí)達到最大值
1366+時(shí)，內容區寬度固定在最大值，內容區與標題欄footer信息保持對齊且在右側保持居中(只增加左右padding)
尚能利用的廢料：
上一demo中幾個(gè)關(guān)鍵視圖：Base(最小界面，不會(huì )因為拖拽改變大小)、1366(內容區最大寬度界面，分段變形轉折點(diǎn))
明確這些后，我們開(kāi)始動(dòng)手，首先可以刪掉除了Base和1366的所有視圖。然后把界面上的背景部分(Menu高度，右側灰部長(cháng)寬，標題和footer兩根分割線(xiàn)長(cháng)度)盡量拉大。雖然也可以用函數來(lái)寫(xiě)動(dòng)態(tài)尺寸，但是本著(zhù)RP思想，還是決定盡量節省工時(shí)偷懶一下為好。
增加1025視圖(意思是1025-1366寬度范圍)，inhert from Base。
可實(shí)時(shí)變形的內容區域
考慮到1024向1366變形時(shí)，內容(白色)區寬度會(huì )逐漸變大，我們可以把內容區白色方塊右鍵convert into dynamic panel(后面簡(jiǎn)稱(chēng)DP)命名為frame1025(叫1025是因為觸發(fā)變形的寬度條件是1025px)，然后在DPstate1中把白色方塊拉到非常大，保證變形至1366寬和無(wú)限高(基本1500就夠用)就好。
在頁(yè)面底部OnWindowResize項上雙擊
打開(kāi)條件編輯窗增加交互行為Set Size of Dynamic Panel如下圖。為什么是寬度Window.width-221?這個(gè)尺寸因頁(yè)面尺寸而異，很好算。于是內容(白色)區frame 1025就可以隨鼠標拖拽窗口實(shí)時(shí)變形了。
【Axure7交互設計響應式方案】相關(guān)文章：
響應交互式網(wǎng)頁(yè)設計06-29
響應式網(wǎng)頁(yè)設計04-06
響應式網(wǎng)頁(yè)設計的技巧06-25
響應式網(wǎng)頁(yè)怎么設計04-28
響應式網(wǎng)站布局設計05-08
響應式網(wǎng)頁(yè)設計技巧05-22
響應式設計災禍有哪些03-29
響應式網(wǎng)站該如何設計04-08