Axure-元件&流程图 - 指南

Axure-02 线框图元件应用

目标

1. 元件主要介绍

2. 基础元件的采用

3. 表单型元件的使用

4. 菜单与表格元件的利用

5. 案例：个人简历表

元件基本介绍

概述

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

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

元件操作

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

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

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

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

• 改变形状：形状类元件都行凭借点击鼠标右键，在菜单中通过【选择形状】将当前形状改变为其他形状。

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

• 元件的尺寸；也可以按住<Shift>不放，同时鼠标指针拖动元件边界点等比改变元件的尺寸。

• 复制元件：通过鼠标右键菜单的【复制】与【粘贴】，或者利用通用快捷键<Ctrl+C>键与<Ctrl+V>键可以完成画布间或者软件间的复制粘贴操控；同一画布中，可能通过<Ctrl+D>键进行复制；或者，按住<Ctrl>键不放，拖动元件到新的位置松开，完成复制与摆放的处理。

• 编辑文字：部分元件许可添加文字内容。在未开启单键快捷键功能时，直接输入即可替换当前文字内容；开启单键快捷键功能时，需要双击元件或者在元件上点击按下回车键进入文字编辑状态。

基本元件的使用

【举例说明】积木，通过积木能够拼接出各种模型，元件亦是如此，可以通过元件的组合可以实现大家各种需求。

 

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

 

形状

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

 

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

• 背景图

• 各种个性形状

• 表格

• 按钮

• 导航操作

• .......

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

图片

 

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

• LOGO

• 轮播

• ........

如果应该批量添加图片，能够通过多选本地磁盘中的图片素材文档并拖入的方式添加到 Axure RP 9 的画布中。

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

文本

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

热区

 

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

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

热区的应用

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

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

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

线段元件

 

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

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

表单型元件的运用

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

 

文本框

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

文本域

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

下拉列表

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

列表联合选择的出现。

列表框

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

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

单选按钮

通过用于多个选项的单项选择，有些时候能够用下拉列表替代。

复选框

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

菜单与表格元件的启用

菜单和表格元件都是绘制线框图的元件，方便易用。可是，因为样式编辑受限，所以高保真原型中很少使用。这些元件在画布中的很多操作基本经过右键菜单中达成，例如：行、列、节点、菜单项的添加、删除、移动等操作。

案例

RuoYi 若依官方网站 |后台管理系统|权限管理系统|快速开发框架|企业管理系统|开源框架|微服务框架|前后端分离框架|开源后台系统|RuoYi|RuoYi-Vue|RuoYi-Cloud|RuoYi框架|RuoYi开源|RuoYi视频|若依视频|RuoYi开发文档|若依开发文档|Java开源框架|Java|SpringBoot|SrpingBoot2.0|SrpingCloud|Alibaba|MyBatis|Shiro|OAuth2.0|Thymeleaf|BootStrap|Vue|Element-UI||www.ruoyi.vip

 

个人简历制作

 

03-Axure（flow流程图元件）

目标

1. Axure的流程图组件的使用

2. 案例：登录校验流程图设计

3. 载入部件库和自定义部件库

4. 案例：绘制iPhone背景

5. 案例：登录页面原型设计

通过Axure制作的原型基本上就是元件组成的界面内容，很大程度上能够模仿出真实的效果，俗称“高保真”，当然跟真正系统是没发比的。但作为研发参考，或者给甲方爸爸展示是非常高效的一种原型啦。

Axure 流程图元件

Axure不是专业绘制流程图的工具，visio(微软)比较专业，Axure强大之处在与绘制线框图、低保真原型、高保真原型以及丰富的交互效果，接近真实的用户体验。

使用流程图处理复杂业务逻辑，技术难点

基本介绍

Flow元件库：即流程元件，用于画流程图时使用的图形。flow元件库里包含了主流的流程图相关的形状以及多边形形状。

 

 

• 圆角矩形：代表流程的开始和结束，用作起始框和结束框

• 矩形：代表要执行处理的动作（使用动词+名词组合），用做执行框使用

• 叠放矩形组件：代表多个要执行处理的动作（不想把每个处理动作都绘制出来，就可以启用一个叠放矩形组件来代表多个要执行的处理动作）

• 菱形：代表决策或者判断，用作判断框。例如：登录验证

• 平行四边形：代表数据的操作，用作数据的输入和输出

• 角色：代表流程的执行角色。角色可以是人也行是系统

• 数据库：代表系统的数据库

• 图片：与线框图中的图片组件类似

• 括号通过某个执行没有表达得特别清楚，我们就能够使用它加以说明。就是：说明一个流程的处理或者特殊行为，有点像备注或者特殊说明。若

• 文件：代表一个文件（导出的信息或者信息），用以表示以文件的方式输入或者以文件的方式输出。例如上传一个文件或者下载一个文档都可以使用文件组件来代表。