Axure元件基本介绍进阶

1.Axure元件基本介绍

1.在 Axure 中,元件是构建原型的基本构成单元,能够帮助设计师快速创建、重复使用和管理设计元素。以下是 Axure 中元件的基本介绍:

1.基本元件:

文本框(Text Field): 用于显示文本内容,可以设置文本样式、字体、大小和对齐方式等。
按钮(Button): 可交互的控件,常用于触发特定操作或转换页面状态。
形状(Shape): 包括矩形、圆形、箭头等,可用于装饰、分隔或突出显示特定区域。
图像(Image): 插入图片文件,可以是 UI 元素、图标或任何需要展示的图形。
容器元件:

面板(Panel): 用于组织和包含其他元素,可以模拟页面结构或创建复杂的交互区域。
动态面板(Dynamic Panel): 可以切换状态和显示不同内容的容器,常用于制作可交互的组件和动画效果。
数据元件:

表格(Table): 用于展示和管理数据,可以模拟实际的表格布局。
列表(List): 显示项目列表或数据集合,支持多种排列方式和交互操作。
交互元件:

链接区域(Hotspot): 透明的热点区域,用于创建可点击的区域而不显示实际元素。
交互式组件(Interactive Widgets): 如下拉菜单、滑块、日期选择器等,可以模拟真实应用中的交互效果。
复合元件:

组合(Widget Groups): 将多个元件组合成一个单独的元素,便于整体管理和重复使用。
Axure 的元件库丰富多样,设计者可以利用这些元件快速搭建原型,并通过状态、交互动作等功能模拟真实应用的行为和外观。元件的组合和定制使得设计更加灵活,同时提高了设计效率。

2.基本元件的使用

一.【举例说明】积木,通过积木可以拼接出各种模型,元件亦是如此,可以通过元件的组合可以实现我们各种需求。

基本元件基本元件是由形状元件、图片元件、线段元件及中继器构成。
在这里插入图片描述

1.形状

包括了矩形、圆形、矩形的应用比较广泛,它可以用来做很多的工作,比如作为页面的背景,只需要将矩形填充相应的颜色即可;还可以把他制作为按钮、选项卡,使用的时候调整矩形的形状或调整圆角即可。
在这里插入图片描述
制作原型时,可以用它来代替对一些没有交互或者交互比较简单容易说明的区域;也可以做成关闭按钮。占位符在保真比较高的产品原型中作用不大。

  • 背景图
  • 各种个性形状
  • 表格
  • 按钮
  • 导航操作

我们还可以通过在元件上点击鼠标右键,通过菜单中的【选择形状】,让矩形变为圆形或占位符。 另外,形状元件还可以通过上下文菜单【变换形状】选项中的【转换为图片】,将形状元件转换为图片元件。 在Axure RP 9中,我们还可以为形状添加背景图片。形状元件一般用于页面中的背景、边框、按钮、分割线等。

2.图片

在这里插入图片描述
使用方法,图片元件的操作比较简单,可以通过双击选择本地磁盘中图片,将图片载入到编辑区,axure会自动提示将大图片进行优化,以避免原型文件过大。

如果需要批量添加图片,可以通过多选本地磁盘中的图片素材文件并拖入的方式添加到 Axure RP 9 的画布中。

【提示】图片可以添加文字内容,需要在元件上点击鼠标右键,从菜单中选择【编辑文本】进入文字编辑状态。

3.文本

文本元件包括文本标签、文本段落、一级标题、二级标题和三级标题,用来表示页面中的一些文字内容。
实际上文本元件也是形状元件,给文本元件添加边框,就变成了矩形元件。
在这里插入图片描述

4.热区

热区是一个透明的元件,通过属性设置就可实现类似超链接的功能。

常用操作:比如在一张图片中的两个位置上添加点击跳转的效果,就可以在这两个位置上放置两个热区,然后为热区添加点击跳转的交互。

热区的应用

1.可以添加成链接,用作链接跳转,在一定程度上减少工作量。

2.跳转到层或区域,比如滑动网页时回到顶部(跳转)。
3.可以添加交互,比如翻看网页时,自动加载。
4.用作跳转,如果每个标题都需要添加一个跳转链接太繁琐,可以添加一个热区 ,通过热区来达到跳转。

新手在初期学习使用axure软件时,仅需要了解热区功能及应用

5.线段元件

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

使用方法:将水平线或者垂直线拖拽到右侧画布中,然后按下 Ctrl 键,将鼠标置于线段末端,进行旋转。

6.表单型元件的使用

表单是需要用户填写的,所以表单元件都是用于获取用户输入数据的元件。
在这里插入图片描述

文本框

用于输入一行文字内容。 比较常见的使用场景是用户登录功能中用户名与密码的输入框。

7.文本域

​ 文本域,也叫多行文本框,用于大量文字段落的输入。

8.下拉列表

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

列表联合选择的出现。

9.列表框

直接呈现选项的选择框,可以支持单选或多选。

注意:列表框元件与文本域元件在画布中外观一样,就像女装大佬,虽然长得像女人,但是功能不一样。在交互功能面板中会显示元件的类型,注意分辨

10.单选按钮

用于多个选项的单项选择,有些时候可以用下拉列表替代。

11.复选框

用于一个或多个选项的选择,可以选中和取消选中状态。

12.菜单与表格元件的使用

菜单和表格元件都是绘制线框图的元件,方便易用。但是,因为样式编辑受限,所以高保真原型中很少使用。这些元件在画布中的很多操作基本通过右键菜单中完成,例如:行、列、节点、菜单项的添加、删除、移动等操作。

3. 使用基本元件完成登录案列

在这里插入图片描述
示列
在这里插入图片描述

4. 使用基本元件完成个人简历案列

在这里插入图片描述
运行样子
在这里插入图片描述

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值