Axure RP設計頂部導航凍結,注冊模塊互切換,滾動條設計的方法

5 評論 16391 瀏覽 121 收藏 5 分鐘

以下介紹幾個常用小教程,還是那句話——內容簡單,適合菜鳥查閱,老鳥可飄過,順便幫忙點個贊哈

一.頂部導航凍結,頁面下拉可跟隨

例如:下拉網頁進行瀏覽,頂部導航懸停,固定在頂部位置

2249443-8fb78086d32b6fda

1.按照自己理解,拖動幾個元件,把導航和主體頁面設計好;

2.導航處,右鍵設置“轉換為動態面板”,并命名top;

3.頁面空白處,選擇交互方式(窗口滾動時);

4.添加動作移動→選擇導航→移動:絕對位置→X坐標為0,Y坐標插入變量或函數(Window.scrollY)

1

2

二.注冊模塊(手機注冊、郵箱注冊互切換)

5

1.拖動元件,先布局好手機注冊內容表,所需的內容,包括(手機輸入框,點擊獲取驗證按鈕,2次輸入密碼框,注冊按鈕);

2.手機注冊內容表,右鍵設置“轉換為動態面板”;

3.手機注冊內容表,右鍵設置“管理面板狀態”,動態面板名稱設置為“add”,下面的面板狀態修改State1的名稱為“iphoneadd”,并添加一個狀態,命名為“emailadd”;

4.點擊“emailadd”,進入動態頁,為郵箱注冊內容表添加元件,所需的內容(電子郵箱輸入框,2次輸入密碼框,注冊按鈕,邊框)注意:邊框需要去除頂部框線;

5.設置手機注冊、郵箱注冊互切換,對手機注冊框,設置鼠標點擊交互→添加動作“設置面板狀態”→選擇狀態“iphoneadd”;

6.設置手機注冊、郵箱注冊互切換,對郵箱注冊框,設置鼠標點擊交互→添加動作“設置面板狀態”→選擇狀態“emailadd”;

3

4

5

三.簡單滾動條設計

6

1.拖動2個元件,矩形和動態面板,準備一個滾動條素材,我這里用的是藍色條狀素材;

2.設置矩形長為500,寬為20,(這個看自己愛好),把矩形設置為圓角,個人覺得這樣好看些;

3.把動態面板也設置為長為500,寬為20,導入條狀素材,覆蓋到圓角矩形上;

4.設置動態面板交互屬性,載入時→添加動作設置尺寸→當前元件→寬1高20;

5.再添加一次設置尺寸動作→當前元件→寬500高20,→動作為線性,時間為5000毫秒(即5秒)

1

2

 

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

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

    來自北京 回復
  2. 根本就不適合我這種小白學習 ??

    來自廣東 回復
  3. 浪費項目時間,無用功,除了有專門交互師

    回復
  4. 動態面板使用,在通過用例實現交互,我也是學到了這點,五年互聯網營銷經驗喲

    回復
  5. 用你另一篇的方式,把導航固定到瀏覽器不是一樣效果?

    來自福建 回復