手機(jī)撥號鍵盤相信每個人都比較了解了，那我們今天就用axure來制作這個大家都認(rèn)識的手機(jī)撥號鍵盤。

?

在這個案例里邊，具體效果是這樣的：

1、點(diǎn)擊數(shù)字按鍵，顯示所點(diǎn)擊的數(shù)字

2、若已有顯示號碼，在原有號碼之后繼續(xù)顯示所點(diǎn)擊的數(shù)字

3、若達(dá)到手機(jī)號碼的長度，即11位，點(diǎn)擊將無法繼續(xù)顯示

4、每點(diǎn)擊一次刪除按鈕，已顯示的號碼刪除一個數(shù)字

?

點(diǎn)擊預(yù)覽地址https://fhfq89.axshare.com，可以自己動手操作，對這個案例有更深入的理解。

?

這是撥號鍵盤基本的交互效果，大家可以看一看自己的手機(jī)鍵盤，有沒有其他的效果，如果有的話，可以加進(jìn)自己所做的原型中。

?

事不宜遲，我們就來看看這個案例是怎么制作的。

?

當(dāng)然，首先肯定是要先準(zhǔn)備頁面元素了。在繪制界面的時候要注意，一是上方空白處必須有一個部件，作用是顯示輸入的號碼。二是不要忘記對部件進(jìn)行命名。

?

當(dāng)點(diǎn)擊1的時候，會有以下幾種不同情況：

1、沒有顯示號碼，那這時顯示號碼就是1

2、已有顯示號碼，且號碼的長度不等于11位，現(xiàn)在所顯示的就是原有號碼加上1

3、已有顯示號碼，且號碼的長度等于11位，點(diǎn)擊之后不會有反應(yīng)。

?

這是點(diǎn)擊1時的分析，點(diǎn)擊其他按鈕也是同樣的分析。

?

需要判斷號碼長度，我們這時就需要設(shè)置用例條件：如果“顯示”的部件長度值小于“11”的話，我們就可以設(shè)置“顯示”的文字。

?

上面我們分析的三種情況，實(shí)際上第一種和第二種是一樣的。只是第一種中顯示號碼可以把它看成空值，空值加上1，所顯示的就是1。所以“顯示”的文字就應(yīng)該是“顯示”中原有的值加上1。這時候解決“加上”的問題就可以了。

?

這里可以借助一個字符串函數(shù)：concat，把字符連接起來。連接的分別是“顯示”中現(xiàn)有的值，和現(xiàn)在點(diǎn)擊所獲取到的值。在表達(dá)式上可以這么表示：

?

最后，“顯示”中開始出現(xiàn)號碼之后，就可以吧刪除按鈕顯示出來了。在1的鼠標(biāo)單擊時事件上再加一個顯示動作即可。

?

預(yù)覽一下，確認(rèn)正確之后就可以把1上面的交互設(shè)置復(fù)制到其他數(shù)字按鍵上。

?

?

顯示已經(jīng)沒有問題了，下面就來看看刪除。

?

在單擊刪除按鈕的時候，“顯示”中的號碼在原來的基礎(chǔ)上刪除一位。實(shí)現(xiàn)這個效果，我們可以使用另一個字符串函數(shù)sudstr，截取出某一段字符即可。起始位置就是0，從第一位開始截取。結(jié)束位置就是字符總長度往前退一位，字符總長度可以用length函數(shù)去隨機(jī)獲取， length-1就是這個結(jié)束位置。

?

所以這里的表達(dá)式就是這樣的：

?

?

這個按鈕上我們可以再完善一下，也就是沒有號碼的時候，按鈕把它隱藏掉。只需要設(shè)置一下用例條件即可。在號碼長度為1的時候，是最后一次點(diǎn)擊這個按鈕，點(diǎn)擊完成之后，“顯示”為空，刪除按鈕隱藏。

?

最后也可以進(jìn)行一些細(xì)節(jié)的處理，比如設(shè)置數(shù)字按鍵的按鍵按下時樣式、調(diào)整頁面的視覺效果等等，案例完整呈現(xiàn)了。

?

這個案例的制作方法除了用在撥號鍵盤上外，也可以觸類旁通，用在其他類似點(diǎn)擊選擇內(nèi)容的的案例里邊，比如電商商品的規(guī)格選擇。