水泡導(dǎo)航欄目前在不少網(wǎng)頁中存在著，其效果較為生動(dòng)有趣，可以給用戶很好的體驗(yàn)。本文就此分享下如何利用Axure制作這種導(dǎo)航欄。

題目中之所以叫做水泡導(dǎo)航欄，是因?yàn)檫@種導(dǎo)航欄的聚焦方式好像一個(gè)水泡移動(dòng)到相對(duì)應(yīng)的位置。這種導(dǎo)航欄還是在不少網(wǎng)頁中存在著，因?yàn)楸容^生動(dòng)，比較有趣，因此也比較容易讓用戶產(chǎn)生好感。這里就教大家如何使用axure原型工具制作這種導(dǎo)航欄。

第一步：拖拉擺放好相應(yīng)的控件

1. 一個(gè)627X57的長(zhǎng)矩形拖拉放在適當(dāng)位置；
2. 五個(gè)125X55的籃框藍(lán)底白字矩形橫排在長(zhǎng)矩形上面，文字分別為：“首頁”，“項(xiàng)目介紹”，“企業(yè)動(dòng)態(tài)”，“公司文化”和“人才招聘”；
3. 一個(gè)125X55的沒文字文本標(biāo)簽矩形，命名為“透明層”；
4. 一個(gè)109X42的白色圓角矩形，50%的半透明，命名為“半透明層”；
5. 然后將“透明層”和“半透明層”組合，命名為“水泡”，并將其放在“首頁”的上面。

第二步：為那五個(gè)帶文字的矩形添加鼠標(biāo)移入時(shí)用例

首先，可以先為“首頁”添加鼠標(biāo)移入時(shí)用例，用例中只需添加一個(gè)動(dòng)作：移動(dòng)水泡至當(dāng)前元件的x軸位置和y軸位置，移動(dòng)方式為絕對(duì)移動(dòng)，動(dòng)畫為線性，時(shí)間為500毫秒。

然后，可以將“首頁”的交互用例復(fù)制粘貼到“項(xiàng)目介紹”，“企業(yè)動(dòng)態(tài)”，“公司文化”和“人才招聘”中。

制作至此就結(jié)束了，點(diǎn)擊預(yù)覽，鼠標(biāo)在導(dǎo)航欄上移動(dòng)就可以看到效果了。

效果圖：http://ovnyu4.axshare.com

作者：維度，個(gè)人博客：http://weidublog.com

本文由 @維度 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理。未經(jīng)許可，禁止轉(zhuǎn)載。