axure form列表_AxureRP教程

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

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

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

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

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

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

示例在AxureRP 6.0.0.2899下调试通过

axure form列表_AxureRP教程相关推荐

axure form列表_常见的列表页如何用Axure画出来
列表页是PM画原型的时候最容易碰到的页面类型,那么如何快速画出并且展现交互呢? 我们从具体的例子开始讲解其中的技巧,和各种不同的演变场景.希望初级PM可以通过这篇文章改进下自己的画法. 列表页基本是由 ...
Axure RP 9 基础教程元件基础1
Axure RP 9 for Mac是一款非常专业的交互原型设计软件,它能让用户快速创建应用软件或Web网站的线框图.流程图.原型和规格说明文档.今天小编给大家带来的是Axure RP 9 基础教程 ...
3D 打印机 G 代码命令：完整列表和教程
3D 打印机 G 代码命令:完整列表和教程查看原文了解 G 代码命令将开启 3D 打印的下一个层次.继续阅读以快速了解此代码的基础知识! 内容它是什么? 3D 打印的重要命令 G0 & ...
Axure for mac安装教程（版本8.1.0.3382）
Axure for mac安装教程(版本8.1.0.3382) 第一步--下载安装包官网下载安装包:https://www.axure.com/download 第二步--安装如图双击刚下下来的A ...
Word控件Spire.Doc 【列表】教程：在 Word 文档中插入列表
Spire.Doc for .NET是一款专门对 Word 文档进行操作的 .NET 类库.在于帮助开发人员无需安装 Microsoft Word情况下,轻松快捷高效地创建.编辑.转换和打印 Micr ...
Axure rp9入门图文教程——基操及介绍（看完就能上手，人人都是产品经理）
Axure rp9入门图文教程-基操及介绍免费版安装包请点击此处(避免审查,请点击这)[^这里] 一.界面介绍 1. 复制.剪切及粘贴区域 2. 选择模式 3. 插入形状 4. 控点(编辑控点) 5 ...
lambda在python_在Python中使用lambda高效操作列表的教程
介绍 lambda Python用于支持将函数赋值给变量的一个操作符默认是返回的,所以不用再加return关键字,不然会报错 result = lambda x: x * x result(2) # ...
axure 倒计时_AxureRP教程—模拟倒计时
前面在介绍单选框和复选框应用的时候演示的红绿灯效果里面有用到倒计时的效果,即在红灯和绿灯时候有倒计时提示红灯和绿灯的持续时间,当时没有详细介绍如何实现,这里就补充介绍一下倒计时效果的设计实现过程. 倒 ...
axure树形表格_Axure教程：可增删改的树型结构
原标题:Axure教程:可增删改的树型结构今天,教大家如何做一个树型结构,以及节点与节点之间相互交互的内容. 演示地址:http://b0bgsg.axshare.cn/#g=1&p=树一 ...

axure form列表_AxureRP教程

axure form列表_AxureRP教程相关推荐

最新文章

热门文章