中文字幕无码av不卡一区,亚洲综合AV永久无码精品一区二区,黑人巨大白妞出浆,黄色高清无码免费看,久久久久免费精品国产,久久无码人妻丰满熟妇区毛片,欧美日韩国产综合草草,久久福利网站,亚洲一区二区三区中文字幕在线,av国内精品久久久久影院

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

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

先來看一下原型效果預(yù)覽圖：

接下來我們一起看看這個效果的制作過程。

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

1、元件準(zhǔn)備

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

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

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

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

?圖1

圖2

圖3

2、動作設(shè)置

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

（2）對頁面<錢包>的收付款元件配置動作：鼠標(biāo)單擊時，創(chuàng)建鏈接至頁面<收付款>。

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

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

圖4

二、二維碼收款交互界面

1、元件準(zhǔn)備

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

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

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

圖5

圖6

2、動作設(shè)置

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

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

效果說明：在< 設(shè)置收款前>頁面，點擊保存收款碼，則彈出保存“已保存到系統(tǒng)相冊”提示，800ms后消失。

設(shè)置方法：將保存收款碼提示設(shè)置為隱藏，對“設(shè)置金額”按鈕鼠標(biāo)點擊時，配置動作如圖7。

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

圖7

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

效果說明：在< 設(shè)置收款前>頁面，點擊設(shè)置金額，則頁面顯示為<設(shè)置金額中>。

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

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

圖8

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

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

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

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

圖9

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

圖10

圖11

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

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

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

圖12

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

圖13

好了，以上就是微信收付款流程中的的主要交互，借此文拋磚引玉，期待你有其他的實現(xiàn)方式，歡迎交流，接受批評和指正。

原型文件：http://pan.baidu.com/s/1slFjspJ ?密碼：vtuu

作者：Star，摸著石頭過河的產(chǎn)品學(xué)生僧

本文由 @Star 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理。未經(jīng)許可，禁止轉(zhuǎn)載

題圖由作者提供