現(xiàn)在的網(wǎng)站很常見到一個(gè)頁(yè)面占滿一屏，鼠標(biāo)滾動(dòng)一下即是一屏，同時(shí)右下角也有一個(gè)側(cè)邊欄圓點(diǎn)導(dǎo)航，隨頁(yè)面滑動(dòng)，切換選中不同的圓點(diǎn)，點(diǎn)擊圓點(diǎn)也可跳轉(zhuǎn)到某個(gè)位置。
這給人非常大氣的感覺，我比較喜歡這種風(fēng)格，正好最近也在研究Axure，于是打算使用Axure來(lái)模擬這種效果。
先放個(gè)動(dòng)圖：
本文將分成兩個(gè)部分來(lái)講解：
1、頁(yè)面繪制
2、交互設(shè)置
一、頁(yè)面繪制
1. 畫出頁(yè)面板塊
首先，根據(jù)需要實(shí)現(xiàn)頁(yè)面跳轉(zhuǎn)的部分劃分好板塊。此例按照4個(gè)導(dǎo)航劃分為4個(gè)板塊，如下圖：
2. 制作側(cè)邊欄圓點(diǎn)導(dǎo)航
使用Axure基礎(chǔ)元件制作出4個(gè)實(shí)心圓點(diǎn)和1個(gè)箭頭圓點(diǎn)，前者對(duì)應(yīng)4個(gè)板塊，后者表示“回到頂部”。
形狀繪制比較簡(jiǎn)單，分別是由一個(gè)空心外圓加一個(gè)實(shí)心圓點(diǎn)/箭頭組合而成的形狀，具體過程就不在這里贅述啦~
我們還要設(shè)置下圓點(diǎn)被選中時(shí)的樣式。
先選中外圓，點(diǎn)擊“選中”交互樣式設(shè)置，設(shè)置“線段顏色”為橙色（#FF9900）；
再選中內(nèi)圓，點(diǎn)擊“選中”交互樣式設(shè)置，設(shè)置“填充顏色”為橙色（#FF9900）；
如果內(nèi)圓有設(shè)置邊框就將線段顏色也修改為同色值。
設(shè)置好外圓和內(nèi)圓的樣式后，再將這兩個(gè)元件進(jìn)行組合（快捷鍵ctrl+g），這樣就配置完成了一個(gè)圓點(diǎn)的交互樣式。其他3個(gè)圓點(diǎn)和箭頭，都可以通過復(fù)制這個(gè)圓點(diǎn)來(lái)快速制作。
為了方便管理，也為了后面的1個(gè)關(guān)鍵步驟（先埋個(gè)伏筆），此處我們也把這5個(gè)圓點(diǎn)轉(zhuǎn)換為“動(dòng)態(tài)面板”吧?。ù颂幨÷圆僮鬟^程10個(gè)字）
OK，側(cè)邊欄圓點(diǎn)導(dǎo)航就這樣搞定啦~~~
需要注意，還有一個(gè)關(guān)鍵點(diǎn)，會(huì)讓我們的設(shè)計(jì)過程事半功倍。
由于4個(gè)圓點(diǎn)對(duì)應(yīng)4個(gè)板塊，同一時(shí)間只會(huì)有一個(gè)板塊被選中，所以對(duì)應(yīng)同一時(shí)間也只有一個(gè)圓點(diǎn)會(huì)被選中。
一般情況下我們需要在某個(gè)圓點(diǎn)的“鼠標(biāo)單擊時(shí)”事件中，設(shè)置當(dāng)前元件被選中、設(shè)置其他3個(gè)元件取消選中；如此這般地需要重復(fù)4次操作，太繁瑣了！
其實(shí)有一種更簡(jiǎn)單的方式，就是“設(shè)置選項(xiàng)組”。選項(xiàng)組就類似于Radio控件，具有互斥性——同一時(shí)間只能選中一個(gè)。
選中4個(gè)圓點(diǎn)之后，點(diǎn)擊“屬性”面板下，找到Group下的“設(shè)置選項(xiàng)組名稱”，輸入后回車即可。
設(shè)置鼠標(biāo)單擊時(shí)事件：
點(diǎn)擊確認(rèn)，效果如下：
其他3個(gè)圓點(diǎn)和箭頭的“鼠標(biāo)單擊時(shí)”事件，可以通過復(fù)制這個(gè)圓點(diǎn)的Case1事件，再作粘貼即可。
3. 制作板塊跳轉(zhuǎn)
將各板塊都轉(zhuǎn)化為動(dòng)態(tài)面板，并分別命好名。其實(shí)不轉(zhuǎn)化為動(dòng)態(tài)面板也是可以的，但是做成動(dòng)態(tài)面板對(duì)于頁(yè)面元件比較多的時(shí)候會(huì)更好管理板塊，跳轉(zhuǎn)定位時(shí)也更方便一些。
選擇好板塊內(nèi)的所有元件，右鍵點(diǎn)擊“轉(zhuǎn)換為動(dòng)態(tài)面板”就可以了。
轉(zhuǎn)換前：
轉(zhuǎn)換后（已命好名，看起來(lái)是不是清爽多了）：
二、交互設(shè)置
好了，準(zhǔn)備工作到此就基本完成了。
下面我們開始重點(diǎn)部分的講解——交互設(shè)置。
我們需要實(shí)現(xiàn)的效果主要有兩點(diǎn)：
1）點(diǎn)擊側(cè)邊豎滑動(dòng)條的圓點(diǎn)時(shí)，能跳轉(zhuǎn)定位到對(duì)應(yīng)的板塊區(qū)域；點(diǎn)擊箭頭圓點(diǎn)時(shí)回到頂部；
2）滾動(dòng)屏幕時(shí)，瀏覽到某個(gè)板塊時(shí)，側(cè)邊欄圓點(diǎn)導(dǎo)航的圓點(diǎn)也會(huì)相應(yīng)被選中；
1. 側(cè)邊欄導(dǎo)航的點(diǎn)擊跳轉(zhuǎn)效果
我們先來(lái)實(shí)現(xiàn)第一個(gè)效果。
選中第一個(gè)圓點(diǎn)，雙擊Case1用例，如下圖添加動(dòng)作“滾動(dòng)到元件<錨連接>”，元件選擇1-panel（由于前面有命好名，在這里就很方便可以找到了）
同理，為其他3個(gè)圓點(diǎn)添加同樣動(dòng)作，元件分別設(shè)置為跳轉(zhuǎn)到對(duì)應(yīng)板塊的動(dòng)態(tài)面板。
到目前為止，我們可以按F5預(yù)覽一下效果了，點(diǎn)擊圓點(diǎn)是不是能夠跳轉(zhuǎn)到對(duì)應(yīng)的板塊了呢？恭喜恭喜…哈哈…
咦~好像不對(duì)，是不是跳轉(zhuǎn)了一下，發(fā)現(xiàn)側(cè)邊欄圓點(diǎn)導(dǎo)航不見了？
這是因?yàn)閭?cè)邊欄圓點(diǎn)導(dǎo)航是固定在頁(yè)面的，跳轉(zhuǎn)時(shí)頁(yè)面滾動(dòng)自然它就不見了。
這時(shí)我們需要實(shí)現(xiàn)在前面埋下伏筆的關(guān)鍵一步啦——我們?cè)谇懊嫣岬?，要將?cè)邊欄圓點(diǎn)導(dǎo)航轉(zhuǎn)換為動(dòng)態(tài)面板，因?yàn)橹挥袆?dòng)態(tài)面板會(huì)有一個(gè)犇的功能：“固定到瀏覽器”，可以實(shí)現(xiàn)浮動(dòng)的效果。
位置可以自由設(shè)定，這里我設(shè)置為固定在右下角。
到這里，已經(jīng)完成了第一個(gè)效果的制作：
2. 頁(yè)面滾動(dòng)效果制作
下面我們開始第二個(gè)效果：頁(yè)面滾動(dòng)到某一板塊時(shí)，對(duì)應(yīng)的圓點(diǎn)會(huì)被選中。
這里我們需要思考一下，圓點(diǎn)被選中是一個(gè)動(dòng)作，必須要由一個(gè)事件來(lái)觸發(fā)，那這個(gè)事件應(yīng)該是什么？應(yīng)該是頁(yè)面滾動(dòng)事件吧？嗯，對(duì)的。我們需要監(jiān)控到當(dāng)前是滾動(dòng)到哪個(gè)板塊，才能夠觸發(fā)事件。那么關(guān)鍵的問題來(lái)了，我們應(yīng)該怎樣監(jiān)控頁(yè)面的滾動(dòng)？
答案就是：建立熱區(qū)。
在頁(yè)面合適位置添加一個(gè)熱區(qū)元件，將作為事件觸發(fā)的一個(gè)條件。
有2點(diǎn)需要注意：
- 與豎滑動(dòng)條類似，熱區(qū)也是需要固定在瀏覽器的某個(gè)位置，不可以由于頁(yè)面滾動(dòng)而消失，因此也需要轉(zhuǎn)換為一個(gè)動(dòng)態(tài)面板。
- 熱區(qū)位置，與板塊區(qū)域的高度有關(guān)。如果放在瀏覽器頂部區(qū)域，而板塊高度不高無(wú)法接觸到熱區(qū)，則無(wú)法觸發(fā)事件。
我們先單擊頁(yè)面空白處，可以看到有“窗口滾動(dòng)時(shí)”的事件，
我們先添加一個(gè)用例。我們是要實(shí)現(xiàn)圓點(diǎn)被選中，所以添加一個(gè)動(dòng)作“設(shè)置選中”（強(qiáng)烈建議對(duì)圓點(diǎn)命名，便于查找）
這時(shí)就要使用到上面建立的熱區(qū)來(lái)監(jiān)控到達(dá)哪個(gè)板塊——只有當(dāng)板塊到達(dá)熱區(qū)區(qū)域時(shí)，才會(huì)觸發(fā)事件。在Axure中，是通過給事件用例添加觸發(fā)條件來(lái)實(shí)現(xiàn)的。
設(shè)置完選中狀態(tài)后，需要添加一個(gè)條件：
其他3個(gè)板塊也是同樣操作，添加1個(gè)新用例，添加條件，設(shè)置圓點(diǎn)的選中狀態(tài)。
Demo到此就制作完成啦！
最后……是不是有童鞋發(fā)現(xiàn)似乎漏了一個(gè)地方——“回到頂部”的功能沒有實(shí)現(xiàn)呢，哈哈，這是留給大家練練手的啦~
注：
第一次發(fā)文，如有地方寫得不明白，歡迎拍磚、共同探討
有需要源文件的童鞋，可以跟我私聯(lián) ：-）
