axure键盘弹出_AXURE教程：手机键盘

今天教大家用axure做一个能输入的手机键盘，该键盘原型，效果真实，可以打英文，数字和标点符号。

一、效果演示

总体效果：

随意位置输入效果

删除效果

换行效果

二、制作方法

1. 制作手机外框

可以在网上手机外框的素材，如下图所示：

2. 制作键盘

用矩形做成按钮，然后每个键输入对应的文本，箭头、麦克风、删除等svg图片，可以在icon找到，转为形状后可以调整样式。分别要做5个页面，分别是小写键盘，大写键盘，数字键盘，符号键盘，语音页做好后如下图所示。

将5个页面放入同一个动态面板里，5个不同的状态。

3. 制作交互

制作交互有两种方法：

第一种是要用js获取光标位置，优点是输入的文本可以在任意位置，效果最佳，缺点是逻辑比较复杂，新手不容易完成。

第二种是不用js，直接在axure里