Axure元件库的使用

墨蓝 2024-02-05 14:53 135阅读 0赞

1.基本元件库

1.1Axure的画布范围

Axure是一个绘制项目原型图的软件,它里面的基本原件有:

f6d8154ca85c4ef28aacec881497a356.png

1.1元件的呈现范围

首先我们要了解基本元件的作用范围在哪里?

0fc7f11be2d54cafb20d36f6e519f4ec.png浏览效果:

6812daf6d8494202a03a8341d9a1bf73.png可以看出当我们的基本元件放在画布区域内是可以完全呈现出来的。

那么如果我们将元件放出去一部分可以呈现出来吗?

1a2920a8e9bd4b06a17faf2ca4c9e482.png

这里我将基本元件放出去了一部分

效果:

819826ac7ed84fceb44ba0f607979e26.png可以看出我们没有放出去的是呈现出来了的

46b97fca07bb44e4ac20d3674b081d43.png这里我将元件完完全全的放在画布之外出来。

效果:

3cf76d91cbbf40989645ae675064c064.png元件无法呈现出来,所以元件的作用范围在画布之内。

1.2基本元件的使用

首先我们选中我们要使用的元件然后进行拖动1ab12d0f00114c6c8f8ea4d1a6919f7b.png

这里的图片元件,拖动出来时时没有图片的,为默认状态,如果要呈现自己的图片,需要双击图片组件,然后选中要呈现的图片即可

如:在这里我从新添加了一个图片元件并双击他,然后打开本地文件,选中图片即可

4e154c75fac8472da159eb7ca64e9e6d.png

效果dfb19b9f833e419cb6c600a4c22d2413.png热区的使用:

da72beffb7de400887e5ad468e15615a.png在这里我在按钮添加了一个热区,可以看到添加热区的按钮呈现出一个黄色带⚡的图标

然后设置交互:bbbddb6285ec49d98ccdc32df03a1571.png在单击按钮时进行跳转到page1页面,效果如下:

745acd8a1b9845ea86756b6d1fdcbf2b.png不但能进行页面跳转同时可以在点击时出现弹窗:

1eedc947e0464f32b55872488c519829.png

效果如下:

6a0270ebcb4c40cbb9e82380acdd7452.png

2.表单元件

文本元件有

c1d46b298d80468faf24b8f325214e3e.png

表单元件的使用:

dff7d38fe32f483e87615a1608afcd68.png

下拉列表,列表框,需要添加数据,双击弹出

cf2bbee05f6d402aa0b7b781079f7771.png

选择编辑多项,一行一个数据,输入即可

效果:

ef1f58e186384a0d9214f811b31e6906.png

2.1.菜单|表格元件的使用

6cc1eddfd5074ffeaa13d5ae9ad68436.png

52804ca89cd340d4a6e3612dd405199d.png

效果:e42934cbd7ee42c398129beb714e5f1b.png

3.表单案例

设置一个表单案例:

88de312dbed543cb9d827e820564a7a7.png

首先以上的图片中我们分析以上有哪些元件

1.文本款

2.复选框

3.按钮

4.用户默认元件

5.锁元件

那么现在开始设置

6f17978f11644491a24327619664c1ac.png

设置矩形高和框为316 和 356,并填充颜色

拉两个文本框

并在提示设置请输入和用户名,和请输入用户密码

如图:8dd5bf21449b4d7f9efd0f8954f3928a.png

然后搜索在全部元件里,输入用户进行搜索

35839f54f1144d61b1387ced2c298019.png

添加复选框,修改文本为:记住我?

添加按钮。将文本改成登录

效果:

af9644b97b2e427283006c1e745072c1.png

发表评论

表情:
评论列表 (有 0 条评论,135人围观)

还没有评论,来说两句吧...

相关阅读

    相关 Axure使用

    1.Axure是什么??? > Axure是一款功能强大的原型设计工具,它可以让用户快速地创建交互式原型,并针对原型进行测试和改进。Axure的主要特点包括可定制的界面元