axure form列表_AxureRP教程

前面介绍了使用AxureRP进行简单的表单设计，主要涉及到组件元素的排版布局和使用，相对基础一些，复杂的表单设计则是在简单的表单设计基础上加入了交互设计和逻辑控制，使原型显得更加生动，更加人性化。交互设计是加上了一些自动判断的控制，如校验字段内容是否为空，填写是否符合规范，以及一些友好的操作提示等；逻辑控制则一般是控制页面的逻辑跳转，或者交互的规则，使之交互按一定的模式呈现给用户，如TAB标签切换，表单元素间的联动效果等，加入了交互之后，原型就变得生动起来，而不是呆板的一个页面，用带交互效果的原型去做演示，比拿着一堆文档或者图片去解说的效果要好的多，因此掌握一些复杂表单设计的方法还是有必要的。

还是以注册信息页面和工作流表单来分别举例，界面布局都一样，只是增加了交互设计效果，注册信息页面如下所示：

?

可以发现与之前简单的表单设计页面相比，这个加入了更多的功能，当然初始界面看上去还是一样的，只不过带了交互功能，这里包含所有字段是否为空的验证，密码强度的验证及确认密码的验证，邮箱的输入提示及邮箱输入是否合法的验证，验证码的填写验证，协议的查看控制，完成按钮的提交控制等等，这里不一一说明了，大家可以看源文件，主要介绍一下密码框的填写交互设计。首先在用户把光标定位在密码输入框之后，要提示用户输入什么样格式的密码是正确的，因此需要使用AxureRP的OnFocus事件来控制鼠标焦点行为，告诉用户填写6-16位字符，其次就是用户在填写的时候要验证当前输入的密码强度是否足够，因此需要使用AxureRP的OnKeyUp事件来控制键盘释放行为，每输入完毕一个字符都判断一下当前已经输入的字符处于哪个强度水平，这里显示强度的图片是用一个动态面板制作的，每当输入字符到达某个临界点，就会根据条件切换，再就是密码输入完成后要判断当前密码是否符合规范，这里只判断长短，利用AxureRP的OnLostFocus事件来控制失去焦点的行为，判断密码是否超长等等，这些控制都是十分有必要的，大家可以思考一下为什么要做这些控制。

流程表单页面的设计主要是加入了很多逻辑控制，主要是下拉选择框之间的联动效果和表单页面切换，效果如下图所示，详细的可以查看演示，或者下载源文件查看。

?

界面差不太多，主要是增加了运维类型和执行类型两个字段的联动效果，当运维类型的下拉选择变了之后，执行类型的下拉选择项也会跟着变动，其次是当执行类型变动了之后，下面表单的显示内容也会跟着变动，也即可以实现不同的表单界面效果。这些逻辑控制都是利用AxureRP的相应事件来实现的，显示切换则都是通过动态面板组件来实现的，如果大家有看过之前的文章，应该都会比较的了解。

复杂表单设计基本上就是这些内容，可能还有其他的一些表单上元素的交互效果，不能一一涉及，用到的时候能想到是最重要的，熟能生巧，多多使用AxureRP来设计原型，就能逐渐掌握AxureRP的主要功能的使用方法了。

示例在AxureRP 6.0.0.2899下调试通过