国外亚洲成av人片在线观看,热99re久久精品这里都是精品,天堂网在线最新版www,国产成人av区一区二区三,51久久成人国产精品麻豆

編輯導(dǎo)語：我們經(jīng)常會使用Axure進(jìn)行交互的設(shè)計，比如輸入密碼、驗證碼界面、彈窗等等，雖說都是一些小的設(shè)計，但是在整體的體驗中是非常重要的地位；本文作者分享了關(guān)于APP支付密碼鍵盤輸入效果的講解，我們一起來看一下。

在Axure中，有許許多多的交互事件，比如選中/取消選中、啟用/禁用、顯示/隱藏等等，這些都是比較常用的。

那么本篇教程我們就來講解一下，一種比較冷門的交互事件，焦點事件的應(yīng)用，如何運用焦點事件繪制APP支付密碼鍵盤輸入效果。

APP支付密碼鍵盤輸入效果

我們先來看看完成效果圖，大家可以看到APP支付密碼鍵盤輸入效果主要組成包括：

• 頁面載入時，獲取輸入框1為焦點；
• 點擊鍵盤時，自動輸入對應(yīng)數(shù)字；
• 當(dāng)焦點框輸入數(shù)字后，焦點自動跳至下一框；
• 刪除時，當(dāng)焦點框被清空時，焦點自動跳到上一框。

支付密碼界面初稿

為了節(jié)省時間，我們提前把設(shè)置支付密碼界面初稿準(zhǔn)備好了，下面就來給大家講解一下，如何繪制密碼鍵盤輸入效果的步驟。

01 第一步：設(shè)置載入時自動獲取焦點

首先點擊畫布空白處（不用選中任何元件），在右側(cè)欄的交互中，依次點擊新建交互-頁面載入時-獲取焦點-輸入框1；這里的交互是指，當(dāng)頁面載入時，輸入焦點落在輸入框1。

不用選中任何元件，點擊新建交互-頁面載入時-獲取焦點-輸入框1

接著選中全部輸入框，在右側(cè)欄中點擊顯示全部，展開全部屬性，在最大長度中填上1。這里的交互是指，限制所有輸入框的最大輸入長度為1位。

選中全部輸入框，點擊顯示全部

設(shè)置最大長度為1

02 第二步：設(shè)置輸入時焦點跳轉(zhuǎn)效果

首先選中輸入框1，在右側(cè)欄的交互中，依次點擊新建交互-文本改變時-獲取焦點-輸入框2；然后點擊啟用情形，打開情形編輯窗，在彈窗中點擊添加條件，修改第三個下拉菜單為 != (不等于)。

選中輸入框1，點擊新建交互

再點擊文本改變時-獲取焦點-輸入框2

然后點擊啟用情形，打開情形編輯窗

在情形編輯窗中點擊添加條件，修改第三個菜單為!=

這里的交互是指，如果當(dāng)前元件（輸入框1）有輸入文字時，焦點跳至下一個焦點（輸入框2）。

因此，依照此法，我們可以設(shè)置輸入框2~6的焦點事件。首先在右側(cè)欄中點擊選中文本改變時，按Ctrl+C（將交互復(fù)制到剪貼板上），逐個選中輸入框2~6，再按Ctrl+V（將交互粘貼到輸入框2~6上）；然后逐個修改交互中的獲取焦點為3~6（輸入框6的下一個焦點仍然是自己）。

第二步其中一個輸入框的交互

03 第三步：設(shè)置刪除時焦點跳轉(zhuǎn)效果

上一步設(shè)置了正向焦點跳轉(zhuǎn)，這一步就要設(shè)置反向焦點跳轉(zhuǎn)了。依照上一步的交互邏輯，推斷出這樣的思路：如果當(dāng)前元件被清空文字時，焦點跳至上一個焦點。

首先選中輸入框6，在右側(cè)欄中點擊文本改變時的啟用情形，打開情形編輯窗，在彈窗中點擊添加條件，保持默認(rèn)條件，直接點擊確定關(guān)閉彈窗。

選中輸入框6，點擊添加情形打開情形編輯窗

在情形編輯窗中點擊添加條件，再直接點擊確定

接著點擊情形2的添加動作，依次點擊獲取焦點-輸入框5；這里的交互是指，如果當(dāng)前元件（輸入框6）為空時，焦點跳到上一個反向焦點（輸入框5）。

點擊情形2的添加動作

再點擊獲取焦點-輸入框5

同樣，依照此法，我們可以設(shè)置輸入框5~1的反向焦點事件。首先在右側(cè)欄中點擊選中文本改變時的情形2，按Ctrl+C（將交互復(fù)制到剪貼板上），逐個選中輸入框5~1，再按Ctrl+V（將交互粘貼到輸入框5~1上）；然后逐個修改交互中的獲取焦點為4~1（輸入框1的下一個反向焦點仍然是自己）。

第三步其中一個輸入框的交互

04 第四步：設(shè)置密碼鍵盤輸入效果

首先選中1鍵，在右側(cè)欄的交互中，依次點擊新建交互-單擊時-設(shè)置文本-焦點元件，設(shè)置值為1。

選中1鍵，點擊新建交互-單擊時-設(shè)置文本-焦點元件，設(shè)置值為1

這里的交互是指，單擊1鍵時，設(shè)置焦點元件的文本為1。同樣的，依照此法，我們可以設(shè)置其他鍵盤的單擊事件。

所以，接著在右側(cè)欄中點擊1鍵的交互（單擊時），按Ctrl+C（將交互復(fù)制到剪貼板上），逐個選中其他鍵，再按Ctrl+V（將交互粘貼到其他鍵上）；然后逐個修改交互中，焦點元件的值為相應(yīng)文字（Del鍵的文字為空）。

第四步刪除鍵的交互

05 結(jié)語

OK了，通過前面四步操作，APP支付密碼鍵盤輸入效果就繪制完成了；但是有細(xì)心的同學(xué)可能會發(fā)現(xiàn)，為什么是輸入6位密碼之后才刪除呢，如果只輸入一半時要刪除怎么辦？

這個就留待同學(xué)們自行挖掘了，提示一點：可以通過判斷輸入框的名稱與是否為空，來控制刪除當(dāng)前框或者是前方框。

作者：默林如斯，公眾號：默林如斯工作室

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

題圖來自Unsplash，基于CC0協(xié)議。