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

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

1. 當(dāng)鼠標(biāo)的懸浮、按下時(shí)，鍵盤的按鍵背景色發(fā)生變化；
2. 當(dāng)點(diǎn)擊按下數(shù)字字母按鈕時(shí)，將輸入對應(yīng)的數(shù)字，同時(shí)顯示“添加號碼”按鈕和“刪除”按鈕；
3. 當(dāng)點(diǎn)擊“刪除”按鈕時(shí)，將刪除號碼最后面的一個(gè)數(shù)字；當(dāng)數(shù)字全部刪除時(shí)，“添加號碼”按鈕和“刪除”按鈕全部隱藏。

交互講解一：鼠標(biāo)的懸浮、按下交互

選中12個(gè)數(shù)字符號按鈕，在其【屬性】欄中的交互樣式，設(shè)置鼠標(biāo)懸浮和按下時(shí)，填充色的變化。

交互講解二：數(shù)字符號的輸入

利用全局變量，文本函數(shù)[[This.text]]和[[Target.text]]實(shí)現(xiàn)數(shù)字輸入的交互。

1. 添加全局變量

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

2. 設(shè)置鼠標(biāo)單擊時(shí)事件交互

1）選中任意數(shù)字按鈕，雙擊屬性欄中【鼠標(biāo)單擊時(shí)】，左側(cè)動(dòng)作欄中【全局變量】-【設(shè)置全局變量】，勾選全局變量【number】，其值設(shè)置[[This.text]]——即鼠標(biāo)單擊某個(gè)按鈕的值（當(dāng)按下按鈕1，則number為1；當(dāng)按下2，則number為2）。

2）為了實(shí)現(xiàn)，點(diǎn)擊數(shù)字按鈕時(shí)，號碼輸入框累積輸入該數(shù)字，因此：

在左側(cè)動(dòng)作欄【元件】-【設(shè)置文本】，勾選【號碼文本框】，將文本值設(shè)置為[[Target.text]][[number]]。

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

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

交互講解三：數(shù)字符號的刪除

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

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

1. 設(shè)置鼠標(biāo)單擊時(shí)事件交互

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

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

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

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

1. 設(shè)置文本改變時(shí)交互事件

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

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

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

最終預(yù)覽效果

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

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

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