Axure RP設計伸縮導航、遮罩彈窗、返回頂部的方法
以下幾小教程使用的是Axure的動態面板來實現,內容簡單,適合菜鳥查閱,老鳥可飄過,順便幫忙點個贊哈/偷笑。
一.伸縮/隱藏導航欄
例如:鼠標移動到一級導航上,二級導航會下拉方式顯示
1.打開Axure,拖動一個矩形元件,設置寬830、高49;
2.輸入所需要的一級導航名稱,使用文本標簽元件,字體大小20;
3.對需要做二級導航的標簽處下方,設置5個左右的矩形框元件,矩形框內寫上二級導航名稱;
4.5個矩形框全選,右鍵設置“轉換為動態面板”,此時5個矩形已合為一個元件,并設置好該元件的Name:tab;
5.對需要下拉的標簽,設置交互方式【鼠標移動時→選擇顯示動作→選擇tab→更多選項(彈出效果)】
二.遮罩效果彈窗
例如:常見交互方式,點擊登錄或注冊,彈出登錄或注冊窗口,背景頁面顯灰色
1.布局好所需的元件,樣式可自定;
2.彈窗外框和內容,右鍵設置“轉換為動態面板”,并且樣式處設置為隱藏,設置一個Name:add;
3.注冊設置交互方式【鼠標點擊時→選擇顯示動作→選擇add→更多選項(燈箱效果)→背景色設置為灰色】
三.返回頂部設計
例如:鼠標點擊箭頭,網頁自動往上返回第一屏頁面
1.先搭建一個建議的頁面,頁面盡量往下延伸,方便測試,在頁面底端放一個矩形變形后的箭頭,并把箭頭右鍵設置“轉換為動態面板”。
2..箭頭右鍵設置為“固定到瀏覽器”,彈出設置界面,固定到瀏覽器窗口→水平固定為右→邊距設置為100→垂直固定底部→邊距10;
2.將頁面頂部元件設置一個Name,把它的Y坐標設置為“0”;
3.箭頭設置鼠標點擊交互,添加動作為滾動到元件<錨鏈接>,選擇頂部元件,僅垂直滾動,動畫為線性。
本文由 @jukilee 原創發布于人人都是產品經理。未經許可,禁止轉載。
評論
?
??
第一個彈出用 自帶元件庫“菜單表格”下的水平菜單就可以做,不用這么麻煩
是的,主要介紹動態面板的功能可以做些什么 ??