產(chǎn)品經(jīng)理導(dǎo)航是《人人都是產(chǎn)品經(jīng)理》的特色垂直類網(wǎng)址導(dǎo)航，里面有豐富的和產(chǎn)品經(jīng)理相關(guān)的站點(diǎn)，導(dǎo)航簡潔大方，分類清晰，是個(gè)非常好的聚合站點(diǎn)。

點(diǎn)擊這里查看在線演示。(內(nèi)附源文件下載）

簡單分析了下這個(gè)導(dǎo)航網(wǎng)站，它的特點(diǎn)比較適合于axure用來做示例教程，可以從中學(xué)習(xí)一些axure的使用技巧，我們看一下如幾個(gè)交互說明：

1、頂部菜單：導(dǎo)航欄頁面頂部是網(wǎng)站LOGO和網(wǎng)站名稱，中間部分則是《人人都是產(chǎn)品經(jīng)理》網(wǎng)站的相關(guān)欄目。

2、二級(jí)菜單：二級(jí)菜單才是導(dǎo)航網(wǎng)站的主要內(nèi)容，根據(jù)當(dāng)前頁面的位置，二級(jí)菜單會(huì)自動(dòng)定位到對應(yīng)的導(dǎo)航分類名稱上，單擊分類名稱，自動(dòng)滾動(dòng)定位到對應(yīng)導(dǎo)航位置。該二級(jí)菜單一直固定在頂部。

3、分類網(wǎng)站：鼠標(biāo)經(jīng)過分類網(wǎng)站時(shí)，當(dāng)前行高這顯示（灰色背景）
4、回到頂部：當(dāng)前窗口向下滾動(dòng)一定位置時(shí)，右下角自動(dòng)出現(xiàn)回到頂部箭頭，單擊后定位到頁面頂部
5、行業(yè)名人：頁面最下方是行業(yè)名人頭像，鼠標(biāo)經(jīng)過時(shí)顯示當(dāng)前行業(yè)名人的名稱，單擊后轉(zhuǎn)到他的微博上

在頁面交互上基本上體現(xiàn)在以上幾點(diǎn)，下面我們來實(shí)現(xiàn)該導(dǎo)航網(wǎng)站的高保真原型。

在交互上，我們稍微改進(jìn)了下，鼠標(biāo)經(jīng)過一級(jí)菜單、二級(jí)菜單和頁頭廣告上做了些變化。

一級(jí)導(dǎo)航

添加五個(gè)矩形框，設(shè)置好背景色和交互樣式，未添加交互事件

在設(shè)置顏色時(shí)需要用到axure的工具——取色器，這樣我們能保證取到的顏色和原網(wǎng)站保持一致，如下操作：

1. 從原網(wǎng)站截圖，然后粘貼到設(shè)計(jì)窗口
2. 以設(shè)置矩形框的背景色為例，從工具欄選擇背景設(shè)置，從下拉框里選擇吸管工具
3. 移動(dòng)吸管工具到你要取色的位置，例如上面從原網(wǎng)站的截圖，單擊后即可。

二級(jí)導(dǎo)航

添加七個(gè)矩形框，設(shè)置交互樣式中的選中狀態(tài)，再設(shè)置轉(zhuǎn)角半徑為41，使邊緣看起來更圓，添加事件，單擊后定位到對應(yīng)位置 ，這里會(huì)有一點(diǎn)小BUG，就是單擊后定位有點(diǎn)不準(zhǔn)確，因?yàn)樵跐L動(dòng)窗口時(shí)自動(dòng)定位時(shí)的設(shè)置問題，不過調(diào)整一下就差不多了，可以試著改一改哦。

注意：二級(jí)導(dǎo)航做好后，復(fù)制一個(gè)并固定在瀏覽器的頂部，開始的時(shí)候隱藏起來，在滾動(dòng)窗口到一定位置時(shí)，顯示此隱藏的導(dǎo)航，這樣這個(gè)導(dǎo)航就會(huì)一直固定在頁面上方。

廣告欄目

添加五個(gè)矩形框，并截圖5個(gè)廣告欄目的圖片，因?yàn)楸容^個(gè)性化，所以截圖會(huì)比較好點(diǎn)，在每個(gè)矩形框上面旋轉(zhuǎn)一個(gè)透明的矩形框，設(shè)置交互樣式為經(jīng)過時(shí)顯示半透明，模擬樣式的交互效果。

分類導(dǎo)航

分類導(dǎo)航就是內(nèi)容了，每一行單獨(dú)轉(zhuǎn)換成一個(gè)動(dòng)態(tài)面板，每個(gè)鏈接是一個(gè)矩形樣式，設(shè)置了選中樣式，在鼠標(biāo)經(jīng)過時(shí)，設(shè)置當(dāng)前行各個(gè)矩形框?yàn)檫x中狀態(tài)，鼠標(biāo)移出時(shí)取消選中狀態(tài)。

行業(yè)名人

這里就不再截圖了，直接使用占位符代表頭像，設(shè)置了鼠標(biāo)移入時(shí)的文本。

回到頂部

在滾動(dòng)窗口超過一定位置時(shí)，右下方會(huì)顯示回到頂部的向上箭頭，點(diǎn)擊后回到頁面頂部，這個(gè)使用了滾動(dòng)到部件的功能。

到這里就基本結(jié)束了哦，點(diǎn)擊下面的鏈接查看在線演示吧*_^

點(diǎn)擊這里查看在線演示。(內(nèi)附源文件下載）

本文由 @Axure原型設(shè)計(jì)工場 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理?，未經(jīng)許可，禁止轉(zhuǎn)載。