当前位置: article > 正文

Axure元件的介绍&详细案例_axure元件库

作者：Gausst松鼠会 | 2024-04-21 01:05:59

踩

axure元件库

概述

在Axure RP中，元件是构建原型图的基础模块。将元件从元件库里拖拽到画布中，即可添加元件到你的原型图中。

软件自带了三个官方元件库，分别是默认元件库（Default）、流程元件库（Flow）和图标元件库（Icons）。

一.基本原件的使用

1.1 图片元件

在这里插入图片描述
操作：双击打开，从你的磁盘中选择图片，将图片载入到编辑区

1.2 热区元件

点击左下角区域的地方，把自己想使用的基本原件拖动到中间的区域即可：
在这里插入图片描述
操作：拖动并覆盖你要添加点击事件的地方即可，并且选择交互动作：

1.3 线段元件

在这里插入图片描述
水平线、垂直线。选择水平线或垂直线，可以作为表示页面一些区域分割时使用，比如在两块不同区域之间添加一条水平线，来明显的区分。

操作：将水平线或者垂直线拖拽到右侧画布中，然后按下 Ctrl 键，将鼠标置于线段末端，进行旋转。

二.表格元件

在这里插入图片描述

2.1 树

在这里插入图片描述
垂直方向的菜单，树形菜单可自定义节点前的图标，默认是三角形，Axure提供+/-和三角形两种图标，节点可以展开与折叠。

2.2 表格

在这里插入图片描述
将表格元件拖拽至右侧画布中，每个表格单元都可以编辑文本内容，如果想新增行/列的话，选中一行或一列，右击鼠标选择新增对应的行/列即可

2.3 水平菜单

在这里插入图片描述
常用于网址导航，右键是点击增加

2.4 垂直菜单

在这里插入图片描述
用法和水平菜单一样，也是右键增加，一般是后台系统左侧的菜单导航

三.表单元件的使用

3.1 文本框

在这里插入图片描述
用于输入文字内容，比较常用的就是登录功能中用户名和密码框

3.2 文本域

在这里插入图片描述
文本域，也叫多行文本框，用于大量文字段落的输入。

3.3 下拉框

在这里插入图片描述

用于多个选项的单项选择，往往也会有多个下拉

列表联合选择的出现。

操作：双击打开，往里面添加默认值即可，勾中的即为默认值

3.4 列表框

在这里插入图片描述
直接呈现选项的选择框，可以支持单选或多选。

操作：也是双击打开，与下拉框操作一样

3.5 复选框

在这里插入图片描述
用于一个或多个选项的选择，可以选中和取消选中状态。

3.6 单选按钮

在这里插入图片描述
用于多个选项的单项选择，有些时候可以用下拉列表替代。

四.登录界面实例展示

以下登录界面用了文本框，按钮，单选按钮等，还有全部文件库的小眼睛和用户图像
在这里插入图片描述

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/Gausst松鼠会/article/detail/460294