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

筆者學(xué)習(xí)Axure不足一個星期廊镜，貼出來供新手交流學(xué)習(xí)牙肝，期待老手批評指導(dǎo)，謝謝。

先來看一下效果圖：

接下來就簡單介紹下制作過程互躬。

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

1颂郎、元件準備：

①準備一張手機圖片如圖1吼渡，本人使用Iphone5S，調(diào)整至合適大信倚颉（375*800）寺酪；

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

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

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

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

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

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

2、動作設(shè)置：

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

②對頁面<錢包>的收付款元件配置動作：鼠標單擊時，創(chuàng)建鏈接至頁面<收付款>奸腺。

③對頁面<收付款>二維碼下的支付方式選擇區(qū)域配置動作：鼠標單擊時餐禁，顯示支付彈窗，并配置顯示動畫為向上滑動洋机，且勾選置于頂層（防止被其他顯示層級更高的元件覆蓋）坠宴，如圖4；鼠標單擊支付彈窗的關(guān)閉圖標绷旗，則隱藏支付彈窗喜鼓，并配置隱藏動畫為向下滑動，具體操作參考與圖4類似衔肢，在此不重復(fù)截圖庄岖。

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

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

二心剥、二維碼收款交互界面

1、元件準備

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

②面板設(shè)置三個狀態(tài)畦娄，分別命名為：“設(shè)置收款前”、”設(shè)置收款中”弊仪、“設(shè)置收款后”熙卡，在對應(yīng)的動態(tài)面板狀態(tài)中，對照微信界面励饵，利用元件庫或者截圖驳癌，繪制三個頁面的中低保真原型，如圖5役听、圖6所示颓鲜；

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

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

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

2灾杰、動作設(shè)置

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

知識點1：動態(tài)面板或者組件的顯示和隱藏

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

設(shè)置方法：將保存收款碼提示設(shè)置為隱藏呛梆，對“設(shè)置金額”按鈕配置動作如圖7锐涯。

請你想一想：當你在<設(shè)置收款前>頁面點擊返回時，如何顯示出< 收付款>頁面填物？

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

知識點2：動態(tài)面板狀態(tài)的切換

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

設(shè)置方法：當鼠標點擊設(shè)置金額時滞磺，動態(tài)面板“二維碼收款”選擇狀態(tài)為<設(shè)置收款中>,并可根據(jù)情況配置進出動畫效果升薯。

請你想一想：當頁面顯示為<設(shè)置收款中>時，你點擊取消击困，如何回到< 設(shè)置收款前>頁面涎劈？

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

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

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

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

在<設(shè)置收款中>頁面載入時扭吁，默認輸入框文本為空，且設(shè)置焦點在輸入框并且獲取焦點元件上的文本白筹，操作如圖9智末。

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

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

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

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

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

案例：在<設(shè)置收款中>頁面逆皮，當文本框為空時辽装，下一步按鈕默認淺綠色不可點擊，當文本框不為空時代兵，下一步按鈕變?yōu)樯罹G色可以做點擊尼酿。

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

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

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

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

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

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