效果描述：
-
按下数字按钮，输入对应的数字。
-
按下退回按钮删除上一步的数字。
-
当有数字时，显示添加号码btn和退回btn。
实现逻辑
函数[[LVAR.substring(from,to)]]：截取第from位到to位的字符串，举例：
[[1234567.substring(1,4)]]=234，也就是说截取第一位到第四位的数字但不包括第一位。
函数[[LVAR.length]]：字符串长度，举例：
[[手机号码1234.length]]=4，也就是说该函数可以获得元件字符串的长度。
我们制作拨号键盘需要的按钮，鼠标按下按钮时，为手机号码文本框“Text 输入”设置文本[[X]]Y,这里X是局部变量，是手机号码文本框的文字，Y是按钮对应的数字，这样就实现了按下键盘输入对应的数字。
我们制作拨号键盘的退回按钮，点击退回按钮，利用上边提到的函数截取字符串实现退回操作。
实现步骤—输入数字
我们增加所需元件，并命名。本案例中手机号码文本框命名为“Text 输入”，数字键盘命名为btn 1、btn 2、btn 3以此类推。这里注意手机号码文本框要选成文本框元件。
-
为元件 btn 1（即数字键盘1）设置交互：
鼠标按键按下时，
当前元件选中为真，
Text 输入 文本为[[Number]]1
（其中Number是局部变量，为“Text 输入”的元件文字）
鼠标按键释放时，
当前元件选中为假。
（这里注意，之所以做选中是为了交互的效果，我设置了选中时让按钮变色，这样可以更逼真的模拟拨号键盘）
为元件 btn 2（即数字键盘2）设置交互：
鼠标按键按下时，
当前元件选中为真，
Text 输入 文本为[[Number]]1
（其中Number为局部变量，是“Text 输入”的元件文字）
鼠标按键释放时，
当前元件选中为假。
-
为元件 btn 3 …设置交互，以此类推。
-
这样，输入数字的交互就实现了
如图：
实现步骤—退回数字
-
我们为退回按钮设置交互：
鼠标按键按下时，
设置当前元件选中为真，
设置文本Text输入到
[[Number.substr(0,Number.length-1)]]
（其中Number是局部变量，为Text 输入的元件文字）
鼠标按键释放时，
设置当前元件选中为假
-
这样，退回交互就设置完成了。
附件下载链接：
https://pan.baidu.com/s/1jXmKz58pwPO4kT3JbhJ1AQ
提取码：无！
感谢关注，一起向梦想出发
原创文章，作者：王得宇AIPM，如若转载，请注明出处：https://www.pmtemple.com/axurerp/axure-course/5662/
微信扫一扫 
支付宝扫一扫 
评论列表（10条）
这个拨号键盘交互教程太实用了！作为经常制作旅行类APP原型的人，这种细节交互能让用户体验更真实自然。特别是选中时变色的设计，太有手感了！就像我在旅行中捕捉完美瞬间一样，这些小细节能让产品更加生动鲜活 📱✈️
这个拨号键盘交互设计就像健身计数器！输入数字记录训练次数，删除键修正错误，简单直接。用户体验流畅，就像完美的训练节奏，不拖泥带水！
这个拨号键盘的交互设计思路太妙了！就像我们做潮流单品，每个按钮的交互体验都很重要。技术实现虽复杂，但用户界面就像我们品牌的展示面，细节决定成败！
哇！这个拨号键盘教程太棒啦！就像游戏里输入密码的界面一样酷炫～游戏策划表示这种交互逻辑完全可以用在解谜游戏的密码输入环节！想试试加入键盘音效和震动反馈会不会更沉浸感呢？😮
教程实用，但交互设计可以更极简。拨号键盘本质是沟通媒介，功能简洁最重要。退回逻辑用substring实现得很巧妙，不过按钮选中状态的设计略显冗余。好的交互应该让用户忘记界面本身。
这个Axure拨号键盘教程简直是把交互设计做成了”极简风”单品！从按钮的按下反馈到字符串的截取操作，每个细节都像高级时装的剪裁一样精准。作为一个数字产品爱好者，这种把代码变成用户体验的过程太让人着迷了！
这个拨号键盘教程太实用了！作为旅行摄影师，我经常需要设计摄影工作室预约系统，这种交互设计正好可以用上📸 教理清晰，特别是[[substring]]函数的应用很巧妙，能让原型更真实。可以增加一个拨号音效效果就更完美了！
这个拨号键盘交互设计很实用，但教程中局部变量Number的命名容易混淆，建议改为更具描述性的变量名如phoneNumber。作为原型工具，Axure这类交互模拟对用户体验验证很有价值，但实际产品中还需考虑输入长度限制等边界条件。
@深度陈观：简洁实用的交互设计，但教程中变量命名不够清晰。Axure这类原型工具能快速验证交互逻辑，不过实际产品还需考虑更多边界条件。极简设计往往最考验细节把控。
@沙漏记录员：教程内容实用，但作为产品经理，我认为这类交互原型还需考虑更多边界情况：号码长度限制、格式化显示、错误处理等。Axure虽能快速验证交互逻辑，但真实产品中的细节把控才是关键。