目录
一、元件基本介绍
1.1 概述
在Axure RP中,元件是构建原型图的基础模块。 将元件从元件库里拖拽到画布中,即可添加元件到你的原型图中。
1.2 元件操作
使用:如果想使用某个元件,我们只需要将它从元件库中拖入画布摆放即可。
(1)对齐:默认情况下,两个矩形元件并排摆放,中间的边框为两条边框的宽度,如果想保持一条边框的宽度,需要在【偏好设置】中,进行【元件对齐】的设置。
(2)旋转:元件的旋转可以通过按下<Ctrl>键的同时,拉动元件任意一个边界点来实现。旋转之后,可以通过右键菜单【变换形状】-【重置文本到 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 表单
四、案例
登录页面
登录页面详细元件组成:
元件图标:
个人 简介制作
这个人简介公有三个页面,运用了热区元件合在一起,其中还 包括了文本框,图片、下拉框、复选框、单选按钮等元件组合