《Axure RP 9网站与App产品交互设计实践》课件 4.1Axure表单元件

Axure表单元件技术型文科人才系列课程主讲人：文学与传媒学院新媒体产品设计与项目管理本章案例：制作“百度注册界面”，效果如图所示。

回顾:矩形、图片元件1.设置页面居中；添加页面背景填充（图片）;知识点：页面属性2.设置表单背景;知识点：矩形的应用拓展：设置文本框的边框为浅蓝色，圆角半径为15px知识点：添加形状、钢笔工具、更换形状、改变形状（翻转、合并、去除、相交、排除）3.添加图片LOGO.知识点：添加图片、分割图片、裁剪图片、变换图片（翻转、优化、固定边角（圆角））3

实战——制作“仿百度注册原型”1

Axure表单元件2

课堂练习4

小结回顾：

Axure基本元件AxureRP8原型设计软件里默认内置了基本元件有20种，表单类元件有7种，菜单与表格元件有4种，标记元件有9种。

元件库1表单类元件的使用表单类元件是用在设计表单时经常会用到的元件，如登录、注册表单等。

表单类元件包括文本框、多行文本框、下拉列表框、列表框、复选框、单选按

钮、提交按钮。

表单型元件案例：制作“百度注册界面”，效果如图所示。

1.文本框元件和多行文本框元件的使用文本框元件，经常用于收集表单内容，如单行输入框；多行文本框元件，用于多行文本的输入。

文本框和多行文本框元件

在登录网站的时候，经常会在输入框里看到“请输入用户名、手机号或者邮箱”，文本框元件同样可以填写提示信息。

在文本框输入内容时，提示文字会自然消失。在检视区域的属性选项卡里，可以设置文本框的输入类型，如文本（Text）、密码、邮箱、Number等。

文本框类型

选择文本（Text）类型可以设置提示文字的样式，输入文字：“请输入用户名”，字体颜色为浅灰色（CCCCCC），单击“提示样式”来设置。

提示文字

在属性选项卡还可以设置文本框元件文字输入的最大长度，同时也可以隐藏边框、设置为只读或者禁用。

文本框属性

多行文本框元件的右侧属性选项卡里同样可以设置提示文字、隐藏边框、只读和禁用，但是不能设置文本框的类型和最大长度。

多行文本框元件设置2.下拉列表框元件和列表框元件的使用

下拉列表框元件，是经常用到的下拉菜单，只能显示一个下拉菜单选项，而列表框元件可以显示多个下拉菜单选项。

如果页面区域有限，可以使用下拉列表框元件，如果页面区域比较大，只放置一个下拉列表框，感觉整个页面布局不是很美观，使用列表框元件更合适。

下拉列表框元件和列表框元件实战演练1. 拖曳一个下拉列表框元件，双击这个元件，弹出编辑选项对话框，单击加号可以新增一个菜单选项，单击菜单选项可以对它重新命名，命名为“北京”，再新增一个下拉选项，命名为“上海”。

编辑列表选项对话框单击向上箭头和向下箭头，调整下拉菜单选项的顺序，单击红色差号，可以删除选项。单击“添加多个”按钮，弹出添加多个对话框，每行代表一个下拉菜单选项。

调整选项顺序和删除

添加多个选项对话框如果想把某个选项作为默认显示的选项，只需要勾选其前面的复选框。列表框的操作方式和下拉列表框的操作方式一样，但是它允许选择多个默认选项。

设置默认选项列表框设置默认选项3.复选框元件和单选按钮元件的使用

如果允许选择多个选项，可以使用复选框元件，如果每次只能选中一个，适合使用单选按钮元件。

复选框和单选按钮元件4.提交按钮元件的使用提交按钮元件经常被用来作为操作按钮，如注册、登录、保存、取消按钮等。

课堂练习实战1——制作“仿百度注册原型”1.新建项目l新建项目，另存为“百度.rp”;l重命名页面“page1”为“注册”。2.在页面中拖入文本元件。依次拖入一级标题和文本标签，双击画布上的元件，修改元件文字。3.设置文本样式、对齐和分布。框选所有文本元件，点击上方样式面板的“左”对齐和“垂直”分布，使其在画布上平均排列。选择文本“登录”，设置文本颜色为蓝色.4.拖入文本框元件。从上面标尺拖入3条水平页面辅助线，分别到“用户名”、“手机号”、“密码”文本元件处；从左边标尺拖入一条垂直页面辅助线，距离文本元件20px；勾选“视图”→“标尺，网格和辅助线”→“对齐辅助线”命令；从表单元件列表中，拖入3个文本框元件到相应位置。5.设置文本框的提示属性点开“交互”面板的提示属性，设置用户名文本框的类型为“文本”，提示文字为“请设置用户名”，并设置“获取焦点”之后隐藏该提示文字；设置手机号文本框的类型为“电话号码”，提示文字为“可用于登录和找回密码”，并设置“获取焦点”之后隐藏该提示文字；设置密码文本框的类型为“密码”，提示文字为“请设置登录密码”，并设置“获取焦点”之后隐藏该提示文字。6.拖入按钮元件拖入1个主要按钮到页面相应位置；双击按钮元件，修改按钮上的文字为“注册”；选择按钮上的文本，修改样式为：微软雅黑、加粗、16px；修改按钮的填充颜色为浅蓝色；修改按钮的圆角为20px。7.拖入复选框从表单元件列表中拖入1个复选框到页面相应位置，并修改文字。修改文字的颜色。8.预览设置点击快捷功能中的“预览”按钮可以预览页面效果。预览可以选择不同的设置，在“发布（Publish）”菜单中的“预览选项”里设置预览的浏览器等。

实战2——制作“仿百度注册原型”1）打开项目2）设置页面样式（设置“页面对齐（PageAlign）”方式为：居中；设置“填充（Fill）”为“图片”，导入背景图片）3）添加矩形背景（置于表单底部，“填充”颜色为白色，透明度为90%，圆角为12px）。拓展：设置文本框的边框