[Axure6.5原型制作]3.元件/部件

 

部件交互设置的要素

 

部件/元件介绍（共21个）

一、根据事件类型可将部件分为以下几类

1．有鼠标移入移出事件的部件为图片、占位符、矩形、圆角矩形、文本面板、图片热区（静态部件）

2.有焦点获取、失去的部件为文本框、多行文本框、下拉列表、列表框、复选框、单选按钮（文字输入类部件，有交互属性）

3.只有鼠标点击事件的部件为水平线/垂直线、按钮、表格、纵向/横向/树型菜单

4.无事件的部件为内部框架

5.针对动态面板的事件：动态面板

注：动态面板本身没有点击事件，但其下的状态面板有点击事件

 

二、各部件介绍如下

1.图片

A.使用方法：

双击图片部件，加载图片，若选择是--自动调整为图片尺寸，则部件为图片加载大小，否则是部件大小

 

注：Ctrl +鼠标  可旋转图片

B.常见用途：

图片按钮：可当做按钮使用，填充图片后添加文字即可，此后当做一个事件

触发事件的正常图片：还可当做正常的图片，当鼠标划过时触发其他事件

C.触发事件

鼠标点击时

鼠标移入时

鼠标移出时

 

2.文本面板

A． 使用方法

双击文本面板部件，填充文字，也可称为标签

B． 常见用途

用于文本框后的补充说明、文字链接、标签

C.触发事件

鼠标点击时

鼠标移入时

鼠标移出时

 

3.矩形/圆角矩形

A．使用方法

拉大成为背景，缩小变为圆角矩形（右键编辑按钮形状中有选择图形形状）

 

B.常见用途

大的背景位、圆角小按钮、倒三角水滴、选项卡

C.触发事件

鼠标点击时

鼠标移入时

鼠标移出时

 

4.占位符

A．使用方法

拉伸、缩小

B.常见用途

广告位、大量文字编辑区域、关闭按钮（缩小占位符）

C.触发事件

鼠标点击时

鼠标移入时

鼠标移出时

 

5.水平线/垂直线

A．使用方法

部件属性中编辑样式，可以获得各种箭头;调节角度可变成斜线

 

 

B.常见用途

用作箭头、分割线（分割上下两部分）

C.触发事件

鼠标点击事件

 

6.图片热区

A．使用方法

配合按钮使用，选择“部件和变量”滚动窗口到图片热区的动作即可实现,滚动到左边可以设置x=0，滚动到顶部设置y=0

B.常见用途

用于长页面的一键滚动至顶部功能

C.触发事件

鼠标点击时

鼠标移入时

鼠标移出时

 

7.文本框/多行文本编辑框

A．使用方法

输入文字/输入多行文本区域

B.常见用途

用于文字填写，常常将文本框中设置默认灰色提示文字便于提醒

C.触发事件

鼠标点击时

键盘输入时

获取焦点时

失去焦点时

 

8.下拉框/列表框/复选框

A．使用方法

下拉框：双击下拉框，可提前填写多个值形成下拉列表，并可选择一个作为默认选中，

如”男”

 

 

列表框：双击编辑列表值，显示多个，可默认选中一个

 

复选框：编辑输入文字处即可，可默认选择前面的勾选

 

B.常见用途

下拉框，用于有多个项目但只能选中一个的筛选

列表框，用于项目不多但只能选中一个的筛选

复选框可用于注册时默认同意网站协议的勾选

C.触发事件

点击时

选项改变时

获取焦点时

失去焦点时

注：复选框无选项改变时事件

 

9.单选按钮

A．使用方法

分别编辑两个单选按钮，通过默认选中一个单选，再组合成一组单选按钮组来实现性别的单选，生成原型即可后即可看到效果

 

 

B.常见用途

单选一组单选按钮中的一个，可在右键选中‘编辑单选按钮’—>‘指定单选按钮组’便可实现

C.触发事件

点击时

获取焦点时

失去焦点时

 

10.按钮

可以使用矩形、图片等部件实现，效果相同，它只有点击时这个事件

 

11.内部框架

A.使用方法

可编辑内部框架设置其隐藏边框以及不显示水平和垂直滚动条

 

 

B.常见用途

场景：应用于移动APP制作中

用途一：链接到其他页面，显示其他页面信息

主页导入手机主屏（主屏为动态面板），双击动态面板链接到页面1

 

在页面一中绘制一个矩形，长宽度设置等于动态面板的长宽度，x、y则设置为0，背景设置成灰色

生成原型效果如下

 

 

用途二：链接到外部网站，如在手机主屏上显示百度首页

外部链接URL一定要添加http://  ，否则不能解析域名

 

生成原型效果如下

 

 

C.触发事件

无触发事件

 

12.表格

A.使用方法

表格整体本身没有事件，但每个单元格对应着点击事件

鼠标右键可操作表格的增删改

B.常见用途

每个单元格都有一个点击事件，用于应用时的数据显示

C.触发事件

鼠标点击时

 

13.纵向/横向/树型菜单

A.使用方法

鼠标右键可操作菜单的增删

B.常见用途

都是用于菜单栏的伸缩展示

其中树形菜单可收缩，纵向/横向菜单需要点击时才显示子菜单

C.触发事件

横向/纵向菜单整体本身没有点击事件，但每个小菜单则对应一个鼠标点击事件

树型菜单有鼠标点击事件

 

14.动态面板--动态面板相对于其它部件来说是一个容器，本身是透明的

A.使用方法

1>双击动态面板，可以添加、删除动态面板的状态管理，而每个面板状态也是一个容器

 

注：主面板中默认呈现的容器是第一个面板状态，如此处主面板中将显示面板状态2的容器

2>动态面板的获得即可以通过编辑面板状态实现，还可以通过编辑多个部件转换成动态面板

 

转换为动态面板，只是在当前位置产生了一个动态面板，原有待转换的部件为此动态面板下的第一个状态面板

3>将动态面板设置隐藏

4>将动态面板固定到浏览器

 

B.常见用途

1>可包含多个状态（相当于页面），默认只显示第一个状态

2>可通过编辑多个状态来实现动态面板，或者通过将所需的部件转换为动态面板

3>设置动态面板为隐藏状态实现面板状态的切换

4>使用动态面板的固定到浏览器功能可以实现条幅等随着浏览器的相对固定滚动

5>动态面板的拖动事件，可用于移动端的习惯

C.触发事件

移动动态面板时

动态面板显示时/隐藏时

动态面板状态改变时

开始拖动/拖动/结束拖动动态面板时

向左/向右滑动时

 注：

动态面板整体是没有点击事件的，但是动态面板下的每个状态面板是有点击事件的

动态面板在转换状态时可以直接将隐藏的面板变成显示的，不用添加显示的事件