说说Axure的表单元件
第一部分
通俗的理解表单
所谓表单，就是承接用户输入的内容的元件，负责把用户的内容存储和传递。用户的输入形式有：文字输入、密码输入、邮箱输入、地址URL输入、文件上传、时间选择、选项确定等。
通用交互事件：获得焦点、失去焦点
由于用户输入内容时，需要在元件里操作，用户在操作时也就是元件获得焦点（即激活该元件，如文本框得把光标在文本框中闪烁，用户才能输入内容），当用户不操作该元件了，则该元件就失去焦点。
文末有源文件链接
通过元件焦点的获得和失去的变化，可控制其他元件的交互。如登录表单，账号输入框获得焦点，切换文本框外框线颜色。
文本框交互事件：文本改变时
用户输入内容时，是一个字一个字的输入的，对于文本框来说是一直在变化的，所以可通过该变化进行交互事件的设置。
原理：当文字长度有变化时，显示或隐藏提示的元件
文末有源文件链接
列表框的交互事件：选项改变时
用户切换选项时，列表框的值被改变，通过该变化进行交互事件的设置。
原理：当选项改变时，设置文本框的文字等于被选中项
文末有源文件链接
复选框和单选按钮的交互事件：选中时和取消选中时
原理：选中时，数量加1；取消选中时，数量减1。
文末有源文件链接
第二部分
详细说明以上的一个案例：验证手机号长度
01、准备好元件：两个提示“请输入11位数手机号”、正确符号，文本框，文本背景框。
02、设置文本背景框的选中状态和默认状态，当文本框获得焦点时切换背景框为选中状态，反之为默认状态。
03、设置提示为默认隐藏，给文本框添加事件。
04、到此便可完成了文本框验证手机号长度的效果制作，点击F5预览。
本文涉及的效果制作，源文件地址为：
https://pan.baidu.com/s/1vwvudPfMIkH2p4HlD6zKbw
来个硬广，作者自己整理的一套适用于移动端的元件库，有需要的同学可以前往看看。
灰色元件库链接地址：
https://www.axureshop.com/a/45563.html
橘黄元件库链接地址：
https://www.axureshop.com/a/352.html
文章来自微信公众号“木目原型”
微信ID：mumuaxure
网友评论