Axure元件

目录

一.元件基本介绍

     a.概述

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

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

              b.元件操作

     二.基本元件的使用

               a.形状

制作原型时，可以用它来代替对一些没有交互或者交互比较简单容易说明的区域；也可以做成关闭按钮。占位符在保真比较高的产品原型中作用不大。

• 背景图

• 各种个性形状

• 表格

• 按钮

• 导航操作

• .......

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

               b.图片

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

• LOGO

• 轮播

• ........

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

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

               c.文本

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

               d.热区

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

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

热区的应用

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

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

               e.线段文件

      三.表单型元件使用

         表单是需要用户填写的，所以表单元件都是用于获取用户输入数据的元件。

               a.文本框

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

               b.文本域

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

               c.下拉列表

用于多个选项的单项选择，往往也会有多个下拉列表联合选择的出现。

               d.列表框

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

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

               e.单选按钮

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

               f.复选框

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

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

                a.案例（登录界面）

                        第一步 放一个矩形元件                                

第二步 放一个二级标题

第三步 放两个表单元件文本框

第四步  添加文本框提示文本（交互⇢提示⇢提示属性⇢提示文本）

第五步 在元件库中找一个用户的图标

当然也可以去网上找 ，比如阿里巴巴矢量iconfont里面找

​

第五步 同理找一个密码的图标

​

第六步 找一个元件复选框

​

第七步 在元件中找到两个按钮并添加

第八步 调整样式

最后 

如果想借鉴一下其它版本的颜色的话，可以进行一下操作

完整效果图

---

感谢您阅读本博客并与我一同探索Axure元件的奇妙世界。我们回顾了一些关键的概念和技巧，希望您已经从中获得了宝贵的知识和见解。

Axure元件提供了许多有用的功能和工具，可以帮助您设计和交互原型。我鼓励您继续思考如何在不同的场景中应用这些概念，并深入研究更多关于Axure元件的资源和工具。

如果您有任何问题、建议或意见，都可以与我联系。我很乐意与您交流和探讨，我的电子邮件地址是3587100083@qq.com。

如果您想继续了解关于Axure元件以及其他设计相关的内容，请订阅我的博客或关注我在社交媒体上的账号，以获取更多更新和有用的内容。

再次感谢您的阅读和支持！期待与您在下一个话题上再见！