PRODUCT互聯(lián)網(wǎng)產(chǎn)品交互設(shè)計與開發(fā)主講人：馬勝銘時間：2026年6-2原型交互設(shè)計進(jìn)階01交互核心構(gòu)成頁面觸發(fā)事件·元件觸發(fā)事件·交互動作配置02交互邏輯與變量應(yīng)用邏輯條件設(shè)置·全局變量·局部變量實戰(zhàn)03高級元件應(yīng)用動態(tài)面板狀態(tài)管理·中繼器數(shù)據(jù)交互與應(yīng)用01交互核心構(gòu)成原型交互設(shè)計進(jìn)階本章將深入解析Axure交互設(shè)計的核心層級架構(gòu)，重點講解頁面觸發(fā)事件的原理與基礎(chǔ)操作，幫助學(xué)習(xí)者建立清晰的交互邏輯思維，為構(gòu)建高保真原型奠定堅實基礎(chǔ)。交互層級事件觸發(fā)頁面觸發(fā)事件交互核心構(gòu)成鼠標(biāo)類事件單擊時(OnClick)雙擊時(OnDoubleClick)右擊時

(OnContextMenu)鼠標(biāo)移動時

(OnMouseMove)鍵盤類事件按鍵按下時OnKeyDown按鍵松開時OnKeyUp主要用于捕獲用戶鍵盤輸入操作，常用于快捷鍵或表單輸入驗證。頁面類事件窗口尺寸改變時頁面載入時窗口滾動時視圖狀態(tài)改變時元件觸發(fā)事件交互核心構(gòu)成交互面板切換在工作區(qū)選中任意元件，右側(cè)交互窗格將自動聚焦，即時顯示當(dāng)前元件可用的所有觸發(fā)事件列表，便于快速配置。事件類型分類系統(tǒng)內(nèi)置事件主要劃分為三大類：鼠標(biāo)交互（如單擊、懸停）、鍵盤輸入（按鍵響應(yīng)）及形狀變化（尺寸或位置改變）。高級元件專屬動態(tài)面板（狀態(tài)改變時）、中繼器（每項加載時）及文本框（文本改變時）等高級元件，擁有滿足復(fù)雜邏輯的高頻專屬事件。元件命名小貼士交互核心構(gòu)成規(guī)范命名習(xí)慣建議給元件命名為英文或拼音。避免使用默認(rèn)名稱（如“矩形1”），保持命名清晰可讀。提升檢索效率規(guī)范的命名便于在添加交互事件時，通過搜索框快速查找對應(yīng)元件，極大提升原型開發(fā)效率。動作交互核心構(gòu)成交互響應(yīng)動作是對交互事件的響應(yīng)。只有添加了動作，交互事件才有實際意義。鏈接動作用于頁面跳轉(zhuǎn)或窗口操作，如打開鏈

接、關(guān)閉窗口、在框架中打開鏈接等。元件動作針對元件屬性的控制，如顯示/隱藏、設(shè)置文本、移動、旋轉(zhuǎn)、設(shè)置尺寸等。中繼器動作專門用于操作中繼器數(shù)據(jù)，包含添加

行、刪除行、更新行、添加排序、移除篩選等。其他動作輔助交互邏輯的動作，如等待、設(shè)置變量值、觸發(fā)事件、其他等高級控制功

能。交互動作與實操案例交互核心構(gòu)成配置流程詳解實操案例：導(dǎo)航菜單聯(lián)動點擊一級菜單切換二級菜單顯示1

添加交互事件選中目標(biāo)元件（如一級菜單），在交互窗格點擊“新建交互”，選擇如“鼠標(biāo)單擊時”等觸發(fā)條件。2

組織執(zhí)行動作在動作列表中選擇需要響應(yīng)的命令，例如“元件動作”下的“顯示/隱藏”或“設(shè)置面板狀態(tài)”。3

設(shè)置目標(biāo)參數(shù)指定目標(biāo)對象（如二級菜單動態(tài)面板），配置動畫效果（如向下滑動）及持續(xù)時間，完成邏輯閉環(huán)。localhost:8080/index.html02交互邏輯與變量應(yīng)用原型交互設(shè)計進(jìn)階本章節(jié)將深入解析Axure交互邏輯條件的設(shè)置規(guī)則，重點探討全局變量與局部變量的定義與區(qū)別。通過實戰(zhàn)案例，掌握變量在數(shù)據(jù)傳遞與復(fù)雜邏輯判斷中的核心應(yīng)用技巧。邏輯條件全局變量局部變量交互邏輯條件設(shè)置交互邏輯與變量應(yīng)用進(jìn)入情形編輯器在交互設(shè)置中，通過雙擊已添加的用例，或在交互編輯器頂部點擊

“啟用情形”按鈕，即可打開邏輯條件設(shè)置面板，為交互添加判斷規(guī)則。條件匹配邏輯匹配所有(AND)：需滿足列表中所有條件才觸發(fā)動作；

匹配任何(OR)：只要滿足列表中任意一個條件即可觸發(fā)。條件設(shè)置三要素完整的邏輯判斷由三部分構(gòu)成：比較主體（如元件文字）、運算符（如等于、包含）以及比較對象（具體值或變量）。CaseEditor全局與局部變量應(yīng)用交互邏輯與變量應(yīng)用全局變量作用于整個項目范圍，主要用于在不同頁面之間進(jìn)行數(shù)據(jù)傳遞與狀態(tài)存儲。局部變量僅在單個交互動作內(nèi)部有效，常用于函數(shù)引用或臨時計算，不跨頁面。設(shè)置規(guī)則變量名需由字母或數(shù)字組成，長度小于25字符，且名稱中嚴(yán)禁包含空格。03高級元件應(yīng)用原型交互設(shè)計進(jìn)階本章節(jié)重點講解動態(tài)面板與中繼器兩種核心高級元件。深入解析多狀態(tài)容器的交互邏輯與動態(tài)數(shù)據(jù)管理的實現(xiàn)方法，助力原型設(shè)計從靜態(tài)展示向高保真動態(tài)交互進(jìn)階。動態(tài)面板中繼器動態(tài)面板的創(chuàng)建高級元件應(yīng)用方式一：直接拖曳法直接從左側(cè)元件庫面板中找到“動態(tài)面板”元件，將其拖曳至工作區(qū)域即可完成創(chuàng)建。方式二：右鍵轉(zhuǎn)換法選中工作區(qū)中的普通元件，點擊鼠標(biāo)右鍵，在彈出的菜單中選擇“轉(zhuǎn)換為動態(tài)面板”。動態(tài)面板的應(yīng)用高級元件應(yīng)用編輯模式啟動雙擊工作區(qū)中的動態(tài)面板元件，即可進(jìn)入專屬編輯區(qū)域。此時界面會顯示藍(lán)色虛線邊框，用于區(qū)分當(dāng)前處于面板內(nèi)部狀態(tài)，避免與正常頁面層級混淆。專屬屬性配置擁有普通元件不具備的高級屬性：自適應(yīng)內(nèi)容可隨內(nèi)容調(diào)整尺寸，滾動條控制內(nèi)容溢出顯示，固定到瀏覽器可實現(xiàn)懸浮窗效果。多狀態(tài)容器特性動態(tài)面板是一個多狀態(tài)容器，支持添加多個獨立狀態(tài)（State）。在原型運行時，任意時刻僅顯示一種狀態(tài)，是制作輪播圖、Tab切換等交互的核心組件。中繼器核心應(yīng)用高級元件應(yīng)用雙重核心架構(gòu)中繼器由數(shù)據(jù)集（存儲數(shù)據(jù)源）與中繼器項（展示模板）構(gòu)成，實現(xiàn)了數(shù)據(jù)存儲與界面顯示的邏輯分離。動態(tài)數(shù)據(jù)管理具備類數(shù)據(jù)庫特性，支持在原型交互中實現(xiàn)數(shù)據(jù)的增、刪、改、查及排序篩選，模擬真實后臺邏輯。典型應(yīng)用場景廣泛應(yīng)用于復(fù)雜的列表交互場景，如電商商品展示、學(xué)生信息管理表格及動態(tài)搜索結(jié)果頁面的高保真還原。Axure

RP-中繼器編輯視圖任務(wù)總結(jié)項目六互聯(lián)網(wǎng)產(chǎn)品交互設(shè)計與開發(fā)交互核心掌握Axure交互事件觸發(fā)