当前位置: > 投稿>正文

axure流程图解,Axure流程图怎么绘制教程

01-29 互联网 未知 投稿

关于【axure流程图解】,Axure流程图怎么绘制教程,今天犇涌小编给您分享一下,如果对您有所帮助别忘了关注本站哦。

1、Axure流程图怎么绘制教程 流程图元件库箭头等使用说明

[闽南网]

Axure流程图怎么制作?还不知道方法的朋友们,下面小编就为大家带来流程图制作步骤介绍,接着往下看吧。

Axure流程图怎么做?

在元件区面板上点击下拉选择流程图,既可看到流程图中需要用的的各种组件的形状,代表不同的流程步骤及含义。

axure流程图解,Axure流程图怎么绘制教程

流程图组件也可以直接从组件选择面板中拖拉出来,然后通过工具列或快捷菜单来编辑样式与属性,如果要改变流程形状的话,可以按鼠标右键并选择编辑流程形状子选单中的项目来设置。

若要把两个形状连接的话,需要先从软件左上角选择连接器模式,然后在形状的连点部位用鼠标拖拽一条线把两个形状连接起来。

axure流程图解,Axure流程图怎么绘制教程

若要修改连接线的样式说明,只需选好要设定的连接线,再使用工具列上的线条样式与箭头样式按钮即可改变需要的样式(粗细、虚实及连接箭头方向等)。

axure流程图解,Axure流程图怎么绘制教程axure流程图解,Axure流程图怎么绘制教程axure流程图解,Axure流程图怎么绘制教程

关联网页:

流程图组件可以关联到任意指定的一个页面,一旦指定了关联网页,流程图组件上会显示这个网页的名称,而在原型上,这个流程图组件与网页间会自动建立超级链接。从站点地图面板中,将任一网页拖拉到主操作区中,也会建立一个以这个网页当作关联网页的流程图组件。

流程图组件上的关联网页可以通过在组件上按鼠标右键,并选择编辑流程形状->编辑引用页面来编辑或清除。

流程图的存储:

在Auxre RP绘制的流程图,可以输出成图片或网页。

输出成图片:选择文件 >导出为图片,就可以单独把这页流程图转成图片。如果想把流程图放到Powerpoint或Word文件,可以直接全选整个 Axure RP流程图,以复制/粘贴的方式贴到Powerpoint或Word文件中。

输出成原型:输出流程图到原型方式跟输出其它网页到原型相同,按下Axure RP上方功能菜单选工具菜单,选择生成原型即可。

以上就是Axure制作流程图方法全部内容。

2、axure流程图解,Axure流程图怎么绘制教程

线框草图

一、基本操作

绘制线框草图之前,我们先对一些基本操作进行了解。

(一)画布操作

打开画布:在页面模块中,双击任何一个页面,都可以打开相应的画布,同时画布区域上方出现对应的标签。

关闭画布:点击标签上的关闭按钮,或者在画布标签上点击鼠标右键,通过在菜单中选择相应的关闭选项完成操作。

画布排序:通过鼠标拖动画布标签进行排序。

恢复原位:点击画布左上角的准星图标或者快捷键Ctrl 9键,即可让画布回到原点。

移动画布:通过滚动条移动画布;或者,按住空格键不放,画布中的鼠标指针变为抓手形状,此时即可拖动画布进行移动;也可以通过鼠标滚轮垂直方向移动画布,按住Shift键不放,通过鼠标滚轮水平方向移动画布。

缩放画布:在工具栏中通过改变显示比例缩放画布,或者按住Ctrl键不放,通过鼠标滚轮改变画布显示比例。

产品经理、axure、产品设计、交互设计

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

axure流程图解,Axure流程图怎么绘制教程

产品经理、axure、产品设计、交互设计

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

改变尺寸:可以通过鼠标指针拖动元件的边界点任意改变元件的尺寸;也可以按住Shift不放,同时鼠标指针拖动元件边界点等比改变元件的尺寸。

复制元件:通过鼠标右键菜单的【复制】与【粘贴】,或者使用通用快捷键Ctrl C键与Ctrl V键可以完成画布间或者软件间的复制粘贴操作;同一画布中,可以通过Ctrl D键进行复制;或者,按住Ctrl键不放,拖动元件到新的位置松开,完成复制与摆放的操作。

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

二、元件库

软件自带了三个官方元件库,分别是默认元件库(Default)、流程元件库(Flow)和图标元件库(Icons)。

(一)图标元件库(Icons)

在元件模块的下拉菜单中,我们选择Icons元件库。

打开之后能够看到大量的图标元件,这些图标元件源自一套名为“FontAwesome”的图标字体。

软件官方参照这套图标字体,制作了Icons元件库,供我们使用。

这个元件库中的图标都是形状类图标,无需安装字体文件即可使用。

图标拖入画布之后,可以通过编辑填充颜色来改变图标的颜色,也可以双击图标元件的中心进行形状编辑。

关于这个元件库无需过多介绍。

在此,为大家推荐一个与图标元件有关的网站:阿里巴巴矢量图标库。

这个网站,需要使用新浪微博账号或GitHub账号登录。

axure流程图解,Axure流程图怎么绘制教程

产品经理、axure、产品设计、交互设计

登录之后,即可下载想要的矢量图标。

官方提供了一些成套的开源图标库,适合各类产品原型中使用。

axure流程图解,Axure流程图怎么绘制教程

产品经理、axure、产品设计、交互设计

官方图标库部分截图:

axure流程图解,Axure流程图怎么绘制教程

产品经理、axure、产品设计、交互设计

多色图标库部分截图:

axure流程图解,Axure流程图怎么绘制教程

产品经理、axure、产品设计、交互设计

另外,我们还可以在首页通过搜索功能,搜索想要的图标。

axure流程图解,Axure流程图怎么绘制教程

产品经理、axure、产品设计、交互设计

搜索结果:

axure流程图解,Axure流程图怎么绘制教程

产品经理、axure、产品设计、交互设计

有了这个网站的图标库,基本上我们无需再四处找寻其它图标元件库了。

那么,这里的图标如何在Axure使用呢?

将鼠标支付移入图标,会出现三个按钮,分别是添加添加入库、收藏以及下载图标。

点击下载,就会出现编辑图标颜色以及不同格式的下载链接。

axure流程图解,Axure流程图怎么绘制教程

产品经理、axure、产品设计、交互设计

我们无需在这里编辑颜色,只需要点击【SVG 下载】按钮下载图标即可。

下载下来的SVG文件,可以拖入AxureRP9的画布中;或者,先从默认元件库中拖入图片元件,双击导入SVG文件。

然后,在图标上点击鼠标右键,上下文菜单的【变换图片】选项中选择【转换SVG图片为形状】。

此时的图标就变成了和Icons元件库中一样的形状图标,可以自由更改颜色和形状编辑。

(二)流程元件库(Flow)

流程元件库中包含了一些绘制流程图的元件。

我们只需要将这些元件拖入到画布,并添加连接线,即可进行流程图的绘制。

1、连线的操作

点击工具栏中的“连接”图标就会进入连线模式。

一般元件都会有四个“×”连接点。我们在起始元件的连接点上按下鼠标左键拖动,到结束元件的连接点上松开,即可完成连线的操作。

axure流程图解,Axure流程图怎么绘制教程

产品经理、axure、产品设计、交互设计

2、连线的样式

连接线的线段颜色、类型、线宽以及箭头样式可以在工具栏中进行设置。

axure流程图解,Axure流程图怎么绘制教程

产品经理、axure、产品设计、交互设计

另外,在样式模块中也有关于连线的样式设置。

axure流程图解,Axure流程图怎么绘制教程

产品经理、axure、产品设计、交互设计

3、元件的含义

流程图元件库中有一部分元件,通过名称即可了解含义。

还有一些元件只是一些形状,这里对它们的含义做一下简单的描述。

axure流程图解,Axure流程图怎么绘制教程

产品经理、axure、产品设计、交互设计

4、流程图示例

常用流程图元件:

axure流程图解,Axure流程图怎么绘制教程

产品经理、axure、产品设计、交互设计

标准流程图示例:

axure流程图解,Axure流程图怎么绘制教程

产品经理、axure、产品设计、交互设计

矩阵流程图示例:

axure流程图解,Axure流程图怎么绘制教程

产品经理、axure、产品设计、交互设计

(三) 默认元件库(Default)

这个元件库是最常用的元件库,包含了4个分类。

分别是:基本元件、表单元件、菜单表格元件和标记元件

1、基本元件

基本元件中包含了常用的形状、图片、线段以及文本类型的元件。

还有一些具有特别用途的元件,包括热区、内联框架、动态面板以及中继器。

(1)形状

形状元件包含了多个预设样式,矩形、圆形、占位符以及按钮,它们之间通过样式的更改可以互相转换。

axure流程图解,Axure流程图怎么绘制教程

产品经理、axure、产品设计、交互设计

例如,将矩形3添加边框并设置填充颜色为白色,就变成了矩形1的样式。

并且,我们还可以通过在元件上点击鼠标右键,通过菜单中的【选择形状】,让矩形变为圆形或占位符。

另外,形状元件还可以通过上下文菜单【变换形状】选项中的【转换为图片】,将形状元件转换为图片元件。

在Axure RP 9中,我们还可以为形状添加背景图片。

axure流程图解,Axure流程图怎么绘制教程

产品经理、axure、产品设计、交互设计

形状元件一般用于页面中的背景、边框、按钮、分割线等。

(2)图片

图片元件拖入画布后可以表示一张图片,也可以通过双击元件,导入本地的图片素材。

axure流程图解,Axure流程图怎么绘制教程

产品经理、axure、产品设计、交互设计

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

axure流程图解,Axure流程图怎么绘制教程

产品经理、axure、产品设计、交互设计

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

(3)文本

文本元件包括文本标签、文本段落、一级标题、二级标题和三级标题,用来表示页面中的一些文字内容。

axure流程图解,Axure流程图怎么绘制教程

产品经理、axure、产品设计、交互设计

实际上文本元件也是形状元件,给文本元件添加边框,就变成了矩形元件。

(4)热区

热区元件是一个透明元件,并且不可编辑文字。

它的透明特性,让我们可以将它覆盖在其他元件上实现一些交互的需求,也可以用来做页面滚动的定位。

例如,一张图片的部分区域可以点击产生交互效果,就可以通过热区的覆盖,并给热区添加点击的交互来实现。

axure流程图解,Axure流程图怎么绘制教程

产品经理、axure、产品设计、交互设计

而它不可编辑文字的特点,在某些时候也能够帮助我们解决一些问题。(详见案例15)

(5)内联框架

内联框架用于向页面中嵌入内容,包括:

· 项目中的其他页面

· URL指向的外部页面

· 浏览器支持播放的多媒体文件(mp3、mp4、avi、pdf等类型的文件)

(6)动态面板

动态面板是一个允许添加多状态(层)的容器元件。

动态面板默认只有一个状态(层),可以根据需求添加多个状态(层)。

并且,在每一个状态(层)中都可以放入一个或多个元件(包括其他动态面板)。

(7)中继器

中继器是一个模拟列表的元件,例如商品列表、邮件列表、用户列表和标签列表等。

并且,中继器可以通过添加交互模拟对列表项的添加、删除、更新、排序以及筛选的操作。

关于内联框架、动态面板以及中继器元件的使用相对复杂,在之后的内容中再进行详细的介绍和示例讲解。

2、表单元件

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

axure流程图解,Axure流程图怎么绘制教程

产品经理、axure、产品设计、交互设计

(1)文本框

用于输入一行文字内容。

比较常见的使用场景是用户登录功能中用户名与密码的输入框。

axure流程图解,Axure流程图怎么绘制教程

产品经理、axure、产品设计、交互设计

(2)文本域

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

axure流程图解,Axure流程图怎么绘制教程

产品经理、axure、产品设计、交互设计

(3)下拉列表

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

例如,血型、性别的单项选择,或者生日、地址的联合选择。

axure流程图解,Axure流程图怎么绘制教程

产品经理、axure、产品设计、交互设计

(4)列表框

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

axure流程图解,Axure流程图怎么绘制教程

产品经理、axure、产品设计、交互设计

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

(5)单选按钮

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

(6)复选框

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

复选框的应用场景比较多见,例如:注册、订阅、关注或者兴趣选择等。

axure流程图解,Axure流程图怎么绘制教程

产品经理、axure、产品设计、交互设计

3、菜单表格元件

菜单和表格元件都是绘制线框图的元件,方便易用。

axure流程图解,Axure流程图怎么绘制教程

产品经理、axure、产品设计、交互设计

但是,因为样式编辑受限,所以高保真原型中很少使用。

这些元件在画布中的很多操作基本通过右键菜单中完成,例如:行、列、节点、菜单项的添加、删除、移动等操作。

4、标记元件

快照元件可以通过双击设置引用页面,呈现被引用页面的图像。它结合连线和其他标记元件非常适合进行项目、页面以及模块的注释说明。

axure流程图解,Axure流程图怎么绘制教程

产品经理、axure、产品设计、交互设计

除了快照元件以外的标记元件都是预设了样式的形状元件。

本文关键词:axure 流程图,axure rp怎么画流程图,axure生成页面流程图,axure9画流程图,axurerp流程图。这就是关于《axure流程图解,Axure流程图怎么绘制教程》的所有内容,希望对您能有所帮助!更多的知识请继续关注《犇涌向乾》百科知识网站:http://www.029ztxx.com!

版权声明: 本站仅提供信息存储空间服务,旨在传递更多信息,不拥有所有权,不承担相关法律责任,不代表本网赞同其观点和对其真实性负责。如因作品内容、版权和其它问题需要同本网联系的,请发送邮件至 举报,一经查实,本站将立刻删除。

猜你喜欢