欧美日韩不卡一区二区三区,www.蜜臀.com,高清国产一区二区三区四区五区,欧美日韩三级视频,欧美性综合,精品国产91久久久久久,99a精品视频在线观看

網(wǎng)頁(yè)設(shè)計(jì)

Axure7交互設(shè)計(jì)響應(yīng)式方案

時(shí)間:2025-03-22 22:20:27 網(wǎng)頁(yè)設(shè)計(jì) 我要投稿
  • 相關(guān)推薦

Axure7交互設(shè)計(jì)響應(yīng)式方案

  您對(duì)Axure7設(shè)計(jì)響應(yīng)式方案(交互設(shè)計(jì))了解多少,下面我們一起來(lái)了解一下吧。就跟隨百分網(wǎng)小編一起去了解下吧,想了解更多相關(guān)信息請(qǐng)持續(xù)關(guān)注我們應(yīng)屆畢業(yè)生考試網(wǎng)!

Axure7交互設(shè)計(jì)響應(yīng)式方案

  隨大屏幕分辨率普及,網(wǎng)頁(yè)設(shè)計(jì)在交互階段就必須考慮響應(yīng)式方案,Axure7作為我偏愛(ài)的交互設(shè)計(jì)工具果然也沒(méi)讓大家失望的新增了Adaptive View功能,基于RP(Rapid Prototype)的思想可以以最小工作量制作出直觀且基本上表達(dá)無(wú)誤的響應(yīng)式設(shè)計(jì)方案。當(dāng)然如果大家對(duì)Axure的Dynamic Panel和函數(shù)了如指掌的話,絕對(duì)也可以制作出更逼真的Demo。

  【基礎(chǔ)篇】

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

  這里請(qǐng)注意:

  Base頁(yè):即初始頁(yè),比如PC端網(wǎng)頁(yè)設(shè)計(jì)的話可以自己定義為1024×768之類(lèi)的尺寸;

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

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

  制作各分辨率視圖界面時(shí),請(qǐng)務(wù)必根據(jù)inherit關(guān)系依次進(jìn)行。這點(diǎn)請(qǐng)大家牢記!剛上手的同學(xué)可能會(huì)感覺(jué)疑惑:怎么后一視圖的A元素刪掉了前一視圖的A元素還在,但是前一視圖的A元素刪掉了后面所有視圖的A元素都沒(méi)了?因?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í),建議在顯著位置寫(xiě)好分辨率值便于檢驗(yàn)demo(如下圖),動(dòng)手試一下你可能就會(huì)問(wèn):“怎么分辨率文字在所有視圖里都變成了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(灰色左右間距)

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

  準(zhǔn)備工作

  改造目標(biāo):

  頁(yè)面能根據(jù)拖拽窗口實(shí)時(shí)自適應(yīng)

  內(nèi)容區(qū)能在達(dá)到1366視圖中最大寬度后保持寬度,并保持居中位置

  重新明確分段變形:

  Base(1024×768)為最小界面,不再隨窗口繼續(xù)變小

  1024-1366時(shí),內(nèi)容區(qū)寬度變大并在1366時(shí)達(dá)到最大值

  1366+時(shí),內(nèi)容區(qū)寬度固定在最大值,內(nèi)容區(qū)與標(biāo)題欄footer信息保持對(duì)齊且在右側(cè)保持居中(只增加左右padding)

  尚能利用的廢料:

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

  明確這些后,我們開(kāi)始動(dòng)手,首先可以刪掉除了Base和1366的所有視圖。然后把界面上的背景部分(Menu高度,右側(cè)灰部長(zhǎng)寬,標(biāo)題和footer兩根分割線長(zhǎng)度)盡量拉大。雖然也可以用函數(shù)來(lái)寫(xiě)動(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寬和無(wú)限高(基本1500就夠用)就好。

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

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

【Axure7交互設(shè)計(jì)響應(yīng)式方案】相關(guān)文章:

響應(yīng)交互式網(wǎng)頁(yè)設(shè)計(jì)06-29

響應(yīng)式網(wǎng)頁(yè)設(shè)計(jì)04-06

響應(yīng)式網(wǎng)頁(yè)設(shè)計(jì)的技巧06-25

響應(yīng)式網(wǎng)頁(yè)怎么設(shè)計(jì)04-28

響應(yīng)式網(wǎng)站布局設(shè)計(jì)05-08

響應(yīng)式網(wǎng)頁(yè)設(shè)計(jì)技巧05-22

響應(yīng)式設(shè)計(jì)災(zāi)禍有哪些03-29

響應(yīng)式網(wǎng)站該如何設(shè)計(jì)04-08

響應(yīng)式網(wǎng)頁(yè)設(shè)計(jì)的小技巧03-13