起點課堂會員權益
職業體系課特權
線下行業大會特權
個人IP打造特權
30+門專項技能課
1300+專題課程
12場職場軟技能直播
12場求職輔導直播
12場專業技能直播
會員專屬社群
榮耀標識Axure教程：蘋果手機撥號原型
對于我們每天熟悉得不能再熟悉的撥號鍵盤，你有沒有想過它背后的交互設計理念是什么，它是如何通過Axure實現的呢？在本文中，筆者將告訴你這些問題的答案。
對于我們再熟悉不過的手機撥號鍵盤，今天來講解其中的交互效果：
- 當鼠標的懸浮、按下時，鍵盤的按鍵背景色發生變化；
- 當點擊按下數字字母按鈕時，將輸入對應的數字，同時顯示“添加號碼”按鈕和“刪除”按鈕；
- 當點擊“刪除”按鈕時，將刪除號碼最后面的一個數字；當數字全部刪除時，“添加號碼”按鈕和“刪除”按鈕全部隱藏。
交互講解一：鼠標的懸浮、按下交互
選中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協議
哈，看完還是不太會？你可能需要從Axure基礎開始學
?? 這里推薦你加Axure實戰班的助教小可愛@CC-起點學院（微信：qidiancc520），回復關鍵詞：原型禮包
領取適合產品新人的原型設計大禮包哦，cc還會不定期分享Axure免費視頻課程呢！
一直很奇怪，為什么打電話沒有粘貼按鈕，復制的號碼都打不了
復制好號碼，回到撥號界面，在上面的空白區域，你長按試下
我的是安卓，試了不行。我的必須按一個數字出現輸入框，再粘貼