存档

文章标签 ‘Axure’

AXURE在原型设计中的应用

2011年12月23日 没有评论

前言

什么是原型呢?

产品原型简单的说就是产品设计成形之前的一个简单框架,对网站来讲,就是将页面模块、元素进行粗放式的排版和布局,深入一些,还会加入一些交互性的元素,使其更加具体、形象和生动。
就我个人而言,目前使用频率最多,最高效,交互效果最好的原型工具是axure。今天给大家介绍一些我在工作中使用axure的经验。主要从交互设计中涉及的三个主要步骤进行说明:

一、主要页面原型

在进行主要页面原型设计之前,交互设计师需要:

  • 一份主要的任务流程图(此处指的不是“业务逻辑流程图”,而是根据“业务逻辑”产生的“任务流程”。任务流程可由产品或是交互出,根据各个公司或项目的具体情况而定。)
  • 一份主要功能列表(一般由产品经理提供)
  • 网站信息架构(信息架构在一些公司是需要交互设计师来完成的)
  • 对于前期调研结果的理解

如何做“主要页面原型”

1. 在建立项目的初期就开始定义Master

项目一开始启动,如果可以稍微掌握哪些区块未来将是共享区块,那么就开始建立Master,比如网站的Header / Footer / 导览选单(Navigation),或者广告版位等等。越早使用,越可以节省其它页面设计的重复工作。

                 Master的定义

2.可以应用一些Axure RP library

网上有很多资源,如:http://ucdchina.com/post/6285。也可以自己制作适合产品的library。

                                                  网上的library资源

 3.根据“任务流程图”,“功能列表”将主要的页面原型制作出来。

这时可以包括一些必要的交互动作。一些详细的,比如出错提示等交互可以不用考虑。

                                                 主要的页面列表

用途:

主要的页面原型可以用于产品初期的讨论会、测试以及产品介绍会。

应注意几点:

1.不要加入视觉设计的元素。着眼于大局,不要纠结细枝末节

在制作原型的初期请把所有精力都放在流程的优化和布局设计上面吧,不要把时间浪费在视觉设计上,那样绝对是得不偿失。

因为我们的原型方案还没有最终通过,肯定要通过多次迭代才能确定方案,太多的视觉设计就是浪费时间;

再者,如果原型做的十分逼真,在产品讨论会上,视觉的元素会很快抓住大家的眼球,到时就会有领导来质疑你的界面是不是该换成蓝色,按钮是不是再精致一些这样的问题。没有人会专注于你的交互设计了。

2.最好在使用axure工具前,用纸和笔画一些纸面原型,整理一下思路。

3.这个过程应是快速的,迭代的。

 

二、页面流程图

在确定主要页面之后,我们可以开始细化页面流程了。页面流程图有利于向大家展示自己的想法,也有利于思路的整理。毕竟axure上面的交互点是散的,通过页面流程图,我们可以整理所有的页面上的交互行为,避免遗漏;在向他人展示的时候,也可以一目了然的看出需要的操作步骤是多少。

我倾向于将主要任务列出来,然后画出所有任务的页面流程图。

                                            页面流程图

页面流程图要素

由于axure中没有斜线,在表现流程的时候有些受限。我会在流程图中表现以下几点:

  • 操作步骤的名称和编号

   

  •  开始和结束

   

  • 页面的名字
  • 点击的位置

   

  • 操作说明和箭头

   

  • 步骤序号

用途

可以与他人沟通流程、整理思路细化流程。

 应注意的几点

  1. 如果项目时间有限,页面流程可以画在纸上。但还是建议在交互设计保留这一步。
  2. 为了减少沟通成本,在绘制页面流程图时,最好有一定的规范和标准。

三、完善原型

页面的主要页面和页面流程确定之后,就可以完善原型了。这时可以叫上产品部的同事一起来完成原型的细节工作。

如何完善原型

1. 按照页面流程中所考虑的交互过程,体现在原型上面。出错,提示等交互细节也应有体现。这时你可能会用到变量、层等高级axure技巧。

                                         点击定时操作弹出层的操作

2. 增加说明

选中某个控件,在右边区域可以为此控件增加说明。

                                                     增加描述

                     增加描述后的前台页面,点击黄色图标显示说明提示层

如果对于说明区域的属性不满意,可以修改属性:

                          修改属性

不过这种增加描述的方式可能会干扰整个页面,很容易让浏览者以为是一个页面元素。也可以采取一种原始的方法为控件增加说明文字:

 

                        文字补充说明

3. 为页面编号

当原型不再需要修改时,我们需要为原型页面编号,这样有利于与视觉设计师、前端沟通。

用途

测试、产品需求文档编写参考、视觉设计参考、前端设计参考等。

应注意的几点

1. 不要过于追求技术表现

原型有些交互效果做出来会很花费时间,我建议不要过于追求技术表现效果,可以用些文字来说明交互效果。Axure软件的初衷是快速的设计原型,如果在一些技术方面交互设计师花费很多时间的话,就有些顾此失彼了。还是把真实的效果交给前端去实现吧。

2. 为了减少沟通成本,在完善原型时,最好有一定的规范和标准。

总结

Axure其实只是一种交互工具而已,交互设计最重要的还是想法,工具只是来帮你表现想法的。不必过于追求技术,不必过于追求视觉表现。我们在把握好整个产品方向的同时,应专注于交互流程、页面内交互、布局结构的创新和优化。

下面给大家介绍一些我工作之中记录下来的axure技巧。

1.快速移动页面

大家有没有感觉到,当电脑配置低,页面元素很多的时候,移动页面是一件极其痛苦的事情,有一个好的方法可以解决这个问题:

在非输入状态下,按住键盘“空格”键,界面上的鼠标“箭头”会变成“手”,这样就可以很轻松的拖动页面了。

2.原地复制组件

在axure中“ctrl+c”“ctrl+v”复制粘贴,会错位复制一个组件。怎么解决这个问题呢:

用快捷键“ctrl+d”可以原地复制一个组件。

3.复制动作Copy Case

如下图可以复制动作,就不用一个个的设置这么麻烦了。

4.直接将素材或控件转换为Dynamic Panel(层)

很实用,特别是在制作过程中发现有些东西还是放在层中展现更好的时候,以前得新建一个层,再把它们Copy进去,现在只需要右键需要转换的素材或控件Convert>>Convert To Dynamic Panel:

5.单选群组(Radio Button Group)

您可以一次选取多个Radio Button,按下鼠标右键,并选择“Edit Radio Button>>Assign Radio Group”来设定 Radio Button 的群组关系。如此一来,当这些Radio Button输出到Prototype 时,就会形成真正的单选用户接口。

6.添加定位锚点

类似于网易车库中的定位功能,点击某一字母,页面就会定位到同一字母所在的区域:

用Axure怎么来实现这个功能呢?

a)首先要用“image map region”在页面上定位一个锚点,并命名为“定位锚点位置”:

b)然后再在点击的地方加上链接

如上图,勾选“scroll to image map region”,点击下面的“image map region”,打开对话框:

如上图,选择“定位锚点位置”这一项,选中“scroll vertically only”垂直滚动,最后点击确定。

设置完成,看看效果吧。

7.下拉框(droplist)的条件(condition)

这里讲关于“条件”的简单例子。通过编辑条件,可以表现一些更高级的交互效果。

这个例子的效果是,用户切换左边的下拉框选项,右边的提示文字会随之变化。当选中的是图书时,文本框中的文字是“请输入图书名称或作者”;当选中音乐时,文本框中的文字是“请输入音乐名称或歌手”:

a)首先在页面上添加以下的组件,并给下拉框添加两个选项“图书”和“音乐”:

 

b)为组件命名

c)为下拉框添加动作

选择“OnChange”

这时会弹出选择交互行为的对话框,如下图。选择add condition:

在条件选择的对话框中如下图设置,设置完后点击ok:

回到选择交互行为的对话框,这时选择下图这一项:

点击上图文本框中的“Variable and Widget value equal to Value”,打开设置变量的对话框,如下图设置:

d)重复以上操作,为下拉框添加case2,效果如下:

好了,制作完成,大家可以看效果了:

条件和变量这一块的功能还需要多多探索,有些功能还是比较强大的。不过在实际的操作中,大多数的富交互效果是很少用到的。

8.恢复文件Recover files

Recover files功能可以帮你找到几天前的文件版本。

点击file>>Recover file,打开对话框,你可以查看最近的文档了:

选择recover就可以恢复当时的文档。

9.利用Axure封装视觉标准

看到的折折熊的一篇博客。

交互设计师一般都是出线框图为最终产物,但是往往很多产品只需要利用现成的视觉标准就可以画出原型。为了减少流程、降低沟通成本,所以我建议交互设计师在做类似产品的时候能够直接利用现有视觉标准进行原型的搭建,一般很多交互设计师会用Photoshop来实现视觉原型,但是效率和不可交互性还是存在很多问题,所以需要有一套完成的封装来执行视觉标准并且产生可交互的高保真原型。

分类: 3电动设备 标签: ,

基于Axure的PRD写作思考

2011年12月1日 没有评论

本文想说的事情是,那个叫PRD文档的家伙只是个称呼而已,PRD的问题不在于如何写而在于如何被传递与执行。这里简单介绍一下我基于axure-rp的一种新的PRD写法。(友情提醒:从来不用axure,认为他笨重无比的人请路过。)

从半只脚迈入产品经理这个大门的那天起我就被2个文档的名称深深的纠缠着,他们是市场需求文档(MRD)、产品需求文档(PRD)。先不论你是什么方向的PM,这2个玩意一定会一直伴随你的Title跟着你。这2个文档在不同的团队中有不同的叫法和写法,我也见过有团队的MRD其实就是PRD,不沾半点商业市场分析的边的,当然,这些不是本文探讨的内容。

长久以来,有个很有趣的现象:“有没有PRD模板,PRD该咋写”这个问题已经成为新手入门经典必问题目之一;如果1年以后这个家伙还在这行里混,他一定会抱怨,娘滴,我们的QA压根就不看我的文档、我们的交互(如果有这个职位的话)还是会问我一些我写的很明白的问题、我们的测试拿着文档问我该咋测试、….

Web页面之间的关系是网状的,而Word文档只能树状的表述,这无疑是矛盾的;PRD文档无法做到实时更新发布,我回顾了我第一年写的PRD文档,很多下面的修改栏都是空的,惭愧之至….;所谓一图胜千言,万言刚够文档标准,每个PRD都是臭长臭长的,这样的东西别说交互设计师了,很多PM自己写完了都不想看。所以,我武断的认为,撰写某些PRD文档实在是一个既耽误时间又费劲且不敏捷的事情(很多PRD都是一夜情,写完了就不会修改更不会有人乐意看100P以上的文档),是在让产品经理实现慢性自杀!

个人认为,一个PRD文档需要包含以下的内容:

1、概述
1.1、名词说明:文档中涉及到的名词
1.2、产品概述及目标
1.3、产品风险预估
1.4、产品开发进度:产品开发阶段及责任人与时间节点
2、使用者需求
2.1、使用者需求描述:定义用户是谁
2.2、管理员需求描述:后台管理部分(很多人会忽略这个部分)
2.3、任务流程图:从业务逻辑流程产品逻辑流程转化
3、功能需求
3.1、功能总览
3.2功能需求分解:界面分解及交互说明和用例
4、非功能需求:与该产品相关联的辅助产品等
5、上下线需求:产品的生命周期
6、运营计划:产品的上线后的反馈与改进

整个文档中,最大的部分其实是对功能需求的分解,但是最核心的部分是使用者需求与功能需求部分。使用Axure后,我发现Axure可以很好的承载我平常写的这个产品需求文档的全部内容,最主要的问题是,Axure是可以网状的展示的。下面是举个例子:

在Axure的站点导航中,默认的Home页面承担了PRD文档的第一部分内容;而使用者需求描述及任务流程图也可以由Axure自带的流程图功能完成;任务流页面的分解本来就是Axure中完成的;最后的非产品功能部分也可以由axure完成(文本块组件)

同时,Axure支持多种格式的输出,一般情况下我是发送给团队Html文件包,也可以是.chm格式的文件(团队协作目前还没有尝试)。该文件包打开后,左侧是整个系统的导航菜单,右侧是相应的说明。最主要在于,原型中的页面是可以相互跳转的(得益与axure的强大交互功能),同时页面有注释功能。所以,整个产品需求文档真正实现了基于产品的模拟,网状的传播,而不是Word式的树状阅读。

1)见过不少新手使用Axure生成的原型有页面是空白的,我问为什么,他说这个页面不知道放什么,但是又不能不命名,否则逻辑上有些不通。实际上,这个空白页面就可以用来放这个页面的流程图及整体的说明。

2)不建议做太复杂的Axure动作,比如使用多个层、动态面板等。因为在工程师等的眼里原型图是不可以点击的(基于viso等的惯性思维),所以,为了避免花很长时间去实现一个很炫的axure交互而最后被埋没,建议把任务分解来画。比如一个输入框,需要画:默认状态、获得焦点状态、输入字符判定状态、失去焦点状态等,按照逻辑分步来展示。(在我特别蛋疼的时候我会先分步展示,然后搞个比较炫的交互放在上面自己玩或者用于演示)

3)在每个页面的下方或者侧边(由页面大小来定)要放一个功能详解的文本块来对本页面的功能进行详细说明。也可以直接使用Axure自带的注释功能(组件注释、页面注释)为什么不推荐用Axure的组件注释功能?因为这个功能在生成的原型里是被隐藏的,有被人无视的可能。

4)使用axure组件库功能(可自制)和模块功能既可以保证设计的统一性(设计规范),又可以提高原型制作的效率。图中我采用了注册模块。

下面,QA时间(这个QA是问答,文中的QA是技术,呃,注意区分)

Q:为什么我看到有的书上说要写N多文档,带RD的有:BRD、MRD、PRD、….
A:是的,有这样的定义。BRD(商业需求文档)、MRD(市场需求文档)、PRD(产品需求文档)。每个公司的风格不一样,我个人倾向于把BRD与MRD整合,PRD单独做。但是MRD与PRD中会有内容重合,就是会同时提到用户是谁?为什么要做?产品目标是什么?等几个问题

Q:Axure有个功能是可以导成Word格式,把做的原型导入后是归类好的,包含了用例文档,为什么不这么玩呢?
A:没人说不可以这么玩。还是那句话,个人习惯。

Q:除了页面原型之外你塞了这么多东西到Axure里,会不会导致源文件以及生成的文件体积巨大?
A:实际上塞进去的东西都是文本,使用axure的文本组件完成的,体积并不会大。同时,请不要在用axure做原型的时候使用过多的图片,尽量是用组件和模块完成。我目前位置做的最大的一个原型是4.7M,这是一个完整的系统原型。

Q:按照你的写法Axure好像是万能的了?
A:没有不好用的工具,只有用的不顺手的人。人是活的,工具是死的,且Axure目前在mac平台下功能并非很强大,也有很多人觉得axure很笨重,更加喜欢轻量级的原型功能。不过,这些都不是核心问题,核心问题是要让你的团队能够以最高的效率进行合作。使用Axure的人不必鄙视Viso,用excel的人也不必羡慕OmniGraffle,拿Word的人也不必留恋firework。

既然提到了MRD也顺便说下我写这个文档的习惯。一般情况下这个文档是给老板看的,主要是对市场的分析、同类产品的竞品分析、我们产品的盈利预测等等。所以,一般由PPT来完成。你的文档越长老板越反感,你的文档文字越多老板越没兴趣,所以,PPT是最好的方式。

文档这个东西跟流程有类似的地方,大公司会相当重视这个事情,因为要规避风险。流程与文档的核心点在于如何高效传递如何快速执行而不是他如何写以什么形式写。相对于小团队而言,流程之殇大可避免。当然,如果大公司能够以小团队的心态去做大产品的话,定会事半功倍!我更相信小团队大产品的力量,而不是大团队大产品的说法。

分类: 3电动设备 标签: ,

AXURE之变量控制不同场景的交互演示

2011年2月11日 没有评论

量控制不同场景的交互演示

该教程适合追求axure功能使用最大化的人,并不是原型设计的目的。追求方便、快速设计交互原型的同学可以无视这篇文章。

实例演示:
演示地址(axure 6 beta生成)

原理:
1. 通过Axure的变量来记录对应的场景
2. 用master 的 onPageLoad 事件根据变量的值来判断dynamic panel对应的state

Ps: 该教程实际上我上一篇变量教程的升级版本,有兴趣的同学可以看这里:Axure 实现网站登录的交互

实例教程:
实例说明:需要设计一个电子商务网站“用户中心”首页的原型。该页面呈现的内容要根据不同用户的情况来显示。比如:用户是vip会员,需要显示vip的标识,用户有一笔需要支付的订单,需要提醒用户有一笔“待支付”订单等等。

1. 分析和整理会产生的的所有场景

1.1 将所有会产生不同场景的条件都罗列出来
当用户进入用户中心首页时:
·如果已经通过实名认证,显示相应的标识
·如果用户已经上传头像,显示头像,否则,则提示用户上传
·如果是2011年的新用户,在公告中显示给新用户营销的信息,否则显示普通的信息
·如果有需要提醒处理的订单,显示提示
·如果是vip用户需要,显示vip的标识

1.2 将这些场景分组,并梳理其中的逻辑关系
AXURE 原型设计教程2——变量控制不同场景的交互演示
Ps:分组可以帮助我分析各种信息展示时的关系,并能够让我们考虑到以后的扩展性

2. 规划Axure的变量和变量值

变量和变量值规划只要能包含所有会出现的场景就可以了。但规划方式的不同将影响影响到axure动作中的逻辑判断的复杂度。

2.1 所有Axure变量,以及变量值对应的关系
AXURE 原型设计教程2——变量控制不同场景的交互演示

2.2 Axure变量组合对应的各种场景
AXURE 原型设计教程2——变量控制不同场景的交互演示

3. 设计“场景控制台”

用户(这里的用户指的是演示这个原型的人,以下同)可以在场景控制台中选择各种场景的组合,来查看对应的交互原型演示
3.1 将可能出现的条件通过Axure的widgets的radio button或者checkbox的方式让用户选择

AXURE 原型设计教程2——变量控制不同场景的交互演示

3.2 同一个选项的radio button(checkbox)设置编组
是否为vip会员为例:

AXURE 原型设计教程2——变量控制不同场景的交互演示

3.2 为每一个radio button(checkbox)命名
是否为vip会员为例: 将“是”的单选框取名为“rb_vip_yes” “否”的单选框取名为“rb_vip_no”

3.3 为“进入demo”按钮添加交互事件,将所有用户的选择记录在变量中
是否为vip会员为例:
3.3.1 为按钮“进入demo”添加交互事件

AXURE 原型设计教程2——变量控制不同场景的交互演示

3.3.2 添加判断条件:当选中“是否是vip”的单选框“是”时

AXURE 原型设计教程2——变量控制不同场景的交互演示

图5AXURE 原型设计教程2——变量控制不同场景的交互演示

3.3.3 选择交互事件,为变量赋值

AXURE 原型设计教程2——变量控制不同场景的交互演示

3.3.4 点击“open set values editor”按钮打开设置变量面板

AXURE 原型设计教程2——变量控制不同场景的交互演示

3.3.5 在打开的新窗口中新建变量,变量名为“vip”:

AXURE 原型设计教程2——变量控制不同场景的交互演示

AXURE 原型设计教程2——变量控制不同场景的交互演示

3.3.6 为变量名“vip” 赋值为“have”(这里的have表示用户选择的条件“是vip用户”)

AXURE 原型设计教程2——变量控制不同场景的交互演示

3.3.7 用同样的办法,将用户的每一种选择都记录在Axure的变量中

AXURE 原型设计教程2——变量控制不同场景的交互演示

提醒:这里值得一提的是,需要把每个else if 改成 if。因为这里需要对每一种情况都判断一次。

AXURE 原型设计教程2——变量控制不同场景的交互演示

3.4 设置动作的最后一步是链接到原型页面:

AXURE 原型设计教程2——变量控制不同场景的交互演示

4. 设计“用户中心”首页的原型

4.1 根据1.2的场景组来设计用户中心首页信息的布局

AXURE 原型设计教程2——变量控制不同场景的交互演示

4.2. 将场景组中的每一个场景封装成一个dynamic panel
以“用户信用、会员体系”场景组为例

AXURE 原型设计教程2——变量控制不同场景的交互演示
每一种显示内容做在一个state中,如上图,
AXURE 原型设计教程2——变量控制不同场景的交互演示

4.3 将场景组封装成的dynamic panel转化为master
以“用户信用、会员体系”场景组为例

AXURE 原型设计教程2——变量控制不同场景的交互演示

AXURE 原型设计教程2——变量控制不同场景的交互演示

4.4. 通过master的OnPageLoad事件,判断dynamic panel应该显示哪个state
该事件的作用是当页面加载master时,通过Axure的变量去判断dynamic panel应该显示哪个state。
以判断“只是vip会员”为例
AXURE 原型设计教程2——变量控制不同场景的交互演示

4.4.1 为ico这个master添加OnPageLoad事件

AXURE 原型设计教程2——变量控制不同场景的交互演示

4.4.2 添加判断条件

AXURE 原型设计教程2——变量控制不同场景的交互演示

4.4.3 设定panel显示哪个state
以判断“只是vip会员”为例

AXURE 原型设计教程2——变量控制不同场景的交互演示

AXURE 原型设计教程2——变量控制不同场景的交互演示

4.4.5 同样的方法,设置完成“用户信用、会员体系”场景组dynamic panel的所有的states

AXURE 原型设计教程2——变量控制不同场景的交互演示
4.4.6 其它场景组也是同样设置

5. 添加变量值监测功能,方便测试
同样是用master的OnPageLoad事件,将变量赋值给文本,这里就不啰嗦。

AXURE 原型设计教程2——变量控制不同场景的交互演示

6. 大功告成:)

附实例源文件:rp文件下载

分类: 9其他 标签:

Axure之复用 – 模块/组件

2011年1月10日 没有评论

作为工具,首要的条件就是高效率。高效率的解决问题,高效率的传达,高效率的记录,等等。Axure之所以被称作“快速原型设计”就在于他能高效率的完成原型设计并高效率的传达。而这一切得益与axure的“复用”思想。在Axure中的复用包括2个部分:组件的复用、模块的复用。

先温习一下在axure中什么是组件什么是模块,高手请直接跳过:

组件(控件)是用于设计线框图的用户界面元素。在组件(控件)面板中包含有常用的控件库,如按钮、图片、文本框等。从组件面板中拖动一个控件到线框图区域中,就可以添加一个组件。组件可以从一个线框图中被拷贝(Ctrl+C),然后粘贴(Ctrl+V)到另外一个线框图中。组件面板工具栏中可以加载已有组件库、创建新组件库、编辑当前组件库、或更新组件库,也可以对组件进行搜索。

模块(Maste)是可以重复使用特殊页面。一些常用模块如页首(Header)、页尾(Footer)与导航(Navigation)。模块可用在页面中或是其他模块中。只要修改模块,在所有引用这个模块的页面中的模块也会相应跟着同步更新。 模块的概念犹如PowerPoint 中母版、Dreamveawer中模板的概念,熟练掌握模块可以大大提高原型设计的效率,并使原型易于管理维护。

组件的复用是axure默认传达的第一个复用原则,axure内置有基本的Web组件和流程图组件。当然,axure还提供了更高级的组件复用——自定义组件库。在Web设计中,为了保持一致性每个系统模块都会有大量的重复设计出现,如按钮样式、链接样式、表单样式、Tab页签样式、翻页样式、图片大小、输入框交互等等等等

Axure的自定义组件可以使用有心人制作的,比如官方提供的基于雅虎风格的Web组件套装和mobile原型设计组件(下载地址)、比如有个牛逼的老外制作的2套Web原型(下载地址);也可以自己在项目过程中自我总结创建。

在控件面板中点击下拉菜单的“Create library”(创建组件)选项,这时会弹出一个保存对话框让对这个.rplib文件进行命名和保存,Axure会立刻启动另一个执行程序并打开这个刚建好的 .rplib文件。

在新的Axure程序界面中,原本站点地图面板的位置会被组件库面板(Widget Library Pane)所取代。你可以像处理页面一样对组件进行新增、删除、排序。

Axure启动时,如果已经把创建好的自定义组件库(.rplib文件)放在Windows文件夹的―我的文件> My Axure RP Librarie目录中,则该组件库会被自动加载到控件面板中。另外,你也可以手动选择你所指定的 .rplib 文件进行组件库加载。新建立的自定义组件库的操作方式就如同其它的默认组件库一样,以拖放(Drag&Drop)的方式将组件放到画布上进行画面的绘制。

虽然自定义组件和模块都基于组件的组合,但组件与模块的区别在于,组件是针对Axure存在的,在所有基于axure完成的页面中都可以使用该组件;而模块是基于某一具体的axure页面存在的,仅在该axure文件下可以使用,如果打开新的axure文件则该模块不存在了。模块针对某一具体项目以单个axure文件为单位组合复用;组件针对所有axure文件为单位组合复用。

模块的复用常用于在某个产品模块中会重复出现的情况下,如展示商品的列表、未登录的弹层、页面头部、导航、页面底部等等。共同的特点就是,在该产品模块下都需要且表现形式都一样。也就意味着如果要修改就得全部修改,如果出现就要不断的“CTRL+C”在“CTRL+V”,由于这些组件并不是单一的,如果是复制的话很可能复制不全,即使你使用了组合。模块则可以很好的解决这些麻烦。

模块有2种制作方式:在页面中框选住需要转发的组件,右键选择“转化成模块”;在左侧导航部分选择“Add Master”(添加模块)进行模块制作。在实际操作中个人觉得第一种方式应用更多,因为肯定是先在页面中进行了全局设计才知道这些组件是可以转化成模块的,有一个全局的考虑先。

模块有以下3种行为:

  • 普通行为(Normal):模块可以被移动与放置在线框图中的任何地方,对模块所做的修改会在所有模块实例中同时更新。
  • 背景行为(Place in Background):模块应用在线框图中时,会处于线框图的最底层并被锁定。模块实例中所包含控件的位置与在模块中的位置相同,常用于作为模板、布局、底板。
  • 自定义控件行为(Custom Widget): 模块应用在线框图中时,模块实例中的控件与原模块失去关联,模块实例中的控件可以像一般控件一样可以进行编辑,就好像只是进行了复制和粘帖操作。常用于创建具有自定义属性、注释和交互的自定义控件库,例如:具有白色文字的蓝色按钮。

使用一个工具并把它用透,比使用多个工具但每个工具都会使用一点要高效的多。别去追求炫目,追求效率,这是俺在使用工具上的一点小感悟,记录如此。

分类: 9其他 标签:

交互原型设计软件 Axure RP Pro 5 中文教程

2011年1月7日 没有评论

(2008.07.22 更新了Axure RP pro5 的交互部分,最下面)

一直在用visio做交互原型和画pageflow,朋友推荐用Axure RP 4,试用了一下果然不错,特别在网上找到教程转帖给需要朋友。作者:Hawking原创

先提供Axure RP pro 4.6版本的下载
http://www.jojobox.cn/blog/attachments/month_0803/AxureRP-Pro-Setup.zip
(软件仅供学习使用,反对商业用途 -_-!!!)

Part I : 介绍(Introduce)

互联网行业产品经理的一项重要工作,就是进行产品原型设计(Prototype Design)。而产品原型设计最基础的工作,就是结合批注、大量的说明以及流程图画框架图wireframe,将自己的产品原型完整而准确的表述给UI、UE、程序工程师,市场人员,并通过沟通会议,反复修改prototype 直至最终确认,开始投入执行。

进行产品原型设计的软件工具也有很多种,我写的这个教程所介绍的Axure RP,是taobao、dangdang等国内大型网络公司的团队在推广使用的原型设计软件。同时,此软件也在产品经理圈子中广为流传。之所以Axure RP得到了大家的认同和推广,正是因为其简便的操作和使用,符合了产品经理、交互设计师们的需求。

在正式谈Axure RP之前,我们先来看看做产品原型设计,现在大致有哪些工具可以使用,而他们的利弊何在。

纸笔:简单易得,上手难度为零。有力于瞬间创意的产生与记录,有力于对文档即时的讨论与修改。但是保真度不高,难以表述页面流程,更难以表述交互信息与程序需求细节。
Word:上手难度普通。可以画wireframe,能够画页面流程,能够使用批注与文字说明。但是对交互表达不好,也不利于演示。
PPT:上手难度普通。易于画框架图,易于做批注,也可以表达交互流程,也擅长演示。但是不利于大篇幅的文档表达。
Visio:功能相对比较复杂。善于画流程图,框架图。不利于批注与大篇幅的文字说明。同样不利于交互的表达与演示。
Photshop/fireworks:操作难度相对较大,易于画框架图、流程图。不利于表达交互设计,不擅长文字说明与批注。
Dreamweave:操作难度大,需要基础的html知识。易于画框架图、流程图、表达交互设计。不擅长文字说明与批注。

以上这些工具,都是产品经理经常会使用到的,但是从根本上来说,这些工具都不是做prototype design的专门利器,需要根据产品开发不同的目的,不同的开发阶段,选择不同的工具搭配使用,才能达到表达、沟通的目的。

比如使用纸笔,更适合在产品创意阶段使用,可以快速记录闪电般的思路和灵感;也可以在即时讨论沟通时使用,通过图形快速表达自己的产品思路,及时的画出来,是再好不过的方法。而word则适合在用文字详细表达产品,对产品进行细节说明时使用,图片结合文字的排版,是word最擅长的工作。而ppt自然是演示时更好。visio则可以适用于各种流程图、关系图的表达,更可通过画use case 获取用户需求。PS/FW是图片处理的工具,DW则是所见即所得的网页开发软件,这些是设计师的看家本领,对于普通的产品经理来说,需要耗费太多的精力去掌握。

其实每件工具,每个软件,在创造它的初期,软件设计师们都给它赋予了性格、气质。因为每个工具的产生,都是为了满足人类的某一方面需求。比如锄头是锄土的,起子是起螺丝的,电熨斗是烫衣服的。但是不同的工具都有自己的工作领域,在其他领域它并不擅长。而以上的软件在创造的初期,并非为了帮助产品经理、ue完成产品原型设计,因此他们都不能在prototype design 这件工作上得心应手。而Axure RP正是在互联网产品大张其道的前提下,为满足prototype design创建的需求,应运而生。

Axure RP 能帮助网站需求设计者,快捷而简便的创建 基于目录组织的原型文档、功能说明、交互界面以及带注释的wireframe网页,并可自动生成用于演示的网页文件和word文档,以提供演示与开发。

没错!Axure RP 的特点是:

  • 快速创建带注释的wireframe文件,并可根据所设置的时间周期,软件自动保存文档,确保文件安全。
  • 在不写任何一条html与javascript语句的情况下,通过创建的文档以及相关条件和注释,一键生成html prototype演示。
  • 根据设计稿,一键生成一致而专业的word版本的原型设计文档。

说到这里相信很多人已经激起了兴趣,但是在开始学习之前,我认为我们还是有必要先了解一下软件短短的历史,创造这一软件的公司—Axure Software Solutions, Inc.该公司创建于2002年五月,Axure RP是这一软件公司的旗舰产品,2003年一月Axure RP第一版本上线发表,至今已经正式发行到了第四个版本,而我提笔写到这里的时候,Axure 5.0版本beta版本已经正式提供下载试用,虽然我已经下载使用,但是我想,写教程还是应该先从稳定的4.6版说起,至于5.0版,我们可以伴随着软件一起成长。

接下来我会结合图片,分几个步骤分享我对Axure的认识,
一、 界面与功能
二、 工具栏
三、 站点地图
四、 组件与使用方法
五、 复用模板与使用
六、 交互功能与注释
七、 实例

当然,在书写的过程中我会根据具体的情况再进行调整,尽量做到图文并茂,易于理解。写这个教程的目的,一方面为自己熟悉与更加理解Axure,另一方面也鞭策自己完善自己的blog网站www.2tan.net,同时也希望以自己的绵薄之力,为希望学习Axure的朋友分享一点经验。由于这是我第一次尝试写教程,难免会出现偏颇,也希望朋友们能够不吝赐教,共同进步。

为e文好的朋友附上自学Axure RP的几个途径:
1、 打开软件,按F1调取帮助文档,对照文档学习。
2、 登录http://www.axure.com/au-home.aspx 查看flash视频学习。
3、 登录 Axure 博客 http://axure.com/cs/blogs/Default.aspx,了解软件最新信息。
4、 登录讨论组http://axure.com/cs/forums/Default.aspx,参与讨论。
Part II : 界面与功能(Interface & Function)

不论学习什么,打基础是很重要的。关于基础练习,我印象最深的故事是王羲之练习书法的故事,将一池水染黑,需要怎样的毅力?再有就是达芬奇与鸡蛋的故事,一个简单的鸡蛋,达芬奇画了无数次。我相信正是他们的一步一个脚印,才让他们有了后来伟大的成就。故事老套,道理浅显,可是我认为很重要。

学习软件,应该先熟悉每个面板,每个基础功能,才能够真正谈到运用。所以我的学习方法是了解软件的基础功能开始。

一、欢迎界面与功能


运行Axure RP后,首先弹出的是欢迎界面,它拥有的功能和其他软件的欢迎界面没有什么特别的不同。

功能区1:文档区,这个区域显示用户最近打开的Axure RP文件,用户可以快捷的打开之前编辑的文件。同时也提供快捷按钮,可以创建新文档与打开Axure RP默认文件夹。

功能区2:认证区,这个区域显示注册信息。
已经注册的用户,显示注册者名称,与已经获得认证的图标。
未注册用户,显示注册链接,引导用户完成注册注册。

功能区3:Axure RP学习中心。主要包括在线学习、帮助文档、问题反馈三个环节。
a、在线学习提供了三个链接:
video tutorial:点击后进入视频学习中心,可以通过观看相关的flash教程学习Axure RP,不过都是e文解说。
online community:进入Axure RP的官方讨论组,在线讨论学习。
Axure blog:进入Axure的官方论坛,了解最新资讯。

b、帮助文档也提供了两个链接,但是其实起到的是一样的效果,都是打开帮助文档,只是跳往不同的章节罢了。

c、问题反馈,通过点击链接可以发邮件到support@axure.com,以寻求获得帮助。

在欢迎界面中,Axure还提醒用户,用4.6高版本的软件创建保存的Axure文件,无法用以前的低版本查看。

同时,如果我们不希望下次打开软件再看到这个面板,我们可以通过选择“Don’t show this at startup”实现。

二、软件主界面与功能


关闭欢迎界面后,我们进入软件的主界面,淡蓝色调的ui,并不是很张扬。

功能区1:命令区,和我们操作的所有office软件一样,包含文件、编辑、查看和帮助,这些功能大抵是差不多的。table也很容易理解,就是对表格编辑的命令。而Axure特有的几个特殊的命令栏目是

a、wireframe:线框,包含所有画原型线框图的相关命令。
b、object:包含所有对工作区物体的操作命令,操作放入工作区的所有widgets,包括组合、排序、锁定以及脚注命令等。
c、generate:自动生成html演示文件、word说明文档,以及对生成规则进行自行编辑、定义。

功能区2:工具栏,基本和office风格一模一样,功能也很容易上手。

功能区3:工作区,这就是我们平常操作工具,创建prototype的舞台,将自己的构思在这里释放,将自己的想法在这里展现。

工作区的上部显示打开的文件名,可同时打开多文档,进行操作。

功能区4:站点地图,Axsure RP创建的文件是模拟真实网站页面关系的,sitemap就是通过树形目录关系,管理所有的站点页面文件与流程图文件。科学的文件关系结构,对有效的演示文档与生成易读的说明文档相当重要。

我的操作习惯是先画流程图,然后根据流程图构建页面文件框架,最后才开始页面的具体设置。期间可以将文件分为LOFI(低保真)与HIFI(高保真)两个部分进行分别展示,有利于不同的需求者使用。

功能区5:器具箱,囤积了所有用来画wireframe与流程图的对象。我们可以通过拖拽的方式将小图形放入工作区,进行操作。对于这里面的对象,我们有必要一一详细了解。

功能区6:复用模块区,这里创建的页面文件和sitemap的页面相似,唯一不同的是,master的每个文件,可以当作一个整体,被sitemap反复调用。这个功能就相当于程序开发中的程序复用,用好这个功能,可以减少我们很大一部的工作量。也更容易理解网页文件的关系,了解网页设计师、程序员是怎么构建网站的页面的。

功能区7:页面笔记,用来对当前创作页面进行注释与说明。同时可以在这里对页面里的关键字段和特殊问题进行详细的描述。

功能区8:页面载入时的交互功能。通过在这里设置,不同条件下,页面初次打开时的状况。

功能区9:注释与交互区。这个注释和交互和7、8不同,7、8针对的是页面,而9针对的是页面中的元素,也就是一个个widgets。

功能区的上面部分设置交互条件。通过鼠标点击、滑入、滑出,设置触发的事件,与对应widgets相应的变化。这一部分对没有程序基础的人可能会有一点难度,我稍后会做详细解释。

功能区的下面部分是注释部分,用户可以对选定的对象进行详细的注释。Axure已经设置了几个默认的注释字段,但是其实这些默认的注释字段,大家完全可以不使用,因为它可能和你要说明的东西风马牛不相及。

那么该怎么办呢?Axure提供了自主设置字段,只要你自己设置好自己常用的字段,然后按照自己的习惯编写就可以了。比如说你要说明对象的功能、优先级、参数,那么你在设置中加入这三个字段就好了。Axure最大的优势就是你设置的这些注释,在生成说明文档时,Axure自动帮你生成PRD规格的表格文档,你可以省去相当大的编号工作,与文档工作。这些我在之后也会做说明。

这些就是Axure的主要功能区,但是其实还有两个小的角落大家可能会忽略,那就是6、7、8区下面的一行系统信息,这里显示的信息很重要,但是一般人却经常会忽视。我只所以说重要,因为我们在给ui设计师wireframe的时候他们总会问,这里多少像素,那里多少像素,可是我们在画wireframe的时候却无法度量。Axure创建的wireframe,完全可以生成html,因此我们可以在画的时候就度量好每个像素距离。但是我们要怎么做呢?这就需要利用到下面这行小信息栏了。

信息栏左边显示的是文档保存情况。而右边呢,当你将一个widgets放入工作区,并选择这个widget时,这里就有用了,它显示的是你所选择widget的高宽,以及距离页面顶部和左边的px距离。通过使用上下左右键,结合这个信息栏,你可以一步一步将它移动到你想去的地方。有意思吧?

Part III : 文档管理(Document)

开章要说的是文档管理。文档管理看似简单,但是这是从操作功能上来说的,而我在说功能上的时候,想把我对文档管理的理解也一并说一下。

文档管理的目的,其实是为了有一个清晰的产品思路。刚开始工作的时候,我发现很多刚从学校出来的朋友对文档的命名与放置都是随心所欲的,我也不例外。没有好的整理习惯,这直接导致每次寻找先前的文档都要花费相当长的时间,甚至不小心误删,如果恰好有事请假,别的同事也无法接手工作。

所以,做一个prototype需要首先构建一个清晰的文档关系,这样一方面能够让自己清楚文件关系与位置,更主要的是让开发者与接受者能清晰理解你的思路,生成更合理的产品说明word文档。

Axure RP的sitemap,与windows的树形目录相似,是以父子关系构建页面关系的,每个页面既可以是一个页面page,也可以是一个流程图flow。

一、工具功能条


1、增加一个子页面:为所选择的页面创建一个子页面。
2、页面上移:同等级的页面中,将所选页面的上下排列次序,上移一个位置。
3、页面下移:同等级的页面中,将所选页面的上下排列次序,下移一个位置。
4、页面降序:将所选页面等级降序,作为原等级中,排列在所选页面上方之页面的子页面。
5、页面升序:将所选页面等级升序,将所选页面的页面等级,升序为父页面的同等级页面。
6、删除页面:将所选页面删除,同时删除其子页面。
7、编辑页面:在工作区打开所选择页面,进行编辑。

二、右键—增加为鼠标右击文件所显示命令,下同。


1、增加一个子页面:同 一,1。(表示和第一大点,第1小点功能相同,以下同此)
2、在所选页面之上增加一个同等级页面。
3、在所选页面之下增加一个同等级页面。

三、右键—移动


1、页面上移:同一,2。
2、页面下移:同一,3。
3、页面降序:同一,4。
4、页面升序:同一,5。

四、右键—复制


1、复制页面:复制所选页面,作为同级页面显示在所选页面下方。不包含所选页面子页面。
2、复制分支:复制所选页面以及子页面,作为同级分支显示在所选页面分支下方。

五、右键—页面类型

1、wireframe:页面类型定为线框图,文件图标显示页面图标。
2、flow:页面类型定位流程图,文件图标显示流程图标。

六、右键—其他


1、删除页面:同一、6。
2、重命名页面:为所选页面重命名。
3、编辑页面:同一、7。
4、生成流程表:将所选页面以及其子页面关系,生成流程图。生产图有两种页面布局方式可选。标准模式,页面按照父子关系从上自下排列;阶梯模式,页面按照父子关系从左上至右下,以阶梯方式进行排列。
5、复制页面链接到剪切板。

以上就是sitemap所有命令,其实这些命令都很简单,也很容易理解,关键在于怎么去使用。

由于页面有两种类型,wireframe与flow,所以要善于用这两种标记页面,从而让人理解你的意图。我总结大致这两种标记可以如下利用。

flow图为父页面,wireframe图为子页面:先画流程图,然后根据流程图构建页面关系。这样在流程图的指引下结构页面关系,可以更清晰的理解页面框架。

wireframe为父页面,flow为子页面:为页面线框图中的特殊部分做流程解释。可以对页面的细节部分进行详尽的解释。

当然,这两种结构方式要活学活用,在复杂的产品页面结构中,他们完全是你中有我,我中有你的。

Part IV : 模板复用(Templates)


masters和sitemap面板很相似,文档操作也一样,它们的本质区别是,sitemap里的文件是最终展示页面,masters里的文件却只是一个模块,是页面的一个部分。

masters的英文直译是主人或雇主,但是我认为这里可以叫做模板,或者复用模块。masters的文件,是页面中重复的模块,由于在不同页面中这些模块是一样的,所以拿出来作为一个模块编辑,然后在不同页面中进行调用。

这个功能类似于网页程序开发中的程序复用,不同页面中调用同一段程序,一般把这段程序单独做成一段页面程序,然后用include命令进行调用。master的文件就相当于这段被调用的页面程序。dreamweaver也有类似的功能,就是template,可以参照理解。

一、功能条
master的功能条功能基本和sitemap一模一样,功能也基本一样。唯一不同的是master可以创建文件夹,可以通过文件夹收纳不同的文件,因此唯一不同的就是第一个功能按钮,功能作用是增加一个文件夹。

二、右键单击文档——增加


增加功能的功能模块功能除了增加文件夹其他和sitemap相同,大家可以参考教程三中的二大条。

而masters的文档组织结构主要依靠文件夹完成,页面文件之间不存在父子关系。这是文档操作与组织中与sitemap的最大不同。

三、右键单击文档——移动


文件移动功能基本上也和sitemap完全相同,但是父子关系的文档移动是文件相对于文件夹完成,而不是相对于文件进行。

功能,基本上也可以参考教程三的第三点。

四、右键单击文件——文件身份“行为”


behavior是行为的意思,这个功能是axure升级到4版本后加入的,是针对master的不同使用情况而添加的一个功能,也是要重点介绍的功能。

1、normal:普通文件。就是一般的复用文件。是默认创建的复用文件。

2、place in background:定位的复用模板,这类模板的特点是定位于页面的底层,并且锁定模板中的widgets在他原来创建的位置。这类复用模块主要用于创建head、foot、侧边栏等明确定位的复用模块。

3、custom widgets behavior:自定义模块。这类模块就类似于自创了一个widgets。

这类模块与其他类型的复用模块的不同在于,其他模块与复用到页面的模块是完全相同的,模块的功能设置是什么,功能说明是什么,页面中的模块设置和功能说明就是什么。

而自定义模块与页面中被复用的模块是母子关系。自定义模块只决定了模块的功能和位置,但是进入到特定的页面中,模块中的各自部分的说明和功能可以重新定义。

充分理解三种不同类型的复用模块的区别,根据不同环境有效的选择,也是非常重要的。

五、右键单击文件——其他


1、2、3功能都是文档文档操作功能,和sitemap一样,分别是删除、重命名和编辑master。

4、5功能是对应的。前者是将所选模板文件批量运用于页面,后者是将所选模板文件,批量从页面中去除。通过选择此功能,会弹出sitemap文件的树形目录,你可以通过选择需要添加模板的页面,从而完成模板使用或移除。
check all:选择所有页面
uncheck all:所有页面都不选择
check all children:选择所选页面以及其所有子页面
uncheck all children:不选择所选页面以及其所有字页面

在4中有特殊的position设置和options命令,

position中有两个命令
place in blackground:将文件至于页面背景
specify location:是特殊定位,可以通过设置距离左侧和上边的距离,来将模板文件放入特定的位置。
options里的多选框的意思是“只有页面中没有此模板时才置入”,默认是选择的。如果不选择而置入页面,就会出现如果页面中已经有模板,模板被再次置入的情况。当然如果有特殊需要的模块,就可以这么使用了。

6、usage report:使用报告,点击后弹出面板,显示所有使用了此复用模板的列表,显示的是文件名称,通过双击文件名,可以在工作区打开,直接编辑。

PartV:Widget工具

Axure RP的widgets工具栏,就是我们用来画线框图wireframe、流程图flow的工具,也可以说是组成我们最终输出图表的零件。好比我们小时候玩的组装积木,这些工具就是组装积木里的一个个小部件,组成什么?组合得怎样?完全依靠个人的经验和智慧。因此,熟悉每一个工具的用法和用途,才能随心所欲的画出脑海中的图形。

Widgets工具栏,下分两类工具:
wireframe线框图工具:基本上对应着web页面中的各种图形。针对页面中交互行为的表达,Axure RP专门增加了image map region 图像映射区、dynamic panel动态面版、menu(vertical/horizontal)水平/垂直菜单等几个特殊的工具。

Flow工具:流程图所需的基本图形框架。

我们先谈wireframe线框图工具。学习这部分工具,如果事先有html基础,或者对web页面元素有比较充分的理解,就很容易入手。以下我根据图片中的编码,依次讲解。


1、image图片:给wireframe中插入一个图片站位,也可以直接置入真实的图片。

2、text panel文本:插入文本。相当于插入了一个< text >标签。是不带链接的文本。但是其实也可以带链接,在interactions中我们会提到。

3、hyperlink超链接:插入带链接的文本。相当于插入了一段带< a >标签的文字。但其实在Axure中它与普通文本除了外型不同,没有本质区别。
之所以将两类文字区分开来,目的还是为了在视觉表达中让人直观的理解链接文本和普通文本,而这对于设计人员理解也非常重要,因此建议画图时尽量标准的区分链接文本和普通文本。

4、rectangle矩形:插入一个矩形。可以对其进行图形样式编辑。此图形通畅被用来表达板块的边界。

5、placeholder占位符:插入一个占位符。占位符通常用来表达在页面中某些特殊区域,比如情况复杂,或者在系统升级中不需要修改,又或者无关紧要的区域等等。作者需要结合说明文字,进行对应的详细表达。
6、button按钮:插入一个按钮,相当于< button >标签。按钮一般结合表单使用,当然也可以作为强化的提示链接使用。

7、teble表格:插入一个表格。Axure的表格使用起来不是很方便,增加行、列,修改行、列宽度都不方便,算是一个败笔。期待在下一个版本的时候能够有更好的进步。与标准化制作网页一样,表格的使用在画wireframe的时候就应该明确其作用,是用来作为数据列表展示使用,而不是作为网页布局的控件。

8、text field文本输入框:结合表单使用。一般用作表单中提交数据。比如搜索框、用户登录框、注册信息填写框等。用作字段提交或单行数据提交。

9、text area文本区:结合表单使用。一般用作大段文字编辑、提交。比如文章编辑、留言等板块。

10、droplist下拉列表框:结合表单使用。一般用作下拉菜单或者下拉列表选项,比如在搜索中,可以通过下拉列表框来定位搜索分类的范围。也有人用它来做友情链接,可以通过下拉选择直接进行页面跳转。

11、listbox列表选择框:结合表单使用。通过文本框列表选项,通常使用在多项列表选择,比如在填写简历表的时候,选择你所感兴趣的行业,会提供列表选择框。不过列表选择框都会结合按钮使用。

12、checkbox多项选择:多项选择通常使用在表单中,以提供多项选择。比如在有些有些注册要求用户选择兴趣爱好,会提供十多个选项,因为选项可以并列进行,因此使用的是多项选择。

13、raido button单项选择:在一组选择中选择适合选项,选项关系非此即彼。比如在填写性别的时候提供男女选择,用户非男即女,只取一项。当然,不排除再多提供一个双性选择,这样就是三选一,但是同样是非此即彼的单一选择。

14、15、horizontal line水平线、vertical line垂直线:用以分割页面中的不同板块区域。由于web页面中只能存在垂直与水平线,为了系统生成用于演示的html文件,特将两种线条分开使用。

16、button shape形状按钮:相当于图形按钮,多用于导航,或者多帧切换的版面切换按钮。可进行边角编辑。

17、image map region图像映射区:它用于在web页面中制造一片不可见的区域,一般是图片的部分区域,相当于图片的热区,从而添加说明与互动。在现实的网页中经常会有一张大图中有某个区域是触发按钮,而图像映射区就可以用来说明这个区域的的功能和互动内容。

18、inline frame框架:类似于html中的< iframe >对象。用于在页面中制造页面框架,每个框架中嵌入不同的页面。我们经常看到后台系统分左右两栏,一般都是使用了框架,左侧载入的是导航页面,右侧是载入的管理页面。
Axure的缺点是,暂时不支持百分比,因此iframe都是按像素度量的,和实际页面效果还是有差距。

19、dynamic panel动态面版:是Axure为了表现多帧区域内容而制造的一个工具。它的图标很形象的说明了它的结构。它是不同的state叠加的一个动态区域,默认显示其中一个state,当用户触发按钮、图片或者下拉列表等时,可以设置相应动态面版切换到不同的state。不同state的关系,类似于photoshop的层,也类似于html中的css属性layer。
我们可以通过右击dynamic panel进行state编辑,然后通过打开对应state进行编辑,编辑方式和编辑页面相同。

20、21、menu(vertical/horizontal)水平/垂直菜单:用于制作水平或者垂直的菜单,可以添加漂浮的的子菜单,添加方法很简单,就是选择所要添加的菜单项,添加submenu。

Axure RP pro 的widgets工具栏,另一个重要的工具组就是flow,流程工具。

对于画流程图,是我们经常会遇到的问题。我们和程序工程师沟通,用再多的口水,也无法挑明的事情,画一张简明的流程图,就能很直白的说明关键问题。

有时候你可能会懊恼,因为程序员的思维犹如计算机,你告诉他为什么没有用,你就告诉他该怎么做,是左是右,是0是1就好了。这个时候,产品经理需要的是理性思维,清晰的思路,如果你不清晰,工程师大多数会跟着你的思路乱做一团。所以多画几个流程,多根据页面需求画清晰的流程,就能解决实际的问题。

话不多说,本章主要介绍flow里面的工具,因为图形其实很好介绍,简单的英文翻译就好了,所以也顺带说说这些图形在流程里的作用。方式还和以前一样,编号,对号入座,咱们来一个萝卜,一个坑:

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

基本上,axure讲基本流程图、页面框架图、use case 用例图涉及到的一些关键图形都囊括在flow流程工具中,模糊了流程图的区别,而尽量贴近交互设计时的工作内容。

流程图无疑只是一个表达的工具,我们在使用的时候应该根据自己的实际情况使用,而不应该死钻牛角尖,非要知道某个图形的通用标准。理解和沟通是第一位的。而对于某些具有标准性含义的图形,大家人所共知,则我们应该遵循共同的准则,这样就能达到表达的目的。

其实axure里面由于不涉及到具体的程序流程,所以有些标准的图形并没有提供,如不规则图形、侧面双矩形等,大家可以自己google一下或者baidu一下很容易就知道。大多数情况下,还是自己自定义一下自己的符号标准,就跟prd文档加上名词解释一样,才是解决方法。

PartVI:注释annotations


Axure rp将interaction交互与annotations注释说明功能放在了一个面版上,同时又针对整个页面有一个交互与注释说明。

交互功能设置的是用户通过不同方式触发页面中元素或者载入页面时,发生的交互动作。而注释说明则用文字详细说明对应元素的细节或页面的说明。由于针对整个页面的说明和交互,与针对页面中某个元素的说明与交互在文档表现和生成的不同,而被分开,但是他们的实际功能是一致的,可以一起来说。

针对页面和针对页面元素的功能,分别默认处于软件界面的右侧和底侧。如下面两张图片所示:

底部

右侧

对于交互与注释说明,有必要分开讲述。这一节主要讲述annotations,即注释说明。

首先,我定义一下对交互与注释说明的解释。
Interaction:交互功能,用以设置页面中的交互事件,如页面跳转、面版跳转。从而实现框架图中不同对象的实际功能。在生成html框架页面时,产生相应的对象功能,用以演示操作。

Annotations:注释说明,用以对页面或页面中的特定对象进行说明注释。可以根据实际情况分类编写说明内容。比如优先级、功能类型、交互效果、说明等。让程序在开发的时清楚了解该对象或该页面的程序实现详情与细节。

那么,现在重点来说注释。
1、自定义注释与说明
你也许看到e文会头大,你也许第一次看到annotations面版中specification、status、benefit、effect等一连串的英文单词脑袋发晕,那么我告诉你,你完全不用在意这些单词和选项的意义,因为也许它们根本就不适合你,而你可以自定义一套自己的说明选项。

我之所以说你不必去理解,出于两个理由,一是因为这些定义,是axure根据一些欧美公司文档中常见的字段归纳出来的,他不适合我们的国情和我们自己公司的实际情况,二则是一个文档中该向你的程序员、设计师表达什么,并没有一个完全的框架。你尽可以根据你要说明的事情,以及你们往常的沟通方式来定义。那么现在看看,我们怎么来定义吧。

如果是定义右侧的对象注释,选择 annotations & interactions > customize fields and viwe
如果是定义底部的页面注释,选择 page notes – default > manage notes
就弹出了自定义窗口,由于功能类似,所以我只选择复杂的右侧的对象注释来说明

如图所示,我们看到了两个区域:
区域一
:Fields:这是管理系统所有的说明字段的,这里定义了针对对象你要说明它的哪些属性,这些属性,用什么类型type的文字进行表述。

A)新增字段

先在前面的下拉选择框中定义该字段的type类型,有四种类型:
Text:文本文字。说明字段中用大段的文字进行说明。
Number:数字。说明字段中只包含数字说明。
Date:日期。说明字段只有日期
Selectlist:选择列表。通过设置特定的选择条件,以供选择。

然后在后面的填空框中输入字段的名称,比如我想设置一个对页面中对象的开发优先级的说明字段,那么我就可以给这个字段命名为“优先级”。然后点击add按钮,你所设置的说明字段就被添加到下面的字段列表了。

B)管理字段
管理字段,首选必须选中你要管理的字段。

然后可以通过选择右侧的功能按钮,对字段进行管理:
[b]Remove:[/b]删除此字段。
Rename:对字段重命名。
Move up:将字段排列顺序上移一格。
Move down:将字段排列顺序下移一格。
Edit selectlist:编辑选择列表中的项目,该功能只有当你所选择的说明字段的type类型是selectlist时,你才能选择。选择后会弹出编辑窗口,你可以根据自己的需求,填写不同的选择项,Axure定义,每一行为一个选择项。

点ok之后,你就完成了对所选项的管理。

区域二Custom views:这里是定义了我们自定义文件的版本。我们可以选择几个常用的说明字段,归纳起来生成一个自定义版本。
A)新增用户自定义说明

新增说明很简单,只要在输入框中输入一个名称,点选add,就会弹出一个选择框

你可以通过add field下拉列表选择你的自定义说明中要包含的说明字段项目,然后点add添加到你的自定义说明中。
当你都选择完成后,点done,就创建了一个你自己的自定义说明。

B)管理自定义说明
管理自定说明,和管理说明字段一样,在管理前,你必须选中你要管理的自定义说明。
Rename:对字段重命名。
Edit:重新定义此自定义说明中所包含的fields说明字段。弹出选择框,供你重新选择。
Remove:删除此自定义说明。

最后,当你即完成了对字段的处理,又完成了自定义说明的生成后,点done,你就定义完成了你自己的注释与说明。这个时候,你再选择annotations & interactions,你将会看到你自己的自定义说明:

选择后,右侧的注释与说明的字段就都是你自己的了:

2、自定义注释与说明的现实意义
那么这些自定义说明到底对于我们有什么现实的意义呢?有的,下面我来说明一下。
这涉及到axure rp的两个文档生成功能

生成演示文档:我们利用axure完成文档的编写后,需要给程序演示,那么我们怎么演示呢?
请按下f5键,会弹出提示框,按照默认设置确定后,就会生成html演示文件。你就可以拿这些html文件,给程序员、设计师们演示你的文件了。
而我们自定义的这些说明,在编写好的时候会出现在如图中的位置:

就是说明面版的激活按钮,点击弹出你的说明文字。这样,用户就可以在不明白的时候在页面中调出说明文字,一一查看了。

生成word文档:我们也可以生成word的文档的说明文件,这样的文件甚至可以当作PRD文档使用,而说明则会根据label的标签以及编号,对应生成table说明文档。
生成word的快捷键是F6,生成specification说明书。

综上所述,运用好了annotations,就可以解决好prd文档中最重要的工作,即功能说明。至于设置怎样的注释,完全就靠你自己来掌控了。

Ps:页面notes更加简单,因为针对页面的说明只能有一段文本,不存在特殊说明字段的编辑。

============ 最默默无闻的分割线,以下是2008.07.22更新的内容 ============

PartVII:交互interactions(上)

Axure RP Pro5终于发布了,直观操作上,最明显的变化之一就是在命令行多了“share.分享”,其次所有窗口可以以浮动形式编辑了。为了与时俱进,以后的教程将以Axure RP Pro5为基础来继续写。

话说上次功能说到注释annotations,这次就来说它的“亲兄弟”交互interactions。之所以说他们是亲兄弟,除了因为他们长在同一个面版上,更因为他们需要结合起来使用,这样才能清楚的表明功能详情。

打个不恰当的比方,如果要说明的功能对象是人,那么注释annotations标注的是这个人的基本属性,比如“性别、年龄、学历……”,交互interactions则是说明人根据外部条件,做出的回应。比如你父母做好饭菜给你,你就吃饭;给你10块钱,一个瓶子,嘱托你买酱油,你就会一溜烟小跑去打酱油(这个比喻有点过时,现在都不这么买了)。当然,我们说的是绝对条件下的绝对反应,这就是机器语言。

我们以一条简单的文字链接为例:“hawking 的 axure rp 5  文章列表”。我们来对它添加交互行为。

我把交互分为三个部分的:交互触发、交互条件、交互行为。这样的区分,其实是参考程序编程的结构而做的,这就把程序构成人性化、语义化了。

这章我着重讲解交互触发与交互行为中的快速链接,详情的交互行为与交互条件留待后面两章进行详解。还是照例先给三个名词做出名词解释。

交互触发:是发生交互的导火索,说明引起交互的触发动作是什么。
以此文字链为例,交互的触发原因,是“点击文字链”。

交互条件:是达成我们目标行为的前提条件。如果目标行为只有一个,对触发没有任何条件限制,交互条件则可以被忽略。
再以此文字链接为例,如果对查看文章列表没有任何限制,则不设置交互条件,用户点击文字链,直接发生交互行为。如果对查看文章列表有权限限制,只允许作者查看,则触发交  互行为的条件就是“以文章作者hawking的身份登录”。
PS:有条件本身,就必然会有条件的反面。或者有多个条件,就会有多个条件之外的例外情况。在写文档的时候,必须考虑进去,说明清楚,这一点最容易疏漏,而造成程序员在开发的时候想当然,或者再回来问你。针对这个例子,条件的反面就是“登录者不是hawking,或没有登录”。

交互行为:是机器依据触发事件与条件,做出的反应动作或行动。
此文字链接的的交互行为,就是“页面跳转到hawking 的 axure rp 5  文章列表页面”。

一、交互触发

触发主要有两种,一种是页面载入触发,一种是鼠标行为触发。

1、页面载入触发,针对的对象就是我们所编辑的页面,axure将其放在了page notes&page interactions面版中。如下图所示,就是page interactions。

Axure暂时仅支持一种页面触发条件,就是OnPageLoad当页面载入时。

如图所示,针对我们设置的case事件,axure提供了三个功能。
Add case:给所选对象增加事件。
Edit case:编辑所选事件。(功能前提,选择你索要编辑的事件,比如鼠标选择case 1)。
Delete case:删除所选事件。(功能前提,选择你索要编辑的事件,比如鼠标选择case 1)。

2、鼠标行为触发是当用户使用鼠标操作界面时,引发交互。

Axure支持的鼠标触发行为根据你所选择的对象不同而不同,选择图形、文字、链接会出现三种触发行为:
Onclick:当鼠标点击目标时,触发交互行为。
OnMouseEnter:当鼠标移入目标热区时,触发交互行为。
OnMouseOut:当鼠标从目标热区移出时,触发交互行为。

如果选择的是输入框、多选框等则会出现对应功能的触发行为:
OnKeyUp:Fires when the user releases a key.当释放键盘时触发交互行为。
OnFocus:当鼠标选择、聚焦到对象时,触发交互行为。
OnLostFocus:当鼠标失去对目标对象的选择、聚焦时,触发交互行为。

特别的,选择下拉框、列表框会出现:
Onchange:当所选项被更改时,触发交互行为。

而选择我们所编辑的对象后,如果对象之前没有编辑过交互事件,则有两个选项
Add case:给所选对象增加事件。
Quick link:快速添加链接。

如果曾经编辑过交互事件,则有三个功能,和页面载入触发是一样的,这里也就不再累述。

二、交互行为—快速链接

选择好交互触发后,在对交互没有特定条件设置的前提下,我们可以直接设置此次触发引起的交互行为。由于链接跳转是网页中最常用的交互行为,因此axure特意提供了一个快速链接的功能。

选择对象后,点击快速链接则会弹出如下link properties 链接属性面版:

如图所示,此面版中有四条可选命令:
1、link to a page in this design:链接到这个项目中的某一特定页面。
你可以通过鼠标点击,选择你想要跳转的,树型目录中的相应页面。

2、link to an external url or file:链接到一个外部链接或者文件。
你可以通过在hyperlink框中输入链接地址,完成链接导向。
注意:链接最好是绝对链接地址,不然就容易出错。

3、reload current page:重新载入当前页面。
Variable changes are applied变量变化生效。

4、back to previous page:返回浏览前一页面。
Varable changes are not applied变量变化不生效。

分类: 9其他 标签: ,

无觅相关文章插件,快速提升流量