四川少BBB搡BBB爽爽爽_四川女人毛多水多A片_四川BBBBBB搡BBBBB_四LLL少妇BBBB槡BBBB_私密直播全婐APP免费魅影_爽到喷水(H)

400-611-9921

當(dāng)前位置:首頁 > 新聞資訊 > 建站知識
Axure7響應(yīng)式進階

2015-11-11

2844

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

【基礎(chǔ)篇】

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

Base頁:即初始頁,比如PC端網(wǎng)頁設(shè)計的話可以自己定義為1024×768之類的尺寸;這里請注意:

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

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

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

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

做每個分辨率視圖時,建議在顯著位置寫好分辨率值便于檢驗demo(如下圖),動手試一下你可能就會問:“怎么分辨率文字在所有視圖里都變成了1920×1080?”道理還是一樣,因為如果你是從Base添加的,那后續(xù)所有視圖的事實上為同一元素,而且這驗證了文字內(nèi)容不能隨視圖變化。所以怎么辦?逐頁刪掉重新放文字元素上去就好。

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

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

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

【進階篇】

準(zhǔn)備工作

改造目標(biāo):

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

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

重新明確分段變形:

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

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

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

尚能利用的廢料:

上一demo中幾個關(guān)鍵視圖:Base(最小界面,不會因為拖拽改變大?。?、1366(內(nèi)容區(qū)最大寬度界面,分段變形轉(zhuǎn)折點)

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

增加1025視圖(意思是1025-1366寬度范圍),inhert from Base。

 

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

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

在頁面底部OnWindowResize項上雙擊

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

 

保持頁面底部的footer

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

 

隨頁面寬度變化的居中位

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

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

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

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


關(guān)注我們:在查找公眾號中搜索:zomsky1688,或者掃描下方二維碼快速關(guān)注。
廣州市縱天信息科技有限公司公眾號
關(guān)鍵詞:移動網(wǎng)站建設(shè),高端網(wǎng)站建設(shè),視覺設(shè)計

免費咨詢熱線

400-611-9921

020-29860991

聯(lián)系方式

地址1:廣州市天河區(qū)珠江新城邦華環(huán)球廣場16F

業(yè)務(wù) QQ:  3561401262

E-mail:  sales@zomsky.com

微信咨詢
官方微信
微信咨詢
在線咨詢
TOP

立即與縱天項目顧問通話

400-611-9921

您也可以咨詢我們的在線客服或預(yù)約資深顧問

信息保護中,請放心填寫
關(guān)閉
免費獲取方案
陇南市| 五寨县| 澄城县| 武川县| 仙居县| 韶关市| 建水县| 和政县| 舟曲县| 巩留县| 抚宁县| 麦盖提县| 惠东县| 宁陵县| 郯城县| 上栗县| 蕲春县| 吉水县| 沂水县| 辽阳市| 朝阳市| 葵青区| 加查县| 泸定县| 灵川县| 南漳县| 嘉鱼县| 化州市| 乌审旗| 岳池县| 尚志市| 临西县| 垫江县| 方城县| 磐石市| 日土县| 闽侯县| 甘肃省| 铅山县| 宕昌县| 长泰县|