Axure RP 8交互原型设计案例教程第10章 表单

图 10-4 上传文件类型的文本框
Axure RP 8 交互原型设计案例教程
图10-5 时间类型的文本框
第10章
表单
Байду номын сангаас
10.2 管理表单
10.2.1 文本框
2. 文本框其他属性 【提示文字】载入页面时，在文本框中默认以灰色显示的提示文字，如图10-6 所示。
图 10-6 提示文本
Axure RP 8 交互原型设计案例教程
Axure RP 8 交互原型设计案例教程
第10章
表单
10.2 管理表单
10.2.1 文本框
【查找】相当于搜索功能。例如，京东网上的搜索文本框，如图10-3 所示。
图 10-3 京东网上的搜索文本框
Axure RP 8 交互原型设计案例教程
第10章
表单
10.2 管理表单
10.2.1 文本框
【文件】相当于发送邮件时的上传附件功能，如图10-4 所示。 【日期】可以输入日期，也可以单击右侧的按钮添加日期，或者单击最右侧的按钮，从弹出 的日期列表中选择日期。 【月份】与日期相似，只是缺少了天数，只有年和月。 【时间】可以直接输入小时数和分钟数，也可以单击右侧的按钮输入小时数和分钟数，如图 10-5所示。
Axure RP 8 交互原型设计案例教程
第10章
表单
10.2 管理表单
10.2.5 复选框
该元件主要用于从多个项目中选择一个或者多个选项，与列表框的功能有些类似，平时我们 在网上遇到的多项选择题主要就是用这种元件制作的。在【属性】子面板中，可以设置复选框的 相关属性。例如：勾选“选中”选项，可以使复选框在页面预览时自动处于选中状态。 默认状态下，复选框位于文本的左侧位置，使用【属性】子面板的“对齐按钮”选项，可以 让复选框放置在文本的右侧。
Axure RP 8 交互原型设计案例教程
第10章
表单
10.2 管理表单
10.2.3 下拉列表框
图 10-12 添加列表项
图10-13 同时添加多个列表项
Axure RP 8 交互原型设计案例教程
第10章
表单
10.2 管理表单
10.2.3 下拉列表框
在【编辑列表选项】对话框的顶部还有一排针对列表项的按钮，分别是【添加】、【上移】、 【下移】、【清除】、【清除全部】，如图10-14 所示。
图 10-10 下拉列表
Axure RP 8 交互原型设计案例教程
图10-11 【列表项】超链接
第10章
表单
10.2 管理表单
10.2.3 下拉列表框
在打开的【编辑列表选项】对话框中单击【添加】按钮，即可添加一个列表项，如图10-12 所示。如果要同时添加多个列表项，则可以单击【添加多个】按钮，在弹出的对话框中输入 一个列表项后，按回车键换行再输入第二个列表项，重复此操作就可以添加多个列表项了，如图 10-13所示。
Axure RP 8 交互原型 设计案例教程
第10章
表单
第10章
表单
10.1 表单基础
10.1.1 认识表单元件
在默认的元件库中专门有一类表单元件，如图10-1 所示。
图 10-1 表单元件库
Axure RP 8 交互原型设计案例教程
第10章
表单
10.1 表单基础
10.1.2 创建表单元件
表单元件与其他元件的创建方法相同，只要用鼠标将相应的表单元件拖曳到页面中即可。
图 10-8 多行文本框
图10-9 多行文本框 用于搜集建议和意见
Axure RP 8 交互原型设计案例教程
第10章
表单
10.2 管理表单
10.2.3 下拉列表框
下拉列表框从外观上看有点像文本框，但是下拉列表框只能允许用户从列表中选择某个选项， 而无法填写信息。该元件一般用于选择某项信息。例如，选择用户的籍贯或者出生日期等，如图 10-10所示。向下拉列表框中添加数据的方法是：选择下拉列表框后，在【属性】子面板中单击 “列表项”超链接，如图10-11 所示。
图 10-14 编辑列表选项按钮
Axure RP 8 交互原型设计案例教程
第10章
表单
10.2 管理表单
10.2.4 列表框
列表框与下拉列表框的区别在于：列表框是通过滚动条来显示隐藏的选项的，而且允许用户 同时选择多个选项。向列表框中添加数据的方法与下拉列表框相同：选择列表框后，在【属性】 子面板中单击“列表项”超链接，在打开的【编辑列表选项】对话框中单击【添加】按钮，即可 添加一个列表项，单击对话框中的【添加多个】按钮可以同时输入多个选项。 另外，在【编辑列表选项】对话框中，还可以设置默认选中项，如果允许用户选择列表中的 多个选项，则只要勾选底部的【允许选中多个选项】即可。
Axure RP 8 交互原型设计案例教程
第10章
表单
10.2 管理表单
10.2.6 单选按钮
图 10-15 指定单选按钮组名称
Axure RP 8 交互原型设计案例教程
第10章
表单
10.2 管理表单
10.2.1 文本框
【提示样式】如果要改变默认的灰色提示文本，则可以单击“提示样式”超链接进行设置， 如图10-7 所示。
图 10-7 提示样式选项
Axure RP 8 交互原型设计案例教程
第10章
表单
10.2 管理表单
10.2.2 多行文本框
多行文本框与文本框最大的不同在于：多行文本框可以输入多行文字，当在浏览器中输入的 文本超过多行文本框的宽度时，文字会自动换行；如果按回车键，则可以重新开始一个新的段落， 如图10-8 所示。多行文本框通常在网络调查时用于搜集一些建议和意见，如图10-9 所示。
Axure RP 8 交互原型设计案例教程
第10章
表单
10.2 管理表单
10.2.6 单选按钮
默认状态下，在页面中创建了多个单选按钮后，预览网页，会发现虽然是单选按钮，但仍然 可以选择多个选项。 这是什么原因呢？原来，如果要实现一组单选按钮的单选效果，必须将一组单选按钮都设置 为同一组。具体操作方法是：选择同一组的所有单选按钮，然后在【属性】子面板中输入单选按 钮组的名称，如图10-15 所示。
Axure RP 8 交互原型设计案例教程
第10章
表单
10.2 管理表单
10.2.1 文本框
文本框主要用于填写文本信息，另外它还可以用于搜索文字和上传文件等。 1. 文本框类型 在页面中选择文本框元件后，在右侧的【属性】子面板中可以看到文本框的类型，如图10-2 所示。
图10-2 数字类型的文本框