以下幾小教程使用的是Axure的動(dòng)態(tài)面板來實(shí)現(xiàn),內(nèi)容簡(jiǎn)單口糕,適合菜鳥查閱缅阳,老鳥可飄過,順便幫忙點(diǎn)個(gè)贊哈/偷笑景描。
一.伸縮/隱藏導(dǎo)航欄
例如:鼠標(biāo)移動(dòng)到一級(jí)導(dǎo)航上十办,二級(jí)導(dǎo)航會(huì)下拉方式顯示
1.打開Axure,拖動(dòng)一個(gè)矩形元件,設(shè)置寬830超棺、高49向族;
2.輸入所需要的一級(jí)導(dǎo)航名稱,使用文本標(biāo)簽元件棠绘,字體大小20件相;
3.對(duì)需要做二級(jí)導(dǎo)航的標(biāo)簽處下方,設(shè)置5個(gè)左右的矩形框元件氧苍,矩形框內(nèi)寫上二級(jí)導(dǎo)航名稱夜矗;
4.5個(gè)矩形框全選,右鍵設(shè)置“轉(zhuǎn)換為動(dòng)態(tài)面板”让虐,此時(shí)5個(gè)矩形已合為一個(gè)元件紊撕,并設(shè)置好該元件的Name:tab;
5.對(duì)需要下拉的標(biāo)簽,設(shè)置交互方式【鼠標(biāo)移動(dòng)時(shí)→選擇顯示動(dòng)作→選擇tab→更多選項(xiàng)(彈出效果)】
二.遮罩效果彈窗
例如:常見交互方式澄干,點(diǎn)擊登錄或注冊(cè)逛揩,彈出登錄或注冊(cè)窗口,背景頁(yè)面顯灰色
?1.布局好所需的元件麸俘,樣式可自定辩稽;
2.彈窗外框和內(nèi)容,右鍵設(shè)置“轉(zhuǎn)換為動(dòng)態(tài)面板”从媚,并且樣式處設(shè)置為隱藏逞泄,設(shè)置一個(gè)Name:add;
3.注冊(cè)設(shè)置交互方式【鼠標(biāo)點(diǎn)擊時(shí)→選擇顯示動(dòng)作→選擇add→更多選項(xiàng)(燈箱效果)→背景色設(shè)置為灰色】
三.返回頂部設(shè)計(jì)
例如:鼠標(biāo)點(diǎn)擊箭頭,網(wǎng)頁(yè)自動(dòng)往上返回第一屏頁(yè)面
1.先搭建一個(gè)建議的頁(yè)面,頁(yè)面盡量往下延伸喷众,方便測(cè)試各谚,在頁(yè)面底端放一個(gè)矩形變形后的箭頭,并把箭頭右鍵設(shè)置“轉(zhuǎn)換為動(dòng)態(tài)面板”到千。
2..箭頭右鍵設(shè)置為“固定到瀏覽器”昌渤,彈出設(shè)置界面,固定到瀏覽器窗口→水平固定為右→邊距設(shè)置為100→垂直固定底部→邊距10憔四;
2.將頁(yè)面頂部元件設(shè)置一個(gè)Name,把它的Y坐標(biāo)設(shè)置為“0”膀息;
3.箭頭設(shè)置鼠標(biāo)點(diǎn)擊交互,添加動(dòng)作為滾動(dòng)到元件<錨鏈接>了赵,選擇頂部元件潜支,僅垂直滾動(dòng),動(dòng)畫為線性柿汛。
有看不明白的同鞋冗酿,可以留言。想要看《介紹Axure RP幾個(gè)常用小設(shè)計(jì)(二)》络断,請(qǐng)加關(guān)注裁替,謝謝!