第三章 Axure流程图

转自:https://www.w3cschool.cn/

第1节 Axure什么是流程图

一个流程图可用于展示各种各样的处理流程,包括用例流程、商业流程、页面流程等。在Axure中,流程图常用于提供一个高保真的、能通过所设计的页面来完成的任务视图。一张简明的流程图,能促进和其它设计师、开发工程师的交流,节约口头沟通的成本,并且能点出一些关键性问题。流程图能使思路清晰、逻辑清楚,并且有助于程序的逻辑实现和有效解决实际问题。

流程图其实也是页面,只要修改页面类型为流程图即可。在页面上点击右键,选择“Diagram Type->Flow”,这时在页面前图标会变为另一个图标。其界面如图1所示:

注意:要创建流程图并不是一定强制要将页面指定为流程图,指定为流程图只是方便识别。

第2节 Axure流程控件

在控件面板中的顶部工具栏上点击“flow”按钮可以找到流程控件,这些流程控件用于表达流程中的步骤。Axure里面由于不涉及到具体的程序流程,所以有些标准的图形并没有提供,如不规则图形、侧面双矩形等,如果这些流程控件不满足你的流程需要,可由图片控件进行合成。

流程控件的使用有一些约定习惯,但是Axure并没有对如何使用这些形状进行强制约束。一般地,你应该以其他人能够理解的方式进行使用。你可以自己自定义一套符号标准,进行使用。其界面如图2所示:

rectangle:矩形
作用:一般用作要执行的处理(process),在程序流程图中做执行框。在Axure中如果是画页面框架图,那么也可以指代一个页面。你可把页面和执行命令放在同一个流程中做说明,这个时候将两类不同的矩形做色彩区别,然后做说明就好了。

rounded rectangle:圆角矩形或者扁圆
作用:表示程序的开始或者结束,在程序流程图中用作为起始框或者结束框。

beveled rectangle:斜角矩形
作用:斜角矩形我几乎不使用,可以视情况自行定义。或者在其他的流程图中,有特殊含义,暂不知晓,也希望有识之士指点一二。

diamond:菱形
作用:表示决策或判断(例如:If…Then…Else),在程序流程图中,用作判别框。

file:文件
作用:表达为一个文件,可以是生成的文件,或者是调用的文件。如何定义,需要自己根据实际情况做解释。

bracket:括弧
作用:注释或者说明,也可以做条件叙述。一般流程到一个位置,做一段执行说明,或者特殊行为时,我会用到它。

semicircle:半圆形
作用:半圆在使用中常作为流程页面跳转、流程跳转的标记。

triangle:三角形
作用:控制传递,一般和线条结合使用,画数据传递。

trapezoid:梯形
作用:一般用作手动操作。

ellipse:椭圆形或圆形
作用:如果画小圆,一般是用来表示按顺序数据的流程。如果是画椭圆形,很多人用作流程的结束。如果是在use case用例图中,椭圆就是一个用例了。

hexagon:六边形
作用:表示准备之意,大多数人用作流程的起始,类似起始框。

parallelogram:平行四边形
作用:一般表示数据,或确定的数据处理。或者表示资料输入(Input)。

actor:角色
作用:来自于use case 用例,模拟流程中执行操作的角色是谁。需要注意的时,角色并非一定是人,有时候是机器自动执行,有时候也可是模拟一个系统管理。

database:数据
作用:就是指保存我们网站数据的数据库。

image:图片
作用:表示一张图片,或者置入一个已经画好的图片、流程或者一个环境。

第3节 Axure流程连接线

流程图控件和线框图控件的不同点在于流程控件可以通过连接线进行连接。

要添加连接线,可以点击主工具栏上的“Connector Mode button (F11)”按钮,这时线框图面板会从指针状态切换到连接状态,再点击“Pointer Mode button (F9)”可以切换回到指针状态,如图3所示:

在连接状态时,在流程图中点击和拖动就可以绘制和添加连接线。例如,要连接两个流程控件,将鼠标放在一个流程控件的连接点上,点击和拖拉,然后鼠标在另一个目标流程控件的连接点上松开,就可以完成连接。点击和拖动连接线的尾部端点可进行重新连接。

选择流程连接线,然后点击工具栏中的“Line Pattern ”和“ Line Ends”按钮可以修改连接线的形状和样式,如箭头、虚线。

第4节 Axure创建流程图

与线框图控件相似,你可以拖拉流程图控件到线框面板中,可以通过工具栏和右键菜单来修改流程图形状的风格和属性。另外,已经绘制好的流程形状可以通过控件右键菜单中的“Edit Flow Shape”的子菜单进行流程图形的转变。

第5节 Axure流程图中引用页面

可以在流程图控件上分配一个引用页面,如果流程图控件引用了一个页面,控件上的文本会变成页面的名称。在原型中点击引用了页面的流程控件可以自动链接到页面中。

在页面导航面板中拖拉页面到线框图或流程图中,将会创建一个引用了页面的流程图控件。流程图控件上所引用的页面可以通过在控件上的右键菜单 “Edit Flow Shape->Edit Reference Page”进行编辑和清除。其界面如图4所示:


引用页面后,控件左上角会有一个“页面”图标进行标识,其界面如图5所示:
图5

第6节 Axure自动生成流程图

可以根据页面导航面板中的页面层级关系自动产生流程图:

1、首先,创建一个流程图页面,并双击打开;

2、然后,在页面导航面板中你想要生成流程图的分支根节点上点击右键,然后选择“Generate Flow Diagram”,你将看到两个选项:Standard digram 或Right Hanging。选择其中一个就可以在线框图面板中产生一个流程图。其界面如图6所示:

所生成的流程图是根据你所选择的页面和子页面的层级关系,并且会自动引用对应的页面。可以像一般的流程图一样编辑修改自动生成的流程图。

©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 216,843评论 6 502
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 92,538评论 3 392
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 163,187评论 0 353
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 58,264评论 1 292
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 67,289评论 6 390
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 51,231评论 1 299
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 40,116评论 3 418
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 38,945评论 0 275
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 45,367评论 1 313
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 37,581评论 2 333
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 39,754评论 1 348
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 35,458评论 5 344
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 41,068评论 3 327
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 31,692评论 0 22
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 32,842评论 1 269
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 47,797评论 2 369
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 44,654评论 2 354

推荐阅读更多精彩内容