本次教各位小夥伴製作摺疊菜單,這次的做法比較簡單,大家都可以輕鬆的學會。
下面開始製作原型 ~
一、準備元件
- 打開 Axure 新建文件,拉出一個矩形,w 為 200 px,h 為 40 px,色值為 #333333,在矩形內輸入“一級菜單”,然後命名為“一級菜單”;
- 拖進一個矩形,同樣 w 為 200 px ,h 為 40 px ,色值改為 #FFFFFF( 純白色 ),在矩形內輸入“選項一”;
- 把“選項一” 在複製兩個出來,分別叫“選項二 ”、“選項三” 。
完成了以上動作,就可以得到一下的展示,看圖:
好了,完成之後我們就來開始做第二步 ~
二、設置交互樣式
(1)全選“選項一、二、三 ”,右鍵點擊 交互樣式設置 ,選擇鼠標懸停 – 填充顏色 – 色值為 #F2F2F2 、然後再選 選中 – 填充顏色 – 色值 #E4E4E4 。
如圖:
(2)繼續選中“選項一、二、三 ”,右鍵點擊設置選項組名稱 ,命名為“選項”、選擇“選項一”右鍵點擊 選中( 默認選中 ),完成 。
完成了以上的設置,繼續下一步 ~
三、設置交互用例
(1)選擇“選項一 ”,設置鼠標點擊時 – 選中 – 選擇 This 為 ture ,點擊確定。( 選項二、三同上設置,複製粘貼過去即可 )。
完成以上設置,我們的選項就可以點擊切換了,看效果:
(2)把 “選項一、二、三 ” 選中,右鍵點擊 轉換為動態面板,命名為 “選項 ” ,點擊把該面板隱藏。
(3)設置“一級菜單 ” ,設置鼠標單擊時 – 設置面板狀態 – 可見性:切換 、 動畫:顯示時向下 / 隱藏時向上,動畫為:線性,250 毫秒 、 勾上置於頂層 、 勾上推動元件,方向為下方,動畫為:線性,250毫秒。
這樣就完成了,為了防止大家設置錯誤,下面放一張設置的圖:
再附一張效果圖:
完成以上的製作,我們會看到了這只是單個菜單而已,我們可以給它複製多個摺疊菜單在一起。
四、進階
(1)全選所有元件、動態面板 – 右鍵點擊組合,然後我們給它複製粘貼 n 個,按照以下方式排列:
(2)因前面用戶設置的時候,我們已經把 “推動元件 ” 設置好了 ,所以後面無需再設置。但前面所做的,我們把 “選項一 ” 設置為默認選中狀態,這裡我們又複製了兩個,所以我們需要把多複製出來的兩個 “選項一 ”去掉默認選中狀態 。
設置完,繼續看效果:
百度雲鏈接:https://pan.baidu.com/s/1Axn4oFEmWkhsNtdfPlKrlA 密碼:89j0
到這裡就完成所有制作了,如有相關問題請在下方留言,謝謝大家觀看。
注:以上部分內容是經過我們的 Phoenix 老師的指導完成的( 其實就是大半夜兩個夜貓子在群裡討論效果該如何實現比較好,哈哈哈 ),在這裡為 Phoenix 老師的敬業點個贊。
題圖來自Unsplash,基於CC0協議
閱讀更多 人人都是產品經理 的文章