哈嘍，小U的學生們好，這麼多天都沒有更新過Axure的教程了，理由如果是”沉迷吃雞，無心做教程”未免也太勉強了，額……這個理由好像並不勉強啊，其實就是休息了一段時間。 好了，下面就來介紹一下Axure中用的比較多的”A技”，額……Axure的技巧
在瀏覽網頁的時候，我們會經常性的點擊或者鼠標懸停在”總有一款適合你”的頂部選項，這個就是頂部導航菜單。有的同學就直接從元件庫中拖拽一個”矩形”或者”文本標籤”直接使用，如下圖：
用矩形做菜單是錯誤的
其實這是不是個有效率的辦法，因為，做菜單導航的時候首先要整理出交互的邏輯，比如：鼠標的移入移出事件；鼠標懸停在選項時所對應的交互樣式。下面，就給大家演示下，怎麼用Axure的”水平菜單”做省去添加”鼠標移入移出”以及”顯示隱藏二級菜單”用例的原型。
正確的打開姿勢：將Axure打開後，從左側元件庫中拖入”水平菜單”到設計區。拖入後，給出默認的菜單名稱按照自己的需求進行更改（為了方便演示，我就先使用默認名稱）。
選擇”文件”菜單選項後鼠標右鍵，點擊”添加子菜單”，在默認生成的3個子菜單中根據自己需求適量增減，並鍵入所需的子菜單名稱。
選中母菜單後，點擊鼠標右鍵增加子菜單
並給子菜單命名
添加並重命名後，點擊”預覽”或者按鍵盤上的F5在瀏覽器中進行預覽。可以發現在鼠標移入時，”文件”母菜單顯示了其包含的子菜單選項但並沒有鼠標懸停在子菜單時的懸停效果樣式。
F5進行原型預覽
回到Axure界面中，選中其中的一個子菜單，鼠標右鍵選擇交互樣式後，在彈出的對話框中將默認的選項改為”選中的菜單項”，並勾選”字體顏色”、”填充顏色”，將字體顏色改為白色，填充色改為灰色。
鼠標右鍵選擇交互樣式，做交互樣式設計
最後，點擊確定並預覽，最終就是這樣的效果：
鼠標移入母菜單並懸停在第一個子菜單時
====================================
鼠標直接移出菜單時
原創文章，作者：投稿專員，如若轉載，請註明出處：https://www.506064.com/zh-hant/n/323627.html
微信掃一掃 
支付寶掃一掃 