Axure怎么制作頁(yè)面滾動(dòng)時(shí)菜單固定在頂部的頁(yè)面?

Axure可以制作出保真度相當(dāng)高的原型,除了頁(yè)面布局、UI以外,其強(qiáng)大的交互設(shè)計(jì)能力讓這些本來(lái)靜止的元素高效交互起來(lái),形成以假亂真的高保真原型。本文介紹如何做一個(gè)在滾動(dòng)中將菜單固定在頂部的頁(yè)面,屬于中級(jí)Axure案例。本文旨在展示交互效果,不對(duì)頁(yè)面具體內(nèi)容和UI進(jìn)行設(shè)計(jì)。
1、制作頁(yè)面
為了體現(xiàn)效果,我們需要做一個(gè)比較長(zhǎng)(高)的頁(yè)面,在Axure工作區(qū)中拖入4個(gè)矩形,分別為頂部標(biāo)題、菜單、頁(yè)面內(nèi)容、底部。設(shè)置矩形寬度和高度,讓其看起來(lái)像是一個(gè)頁(yè)面布局。
2、制作隨頁(yè)面滾動(dòng)的標(biāo)題
為了讓效果更加明顯,我們將標(biāo)題進(jìn)行區(qū)別設(shè)置,設(shè)置矩形背景色為黃色,你也可以通過(guò)設(shè)置其他屬性來(lái)進(jìn)行區(qū)別。將標(biāo)題命名為“標(biāo)題1”。
3、制作固定的標(biāo)題
滾動(dòng)中固定在頂部的標(biāo)題并非頁(yè)面上的標(biāo)題,是單獨(dú)制作的。復(fù)制“標(biāo)題1”,將復(fù)制的標(biāo)題命名為“標(biāo)題2”,設(shè)置“標(biāo)題2”x坐標(biāo)等于“標(biāo)題1”的x坐標(biāo),y坐標(biāo)等于0。修改“標(biāo)題2”背景色為藍(lán)色。
4、制作固定的標(biāo)題
右鍵單擊“標(biāo)題2”,點(diǎn)擊“轉(zhuǎn)換為動(dòng)態(tài)面板”,將動(dòng)態(tài)面板命名為“固定菜單”,在元件屬性與樣式中點(diǎn)擊“固定到瀏覽器”勾選“固定到瀏覽器窗口”,完成后隱藏動(dòng)態(tài)面板。
5、制作固定錨點(diǎn)
在工作區(qū)中拖入一個(gè)動(dòng)態(tài)面板,設(shè)置其x和y坐標(biāo)等于0,調(diào)整其寬度和高度分別為60和20,將動(dòng)態(tài)面板命名為“固定錨點(diǎn)”,設(shè)置其固定到瀏覽器。
6、制作滾動(dòng)錨點(diǎn)
在工作區(qū)中拖入一個(gè)熱區(qū),設(shè)置其x坐標(biāo)等于0,y坐標(biāo)等于“菜單1”的y坐標(biāo)加上固定錨點(diǎn)的高度,設(shè)置其寬度等于固定錨點(diǎn)的寬度,高度直接拖動(dòng)到頁(yè)面底部,命名為“滾動(dòng)錨點(diǎn)”。
7、設(shè)置交互
打開(kāi)頁(yè)面交互面板,雙擊“窗口滾動(dòng)時(shí)”事件,添加條件“元件范圍 滾動(dòng)錨點(diǎn) 接觸到 元件范圍 固定錨點(diǎn)”,確定,設(shè)置動(dòng)作為“顯示 固定菜單”。
8、設(shè)置交互
繼續(xù)在“窗口滾動(dòng)時(shí)”事件上添加動(dòng)作,添加條件“元件范圍 滾動(dòng)錨點(diǎn) 未接觸 元件范圍 固定錨點(diǎn)”,確定,設(shè)置動(dòng)作為“隱藏 固定菜單”。
9、預(yù)覽效果
至此,所有設(shè)置均已完成,按F5進(jìn)行預(yù)覽吧。
相關(guān)文章
職場(chǎng)人慌了! DeepSeek配合Mermaid自動(dòng)繪圖的技巧
DeepSeek這玩意兒,配合Mermaid,自動(dòng)生成甘特圖,這速度,這效率,簡(jiǎn)直了神奇了,下面我們就來(lái)看看用法2025-03-05建議收藏! 15 個(gè)很強(qiáng)的 DeepSeek 提示詞
今天匯總15個(gè)很值得收藏的DeepSeek 提示詞,包含職場(chǎng)打工人必備,自媒體爆款創(chuàng)作,學(xué)生黨逆襲,個(gè)人成長(zhǎng)開(kāi)掛等等全方面2025-03-04如何在iPhone上部署DeepSeek-R1? DeepSeek-R1在手機(jī)上部署全攻略
你以為只在大機(jī)器上跑的模型,其實(shí)在手機(jī)上也能玩得轉(zhuǎn)!為了體驗(yàn)一下國(guó)產(chǎn)模型的魅力,我在蘋(píng)果手機(jī)上部署了DeepSeek-R1 1.5B版,詳細(xì)步驟如下2025-03-017天帶你從入門(mén)到精通! DeepSeek實(shí)操手冊(cè)建議收藏
我們之前分享了很多DeepSeek安裝及本地部署教程,今天我們來(lái)看看怎么馴化DeepSeek為自己服務(wù),下面我們就來(lái)看看DeepSeek 7天指導(dǎo)手冊(cè)2025-02-21手機(jī)端本地部署 Deepseek +桌面端 Deepseek 搭建知識(shí)庫(kù)指南
關(guān)于 Deepseek,這段時(shí)間也傳來(lái)不少新聞,本文將介紹如何在安卓手機(jī)和桌面設(shè)備上分別部署本地運(yùn)行的 Deepseek R1 模型,并搭建知識(shí)庫(kù),詳細(xì)如下文2025-02-21DeepSeek-R1 與 AnythingLLM 安裝部署本地知識(shí)庫(kù)詳細(xì)教程
DeepSeek R1是目前最火的大模型,近來(lái)有很多朋友問(wèn)怎么搭建DeepSeek 本地知識(shí)庫(kù),在這里分享一種使用DeepSeek + AnythingLLM快速搭建本地知識(shí)庫(kù)的方法,完全本地化,懶人必2025-02-20DeepSeek怎么獲取官方API? 一文教會(huì)你獲取DeepSeek官方API技巧
想要體驗(yàn)DeepSeek,該怎么貨期官方API呢?下面我們就來(lái)看看獲取DeepSeek官方API的詳細(xì)圖文教程2025-02-12DeepSeek怎么一秒生成工作表目錄? DeepSeek辦公自動(dòng)化的技巧
面對(duì)日益增長(zhǎng)的數(shù)據(jù)量和復(fù)雜多變的業(yè)務(wù)需求,傳統(tǒng)的Excel操作方式在效率和靈活性上逐漸顯露出不足,如果接入DeepSeek就可以補(bǔ)足缺陷,詳細(xì)請(qǐng)看下文介紹2025-02-12DeepSeek入門(mén)必備技巧與隱藏功能! DeepSeek新手使用指南
幾乎一夜之間,所有人都在關(guān)注DeepSeek,今天就來(lái)聊一聊DeepSeek,從什么是DeepSeek開(kāi)始,到火爆原因,怎么下載使用,以及使用場(chǎng)合和隱藏功能分享,詳細(xì)如下2025-02-12DeepSeek卡頓延遲問(wèn)題怎么解決? 流暢使用DeepSeek的方法大全
由于deepseek人氣越來(lái)越高,讓越來(lái)越多人開(kāi)始使用deepseek,另一方面由于前陣子登錄熱搜的外網(wǎng)網(wǎng)絡(luò)攻擊,導(dǎo)致用戶在使用時(shí)常常還沒(méi)說(shuō)幾句話,就出現(xiàn)服務(wù)器繁忙字樣,或使用2025-02-12