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

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

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

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

APP支付密碼鍵盤輸入效果

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

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

支付密碼界面初稿

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

01 第一步：設(shè)置載入時(shí)自動(dòng)獲取焦點(diǎn)

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

不用選中任何元件，點(diǎn)擊新建交互-頁(yè)面載入時(shí)-獲取焦點(diǎn)-輸入框1

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

選中全部輸入框，點(diǎn)擊顯示全部

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

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

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

選中輸入框1，點(diǎn)擊新建交互

再點(diǎn)擊文本改變時(shí)-獲取焦點(diǎn)-輸入框2

然后點(diǎn)擊啟用情形，打開(kāi)情形編輯窗

在情形編輯窗中點(diǎn)擊添加條件，修改第三個(gè)菜單為!=

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

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

第二步其中一個(gè)輸入框的交互

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

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

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

選中輸入框6，點(diǎn)擊添加情形打開(kāi)情形編輯窗

在情形編輯窗中點(diǎn)擊添加條件，再直接點(diǎn)擊確定

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

點(diǎn)擊情形2的添加動(dòng)作

再點(diǎn)擊獲取焦點(diǎn)-輸入框5

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

第三步其中一個(gè)輸入框的交互

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

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

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

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

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

第四步刪除鍵的交互

05 結(jié)語(yǔ)

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

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

作者：默林如斯，公眾號(hào)：默林如斯工作室

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

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