Axure 教程 | 原型中添加頁(yè)面鏈接
本教程學(xué)習(xí)添加頁(yè)面鏈接,在瀏覽器中打開新標(biāo)簽頁(yè),使用Onclick事件鏈接上一個(gè)頁(yè)面的同時(shí),關(guān)閉當(dāng)前瀏覽器頁(yè)面。
部件使用:矩形、按鈕形狀
交互事件:Onclick
動(dòng)作:“在當(dāng)前窗口中打開鏈接”、“關(guān)閉當(dāng)前窗口”、“在新窗口/標(biāo)簽中打開鏈接”
頁(yè)面鏈接
步驟1:添加Onclick事件用例
首先,打開PageLinks.rp文檔,"Page Links"頁(yè)面
然后,選擇 "Current Window" 按鈕
在部件屬性窗口中的交互標(biāo)簽,雙擊Onclick事件打開用例編輯器
步驟2:“在當(dāng)前窗口中打開鏈接”
在用例編輯器中,添加左邊欄的“在當(dāng)前窗口中打開鏈接”動(dòng)作,在中間欄會(huì)在用例1中添加一個(gè)動(dòng)作。
然后,在右邊欄中選擇頁(yè)面1,配置鏈接打開頁(yè)面。
點(diǎn)擊“確定”添加用例并關(guān)閉對(duì)話框。
步驟3:為“Go Back”按鈕添加鏈接
現(xiàn)在,在Page1,為“Go Back”添加“返回前一頁(yè)”的交互。站點(diǎn)地圖窗口中打開“Page1”頁(yè)面。
選中“Go Back”按鈕,在Oclick事件中添加用例。
步驟4:“返回上一頁(yè)”
和步驟2一樣,添加"在當(dāng)前窗口中打開鏈接”動(dòng)作。但是在右邊配置鏈接頁(yè)面時(shí),要設(shè)置“返回上一頁(yè)”選項(xiàng)。
步驟5:“關(guān)閉當(dāng)前窗口”
選擇“Close”按鈕,在Onclick按鈕添加用例,用例選擇“關(guān)閉當(dāng)前窗口”動(dòng)作。點(diǎn)擊確定。
步驟6:“在新窗口/標(biāo)簽中打開鏈接”
打開“Page links”頁(yè)面,選擇“New tab”按鈕。在Onclick事件中添加用例,用例動(dòng)作設(shè)置“在新窗口/標(biāo)簽中打開鏈接”并配置打開頁(yè)面1,點(diǎn)擊“確定”。
步驟7:生成原型
測(cè)試一下不同的交互效果。在主菜單欄選擇“生成->原型”,點(diǎn)擊“生成”,生成原型并在瀏覽器中打開原型。
在 "Page Links"頁(yè)面,點(diǎn)擊“Current Window”按鈕打開Page1。
在Page1,點(diǎn)擊“Go Back”按鈕,鏈接返回"Page Links"頁(yè)。
然后,點(diǎn)擊 "New Tab"按鈕,在新的標(biāo)簽頁(yè)中打開Page1。
在新標(biāo)簽頁(yè)中,點(diǎn)擊“Close”按鈕,關(guān)閉當(dāng)前標(biāo)簽頁(yè)。
- End -