起點課堂會員權(quán)益
職業(yè)體系課特權(quán)
線下行業(yè)大會特權(quán)
個人IP打造特權(quán)
30+門專項技能課
1300+專題課程
12場職場軟技能直播
12場求職輔導直播
12場專業(yè)技能直播
會員專屬社群
榮耀標識 Axure9 教程：利用全局變量實現(xiàn)跨頁面?zhèn)髦?/h2>
導語：在我們使用Axure進行原型設計的時候，在同一個頁面實現(xiàn)點擊不同的按鈕切換顯示不同的內(nèi)容，可以通過動態(tài)面板來實現(xiàn)；如果要實現(xiàn)在a頁面點擊不同的按鈕，在B頁面中顯示不同的內(nèi)容應該如何實現(xiàn)呢？本文將介紹如何通過全局變量保存值并進行跨頁面?zhèn)髦祦韺崿F(xiàn)這個效果。
一、交互效果說明
點擊「首頁」金剛區(qū)的按鈕，跳轉(zhuǎn)至「分類」頁面，選中對應的Tab選項，切換顯示對應的內(nèi)容。
效果預覽：
原型預覽地址：https://h1efwr.axshare.com
二、交互效果制作
1. 創(chuàng)建兩個頁面，分別命名為「首頁」和「分類」。
2. 在「首頁」中拖入一個圓形和一個文本標簽，設置好顏色和文本，右鍵設置為組合，命名為【人文- Botton】，再復制出4個完全相同的組合，分別進行命名和設置，頁面其他內(nèi)容可自定義。
3. 在「分類」頁面中拖入一個矩形,設置文本內(nèi)容為“人文”，將其命名為「人文-Tab」；在右側(cè)【交互】面板中給其添加【元件選中的樣式】，效果如下圖所示，設置選項組名稱為「Tab組」。
4. 給文本標簽「人文-Tab」添加【鼠標單擊時】【選中當前元件】的交互。
5. 設置完成后，再復制出四個相同文本標簽分別命名和設置文本內(nèi)容，這樣Tab就制作完成了。
6. 制作出「分類」頁面的內(nèi)容部分，內(nèi)容可自定義，制作好后選中內(nèi)容右鍵轉(zhuǎn)化為動態(tài)面板，再復制出4個狀態(tài)，分別進行命名。
7. 給「Tab組」的5個文本標簽分別添加【選中】時的交互，切換到【內(nèi)容】面板的對應狀態(tài)。
接下來我們需要通過設置全局變量來儲存我們的數(shù)據(jù)，在「首頁」中點擊按鈕給全局變量賦值，然后在「分類」頁面中載入時通過判斷全局變量的值，顯示不同的面板狀態(tài)。
8. 點擊頂部菜單【項目】-【全局變量設置】，添加一個全局變量，命名為「BottonVariable」，默認值為空。
9. 接下來分別給金剛區(qū)的5個按鈕組合添加【鼠標單擊時】的交互，分別【設置變量值】為「renwen」「lishi」「sheke」「yishu」「yinyue」；均設置【跳轉(zhuǎn)鏈接】至「分類」頁面。
這里需要保證在載入「分類」頁面前已經(jīng)賦值成功，所以設置變量值的交互要在跳轉(zhuǎn)鏈接之前。
10. 在「分類」中添加【頁面載入時】的交互，分別添加情形及對應的選中效果，如下：
- 【變量值】「BottonVariable」為【renwen】時，設置動作為【選中】矩形元件「人文—Tab」；
- 【變量值】「BottonVariable」為【lishi】時，設置動作為【選中】矩形元件「人文—Tab」；
- 【變量值】「BottonVariable」為【sheke】時，設置動作為【選中】矩形元件「社科—Tab」；
- 【變量值】「BottonVariable」為【yishu】時，設置動作為【選中】矩形元件「藝術(shù)—Tab」；
- 【變量值】「BottonVariable」為【yinyue】時，設置動作為【選中】矩形元件「音樂—Tab」。
做完這一步，就完成整個效果了，通過這個案例也可舉一反三，用于登錄、搜索等其他需要頁面中傳值的交互中。
本文由 @Daisy 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理，未經(jīng)作者許可，禁止轉(zhuǎn)載。
題圖來自 Unsplash，基于 CC0 協(xié)議
更多精彩內(nèi)容，請關注人人都是產(chǎn)品經(jīng)理微信公眾號或下載App
導語：在我們使用Axure進行原型設計的時候，在同一個頁面實現(xiàn)點擊不同的按鈕切換顯示不同的內(nèi)容，可以通過動態(tài)面板來實現(xiàn)；如果要實現(xiàn)在a頁面點擊不同的按鈕，在B頁面中顯示不同的內(nèi)容應該如何實現(xiàn)呢？本文將介紹如何通過全局變量保存值并進行跨頁面?zhèn)髦祦韺崿F(xiàn)這個效果。
一、交互效果說明
點擊「首頁」金剛區(qū)的按鈕，跳轉(zhuǎn)至「分類」頁面，選中對應的Tab選項，切換顯示對應的內(nèi)容。
效果預覽：
原型預覽地址：https://h1efwr.axshare.com
二、交互效果制作
1. 創(chuàng)建兩個頁面，分別命名為「首頁」和「分類」。
2. 在「首頁」中拖入一個圓形和一個文本標簽，設置好顏色和文本，右鍵設置為組合，命名為【人文- Botton】，再復制出4個完全相同的組合，分別進行命名和設置，頁面其他內(nèi)容可自定義。
3. 在「分類」頁面中拖入一個矩形,設置文本內(nèi)容為“人文”，將其命名為「人文-Tab」；在右側(cè)【交互】面板中給其添加【元件選中的樣式】，效果如下圖所示，設置選項組名稱為「Tab組」。
4. 給文本標簽「人文-Tab」添加【鼠標單擊時】【選中當前元件】的交互。
5. 設置完成后，再復制出四個相同文本標簽分別命名和設置文本內(nèi)容，這樣Tab就制作完成了。
6. 制作出「分類」頁面的內(nèi)容部分，內(nèi)容可自定義，制作好后選中內(nèi)容右鍵轉(zhuǎn)化為動態(tài)面板，再復制出4個狀態(tài)，分別進行命名。
7. 給「Tab組」的5個文本標簽分別添加【選中】時的交互，切換到【內(nèi)容】面板的對應狀態(tài)。
接下來我們需要通過設置全局變量來儲存我們的數(shù)據(jù)，在「首頁」中點擊按鈕給全局變量賦值，然后在「分類」頁面中載入時通過判斷全局變量的值，顯示不同的面板狀態(tài)。
8. 點擊頂部菜單【項目】-【全局變量設置】，添加一個全局變量，命名為「BottonVariable」，默認值為空。
9. 接下來分別給金剛區(qū)的5個按鈕組合添加【鼠標單擊時】的交互，分別【設置變量值】為「renwen」「lishi」「sheke」「yishu」「yinyue」；均設置【跳轉(zhuǎn)鏈接】至「分類」頁面。
這里需要保證在載入「分類」頁面前已經(jīng)賦值成功，所以設置變量值的交互要在跳轉(zhuǎn)鏈接之前。
10. 在「分類」中添加【頁面載入時】的交互，分別添加情形及對應的選中效果，如下：
- 【變量值】「BottonVariable」為【renwen】時，設置動作為【選中】矩形元件「人文—Tab」；
- 【變量值】「BottonVariable」為【lishi】時，設置動作為【選中】矩形元件「人文—Tab」；
- 【變量值】「BottonVariable」為【sheke】時，設置動作為【選中】矩形元件「社科—Tab」；
- 【變量值】「BottonVariable」為【yishu】時，設置動作為【選中】矩形元件「藝術(shù)—Tab」；
- 【變量值】「BottonVariable」為【yinyue】時，設置動作為【選中】矩形元件「音樂—Tab」。
做完這一步，就完成整個效果了，通過這個案例也可舉一反三，用于登錄、搜索等其他需要頁面中傳值的交互中。
本文由 @Daisy 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理，未經(jīng)作者許可，禁止轉(zhuǎn)載。
題圖來自 Unsplash，基于 CC0 協(xié)議
- 目前還沒評論，等你發(fā)揮！
