0
点赞
收藏
分享

微信扫一扫

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

前言:在本章中,你将学会如何使用Axure9.0常见控件的使用,帮助你快速创建理想中的原型,这可能也是你在网上能找到的最详细的Axure教程了。

今日职言:一个人若没有深厚的知识积累,就无法轻易说出自己到底喜欢什么。

基础组件的使用

一、矩形

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

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

二、⽂字

Axure实战02:Axure9.0常见控件的使用_下载地址_02

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

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

三、按钮

Axure实战02:Axure9.0常见控件的使用_下载地址_04

四、图⽚

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

Axure实战02:Axure9.0常见控件的使用_下载地址_05

2、调整其位置和⼤⼩;

Axure实战02:Axure9.0常见控件的使用_数据_06

3、图⽚控件能做什么?

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

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

五、热区

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

Axure实战02:Axure9.0常见控件的使用_产品经理_08

六、表格

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

Axure实战02:Axure9.0常见控件的使用_产品经理_09

Axure实战02:Axure9.0常见控件的使用_下载地址_10

七、动态⾯板

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

Axure实战02:Axure9.0常见控件的使用_产品经理_11

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

八、内联框架

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

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

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

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

Axure实战02:Axure9.0常见控件的使用_下载地址_14

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

Axure实战02:Axure9.0常见控件的使用_下载地址_16

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

Axure实战02:Axure9.0常见控件的使用_下载地址_17

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

九、中继器

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

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

Axure实战02:Axure9.0常见控件的使用_产品经理_18

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

Axure实战02:Axure9.0常见控件的使用_数据_19

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

Axure实战02:Axure9.0常见控件的使用_数据_20

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

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

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

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

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

Axure实战02:Axure9.0常见控件的使用_数据_23

Axure实战02:Axure9.0常见控件的使用_下载地址_24

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

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

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

但还没有结束。

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

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

组件库的使⽤

1、组件库推荐:

ElementUI下载地址

Axure实战02:Axure9.0常见控件的使用_数据_26

AntDesign下载地址

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

ArcoDesign下载地址

Axure实战02:Axure9.0常见控件的使用_下载地址_28

TDesign下载地址

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

2、组件库使用

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

Axure实战02:Axure9.0常见控件的使用_下载地址_30

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

快来试试吧!

如果本专栏对你有帮助,不妨点赞、关注、评论~

举报

相关推荐

0 条评论