起點課堂會員權益
職業體系課特權
線下行業大會特權
個人IP打造特權
30+門專項技能課
1300+專題課程
12場職場軟技能直播
12場求職輔導直播
12場專業技能直播
會員專屬社群
榮耀標識Axure教程：原型設計之水泡導航欄
水泡導航欄目前在不少網頁中存在著，其效果較為生動有趣，可以給用戶很好的體驗。本文就此分享下如何利用Axure制作這種導航欄。
題目中之所以叫做水泡導航欄，是因為這種導航欄的聚焦方式好像一個水泡移動到相對應的位置。這種導航欄還是在不少網頁中存在著，因為比較生動，比較有趣，因此也比較容易讓用戶產生好感。這里就教大家如何使用axure原型工具制作這種導航欄。
第一步：拖拉擺放好相應的控件
- 一個627X57的長矩形拖拉放在適當位置；
- 五個125X55的籃框藍底白字矩形橫排在長矩形上面，文字分別為：“首頁”，“項目介紹”，“企業動態”，“公司文化”和“人才招聘”；
- 一個125X55的沒文字文本標簽矩形，命名為“透明層”；
- 一個109X42的白色圓角矩形，50%的半透明，命名為“半透明層”；
- 然后將“透明層”和“半透明層”組合，命名為“水泡”，并將其放在“首頁”的上面。
第二步：為那五個帶文字的矩形添加鼠標移入時用例
首先，可以先為“首頁”添加鼠標移入時用例，用例中只需添加一個動作：移動水泡至當前元件的x軸位置和y軸位置，移動方式為絕對移動，動畫為線性，時間為500毫秒。
然后，可以將“首頁”的交互用例復制粘貼到“項目介紹”，“企業動態”，“公司文化”和“人才招聘”中。
制作至此就結束了，點擊預覽，鼠標在導航欄上移動就可以看到效果了。
作者：維度，個人博客：http://weidublog.com
本文由 @維度 原創發布于人人都是產品經理。未經許可，禁止轉載。
一個專注產品設計，技術研發，推廣運營的博客
評論
謝謝樓主大大分享
但是我有個問題：為什么要將透明層和半透明層變成一個組合才能實現案例里的水泡效果呢？我試了下沒有用組合，直接用了一個半透明矩形框，但是預覽發現水泡的位置其實是在5個菜單左上角的，請問這是什么原因呢？看到求解答 ??
半透明層的大小和菜單的大小不一樣，之所以加個透明層就是為了大小一樣，移動起來不走位
了解啦！謝謝樓主大大 ?
棒棒的
感謝分享