欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

Axure怎么制作頁(yè)面滾動(dòng)時(shí)菜單固定在頂部的頁(yè)面?

  發(fā)布時(shí)間:2015-07-10 15:40:16   作者:佚名   我要評(píng)論
Axure怎么制作頁(yè)面滾動(dòng)時(shí)菜單固定在頂部的頁(yè)面?本文介紹如何做一個(gè)在滾動(dòng)中將菜單固定在頂部的頁(yè)面,屬于中級(jí)Axure案例。本文旨在展示交互效果,不對(duì)頁(yè)面具體內(nèi)容和UI進(jìn)行設(shè)計(jì),需要的朋友可以參考下

Axure可以制作出保真度相當(dāng)高的原型,除了頁(yè)面布局、UI以外,其強(qiáng)大的交互設(shè)計(jì)能力讓這些本來(lái)靜止的元素高效交互起來(lái),形成以假亂真的高保真原型。本文介紹如何做一個(gè)在滾動(dòng)中將菜單固定在頂部的頁(yè)面,屬于中級(jí)Axure案例。本文旨在展示交互效果,不對(duì)頁(yè)面具體內(nèi)容和UI進(jìn)行設(shè)計(jì)。

1、制作頁(yè)面

為了體現(xiàn)效果,我們需要做一個(gè)比較長(zhǎng)(高)的頁(yè)面,在Axure工作區(qū)中拖入4個(gè)矩形,分別為頂部標(biāo)題、菜單、頁(yè)面內(nèi)容、底部。設(shè)置矩形寬度和高度,讓其看起來(lái)像是一個(gè)頁(yè)面布局。

2、制作隨頁(yè)面滾動(dòng)的標(biāo)題

為了讓效果更加明顯,我們將標(biāo)題進(jìn)行區(qū)別設(shè)置,設(shè)置矩形背景色為黃色,你也可以通過(guò)設(shè)置其他屬性來(lái)進(jìn)行區(qū)別。將標(biāo)題命名為“標(biāo)題1”。

3、制作固定的標(biāo)題

滾動(dòng)中固定在頂部的標(biāo)題并非頁(yè)面上的標(biāo)題,是單獨(dú)制作的。復(fù)制“標(biāo)題1”,將復(fù)制的標(biāo)題命名為“標(biāo)題2”,設(shè)置“標(biāo)題2”x坐標(biāo)等于“標(biāo)題1”的x坐標(biāo),y坐標(biāo)等于0。修改“標(biāo)題2”背景色為藍(lán)色。

4、制作固定的標(biāo)題

右鍵單擊“標(biāo)題2”,點(diǎn)擊“轉(zhuǎn)換為動(dòng)態(tài)面板”,將動(dòng)態(tài)面板命名為“固定菜單”,在元件屬性與樣式中點(diǎn)擊“固定到瀏覽器”勾選“固定到瀏覽器窗口”,完成后隱藏動(dòng)態(tài)面板。

5、制作固定錨點(diǎn)

在工作區(qū)中拖入一個(gè)動(dòng)態(tài)面板,設(shè)置其x和y坐標(biāo)等于0,調(diào)整其寬度和高度分別為60和20,將動(dòng)態(tài)面板命名為“固定錨點(diǎn)”,設(shè)置其固定到瀏覽器。

6、制作滾動(dòng)錨點(diǎn)

在工作區(qū)中拖入一個(gè)熱區(qū),設(shè)置其x坐標(biāo)等于0,y坐標(biāo)等于“菜單1”的y坐標(biāo)加上固定錨點(diǎn)的高度,設(shè)置其寬度等于固定錨點(diǎn)的寬度,高度直接拖動(dòng)到頁(yè)面底部,命名為“滾動(dòng)錨點(diǎn)”。

7、設(shè)置交互

打開(kāi)頁(yè)面交互面板,雙擊“窗口滾動(dòng)時(shí)”事件,添加條件“元件范圍 滾動(dòng)錨點(diǎn) 接觸到 元件范圍 固定錨點(diǎn)”,確定,設(shè)置動(dòng)作為“顯示 固定菜單”。

8、設(shè)置交互

繼續(xù)在“窗口滾動(dòng)時(shí)”事件上添加動(dòng)作,添加條件“元件范圍 滾動(dòng)錨點(diǎn) 未接觸 元件范圍 固定錨點(diǎn)”,確定,設(shè)置動(dòng)作為“隱藏 固定菜單”。

9、預(yù)覽效果

至此,所有設(shè)置均已完成,按F5進(jìn)行預(yù)覽吧。

相關(guān)文章

最新評(píng)論