動(dòng)態(tài)面板是Axure的一個(gè)重要功能模塊，本文筆者結(jié)合微信二維碼收付款的交互流程，簡(jiǎn)單介紹下動(dòng)態(tài)面板及動(dòng)態(tài)賦值的應(yīng)用。

筆者學(xué)習(xí)Axure不足一個(gè)星期，貼出來(lái)供新手交流學(xué)習(xí)，期待老手批評(píng)指導(dǎo)，謝謝。

先來(lái)看一下效果圖：

接下來(lái)就簡(jiǎn)單介紹下制作過(guò)程。

一、錢包界面&收付款界面

1、元件準(zhǔn)備：

①準(zhǔn)備一張手機(jī)圖片如圖1，本人使用Iphone5S，調(diào)整至合適大?。?75*800）；

②從元件庫(kù)中拖入一個(gè)內(nèi)聯(lián)框架放入屏幕顯示區(qū)域，內(nèi)聯(lián)框架尺寸和顯示區(qū)域一致（325*580）；

③參考微信<我-錢包>、<我-錢包-收付款>界面，利用元件庫(kù)或者截圖，制做<錢包><收付款>這兩個(gè)頁(yè)面的中高保真原型圖，如圖2，注意頁(yè)面要與內(nèi)聯(lián)框架的大小一致；

④做好支付選擇彈窗，如圖3所示，組合彈窗元件，并命名為支付方式彈窗將該彈窗底部在收付款界面的底部對(duì)齊，并設(shè)置該彈窗默認(rèn)為隱藏

? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? 圖1

? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?圖2

? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? 圖3

2、動(dòng)作設(shè)置：

①雙擊內(nèi)聯(lián)框架，將其鏈接到頁(yè)面< 錢包>；

②對(duì)頁(yè)面<錢包>的收付款元件配置動(dòng)作：鼠標(biāo)單擊時(shí)，創(chuàng)建鏈接至頁(yè)面<收付款>。

③對(duì)頁(yè)面<收付款>二維碼下的支付方式選擇區(qū)域配置動(dòng)作：鼠標(biāo)單擊時(shí)，顯示支付彈窗，并配置顯示動(dòng)畫為向上滑動(dòng)，且勾選置于頂層（防止被其他顯示層級(jí)更高的元件覆蓋），如圖4；鼠標(biāo)單擊支付彈窗的關(guān)閉圖標(biāo)，則隱藏支付彈窗，并配置隱藏動(dòng)畫為向下滑動(dòng)，具體操作參考與圖4類似，在此不重復(fù)截圖。

因本文主要介紹收付款功能，因此，頁(yè)面<錢包>的其他服務(wù)不在本文描寫范圍內(nèi)。

? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?圖4

二、二維碼收款交互界面

1、元件準(zhǔn)備

①不用另起一頁(yè)，直接在頁(yè)面<收付款>界面旁邊合適位置新增動(dòng)態(tài)面板，面板名稱命名為”二維碼收款“，面板尺寸與內(nèi)聯(lián)框架相同（325*580）；

②面板設(shè)置三個(gè)狀態(tài)，分別命名為：“設(shè)置收款前”、”設(shè)置收款中”、“設(shè)置收款后”，在對(duì)應(yīng)的動(dòng)態(tài)面板狀態(tài)中，對(duì)照微信界面，利用元件庫(kù)或者截圖，繪制三個(gè)頁(yè)面的中低保真原型，如圖5、圖6所示；

③將動(dòng)態(tài)面板”二維碼收款”默認(rèn)為隱藏，放置位置與<收付款>界面重合。

? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? 圖5

? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?圖6

2、動(dòng)作設(shè)置

本部分主要講述在微信收付款流程中，動(dòng)態(tài)面板的顯示和隱藏、面板狀態(tài)切換、文本框的動(dòng)態(tài)賦值、if函數(shù)的簡(jiǎn)單應(yīng)用。

知識(shí)點(diǎn)1：動(dòng)態(tài)面板或者組件的顯示和隱藏

案例：在< 設(shè)置收款前>頁(yè)面，點(diǎn)擊保存收款碼，則彈出保存“已保存到系統(tǒng)相冊(cè)”提示，500ms后消失。

設(shè)置方法：將保存收款碼提示設(shè)置為隱藏，對(duì)“設(shè)置金額”按鈕配置動(dòng)作如圖7。

請(qǐng)你想一想：當(dāng)你在<設(shè)置收款前>頁(yè)面點(diǎn)擊返回時(shí)，如何顯示出< 收付款>頁(yè)面？

? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? 圖7

知識(shí)點(diǎn)2：動(dòng)態(tài)面板狀態(tài)的切換

案例：在< 設(shè)置收款前>頁(yè)面，點(diǎn)擊設(shè)置金額，則頁(yè)面顯示為<設(shè)置金額中>

設(shè)置方法：當(dāng)鼠標(biāo)點(diǎn)擊設(shè)置金額時(shí)，動(dòng)態(tài)面板“二維碼收款”選擇狀態(tài)為<設(shè)置收款中>,并可根據(jù)情況配置進(jìn)出動(dòng)畫效果。

請(qǐng)你想一想：當(dāng)頁(yè)面顯示為<設(shè)置收款中>時(shí)，你點(diǎn)擊取消，如何回到< 設(shè)置收款前>頁(yè)面？

? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?圖8

知識(shí)點(diǎn)3：利用函數(shù)實(shí)現(xiàn)元件文本的動(dòng)態(tài)賦值

案例：在< 設(shè)置收款中>頁(yè)面的輸入框輸入金額，點(diǎn)擊下一步，則在<設(shè)置收款后>頁(yè)面的金額確認(rèn)顯示框中自動(dòng)顯示之前金額輸入框中的數(shù)字。

設(shè)置方法：首先我們需要獲取輸入框中的數(shù)字，然后，才是將輸入框中的動(dòng)態(tài)賦值給金額確認(rèn)顯示框。

在<設(shè)置收款中>頁(yè)面載入時(shí)，默認(rèn)輸入框文本為空，且設(shè)置焦點(diǎn)在輸入框并且獲取焦點(diǎn)元件上的文本，操作如圖9。

? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? 圖9

點(diǎn)擊下一步，則狀態(tài)面板切換為<設(shè)置收款后>,且同步將已獲取的文本動(dòng)態(tài)賦值給頁(yè)面金額確認(rèn)顯示框，操作如圖10、11。

? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?圖10

? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?圖11

知識(shí)點(diǎn)4：IF函數(shù)設(shè)置元件的不同狀態(tài)

案例：在<設(shè)置收款中>頁(yè)面，當(dāng)文本框?yàn)榭諘r(shí)，下一步按鈕默認(rèn)淺綠色不可點(diǎn)擊，當(dāng)文本框不為空時(shí)，下一步按鈕變?yōu)樯罹G色可以做點(diǎn)擊。

設(shè)置方法：利用IF函數(shù)判斷不同條件下，元件對(duì)應(yīng)的狀態(tài)。在寫IF函數(shù)之前，淺綠色填充的下一步按鈕，需在屬性-交互樣式設(shè)置選中時(shí)的狀態(tài)，即更改顏色填充為亮綠色，如圖12。

? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? 圖12

接下來(lái)對(duì)金額輸入框文本改變時(shí)，用IF函數(shù)設(shè)置條件，控制下一步按鈕的狀態(tài)，如圖13。

? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? 圖13

好了，以上就是微信收付款流程中的的主要交互，拋磚引玉，期待你有其他的實(shí)現(xiàn)方式。

原型鏈接：http://pan.baidu.com/s/1slFjspJ 密碼：vtuu