Axure RP設計頂部導航凍結,注冊模塊互切換,滾動條設計的方法
以下介紹幾個常用小教程,還是那句話——內容簡單,適合菜鳥查閱,老鳥可飄過,順便幫忙點個贊哈
一.頂部導航凍結,頁面下拉可跟隨
例如:下拉網頁進行瀏覽,頂部導航懸停,固定在頂部位置
1.按照自己理解,拖動幾個元件,把導航和主體頁面設計好;
2.導航處,右鍵設置“轉換為動態面板”,并命名top;
3.頁面空白處,選擇交互方式(窗口滾動時);
4.添加動作移動→選擇導航→移動:絕對位置→X坐標為0,Y坐標插入變量或函數(Window.scrollY)
二.注冊模塊(手機注冊、郵箱注冊互切換)
1.拖動元件,先布局好手機注冊內容表,所需的內容,包括(手機輸入框,點擊獲取驗證按鈕,2次輸入密碼框,注冊按鈕);
2.手機注冊內容表,右鍵設置“轉換為動態面板”;
3.手機注冊內容表,右鍵設置“管理面板狀態”,動態面板名稱設置為“add”,下面的面板狀態修改State1的名稱為“iphoneadd”,并添加一個狀態,命名為“emailadd”;
4.點擊“emailadd”,進入動態頁,為郵箱注冊內容表添加元件,所需的內容(電子郵箱輸入框,2次輸入密碼框,注冊按鈕,邊框)注意:邊框需要去除頂部框線;
5.設置手機注冊、郵箱注冊互切換,對手機注冊框,設置鼠標點擊交互→添加動作“設置面板狀態”→選擇狀態“iphoneadd”;
6.設置手機注冊、郵箱注冊互切換,對郵箱注冊框,設置鼠標點擊交互→添加動作“設置面板狀態”→選擇狀態“emailadd”;
三.簡單滾動條設計
1.拖動2個元件,矩形和動態面板,準備一個滾動條素材,我這里用的是藍色條狀素材;
2.設置矩形長為500,寬為20,(這個看自己愛好),把矩形設置為圓角,個人覺得這樣好看些;
3.把動態面板也設置為長為500,寬為20,導入條狀素材,覆蓋到圓角矩形上;
4.設置動態面板交互屬性,載入時→添加動作設置尺寸→當前元件→寬1高20;
5.再添加一次設置尺寸動作→當前元件→寬500高20,→動作為線性,時間為5000毫秒(即5秒)
本文由 @jukilee 原創發布于人人都是產品經理。未經許可,禁止轉載。
已收下 ?
根本就不適合我這種小白學習 ??
浪費項目時間,無用功,除了有專門交互師
動態面板使用,在通過用例實現交互,我也是學到了這點,五年互聯網營銷經驗喲
用你另一篇的方式,把導航固定到瀏覽器不是一樣效果?