最近在研究一些国外比较好的交互特效，看到一个关于邮箱规则验证的效果还不错，自己模仿着做了一个。大家做交互原型可能都是使用Axure，今天我用一款新软件和大家分享。
动效说明
当点击输入框的时候，弹出系统键盘，并且输入框边框蓝色显示；如输入内容不包含@则显示红色边框，提示邮箱格式错误；如输入包含@则显示绿色边框，提示格式正确。
制作过程
首先我们将需要用到的元件，都在场景中准备好，毕竟交互原型最重要的在于交互，对于准备的元件，以后我就不再做说明了。
第一步，选择输入框，并且为输入框添加“单击”的触发动作，然后依次添加“移动、文本、透明度”的3个反应动作。移动：当单击输入框的时候，设置Email的文本移动，将其移动至X轴57，Y轴257。文本：当单击输入框的时候，设置Email的文本字号从18px，变成14px
透明度：当单击输入框的时候，设置蓝色背景框的透明度为100
以上的设置，是为了实现点击输入框后，出现蓝色边框，同时Email文本字号缩小，并且移动到57x257的位置。
第二步，对输入框输入内容添加判断的条件监听，根据输入框输入的内容，显示不同的提示效果。
首先选择输入框，为它添加监听的触发动作，这个设置是为了监听输入框的内容，这里我们需要设置3种场景的判断：
输入框内容，不包含@输入框内容，包含@输入框内容为空 这里以3种不同情况为例，添加交互配置：
以上设置为了实现，当输入框内容为“abc2def.com”这样错误的邮箱时，会隐藏默认的邮箱ico显示，显示红色的边框以及警告的ico，并且提示格式错误的提示信息。
以上设置为了实现，当输入框内容为“abc@def.com”这样正确的邮箱时，会隐藏默认的邮箱ico显示，显示绿色的边框以及通过的ico，并且提示格式验证通过的提示信息。
为了有更好的用户体验，还需要设置当输入框为空值时，恢复默认的显示，也就是灰色边框，输入框清空输入值。这部分的设置方法，和上面相同，就不一一叙述了。
至此，我们完成了该教程的特效制作。
如果你想很好的深入学习下交互设计，建议可以看看由鹅厂资深交互设计师写的《交互思维》这本书，会对你有很大的帮助。
