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

Axure怎么制作頁面滾動時菜單固定在頂部的頁面?

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

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

1、制作頁面

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

2、制作隨頁面滾動的標題

為了讓效果更加明顯,我們將標題進行區(qū)別設置,設置矩形背景色為黃色,你也可以通過設置其他屬性來進行區(qū)別。將標題命名為“標題1”。

3、制作固定的標題

滾動中固定在頂部的標題并非頁面上的標題,是單獨制作的。復制“標題1”,將復制的標題命名為“標題2”,設置“標題2”x坐標等于“標題1”的x坐標,y坐標等于0。修改“標題2”背景色為藍色。

4、制作固定的標題

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

5、制作固定錨點

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

6、制作滾動錨點

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

7、設置交互

打開頁面交互面板,雙擊“窗口滾動時”事件,添加條件“元件范圍 滾動錨點 接觸到 元件范圍 固定錨點”,確定,設置動作為“顯示 固定菜單”。

8、設置交互

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

9、預覽效果

至此,所有設置均已完成,按F5進行預覽吧。

相關文章

最新評論