在原型设计中，输入框应该是大家操作最多的设计了。但如果是要加入交互效果，需要注意什么呢？

Axure 中的输入框（Text Field）组件在多种应用场景中都非常有用，这期内容，我们来探讨 Axure 中输入框设计与交互技巧。

01 带提示输入框元件

创建带提示输入框所需的元件

1. 打开一个新的 RP 文件并在画布上打开 Page 1。

2. 在元件库中拖出一个文本框元件。

在原型设计中，输入框应该是大家操作最多的设计了。但如果是要加入交互效果，需要注意什么呢？

3. 选中文本框形元件，在样式窗格中将文本框宽设为 285，高 35，线段填充颜色灰色（#D9D9D9）线框为 1。

02 创建交互

创建 " 提示输入框 " 的交互状态

1. 选中文本框形元件 , 在交互窗格提示文本中输入想要提示的文本。

预览交互

点击预览，在预览页面 输入框中可以看到提示文，输入内容时提示文本则消失。

03 带图标输入框元件

创建带图标输入框所需的元件

1. 复制前面做好的输入框。

2. 在 https://www.iconfont.cn/ 这个网站上找到想要的图标。

3. 复制图标 SVG 代码，粘贴到画布上，将 icon 宽高设置为 15。

4. 选中图片右键变换图片，转换 SCG 图片为形状。

5. 同理，再找个一关闭 icon，并将 icon 颜色设置为灰色（#D9D9D9）。

6. 将找到的 icon 图标和文本输入框两边居中对齐。

04 创建交互

1. 选中文本框形元件 , 在交互窗格点击新建交互，文本改变时，启用情形判断，情形 1：如果 元件文字长度于 当前 >"0 ″则，显示清空按钮，情形 2：否则如果 元件文字长度于 当前 =="0 ″则，隐藏清空按钮。

2. 获取焦点时，设置选中用户图标为 " 真 "。

3. 失去焦点时，设置选中用户图标为 " 假 "。

创建 " 清除 " 按钮的交互状态

1. 选中清除按钮 , 在交互窗格点击新建交互，单击时，设置文本输入 ""。

2. 隐藏清除按钮。

创建 " 用户图标 "icon 的交互状态

1. 选中 " 用户图标 "icon, 在交互窗格交互样式中选择鼠标悬停的样式填充色为蓝色（#0052D9）。

2. 元件选中时的样式填充色为蓝色（#0052D9）。

点击预览，在预览页面 输入框中可以看到提示文，图标，填充色，输入内容时提示文本则消失。

05 带叹号提示输入框元件

创建带叹号提示输入框所需的元件

2. 在 https://www.iconfont.cn/ 找一个感叹号 icon。

3. 复制图标 SVG 代码，粘贴到画布上，将 icon 宽高设置为 15，选中图片右键变换图片，转换 SCG 图片为形状，填充颜色灰色（#999999）。

4. 将感叹号 icon 和文本输入框两边居中对齐。

5. 创建一个提示提示框，提示框可以用钢笔工具画，这个具体咋画，有空的时候单独讲一期，画好之后填充色设置为灰黑色（#635D5D），命名为 " 提示框 "。

创建交互

" 提示输入框 " 的交互状态之前已经创建好了，所以现在只需要为感叹号 icon 创建交互。

1 选中感叹号 icon，在交互窗格点击新建交互，鼠标移入时，显示 " 提示框 " 逐渐 300 毫秒，勾选置于顶层，弹出效果。

1. 隐藏 " 提示框 "。

点击预览，在预览页面 输入框中可以看到提示文，鼠标移入提示 icon 时会出现提示框。

06 密码输入框元件

创建密码输入框所需的元件

1，复制带图标输入框元件，并将用户 icon，替换成锁样式 icon，提示文本改成请输入密码。

修改 " 提示输入框 " 的交互状态。

1. 选中提示输入框，在交互窗格中将获取焦点时，失去焦点时设置选中目标替换成锁 icon。

2. 交互样式中输入类型 Text 改成密码。

创建 " 锁 "icon 的交互状态

1. 选中 " 锁 "icon, 在交互窗格交互样式中选择鼠标悬停的样式填充色为蓝色（#0052D9）。

点击预览，在预览页面 输入框中可以看到提示文，图标，填充色，输入密码时密码会被隐藏。

07 邮箱输入框元件

创建邮箱输入框所需的元件

1. 复制带图标输入框元件，并将用户 icon，替换成邮箱样式 icon，提示文本改成请输入邮箱。

2. 创建一个辅助矩形，从元件库中拖入一个矩形，线段值为 0，输入文本 1，与关闭按钮对齐。

创建邮箱选项所需的元件

1. 创建邮箱提示选项背景，从元件库中拖入一个矩形，线段值为 0，宽为 285，高为 120，外部阴影设置为灰色（#000000）15% 透明度，与输入框对齐。

2. 创建邮箱提示选项，从元件库中拖入一个矩形，线段值为 0，输入文本 " 输入提示 1"、" 输入提示 2"、" 输入提示 3" 并命名。

1. 选中全部邮箱选项元件，右键转为动态面板，选中提示输入框和创建好的动态面板，右键转为动态面板。

2. 双击动态面板，选中输入框元件，在交互窗格中，将文本改变时，情形 1：如果 元件文字长度于 当前 >"0" 改为，如果 文字于 1=="0"，显示 / 隐藏动作不变，添加显示 / 隐藏动作，显示邮箱选项动态面板，逐渐 300 毫秒。

添加设置文本，设置输入提示 1 插入一个变量。

选择元件 This 变量

添加文本格式，输入邮箱后缀

依次补充需要提示 2，提示 3 的邮箱。

在添加一个动作设置选中 邮箱 icon 为 " 真 "。

情形 2：否则 如果 元件文字长度于 当前 =="0" 改为否则 如果 文字于 1=="1"。

添加显示 / 隐藏交互，隐藏提示动态面板 逐渐 300 毫秒。

设置选中邮箱 icon 选中为 " 真 "。

3. 修改失去焦点时交互状态，添加设置文本，选中辅助矩形框 1 为 "1" 等待 200 毫秒。

添加设置显示 / 隐藏，隐藏 清空按钮；显示 / 隐藏 隐藏 提示动态面板 逐渐 300 毫秒，设置选中邮箱 icon 选中为 " 假 "。

4. 修改获取焦点时 交互转态，设置文本 选中辅助矩形框 1 为 "0"。

5. 隐藏辅助矩形框 1

6. 在交互样式中输入类型窗格将密码 改为 Text。

创建 " 邮箱 icon" 的交互状态。

双击邮箱 icon 选项，在交互窗格，交互样式中添加元件选中时 填充为蓝色（#0052D9）。

创建 " 邮箱选项 " 的交互状态。

1. 双击邮箱选项动态面板，选中输入提示 1 在交互窗格中，新建单击时交互，单击时显示 / 隐藏 隐藏 邮箱选项动态面板

2. 设置输入框 文本 值 [ [ This.text ] ]

3. 添加交互样式，鼠标悬停是样式，填充色（#F7F7F7）。

4. 依次设置 输入提示 2、输入提示 3。

5. 隐藏邮箱选项动态面板

点击预览，在预览页面 输入框中可以看到提示文，图标，填充色，输入邮箱会有邮箱提示选择项。

08 字数限制输入框元件

创建字数限制输入框所需的元件

1. 复制做好的带提示文本输入框。

2. 创建字数提示矩形，在元件库中拖出一个矩形框，线宽设为 0，输入文本 15，字体颜色（#999999）

3. 将文本输入框和字数提示矩形对齐。

创建 " 输入框 " 的交互状态。

1. 选中输入框元件，在交互窗格中新建文本改变时，设置文本，字数提示矩形 15，插入一个变量。

添加局部变量，LVAR1= 元件 文字 当前

插入变量，找到字串 length，并插入 ;LVAR1 变量， [ [ 15-LVAR1.length ] ]

2. 选中文本输入框，在交互窗格，文本属性窗格中，点击显示全部，最大长度设置为 15。

点击预览，在预览页面 输入框中输入文字到达上限是无法继续输入。

预览地址：https://3kn850.axshare.com

OK，这期内容到这里就结束了。

本文由 @PM 大明同学 原创发布于人人都是产品经理。未经作者许可，禁止转载

题图来自 Unsplash，基于 CC0 协议

该文观点仅代表作者本人，人人都是产品经理平台仅提供信息存储空间服务