• 沒有找到結果。

流程图

在文檔中 Axure 快速原型设计 (頁 30-38)

第1节 流程图和连接线

1、什么是流程图

流程图是产品团队沟通信息架构和交互设计的最基本工具,在一个宏观程度上描述产品的用户体验过程。一个流 为流程图即可:在页面上点击右键,选择―Diagram Type->Flow‖,这时的页面前的图标会变为一个 图标。

我建议大家可以参照Jesse James Garrett 的描述信息结构和交互设计的图示词汇表 所介绍的各个图示去使用 Axure中的流程图控件。以下仅对默认的流程控件作简要说明(欢迎大家对如何使用这些流程图控件,或如何建 立更多的流程图控件和标准用法进行讨论,):

rectangle:矩形 作用:表示一个页面。

rounded rectangle:圆角矩形

作用:用来表达一个区域,这个区域中包含了一组页面,这些页面通常有一些共同属性(如都是出现在一个弹出 窗口,或者有一些共同的设计特征)。这样做的目的是将整张流程图分隔为几个部分,并为每个部分单独命名,

从视觉上使复杂的流程图变得更为清晰,在沟通时也方便。

beveled rectangle:斜角矩形

作用:表示可重用的流程模块,用于避免反复描述一系列相同的步骤。比如一个用户登录的流程。

diamond:菱形

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

file:文件

作用:表示一个独立的文件,如声音、图片、PDF文件等。

bracket:方括号

作用:当流程图太大时,为了易于阅读,可以将流程图的一些部分拆解成单独的模块,方括号就是用于表达这个 拆分出来的模块的链接点。

semicircle:半圆形

作用:表示同时并发执行多个结果。例如当用户点击一个软件下载页面时,同时载入软件安装介绍页面和下载软 件文件。

triangle:三角形

作用:表示单项选择的条件分支,参见Jesse James Garrett 的描述信息结构和交互设计的图示词汇表 。

trapezoid:梯形

作用:表示多项选择的条件分支,参见Jesse James Garrett 的描述信息结构和交互设计的图示词汇表 。

ellipse:椭圆形或圆形

作用:如果画圆形,可表示多个路径流程的群组(集合),群组可以作为条件分支或条件选择器的下游元素。 如 果是画成椭圆形,可表示流程的开始和结束。

hexagon:六边形

作用:暂无。

parallelogram:平行四边形 作用:暂无。

actor:角色

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

database:数据

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

image:图片

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

3、流程连接线

流程图控件和线框图控件的不同点在于流程控件可以通过连接线进行连接。要添加连接线,可以点击主工具栏上 的―Connector Mode (F11)‖按钮,这时线框图区域会从指针状态切换到连接状态,再点击―Pointer Mode (F9)‖可 以切换回到指针状态。

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

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

虚线。

什么时候使用虚线?

当一个路径在某些条件成立的情况下再呈现给用户时,我们可以采用表达为虚线表示。例如对于一个包含员工信 息的页面来说,当用户是公司员工时该路径可通过,反之则不通过。

4、创建流程图

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

5、流程图中引用页面

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

在站点地图面板中拖曳页面到线框图或流程图中,将会创建一个引用了页面的流程图控件。流程图控件上所引用 的页面可以通过在控件上的右键菜单 ―Edit Flow Shape->Edit Reference Page‖进行编辑和清除。

引用页面后,控件左上角会有一个 图标进行标识:

第2节 自动生成流程图

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

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

2、然后,在站点地图面板中你想要生成流程图的分支根节点上点击右键,然后选择―Generate Flow Diagram‖,

你将看到两个选项:―标准流程图(Standard digram)‖或"右朝向流程图(Right Hanging)"。选择其中一个就可 以在线框图面板中产生一个流程图。

动态面板控件(Dynamic Panel)可以让你实现高级的交互功能,实现原型的高保真度。

动态面板包含有多个状态(states),每个状态可包含一系列控件(你可以把一个状态理解成一个独立的页面)。

任何时候都只有一个状态(页面)是可见的,或整个动态面板可以被隐藏。结合交互动作,可以让动态面板的状 态进行隐藏、显示和改变。像添加其它控件一样,可以在控件面板中拖放动态面板控件到线框图中。

2、编辑动态面板的状态

在文檔中 Axure 快速原型设计 (頁 30-38)

相關文件