AXURE:如何制作一个高保真可输入键盘?

0 评论 1590 浏览 2 收藏 4 分钟

编辑导语:如何通过 AXURE 去制作一个高保真可输入键盘?本文作者通过实操为我们分享了他的经验。

一、演示

https://ht3rx6.axshare.com

二、步骤

1. 创建动态面板

在画布中拖入一个动态面板,设置三个动态面板状态:小写、大写、数字。

2. 设计原型样式

在相应的状态下,利用矩形绘制以下三个键盘。

小写键盘

大写键盘

数字键盘

3. 添加键盘切换交互

  • 小写键盘:点击大写按钮切换到大写键盘;点击123按钮切换到数字键盘。
  • 大写键盘:点击小写按钮切换到小写键盘;点击123按钮切换到数字键盘。
  • 数字键盘:点击ABC按钮切换到小写键盘。

交互示例:选中按钮,添加交互,单击时设置面板状态为“大写”。

4. 添加输入交互

在页面中拖入一个单行文本框。

选中一个字母按钮,新建交互单击时,设置文本框文本为文本框本身文本(Target.text)+按钮文本(this.text)

将其他字母按钮的交互设置完成。选中第一个字母的交互样式,Ctrl+C复制,然后选中其他按钮Ctrl+V粘贴。

5. 添加删除交互

选中删除按钮,添加交互,单击时设置输入框文本为[[Target.text.substr(0,Target.text.length-1)]]。

substr(start,length)是截取函数。

6. 添加空格交互

选中删除按钮,添加交互,单击时设置输入框文本为[[Target.text]] 。需要注意[[Target.text]]后加一个空格。

7. 设置焦点

在每一个交互上添加新动作,获取焦点到输入文本框,这样可以使输入框内一直显示光标。

 

本文由 @lexi 原创发布于人人都是产品经理,未经作者许可,禁止转载。

题图来自Unsplash,基于CC0协议。

给作者打赏,鼓励TA抓紧创作!
更多精彩内容,请关注人人都是产品经理微信公众号或下载App
评论
评论请登录
  1. 目前还没评论,等你发挥!