Axure实战02:Axure9.0常见控件的使用

简介: Axure实战02:Axure9.0常见控件的使用

基础组件的使用

一、矩形


矩形常⽤于背景卡⽚的制作、⻚⾯框架搭建,类似开发编程⽤的view,可作为其他元件或者⻚⾯的背景板使⽤;可对矩形控件设置填充颜⾊、圆⻆、线段可⻅性、线段宽度等进⾏设置;

image.png

二、⽂字


image.png

在原型设计中,为保证系统设计的⼀致性,在所有的⻚⾯和模块都需要采⽤统⼀的⽂字样式;⽂字的设置通常按⾊号、字号、字间距、加粗等参数设置,常⽤的⽂字参数设置如下:

image.png

三、按钮


image.png

四、图⽚


1、在元件库选择【图⽚】,按住⿏标左键拖⼊到⻚⾯当中;

image.png

2、调整其位置和⼤⼩;

image.png

3、图⽚控件能做什么?

背景、头像、图标......

image.png

五、热区


热区是⼀个在⻚⾯上看不⻅控件,⼀般⽤于当点击区域需要扩⼤时,覆盖在原元件点击区域上作为可点击区域,⽐如:图标按钮;

image.png

六、表格


表格控件是B端管理后台常⽤的组件,常⽤于多条⽬的信息⻚⾯,可对表格⼤⼩、线段、表格内⽂字、填充颜⾊进⾏设置;

image.png

image.png

七、动态⾯板


动态⾯板是Axure中使⽤频率最⾼的元件之⼀,动态⾯板专⻔⽤于设计原型中的动态功能,它可以包含⼀个或多个状态,每个状态就是⼀个⻚⾯,在这⾥可以任意编辑,通过控制状态的切换或显示/隐藏来实现⼀些我们常⻅的交互效果。

image.png

八、内联框架


内联框架是在单个⻚⾯中引⽤另⼀个⻚⾯,或者内部展示⼀个⽹⻚;

1、拖⼊⼀个内联框架组件;

image.png

2、点击选中内联框架组件,点击右侧【交互⾯板】,点击【新建交互】,点击【载⼊时】,点击【打开链接】;

image.png

image.png

3、可选择框架内显示⼀个⻚⾯,也可以显示【特定链接】,我们选择【链接到URL或⽂件路径,这⾥以我的掘金首页 为例:


image.png

4、点击预览,查看效果;

九、中继器


中继器是Axure最复杂的、学习成本最⾼的组件,没有之⼀。主要⽤途就是⽤来加载数据的,使⽤场景也有很多,最常⻅的是中继器做表格。

1、拖⼊1个中继器组件;

image.png

2、双击【中继器元件】,进⼊到编辑⻚⾯,复制多⼀个矩形,给矩形重命名,⼀个叫name,⼀个叫phone;

image.png

3、选中矩形,选择【样式⾯板】,更改数据标题,与原先我们的组件命名保存⼀致,另外填写⼀些虚拟数据;

image.png

4、建⽴关联关系,选中组件,点击【交互】,在【每项加载】下选择【添加动作】,选择【设置⽂本】,选择【phone】元件(刚刚我们命名好的),值为【[[item.phone]]】;

特别说明:中继器的关联关系是,中继器⾥⾯的组件,对应中继器的【数据】;

⽐如:组件叫【phone】的矩形,对应中继器的数据的列【phone】的值,⽤【item.X】来定位;

image.png

image.png

6、若多设置⼏个对应关系,即可完成中继器搭建表格;

image.png

至此,Axure9.0常用控件的使用就告一段落了。

但还没有结束。

我们发现如果原型的每一个组件都要自己设计,很是耗时耗力,那么有没有现成的组件让我们调用呢?

有的,目前一些大厂都推出了自家的标准组件库,我们只只需要引用标准的组件库就可以快速生成原型了。


组件库的使⽤


1、组件库推荐:

ElementUI下载地址

image.png

AntDesign下载地址

image.png

ArcoDesign下载地址

image.png

TDesign下载地址

image.png

2、组件库使用

点击添加(引⽤)组件库;

image.png

有了组件库后,我们就可以快速拖动组件库中的组件生成我们想要的原型了!

快来试试吧!

相关文章
|
2月前
|
数据处理 UED
Axure中继器教程及案例详解
Axure RP 是一款强大的原型设计工具,广泛应用于产品设计、UI/UX 设计及交互设计中。中继器(Repeater)作为 Axure 中的一个重要元件,以其强大的数据处理和动态交互能力,成为设计师们不可或缺的工具。本文将从中继器基础、进阶、高级应用,以及分页控制、合计、列表拖动、列表滑动删除、表内修改等方面,详细介绍中继器的使用方法和案例。
Axure中继器教程及案例详解
|
3月前
Axure 自定义元件库
Axure 自定义元件库
113 0
Axure 自定义元件库
|
3月前
Axure 小技巧:翻滚吧页面
Axure 小技巧:翻滚吧页面
36 6
|
3月前
|
UED
Axure的小技巧,你知道多少?
Axure的小技巧,你知道多少?
60 2
|
6月前
|
前端开发 UED
产品入门第四讲:Axure动态面板
产品入门第四讲:Axure动态面板
|
6月前
|
人工智能 程序员
01-Axure9入门培训
01-Axure9入门培训
|
iOS开发 MacOS Windows
Axure快速入门(03) - 丰富的元件库
Axure快速入门(03) - 丰富的元件库
130 0
Axure快速入门(01) - 面板介绍
Axure快速入门(01) - 面板介绍
72 0
Axure快速入门(12) -轮播图案例
Axure快速入门(12) -轮播图案例
48 0