【Axure】基础元件的使用

目录

一、元件基本介绍

        1.1 概述

        1.2 元件操作

二、基础元件的使用

        2.1 形状

        2.2 图片

        2.3 文本

        2.4 热区

        2.5 线段元件

三、表单型元件的使用

        3.1 文本框

        3.2 文本域

        3.3 下拉列表

        3.4 列表框

        3.5 单选按钮

        3.6 复选框

四、案例

        个人 简介制作

---

一、元件基本介绍

        1.1 概述

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

        1.2 元件操作

使用：如果想使用某个元件，我们只需要将它从元件库中拖入画布摆放即可。

（1）对齐：默认情况下，两个矩形元件并排摆放，中间的边框为两条边框的宽度，如果想保持一条边框的宽度，需要在【偏好设置】中，进行【元件对齐】的设置。

（2）旋转：元件的旋转可以通过按下键的同时，拉动元件任意一个边界点来实现。旋转之后，可以通过右键菜单【变换形状】-【重置文本到 0°】

（3）圆角：矩形元件可以编辑圆角，通过鼠标指针拖动矩形左上方的小三角形图标即可改变圆角的大小。

（4）改变形状：形状类元件都可以通过点击鼠标右键，在菜单中通过【选择形状】将当前形状改变为其他形状。

（5）改变尺寸：可以通过鼠标指针拖动元件的边界点任意改变

二、基础元件的使用

基本元件基本元件是由形状元件、图片元件、线段元件及中继器构成

制作原型时，可以用它来代替对一些没有交互或者交互比较简单容易说明的区域；也可以做成关闭按钮。

 

        2.1 形状

包括了矩形、圆形、矩形的应用比较广泛，它可以用来做很多的工作，比如作为页面的背景，只需要将矩形填充相应的颜色即可；还可以把他制作为按钮、选项卡，使用的时候调整矩形的形状或调整圆角即可。

（1）占位符：画低保真图的原型图，占位符在保真比较高的产品原型中作用不大。

（2）链接按钮：相当于一个链接；像平时我登录某些软件中国的忘记密码，跳转到另一个页面中

        2.2 图片

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

可以锁定宽高比例，这样调整宽高是成等比例的；

Shift+鼠标移动也是等比例调整；

        2.3 文本

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

        2.4 热区

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

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

热区的应用

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

2.跳转到层或区域，比如滑动网页时回到顶部（跳转）。

3.可以添加交互，比如翻看网页时，自动加载。

4.用作跳转，如果每个标题都需要添加一个跳转链接太繁琐，可以添加一个热区 ，通过热区来达到跳转。

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

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

        2.5 线段元件

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

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

三、表单型元件的使用

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

        3.1 文本框

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

点击文本框，再交互选中提示，在提示属性中输入你想提示的文字即可

效果图如下：

        3.2 文本域

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

        3.3 下拉列表

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

列表联合选择的出现。直接呈现选项的选择框，可以支持单选或多选。

增加第二项记得换行

效果图如下：

        3.4 列表框

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

效果图如下：

        3.5 单选按钮

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

效果图如下：

但是又一个缺点，多个单选放一起都可以选中，所以我们要设置一下；首先点击单选框，鼠标右键，选中指定单选按钮的组，然后弹出选项框，取个组名，继续把另一个同样操作，组名选中刚才那个，在同一个选项组的单选按钮就只能选择一个，这样就可以多选一了。

如图：

        3.6 复选框

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

效果图如下:

          3.7 表单

  

四、案例

        登录页面

登录页面详细元件组成：

元件图标：

个人 简介制作 

这个人简介公有三个页面，运用了热区元件合在一起，其中还 包括了文本框，图片、下拉框、复选框、单选按钮等元件组合