如何用Axure制作頁(yè)面頂部吸附導(dǎo)航
1. 制作需要吸附式導(dǎo)航的頁(yè)面在開(kāi)始制作吸附式置頂導(dǎo)航之前,首先需要?jiǎng)?chuàng)建一個(gè)基礎(chǔ)頁(yè)面。這個(gè)頁(yè)面應(yīng)該有足夠的長(zhǎng)度才能展示吸附式導(dǎo)航效果。2. 制作吸附置頂?shù)膶?dǎo)航為了實(shí)現(xiàn)吸附式置頂導(dǎo)航效果,我們需要?jiǎng)?chuàng)建一
1. 制作需要吸附式導(dǎo)航的頁(yè)面
在開(kāi)始制作吸附式置頂導(dǎo)航之前,首先需要?jiǎng)?chuàng)建一個(gè)基礎(chǔ)頁(yè)面。這個(gè)頁(yè)面應(yīng)該有足夠的長(zhǎng)度才能展示吸附式導(dǎo)航效果。
2. 制作吸附置頂?shù)膶?dǎo)航
為了實(shí)現(xiàn)吸附式置頂導(dǎo)航效果,我們需要?jiǎng)?chuàng)建一個(gè)單獨(dú)的導(dǎo)航欄(可以復(fù)制頁(yè)面中的導(dǎo)航設(shè)計(jì))。將這個(gè)導(dǎo)航欄命名為"固定導(dǎo)航"。然后右鍵點(diǎn)擊固定導(dǎo)航,選擇轉(zhuǎn)化為動(dòng)態(tài)面板,并將其固定到瀏覽器的頂部左側(cè)位置。還需勾選"始終保持在頂層"的選項(xiàng),并隱藏該動(dòng)態(tài)面板。
3. 制作固定瞄點(diǎn)
創(chuàng)建一個(gè)名為"固定瞄點(diǎn)"的動(dòng)態(tài)面板,將其固定到瀏覽器的左上角。這個(gè)面板的大小可以根據(jù)需要自定義,通常選擇較小的尺寸不會(huì)影響頁(yè)面交互體驗(yàn),例如50x50。
4. 制作移動(dòng)瞄點(diǎn)
創(chuàng)建一個(gè)熱點(diǎn)并命名為"移動(dòng)瞄點(diǎn)",將其位置設(shè)置在你認(rèn)為導(dǎo)航欄應(yīng)該出現(xiàn)的位置上方。高度應(yīng)該覆蓋整個(gè)需要固定導(dǎo)航的頁(yè)面區(qū)域。
5. 設(shè)置交互條件
接下來(lái)我們需要設(shè)置交互邏輯,當(dāng)"移動(dòng)瞄點(diǎn)"接觸到"固定瞄點(diǎn)"時(shí),吸附式導(dǎo)航就會(huì)顯示,否則隱藏。
具體設(shè)置如下:
- 當(dāng)窗口滾動(dòng)時(shí),如果"移動(dòng)瞄點(diǎn)"的元件范圍接觸到"固定瞄點(diǎn)"的元件范圍,則顯示并置頂"固定導(dǎo)航"。
- 當(dāng)窗口滾動(dòng)時(shí),如果"移動(dòng)瞄點(diǎn)"的元件范圍未接觸到"固定瞄點(diǎn)"的元件范圍,則隱藏"固定導(dǎo)航"。
6. 預(yù)覽交互效果
完成以上設(shè)置后,可以進(jìn)行預(yù)覽以查看吸附式導(dǎo)航的效果是否成功實(shí)現(xiàn)。這種吸附式導(dǎo)航不僅能提供更好的用戶(hù)體驗(yàn),還可以增加頁(yè)面的可用性和導(dǎo)航的易用性。
通過(guò)學(xué)習(xí)如何用Axure制作頁(yè)面頂部吸附導(dǎo)航,你可以進(jìn)一步擴(kuò)展這個(gè)基本操作,并在其他應(yīng)用中靈活運(yùn)用,例如實(shí)現(xiàn)頁(yè)面分屏展示不同的吸附式導(dǎo)航或通過(guò)吸附式導(dǎo)航顯示詳細(xì)頁(yè)的標(biāo)題等。這些技巧將為你的網(wǎng)站或應(yīng)用程序增添更多互動(dòng)性和吸引力。