對于我們每天熟悉得不能再熟悉的撥號鍵盤，你有沒有想過它背后的交互設計理念是什么，它是如何通過Axure實現的呢？在本文中，筆者將告訴你這些問題的答案。

對于我們再熟悉不過的手機撥號鍵盤，今天來講解其中的交互效果：

1. 當鼠標的懸浮、按下時，鍵盤的按鍵背景色發生變化；
2. 當點擊按下數字字母按鈕時，將輸入對應的數字，同時顯示“添加號碼”按鈕和“刪除”按鈕；
3. 當點擊“刪除”按鈕時，將刪除號碼最后面的一個數字；當數字全部刪除時，“添加號碼”按鈕和“刪除”按鈕全部隱藏。

交互講解一：鼠標的懸浮、按下交互

選中12個數字符號按鈕，在其【屬性】欄中的交互樣式，設置鼠標懸浮和按下時，填充色的變化。

交互講解二：數字符號的輸入

利用全局變量，文本函數[[This.text]]和[[Target.text]]實現數字輸入的交互。

1. 添加全局變量

頂部菜單欄【項目】-【全局變量】，添加全局變量，命名隨意取，本教程取為：number。

2. 設置鼠標單擊時事件交互

1）選中任意數字按鈕，雙擊屬性欄中【鼠標單擊時】，左側動作欄中【全局變量】-【設置全局變量】，勾選全局變量【number】，其值設置[[This.text]]——即鼠標單擊某個按鈕的值（當按下按鈕1，則number為1；當按下2，則number為2）。

2）為了實現，點擊數字按鈕時，號碼輸入框累積輸入該數字，因此：

在左側動作欄【元件】-【設置文本】，勾選【號碼文本框】，將文本值設置為[[Target.text]][[number]]。

（其中，[[Target.text]]代表文本框之前的文本值，[[number]]代表剛點擊的按鈕值。）

接下來，直接將此交互事件復制粘貼到其他按鈕上面即可，是不是很簡單粗暴。

交互講解三：數字符號的刪除

主要利用函數[[LVAR.length]]：獲得元件字符串的長度（即1234.length=4）；以及函數[[LVAR.substring(from,to)]]：截取第from位到to位的字符串。

（即[[12345.substring(1,4)]]=234，也就是說截取第一位到第四位的數字但不包括第一位。）

1. 設置鼠標單擊時事件交互

選中【刪除】按鈕，雙擊屬性欄中【鼠標單擊時】，在左側動作欄【元件】-【設置文本】，勾選【號碼文本框】，其文本值設為[[LVAR1.substr(0,LVAR1.length-1)]]。

（其中，LVAR1為局部變量，代表為【號碼文本框】的元件文字，從末尾倒數第2位截取前面文字）

交互講解四：添加號碼按鈕和刪除按鈕的顯示隱藏

此交互主要判斷號碼文本框的值是否為空，當按下數字按鈕，即添加一個數字值，值不為空，顯示元件【添加號碼】按鈕和【刪除】按鈕；當值為空，則隱藏。

1. 設置文本改變時交互事件

1）選中【號碼文本框】，雙擊屬性【文本改變時】，選中【元件】-【顯示】，勾選元件【添加號碼】按鈕和【刪除】按鈕，設置為顯示。

為其添加條件：當號碼文本框This的文字長度大于0時，即有值時，顯示元件。

2）再次雙擊屬性【文本改變時】，選中【元件】-【顯示】，勾選元件【添加號碼】按鈕和【刪除】按鈕，設置為隱藏；作為反例Else if Ture，不需再設置條件。最終交互事件如下所示：

最終預覽效果

作者：火星人～艾斯，公眾號：艾斯的Axure峽谷

本文由 @火星人～艾斯 原創發布于人人都是產品經理。未經許可，禁止轉載

題圖來自Unsplash，基于CC0協議