Axure RP設計伸縮導航、遮罩彈窗、返回頂部的方法

4 評論 32761 瀏覽 143 收藏 4 分鐘

以下幾小教程使用的是Axure的動態面板來實現,內容簡單,適合菜鳥查閱,老鳥可飄過,順便幫忙點個贊哈/偷笑。

一.伸縮/隱藏導航欄

例如:鼠標移動到一級導航上,二級導航會下拉方式顯示

1

1.打開Axure,拖動一個矩形元件,設置寬830、高49;

2.輸入所需要的一級導航名稱,使用文本標簽元件,字體大小20;

3.對需要做二級導航的標簽處下方,設置5個左右的矩形框元件,矩形框內寫上二級導航名稱;

4.5個矩形框全選,右鍵設置“轉換為動態面板”,此時5個矩形已合為一個元件,并設置好該元件的Name:tab;

5.對需要下拉的標簽,設置交互方式【鼠標移動時→選擇顯示動作→選擇tab→更多選項(彈出效果)】

1

2

二.遮罩效果彈窗

例如:常見交互方式,點擊登錄或注冊,彈出登錄或注冊窗口,背景頁面顯灰色

1.2

1.布局好所需的元件,樣式可自定;

2.彈窗外框和內容,右鍵設置“轉換為動態面板”,并且樣式處設置為隱藏,設置一個Name:add;

3.注冊設置交互方式【鼠標點擊時→選擇顯示動作→選擇add→更多選項(燈箱效果)→背景色設置為灰色】

3

三.返回頂部設計

例如:鼠標點擊箭頭,網頁自動往上返回第一屏頁面

3

1.先搭建一個建議的頁面,頁面盡量往下延伸,方便測試,在頁面底端放一個矩形變形后的箭頭,并把箭頭右鍵設置“轉換為動態面板”。

2..箭頭右鍵設置為“固定到瀏覽器”,彈出設置界面,固定到瀏覽器窗口→水平固定為右→邊距設置為100→垂直固定底部→邊距10;

2.將頁面頂部元件設置一個Name,把它的Y坐標設置為“0”;

3.箭頭設置鼠標點擊交互,添加動作為滾動到元件<錨鏈接>,選擇頂部元件,僅垂直滾動,動畫為線性。

4

5

 

本文由 @jukilee 原創發布于人人都是產品經理。未經許可,禁止轉載。

更多精彩內容,請關注人人都是產品經理微信公眾號或下載App
評論
評論請登錄
  1. ?

    來自廣東 回復
    1. ??

      來自廣東 回復
  2. 第一個彈出用 自帶元件庫“菜單表格”下的水平菜單就可以做,不用這么麻煩

    來自上海 回復
    1. 是的,主要介紹動態面板的功能可以做些什么 ??

      來自廣東 回復