文档彩票走势图>>原型设计工具Axure RP使用教程>>原型设计工具Axure RP入门教程(六):必填字段教程
原型设计工具Axure RP入门教程(六):必填字段教程
Axure RP是一套专门为网站或应用程序所设计的快速原型设计工具, 可以让应用网站策划人员或网站功能界面设计师更加快速方便的建立Web AP和Website的线框图、流程图、原型和规格。
在本教程中,您将学习如何制作使用条件逻辑的注册表单,以确保用户已完成所有必填字段。
小部件和页面设置
创建注册表单
- 打开一个新的RP文件,然后在画布上打开Page 1。
- 将两个文本字段小部件拖动到画布上。 命名一个文本字段电子邮件字段,另一个命名密码字段。 (您可以选择使用标签小部件为每个标签添加标签。)
提示:要屏蔽密码字段的文本,请将其输入类型设置为密码。
- 将按钮小部件拖到画布上,并将其文本设置为Sign Up。
- 将Heading 3小部件拖到画布上。 将其文本设置为“请输入电子邮件地址和密码,并将其命名为错误消息”。
- 将错误消息的字体颜色更改为红色,然后通过单击样式工具栏或样式窗格中的隐藏图标将其隐藏。
添加成功的注册页面
- 在项目中添加一个新页面,并在画布上打开它。
- 将标题1小部件拖到画布上,并将其文本设置为谢谢您注册!
链接到第二页
- 选择注册按钮,然后在Interaction(交互)窗格中单击Click(单击)或Tap(点击)→Open Link(打开链接)。
- 在出现的下拉菜单中选择第2页,然后单击确定。
- 将鼠标悬停在Interaction(交互)窗格中的Click(单击)或Tap(点击)标题上,然后单击右侧的Enable Cases(启用案例)。
- 在出现的条件构建器对话框中,将案例命名为成功注册,然后单击Add Logic(添加逻辑)。
- 在出现的条件行中,在第二个下拉列表中选择电子邮件字段文本字段,然后在第三个下拉列表中选择不等于。
- 单击添加行以添加另一个条件语句。 在第二个下拉列表中选择密码字段文本字段,然后在第三个下拉列表中选择不等于。
- 对话框底部的摘要应显示为:If text on Email Field does not equal "" and text on Password Field does not equal ""。 仅当单击注册按钮时两个文本字段都包含一些文本时,才能满足此条件。
- 单击确定关闭条件生成器。
注册申请失败
- 选中注册按钮后,将鼠标悬停在Interaction(交互)窗格中的Click(单击)或Tap(点击)标题上,然后单击右侧的Add Case(添加案例)。
- 在出现的条件构建器对话框中,将新案例命名为不成功注册,然后单击确定而不添加任何逻辑。
- 单击Interaction(交互)窗格中新案例标题下方的插入操作图标。
- 在出现的列表中选择显示/隐藏,然后定位错误消息小部件。 保持显示处于选中状态,然后单击确定。
注意:即使我们没有为这种情况设置条件,它的条件为ELSE IF true。如果第一种情况的条件不成立(如果一个或两个文本字段为空),则将触发此情况(也称为默认情况)。
预览互动
- 预览页面,然后单击注册按钮。 由于文本字段为空,因此将出现错误消息。
- 在文本字段之一中输入一些文本,然后再次单击注册按钮。由于文本字段之一仍为空白,因此错误消息仍应可见。
- 最后,在第二个文本字段中输入一些文本,然后再次单击注册按钮。 现在,您应该将注册成功的信息定向到第2页。
附加信息和提示
文本字段为焦点时隐藏错误消息
如果您希望用户单击文本字段之一时再次隐藏错误消息,请为每个文本字段在获得焦点事件下设置显示/隐藏操作。
关注慧聚IT微信公众号???,了解产品的最新动态及最新资讯。