題目中之所以叫做水泡導(dǎo)航欄虾标，是因為這種導(dǎo)航欄的聚焦方式好像一個水泡移動到相對應(yīng)的位置寓盗。這種導(dǎo)航欄還是在不少網(wǎng)頁中存在著，因為比較生動璧函，比較有趣傀蚌，因此也比較容易讓用戶產(chǎn)生好感。這里就教大家如何使用axure原型工具制作這種導(dǎo)航欄蘸吓。
第一步：拖拉擺放好相應(yīng)的控件
1善炫、一個627X57的長矩形拖拉放在適當位置；
2库继、五個125X55的籃框藍底白字矩形橫排在長矩形上面箩艺，文字分別為：“首頁”窜醉，“項目介紹”，“企業(yè)動態(tài)”艺谆，“公司文化”和“人才招聘”榨惰；
3、一個125X55的沒文字文本標簽矩形擂涛，命名為“透明層”读串；
4、一個109X42的白色圓角矩形撒妈，50%的半透明恢暖，命名為“半透明層”；
5狰右、然后將“透明層”和“半透明層”組合杰捂，命名為“水泡”，并將其放在“首頁”的上面棋蚌。
第二步：為那五個帶文字的矩形添加鼠標移入時用例
首先嫁佳，可以先為“首頁”添加鼠標移入時用例，用例中只需添加一個動作：移動水泡至當前元件的x軸位置和y軸位置谷暮，移動方式為絕對移動蒿往，動畫為線性，時間為500毫秒湿弦。
然后瓤漏，可以將“首頁”的交互用例復(fù)制粘貼到“項目介紹”，“企業(yè)動態(tài)”颊埃，“公司文化”和“人才招聘”中蔬充。
制作至此就結(jié)束了，點擊預(yù)覽班利，鼠標在導(dǎo)航欄上移動就可以看到效果了饥漫。同時也可以隨時關(guān)注我的個人博客：http://weidublog.com，因為工作過程中有很多這些axure原型設(shè)計小技巧的例子罗标，所以我會堅持分享下去庸队，希望對大家有幫助，你們對我的關(guān)注就是我的動力馒稍。
作者：維度
轉(zhuǎn)載請注明出處：http://weidublog.com/index.php/2017/03/18/140/
