开始之前

在这里我并不针对产品经理来写这本书，所以我把所有需要的工具都罗列一下，不会不要紧，咱们慢慢一起学习和进步。

1.Axure RP 6.0 版本，这是目前我使用的最新版本。大家可以到http://www.axure.com 下载。AxureRP的完全版很昂贵，要589美元。大家可以下载使用一个30天的测试版本，就可以完成本教程中的所有工作。对于有条件的大公司来说，我还是建议购买一个，因为使用Axure RP制作高保真原型能够在项目上面节省下来的时间和精力，完全超出600美元了。

2.Photoshop cs5或者任何一个使用习惯的版本都可以.

3.Snag it截图软件 ，最新版本的是10.0. 。任何其他一个能够完成全屏截图的软件其实都可以。注意一定要是全屏截图软件。这里说的全屏，并不仅仅是截整个屏幕范围内的页面。而是说如果一个网页有滚动条的话，也能够跟随滚动条一起把整个页面都截图下来。

对于任何一个项目，我们都遵循如下的步骤

1.问题描述：描述我们要解决的问题，要制作的功能或者达成的效果。
2.问题分析：分析要解决的问题，看看在Axure RP中用什么办法可以解决。
3.步骤：分步骤说明如何用Axure RP制作项目。
4.总结：总结之前步骤里面的问题。

接下来，我们会按照Axure RP软件简介，案例部分，综合案例部分，基础操作四个大部分来介绍Axure RP的使用。

现在，我们进入Axure RP的高保真原型世界！

正式开始

安装Axure RP后（安装最新版本的Axure RP需要安装最新版本的.NET Framework。Axure RP的安装过程会自动为您安装，只要按照提示一路的下一步就可以了。中间可能需要重新启动电脑一次。不必害怕！），你会在桌面上看到一个小绿叶的图标，双击运行它

然后看到如下的运行界面

为了描述方便，我们把界面分为如下8个区域，然后分别的介绍

工具栏区域【Toolbox】

对于工具栏区域，大部分熟悉Office的用户都能够很快的适应。在之后的项目学习中我会穿插着介绍一些功能的作用。这里只先介绍一下Axure RP一个特有的功能，那就是Generate【生成】这个菜单下的功能

1.Prototype【原型】：这个功能就是把当前的Axure RP网站项目生成一个HTML的网站原型。快捷键为F5。我们点击Prototype，就会看到如下的弹出窗口

Destination Folder【目标目录】是生成的HTML页面的存放位置。一般都在我的文档下面的My Axure RP Prototypes下面的目录里。

Open With【打开方式】是选择打开生成好的HTML文件的浏览器。可以选择的有Internet Explorer和Chrome。我们选择Default Brower【默认浏览器】，这时会用系统默认的浏览器来打开生成好的原型。

我们点击Generate【生成】，选择使用Internet Exploer浏览器打开，然后耐心等待几秒钟，会看到一个打开的Internet Explorer浏览器弹出来

我们会看到一个来自InternetExplorer的安全警告。不用惊慌，这是Internet Explorer的一个保护措施。我们点击这个淡黄色的警告条，然后选择“允许阻止的内容”，并且在新的弹出窗口中选择“是”，

就可以看到我们的页面原型打开了，界面如下

这就是我们生成的网站原型。左边是这个网站的站点地图。这个站点有4个页面，除了Home【首页】外还有三个二级页面。因为这个原型里面还没有任何元素，所以是一个空白的页面。当我们之后向页面中添加各种组件之后，我们就可以看到打开的是一个真实的HTML的网站。

左侧站点地图旁边的Page Notes【页面注释】记录了当前页面的一些文字说明。这些文字说明是对页面视觉的一些补充。比如声明一个促销页面只有在圣诞节的时候（12月1日-1月10日）才有效，其他的时候用户无法访问。

2.specification【规格】：这个功能是为当前的网站生成规格说明。规格说明包括了网站每个页面的描述，每个组件的坐标，尺寸，颜色等的说明。点击规格说明后，会生成一个.docx为扩展名的word的文件。之后的项目中我们可以看到生成的这个文档。功能十分的强大，能让产品经理之前为了PRD熬夜写规格说明的经历成为历史。

3.More Generators and Configurations【更多生成器和参数】：在这里可以自定义生成器，然后在生成的时候进行选择。比如我们希望默认的Generator【生成器】生成在的页面具有的Title是“正式版本”，另外一个Generator生成的页面Title是“内部测试”，那么我们就可以自定义一个新的生成器。对于这个部分因为实际操作中使用的场景比较少，我们先不啰嗦了，之后在项目中有遇到的地方咱们再介绍。

4.Regenerate Current Page to Prototype【重新生成当前页面Ctrl+F5】：这个功能只把当前页面重新生成，而Prototype功能是将整个网站生成原型。所以，当你只修改了当前页面的一些细节，而不是整个网站的话，使用这个按钮会更加高效。因为有的时候，当页面数量特别多的话，如果仅仅修改一点地方就重新生成整个项目会很浪费时间。

工具栏中的图标功能区域，只是工具菜单栏中的一些快捷按钮，与工具栏菜单中的相应功能完全一致。这个部分跟大家熟悉的Office的布局和图标类似，就不再赘述了。

还有一个特殊的工具栏菜单项叫做“Share【共享】”，这个部分是用来创建共享项目的。当我们需要多人同时在一个项目上面工作的时候，我们最好创建一个共享项目。在本书中，我们暂时不涉及此部分的内容。如果大家需要创建共享项目，参考http://www.axure.com的在线说明部分就可以了。

站点地图区域【Sitemap】

这个区域会列出当前站点的站点地图。以Home【首页】为根节点。站点地图是树状的。大家可以看看微软中国的站点地图http://www.microsoft.com/zh/cn/sitemap.aspx 站点地图按照Windows7，Office，服务器等分为了几个大类，每个大类下面又有不同的页面分支。站点地图能够方便大家对于网站的整体模块和不同的栏目，功能划分有一个很清晰的宏观了解。

以后我们要编辑某个页面的时候，只要在站点地图区域找到这个页面，然后双击，这个页面就会出现在页面区域中等候编辑。如下图所示

当我们要修改一个页面的名称的时候，只要再重复单击某个页面，然后输入新的名称就可以了，如下图

这里要注意，在删除站点地图当中的一个page【页面】的时候，是不可恢复的。所以一定要小心。

要新建一个页面，只要点击加号按钮就可以了，这个时候，一个新创建的页面就会出现在当前选中的页面的下级，如下图。在点击加号之前我们选中的页面是Home页面，所以新添加的页面自动成为了Home页面的下级页面。

如果要改变一个页面的上下顺序，那么选中一个页面后，选择蓝色的箭头进行调整就可以了。蓝色的上下箭头仅仅会改变一个页面在“兄弟”中的排行，而不会改变它的级别。需要改变一个页面的级别，我们需要使用绿色的横向箭头。比如还是刚才的New Page 1页面，我们选中它，然后点击向左的绿色箭头，它在网站地图中的位置就变成如下图所示了

点击Design Page的图标与双击一个页面一样，是把它打开在页面区域中进行编辑。

在进行复杂页面的编辑的时候，建议大家先创建一个站点地图，也就是说把网站的整体结构，站点地图先都规划好，然后在进行单独页面的编辑。这样比较高效一点。因为如果在后期添加也么，必然会影响到之前的页面结构，修改起来的成本会高很多。

部件区域【Widgets】

Widgets，我们在本书称之为部件，也有人叫做控件，或者组件。部件是Axure RP已经预先制作好的一些网站项目中的常见部件，比如一些页面元素。在Widgets部件区域中，Axure RP已经将一些常用的部件进行了分库【Library】。我们可以通过下拉列表进行选择。如下图所示

Axure RP默认存在的两个部件库为【Wireframe】线框图部件库和【Flow】流程图部件库。我们还看到【Load Library】加载部件库命令，之后，我们会告诉大家如何加载其他的部件库，比如很酷的iPhone部件库。

下面我们先介绍一下【Wireframe】线框图部件库中常用的部件。我们之后90%的时间都会在与这些部件打交道。

【Text Field】输入框部件。在所有常见的页面中用来接受用户输入的部件

【Button】按钮部件。页面中接受用户点击，提交表单的部件。

【Image】图片部件，这只是一个示意，你可以导入任何尺寸的JPG，GIF，PNG图片。Axure RP对于图片的支持是非常强大的。我们还可以导入一张大的图片到Axure RP中，然后使用Axure RP的切图片功能将它切成若干个更符合页面布局的小图片。

双击一个图片部件会打开windows的文件浏览器，然后选择一张要导入的图片就可以了。不过这里请注意，默认情况下Axure RP是按照不同的图片格式进行导入分类的。如果你在一张图片该出现的地方找不到这个图片，那么试着更改一下格式试试。

我们还可以给一张图片设置鼠标悬停时候的替换图片，选中的时候的替换图片，被禁用时候的替换图片，为页面增加更多的互动性。

【Droplist】下拉列表部件。用于在页面中让用户从一些值中进行选择而不是随意输入。

【Text Panel】文本部件。文本部件用于在页面中显示文字。文字的格式我们可以随意更改，设定不同的字体，尺寸，颜色等等。

【Hyperlink】超链接部件。用于在页面中显示超链接。但是一般我们很少用超链接部件来显示超链接。因为很多部件，比如Text Panel部件，Rectangle部件都可以添加点击事件。这就使得Hyperlink部件有些鸡肋了。

【Rectangle】矩形部件。矩形部件是一个矩形（令人惊讶不是吗？），它可以用来做很多工作，比如页面上一块蓝色的背景，就可以是一个填充为蓝色的矩形部件；页面上一个有边框的区域，就可以是一个填充为透明的矩形部件；矩形部件甚至可以用来制作文字链。它将是我们最常用的部件之一。矩形部件还可以被变化为三角形部件或者椭圆型部件而使它看起来“不那么矩形”。总之，很好用的部件。

【Placeholder】占位符部件。当我们需要在页面上预留一块区域，但是还没有想清楚这块区域中到底要放什么内容的时候，我们可以先放一个占位符部件。

【Table】部件。在页面上显示表格化的数据的时候，最好使用表格部件。

【TextArea】文本区域部件。用于在页面上接受用户的多行的文本输入。Text Field文本部件一般用来接受单行的用户输入。

【List Box】列表部件。列表部件一般在页面中显示多个供用户输入的选择，用户可以多选。

【Checkbox】复选框部件。用于让用户从多个选择中选择多个内容。

【Radio Button】单选框部件。用于让用户从多个选择中选择单个内容。我们要先为这多个选择创建一个Radio Group，这样Axure RP才知道哪些Radio Button是同一组的，从而避免让用户多选。

【Button Shape】形状按钮。形状按钮与按钮类似，但是有一些特殊的功能。比如说像Tab一样的按钮，支持鼠标悬停改变样式的按钮。可以说形状按钮结合了Button和Rectangle部件的优点。我们可以把多个形状按钮分配为一组，并且为它们的选中和非选中选择不同的状态，这样我们就可以做到让一个按钮按下去的时候，其他的按钮都“弹”起来的效果。想想我们经常使用的网站的主导航。是不是当一个导航标签被选中的时候，它会变成一个比较深的颜色？而当另外一个标签被选中的时候，刚才那个就自动恢复到正常的颜色？我们会在之后的例子中仔细说明这个操作的方式，这里大家知道一下就可以了。

【Image Map】图片地图部件。图片地图部件是很特殊的部件，它的功能是在图片上实现局部可点击的热区。最常用的情景是地图，比如一个全国地图，我们希望点击北京的时候，就跳转到北京的页面，点击上海，就跳转到上海的页面。这个功能，就是用Image Map部件来实现的。在Axure RP中，我们可以简单的将Image Map部件理解为“透明的可点击区域”。Axure RP会将Image Map显示为淡绿色背景，这样方便我们进行编辑。但是在实际生成的页面中，Image Map都是透明的。但是当鼠标移动到Image Map上方的时候，就会变成可以点击的手型。

【Inline Frame】行内框架部件。行内框架部件就是我们长说的iFrame部件。iFrame是HTML的一个部件，用于在一个页面中显示另外一个页面。在Axure RP中，使用Inline Frame部件可以引用任何一个以Http://开头的URL所标示的内容，比如一张图片，一个网站，一个Flash。只要能用URL标示就可以。之后的例子中，我们会通过Inline Frame引用不同页面的不同部分，也会演示如何通过Inline Frame在Axure RP中引用Flash。

【Dynamic Panel】动态面板部件。动态面板部件是Axure RP中功能最强大的部件，是一个化腐朽为神奇的部件。通过这个部件，我们可以实现很多其他原型软件不能够实现的动态效果。动态面板可以简单被看做是拥有N多种不同状态的一个超级部件。我们可以通过事件来选择显示动态面板的相应状态。简单的说，我们可以创建一个拥有12个状态的动态面板部件，每个状态对应一个月份。对，就像一本挂历一样。然后我们通过当前时间来决定到底显示哪个月份。在Axure RP中，动态面板部件显示为淡蓝色背景。动态面板部件在默认状态下会显示第一个状态中的内容。对于熟悉Photoshop的用户来说，动态面板像是一个动态的“图层组”，每个图层组可以有多个图层，而每个图层可以放置不同的内容。

在动态面板部件中可以包含其他的部件。所以这是Axure RP中唯一一个可以包含其他部件的部件。

【Menu（Vertical）】垂直菜单。迅速创建一个多级别的，垂直的菜单的部件。

【Menu（Horizontal）】水平菜单。迅速创建一个多级别的，水平的菜单的部件。

【Tree】树部件。创建一个树形目录

下面是一些常用的【Flow】流程图部件库的部件

我们可以用这些部件创建丰富的页面流程图。

还有我们可以自由加载的一些Axure RP官方的和第三方的部件 。比如有关iPhone的，如下图所示：

切换标签

滑动选择框

短信

滑块开关

每个部件，都有自己的一些属性，常见的属性有

最后，在需要使用某个部件的时候，我们就会说“从部件区域拖拽xx部件到页面区域中”。具体操作可以参考基础操作一章中的中的“拖拽部件”一节。

主部件区域【Masters】

主部件是一些重复使用的模块。比如一个网站的一级导航会在多个页面当中反复使用，那么把他们制作成为主部件，不但可以方便使用，而且可以方便修改。比如想在导航上面多加一个栏目，如果不使用主部件，那么就要修改每个页面的导航。而使用了主部件之后，我们只要修改主部件，那么所有引用这个导航主部件的页面都会自动的更新。主部件类似PowerPoint中的主部件。我们之后的项目中会大量的使用主部件以节约更新的工作量。一般来说，一个页面项目的如下部分可以制作为主部件

1. 导航
2. 网站header【头部】，包括网站的logo
3. 网站footer【尾部】
4. 经常重复出现的模块，比如说分享按钮
5. Tab面板切换的部件，在不同的页面同一个Tab面板有不同的呈现。

我们在之后的项目介绍中会大量使用主部件来降低工作量。

Axure RP中有一个这对Master的特殊的事件叫做Raise Event。这个事件允许同一个Master在不同的页面响应相同的事件的时候，能够有不同的表现。比如说一个Master的按钮在A页面中点击后会弹出“这是A页面”的说明；而在B页面中点击后会弹出“这是B页面”的说明。之后我们会向大家介绍如何使用Raise Event功能。

页面区域【Pages】

页面区域就是显示各个页面的内容的区域，也就是将要被生成为HTML的区域。放置在这个区域各种部件将会生成为HTML出现在原型中。

页面区域默认是会显示一些网格和标尺的。标尺的刻度是像素。所以如果你要针对1024×768的显示器开发网站的话，要注意网站的总的宽度不能超过1024。

页面区域的圆点就是左上角，这里的坐标是X0：Y0，如下图所示

在工具栏—>Wireframe【线框图】→Grid and guides【网格和参考线】 中可以看到如下的功能

每个命令基本上都是自描述的，大家很容易理解。我就解释一个，就是Grid settings【网格设置】，打开后可以看到如下的窗口

Spacing【间距】是指网格之间的间距是多少像素，默认为10个像素。值越小，网格就越密。
Style【样式】是指网格是线状的网格line，还是点状的网格intersection
DPI Setting【分辨率】，也就是每英寸有多少个像素点，对于平常我们的设计图来说，72个刚好

而对于Guides【参考线】来说，熟悉Photoshop的读者肯定不会陌生。参考线能够方便大家对齐部件。在页面区域的横标尺区域内单击鼠标左键并且拖拽，可以创建水平参考线；在纵标尺区域内单击鼠标左键并且拖拽，可以创建垂直参考线。如下图

在某一个页面中通过拖拽形成的参考线为page guides【页面参考线】。也就是说只在当前的页面中起作用。实际应用当中，我们可能会发现global guides【全局参考线】，也就是在一次创建，然后在所有的页面都可以使用的参考线更加有意义。创建全局参考线的方法如下：
工具栏→wireframe【线框】→grid and guides→create guides… 打开如下弹出窗口

初次看到这个弹出窗口有些莫名其妙，我们依次解释一下。首先说明，global guides的创建是按照分栏的模式来考虑的。比如熟悉网站设计的人会知道，一般网站有2栏模式，3栏模式，甚至4栏，5栏模式。所以global guides也是这么考虑的。

先看presets【预设】部分，可以看到我们有两个选项

960 grid：12 column 宽度为960的，12列的布局
960 grid：16 column 宽度为960的，16列的布局

然后看一下设置都有哪些，

# of columns:一共有几列
Column width：列的宽度
Gutter width：列与列之间的距离
Margin：整个布局两侧的留白。

# of rows:一共有几行
Rows height：行的宽度
Gutter height：行与行之间的距离
Margin：整个布局上下的留白。

比如，我们创建一个一共有3列的，每列宽100，列与列之间距离20，两侧留白为10的全局参考线布局，那么参数设置如下

注意一定要选中“create as global guides”，否则创建出来的参考线就是页面参考线，而不是全局参考线了。

出来的效果如下

所以，整个参考线布局的宽度为
Margin x 2+column width x # of columns + gutter width x （# of columns-1）=360

有的读者会问，如果我就要创建一根全局参考线怎么办呢？ 很简单，你把# of columns 设置为1，然后把创建出来的4根参考线删除3根，就可以了…删除参考线很简单，右键单击参考线，然后选择delete

关于页面区域我们先说到这里。以后我们要在这个区域忙活很久。

页面设置区域 【Page Notes，Interactions，Formattings】

页面设置区域用来设置如下三个部分的内容
Page notes【页面注释】：用来记录页面的一些文字描述，需求说明等等记要。也可以根据具体的需要，在这个部分添加任何的内容。但是一定要做到统一，不要一个页面的Note中是关于需求的，而另外一个页面的Note中变成了声明工作进度的。

Page interactions【页面交互】：Axure RP 6.0仅支持用户创建一种类型的页面级别的交互，就是OnPageLoad【页面加载】，允许用户在页面加载完毕后处理一些页面效果或者参数初始值的设置。熟悉页面开发的读者应该对这个事件非常的熟悉。

Page formatting【页面格式】：页面格式用于设置页面的样式信息，比如背景图片，背景颜色，对齐方式，字体，间距等等。我们会在之后的学习当中用到其中的一些内容。其中最有趣的当属修改页面原型的Sketchiness【精细度】了，大家不妨试试。

部件属性区域【Widget Properties】

部件属性区域是针对页面区域中的某一个部件单独设置的地方。也分为三个部分，分别是

Annotations【注释】：用于为一个部件设置描述，状态，风险，版本号，责任人等等信息。是精细化项目流程和项目安排的工具。项目经理会比较常用。但是在初期制作高保真原型图的过程中，我们暂时不需要处理这些内容。大家也可以自己添加定制的属性，比如某一个部件的“设计师”，“重要性”，“地理位置”等等。

Interactions【交互】：对于大部分部件，Axure RP支持如下的交互事件
1.OnClick【点击】：处理当用户点击一个部件的时候，要出现什么互动效果。比如弹出窗口，打开页面。
2.OnMouseEnter【鼠标悬停】：处理当用户的鼠标在一个部件上方悬停的时候的互动效果，比如悬停改变颜色，弹出浮层，切换面板。
3.OnMouseOut【鼠标移出】：处理当用户的鼠标结束悬停，从部件上方移出的时候的互动效果，比如改变颜色，关闭浮层。

大家可以想到我们可以利用OnMouseEnter和OnMouseOut制作如下的互动效果：
鼠标悬停在导航的某个分类时，背景色变深，当鼠标移出时，背景恢复正常。大多数网站的导航都有这种效果。比如苹果的官方网站：http://www.apple.com.cn/ 的导航。

大家可以在基础操作一章的“为部件添加事件”一节中学习如何为部件添加事件。

Formatting【样式】：处理一个部件的样式，包括坐标，宽高，字体，对齐，边框颜色，填充颜色等等，可以让用户对一个部件的样式进行一定程度的定制。这个部分的内容与工具栏区域中的内容一致。

动态面板管理区域【Dynamic Panel Manager】

动态面板管理区域会显示出当前页面中使用的所有的动态面板和每个动态面板的状态。

一个动态面板是一组状态的集合，每个状态就像Photoshop里面的一个层。那么动态面板就可以理解为一组层。可以根据互动的需要，让一个层出现而其他的层隐藏。比如用户选择了红色，那么就是红色的层出现，而选择了黄色，就是黄色的层出现。多个层不但可以交替出现，连位置也可以不断变化。我们之后会在后面的学习中使用动态面板创建一些特效。

管理动态面板在界面中的显示和隐藏，可以在动态面板管理区域点击某个动态面板后面的蓝色小矩形来实现。如果小矩形是蓝色的，那么动态面板当前就可以在页面区域中被用户看到，如果小矩形是灰色的，那么当前动态面板就不可见。但是请注意，即使在此处隐藏了某个动态面板，在最终生成的页面原型中仍然会包含这个动态面板。隐藏和显示只是为了方便用户的编辑。当页面中有多个动态面板的时候，如果都显示出来，可能会在编辑的时候彼此影响。

好了，至此，我们完成了一个比较枯燥部分的介绍，目的是让大家对Axure RP有一个大致的认识。接下来我们用实例来介绍，相信大家就会有更清楚的认识了。

 
我们来解释一下什么叫做“原型”，以方便大家有一个先入为主的概念。

什么是原型

我们经常看到的建筑设计图，样板间，一些数码产品的概念设计图，概念车就都是原型的不同体现。这些原型与最终投放市场的产品的差别和抽象程度很不同。

比如下图这个白宫的建筑蓝图 就是充满了线条和尺寸，你能最终知道建筑物的尺寸和方向，容纳多少人这些信息，但是无法知道它最终的建筑材料，配色和身临其境的感觉。

而鸟巢的这张概念图，是从最终效果的角度切入的原型图。借助计算机的3D建模技术，建筑师们现在可以在电脑中逼真的模拟建筑物最终建成后的效果。当年在2008北京奥运会主体育馆评委会的官员们看到这张图片，就完全能够体会到鸟巢的金碧辉煌和气势磅礴。评委们会以此类原型为基础去评估各种设计方案。

而鸟巢的这张概念图，是从最终效果的角度切入的原型图。借助计算机的3D建模技术，建筑师们现在可以在电脑中逼真的模拟建筑物最终建成后的效果。当年在2008北京奥运会主体育馆评委会的官员们看到这张图片，就完全能够体会到鸟巢的金碧辉煌和气势磅礴。评委们会以此类原型为基础去评估各种设计方案。

原型可以有很多种，它们的目的也会不尽相同。有作为概念展示的，有作为融资需要的，有作为目标用户测试的，有用作生产说明的，也有作为销售推广需要的。

从生产者角度来说，原型可以理解为在投入大量的金钱和人力生产最终产品之前所做出的，为了测试不同人群的反馈的测试产品，或者测试产品的精确描述；而对于消费者或者投资人来说，原型可以让你在真的花钱之前知道你将要消费的这个产品是什么样子的。

最后我们回到我最喜欢的样板间的例子上来。大多数售楼中心都会有所有各种户型的样板间。样板间也是一种原型，它会被摆上各种家居，并且一般都是精装修的。跟真的房子的唯一区别就是水电气不通，不能住人。当然，一般也没有锁。

样板间的真实价值在于，能够给予未来住户一种想像的空间。装修过的房子看起来更有感觉，能让潜在的购买者觉得，如果他买了这个房子，能够享受上什么样的温馨的家，也让他觉得物有所值（虽然房价很多时候是不包括各种家具的）。而如果看毛坯房呢，就没有什么感觉，让人无法想象家居摆在里面是什么样子的效果，让人觉得“不知道买的是什么！”

回到网站原型，我们看一个网站原型的例子。大家打开素材光盘的综合案例目录，找到电商网站目录，然后再打开“综合案例—电商网站高保真线框图”这个目录，双击intex.html，在Internet Explorer中打开这个文件。可以看到下图：

这一个比较简单的网站原型。但是大家已经能够了解到这个网站是干什么的，用户可以看到网站有什么内容，如何去操作等等。这个简单的线框图般的网站原型，已经比千言万语的文字更加说明问题了。

高保真原型

好了，现在您应该已经对原型了解了。现在我们再说一个概念，就是“高保真原型（High-Fidelity Prototype）”。虽然我之前一直在工作中使用高保真原型，但是这个词我也是在MARTY CAGAN的“启示录”这本书中第一次接触到。（是一本好书）

高保真意味着原型已经跟成品在视觉，逻辑，使用方式，感觉，功能上保持了高度的一致。我下面举几个例子说明什么是高保真原型，什么是我们所说的原型。

我们再看看刚才打开的时装时刻网站，大家可以看到，我们在这里看到的网站，已经跟实际的网站完全一样了。只是没有实现真实的功能而已。我们把这个叫做高保真的网站原型。为什么我们要制作高保真网站原型？我们下一节来解释。

高保真网站原型的优点

为什么要制作高保真网站原型

一个网站的制作大概包括如下几个部分（没准大家有别的意见，随便保留）。

这是一个简化而持续循环的过程。实际操作中也未必是线性的，而是各个环节交织在一起的。比如一般网站设计都是先从首页开始，然后设计首页，开发首页。在工程师开始开发首页的时候，产品经理和设计师在处理其他的页面。

大部分产品的制作流程都是类似的。而实际情况会复杂的多。在整个流程当中，原型的制作主要出现在需求确认，网站设计，设计确认这三个步骤中。而原型的使用会一直贯穿整个项目流程。原型就是为了告诉所有人：我们在做一个什么样的网站。当然，这个网站还没有被做出来。

如下角色的人会参与到网站的制作流程当中

1.决策者（CEO，CXO，投资人，顾问或者甲方。土话说叫“老板”。）
2.产品经理（整个网站制作项目的负责人，负责需求整理（并且保证所有的工作按照需求进行）工作分解协调和进度控制。这个人是有权利决定什么功能做，什么功能不做的人。）
3.开发经理（工程师的头儿，负责安排代码的开发进度和功成技术实施。）
4.项目经理（对于大型项目，一般有项目经理，负责协调各种技术资源。但是在互联网公司，一般项目经理都由产品经理或者开发经理担任。）
5.测试经理（网站的测试工程师，负责编写测试用例，并且以需求为基础衡量工程代码的完成情况。）
6.市场经理，商务人员（他们负责网站营销推广的事宜）
7.设计师（负责整个网站的交互设计，用户体验和视觉设计。在很多互联网公司，HTML和JavaScript的工程师也属于设计师团队，有时候也会属于工程师团队，这个到没有硬性的规则。）
8.客服人员（根据不同业务为用户提供帮助。）

一个深刻的体会就是，在网站规划的初期，大家没有看到真正的网站，那么即使大家在口头上关于网站的想法再一致，也是纸上谈兵，只是一种和谐的假象。（签了合同都难说，不要说这种口头Blah了）如果仅仅按照会议的文字决定去开发一个网站，那么必然会在后期被批判的体无完肤，白花时间和金钱。而最好的解决方案，就是在真正开始制作网站之前，能够制作一个高保真的原型，这样，所有人都可以“看图说话”，更加了解到我们要做的东西是什么，成本是什么样的，有什么特点，让需求文字和视觉实现高度的统一，不必等待3个月或者半年的封闭开发期才能看到最终的结果，而是马上就可以知道这个网站是什么样子的。制作一个高保真网站原型，大概只需要花费开发真实网站几十分之一的精力。在后面的例子中，我们可以看到如何一步一步的制作高保真原型。这里还要提示一点就是，高保真原型是一个阶段性的“一致协议”，所以虽然创建它的成本比创建网站要低很多，但是也不能无止境的反复修改。反复修改需求是大忌，尤其是没有足够的理由的情况下。不但影响进度，还很影响士气。

人人都爱高保真原型

对于不同的人员角色，高保真原型有如下优点

1.决策者：决策者关心的是：我投入时间和金钱是做了一个什么东西？它能给我带来什么样的回报？一个精美的PPT可以说明要做什么，但是无法说清楚做的是什么。比如“我们要设计一个名垂青史的奥运会主体育馆”让人听来漫无边际。而一张鸟巢的设计图就能让任何一个老百姓知道到底在做什么。高保真原型可以不言自明产品能做什么，它的价值在哪里？可以让决策者第一时间拿到可以做决策的信息。这一点对于追求风险投资的创业者来说尤为重要。大部分创业者无法逾越的第一关就是：没有办法清晰的让潜在的投资者明白他们在干什么。无论是CEO，投资人或者甲方，他们要投钱给你，而你要做的就是告诉他们将要买单的是什么东西，而又不能不顾成本的在他们买单之前真的做给他们（有的人真的做了，也成功了，世事难料，英雄辈出。），所以，原型是你能做的最好的东西，所以，放弃说“我想要做一个xxx网站”，而开始说“这就是我要做的东西！试试看吧？”。

2.产品经理：产品经理关心的是：这是个什么东西，有什么需求，我们需要什么资源，要用多少时间，才能把这个东西做出来？我印象很深刻的就是在“越狱”这个美剧里面，男主角儿迈克的医生描述迈克说了这么一段话（似乎是这么说的，说真的，我已经不在乎这个剧了。与时俱进的说，产品经理应该是像生活大爆炸里面的谢尔顿一样，关注细节，喜欢制定计划，不达目的誓不罢休！）：“在别人看来，台灯就是一个台灯，而在迈克眼里，那是灯泡，电线，底座，开关，电路板等等的组合。他会一下看到事物本身的细节”。那么产品经理就是这样一群人，别人看到的是网站，他们看到的是按钮，面板，导航，列表，样式，脚本，逻辑，流程，数据库。所以，产品经理要向其他所有角色去澄清一件事情：就是我们要做一个什么东西，并且每个角色（人）应该怎么在整体当中去配合。所以，一个好的高保真原型，能够将产品经理从反复的解释，不断的描述，繁多的问题中解救出来。他们只要说：看看原型你就明白了。

3.工程师：工程师关心的是：我们什么都可以做，但是请清楚的告诉我们需求，然后给我们时间！他们是一帮几乎什么都能做出来的人，他们害怕的是“今天做这个，明天做那个”。总是在反复修改和调整当中，没有办法持续的做事情。所以，如果作为产品经理，你能在工程师面前承担责任，一言九鼎，那么你就能得到他们的尊重。制作高保真原型的过程，能够逼迫大家都能够更加细致的，全面的去思考问题。比如大家可能原本计划在首页的第一屏放上20个产品。后来在制作过程中，发现那样特别的混乱，不清晰，放上5个产品是最优的。那么，在制作高保真原型的时候我们就已经解决了拥挤的问题，而不用在事后面对一群觉得你脑袋有问题的工程师。现在很多公司使用的PRD（Product Requirement Document），wiki，twiki这种需求文档，我只能说已经过时了。之前我做产品经理的时候，也夜以继日的写过好几十页的PRD文档，但是基本上没有任何人仔细的读过。甚至工程师也很少有仔细阅读文档的。而且，PRD会经常性的改来改去。以至于原来一位同事笑称PRD为“骗人的”。使用wiki虽然解决了版本的问题，但是仍然无法让PRD流行起来。于是通过PRD审核，也变成了一个鸡肋的步骤。因为即使确定了文档，也还是会出现无数文档没有覆盖的细节和问题。所以，一副好图胜过千言万语。是该用生动的高保真原型图代替书面文档的时候了。

4.测试人员：我不得不说，测试人员是经常会被忽略的人。这个原因有两方面，第一，在网站开始规划的时候，因为没有东西可以测试，所以会经常忽略测试人员。第二，测试人员习惯了被动工作，他们也总是会忽略自己从一开始的设计阶段就参与的重要性。所以我们会经常看到，工程师已经开始开发了，测试人员还不清楚在开发什么。或者测试人员测出了一堆bug，然后被告知当时就是这么设计的，已经早就修改了需求了。测试人员比工程师更难清楚的知道“我们在做什么”。测试人员关心的是：如果我这么做，那么我会得到什么样的结果，这个结果是不是跟预想的一致！设计图无法满足测试人员的要求，因为图不能点击不能交互，设计人员也不能输入任何东西去看看会发生什么。测试人员也就无法使用设计图或者需求文档来书写测试用例。而一个高保真的原型，能够根据测试人员的输入发生反馈。那么测试人员从一开始就可以制作测试用例，而且可以针对原型提出改进的意见。从一开始就参与到项目当中来。你会惊喜的发现，测试人员从一开始就可以发现有价值的问题。真实用户也是一种特殊的测试人员。在不同的项目中，可能会在项目的初期就找一些目标用户来进行测试，发现用户的行为模式和喜好，更好的解决他们的问题。也就是说，只要有了高保真原型，我们就立刻可以开始进行目标用户测试，而不是等到产品已经做出来了，再去拿最终用户做测试。因为那样的成本太高了。在项目发布在即的时候，即使是“把颜色由黄色改为红色”这样的需求，也会让所有人绷紧了心弦。

5.市场，商务人员：市场，商务人员关心的是：我如何把在做的这个产品介绍给行业，媒体，用户和合作伙伴？产品有什么特点？相比竞争对手有什么改进？适合什么样的营销渠道？而且，有时候很多的甲方需求，是商务人员带回来的。也就是说“是客户说的”。这时候就要格外小心了，如果不满意，用户会抛弃你，而客户会弄死你。高保真原型首先能让市场和商务人员熟悉要做的产品是什么样的，其次，他们可以让客户清楚的了解到我们公司在做什么，是否满足了客户的要求。这样就不会出现最终做出来的东西跟客户想的完全不一样的局面。市场和商务人员并不是技术导向的，他们很多时候并不能很好的理解网站技术方面的问题，或者IT行业的一些技术词汇。所以产品经理跟工程师和设计师沟通的那一套语言，在跟市场人员沟通时就完全无法奏效。如果有市场和商务人员把PRD需求文档转发给客户看，然后说“这就是我们要做的产品”，那他基本上就死定了。在我的工作经历中，我敢打保票没有市场和商务合作人员认真看过任何一个产品的PRD，更不要说wiki了。市场和商务人员是最接近媒体的，如果你不想在媒体上看到关于自己产品的莫名其妙的描述，那么就一定要花时间让市场和商务人员了解自己的产品，然后他们会让媒体，合作伙伴，广告公司了解你的产品，这样，媒体才会有针对性的对你进行宣传，合作伙伴才会关注你，广告公司的创意人才会设计出最适合产品的文案和推广策略。一般来说，市场和商务人员都决定着公司大笔的预算，任何的偏颇都将招致大量的金钱损失。

6.设计师：设计师关心的是：我们要为什么样的人，设计什么样的东西？设计师都是很有想象力，很有想法的人。但是我们不能让设计师天马行空的去设计。如果你是一个设计师，有人对你说：设计一个xx东西吧，没有任何限制，让你的创意尽情的发挥吧！那你千万别高兴，你要对他说：回去再想想吧。否则，你很有可能收不到设计费哦！我们需要的设计师，是能够在“框中作画”的设计师。他们一定要受到各方面的限制，然后在各种限制中寻求平衡。是的，就像运动员，你要遵守一个运动的基本规则（没听说过奥林匹克随便做运动吧？），才能成为一个伟大的运动员。而我们要传达给设计师的，就是他们要遵循的限制和规则。所以，你想得到最好的结果，就要设定最好的，最合适的限制。不以规矩，不成方圆，全是规矩，方圆难辨。高保真原型对于设计师来说，首先能让他们非常清楚限制之所在。一个7个字的标题的设计与一个200字的文章的设计完全没有可比性；其次能让设计师以较低的成本表达他们的多个创意方案，供决策者和目标用户测试，发现最好的方案；最后，能够让设计师从头到尾的去想一件事情，避免出现设计师想的很好，设计的很棒，但是却根本无法在时间和金钱预算内做出来的尴尬局面。

7.客服人员：客服人员关心的是：如果用户问我这个问题，我该怎么回答？而且，客服人员的挑战在于，他们要用人类的语言来回答。他们不能说“就是这么设计的！”，说“会在下个版本中实现”也不是一句很体面的话。所以，客服人员是除了产品经理外的产品专家。但是现实是，客服人员也很容易被忽视掉。客服人员是很勤奋的，他们确实会看产品文档，但是我刚才说了，产品文档特别虚幻，而且经常是写给技术人员看的。所以，高保真原型对于客服人员来说，也是一件宝贝。他们可以从一开始就开始制作帮助文档和用户手册，发现产品的问题，了解到产品的功能点和复杂点，有针对性的培训和指导用户。

现在看来大家都很开心。至少，大家不用看天书一样的PRD了，而是有图可以看哦。总结一下高保真原型的几个宏观的优点吧：

1.简单清晰，一目了然
2.便于沟通，易于理解
3.方便灵活，随时修改
4.明确需求，节约成本
5.减少误解，加速进度

（凑成每行8个字还真挺难的，不过我做到了）熟悉项目管理和预算管理的人都应该清楚，这几条对于项目的成败有多么大的影响。其实，最郁闷的事情莫过于辛辛苦苦做出来的东西不是用户想要的，不是老板想要的，甚至不是自己想要的。所以，动刀之前先写好菜谱，出发之前先列好清单，才能逢凶化吉人自有天相宜本草纲目吧！

谁来制作高保真原型

产品经理和设计师是高保真原型的制作者。产品经理负责收集各方面的需求，在平衡各种需求，行业趋势和公司实力后，确定最值得开发的产品的功能。设计师按照这个功能的规划，制作视觉体现，然后产品经理和设计师一起，将功能点，设计图和交互流程一起合并为高保真原型。但是，如果产品经理和设计师都对网页的基本技术，比如HTML一无所知，那么这个时候最好有一个懂得网页前端开发的工程师加入到制作高保真原型的队伍里面来。因为这个东西实在太重要了，是整个项目的灵魂。如果有一个人最终对高保真原型最终负责的话，那么应该是产品经理。读了本书之后，产品经理，设计师或者网页开发者，都可以很轻松的学习如何制作高保真原型。

产品经理一般在完成需求收集之后，就可以开始原型的制作了。这个阶段还不是高保真原型，而是产品经理要先完成线框图的制作，也就是用Axure RP制作一个大概的页面的框架。框架要说明都包含哪些页面，页面包含哪些模块，这些模块的布局是什么样子的，就可以了。产品经理要保证的，就是需求收集里面的所有的问题，都可以被这些页面和模块所解决。也就是说，完成线框图就是确认了需求。在确认需求的时候，我们就可以抛弃PRD，而使用线框图来进行评估和确认。可视化的线框图要比文字生动的多的多。

接着，线框图被确认后，设计师开始介入。在线框图的基础上进行最终页面效果的设计。比如添加图片，颜色，精细化布局，边框，半透明效果，渐变，创意，Logo，交互设计等。完成之后，由产品经理在PSD的基础上，制作高保真线框图。产品经理需要把设计师完成的整体的PSD另存为一系列小的JPG，PNG或者GIF图片，例如LOGO部分，背景部分，部件的背景部分，按钮等等。然后一个一个的添加到Axure RP中，替换原来线框图中相应部分的内容。最后，产品经理添加互动事件，让页面成为可以动起来的高保真原型。

然后，产品经理和设计师一起，就可以开始设计确认的部分了。这个时候确认的基础是高保真原型图，而不是PSD和JPG。确认的是整个网站，一个包括了所有的需求，视觉元素和互动的网站。一旦这个高保真原型被确认了，那么它就可以暂时代替真实的网站，出现在各个地方：市场和商务人员可以以此为基础讨论品牌和推广的事宜，测试人员可以以此为基础开始测试用例的书写，也可以聘请一些用户来使用高保真原型做目标用户测试，工程师可以琢磨开始编写代码，考虑技术架构，客服人员也可以开始熟悉流程和书写帮助文档，老板们可以拿着高保真原型开始接触更多的投资者和同行。所有的一切都被提前了至少3，4个月。大家不用再眼巴巴的等着工程师把页面做出来，然后才一下子悲喜交加。从高保真线框图开始，真正的网站之旅就开始了。

大家可能觉得在这个阶段，其实网站还是已经设计出来了啊。设计师的工作并没有减少。是的，设计师的设计工作也许没有减少很多，甚至因为制作高保真原型图还增加了一些。但是高保真原型图能够极大的方便项目接下来的运作和项目推进的速度，对于整个项目来说，效率的提高是非常明显的，消除了未来大量可能返工而给项目带来的不确定性。一旦设计师完成了主要页面元素的设计，那么有很多页面其实就可以不用再设计了，在Axure RP中就可以“拼”出来，我们之后会接触到。

对于产品经理的角色，我想强调一下，这个角色实在太重要了。如果项目是一个车轮的话，产品经理就是车轮中间的轴。他让一切资源转动起来。倒霉的是，产品经理这个职位没有什么实权。产品经理经常是汇报给产品总监的，工程师汇报给技术总监，市场人员汇报给市场总监。所以说，产品经理管理的是一个虚拟的团队，管事不管人。产品是不是好，是不是能按时推向市场，产品经理要承担非常大的压力。进度有问题需要协调，资源不到位需要争取，团队有矛盾需要劝解，功能有缺陷需要解释，要劝说老板放弃灵机一动的想法，要劝说工程师放弃最新的但是不稳定的技术，要告诉测试人员没有完美的产品，要跟市场人员协调时机，要告诉用户产品好在哪里，一旦有投诉要应付客服人员的狂轰乱炸，还要应付决策者随时随地的问询，只要有人加班，产品经理就要加班，而且一个产品经理的继任者很容易继承前任的好产品，而把坏产品的责任推个一干二净。其实产品经理们不用郁闷，另外一个没有实权而什么都管的人，就是美国总统。

产品经理的工作是多，然后学习的东西也多。在一个大公司里面，很少有一个角色能够接触到方方面面的人，了解各种人的需求，抱怨，底线，博弈。产品经理是在风口浪尖上的人物，辛苦是一定的，学到的东西也是最多的。所以，天下没有免费的午餐，有得就有失。记住一点，如果你是一个会做高保真原型的产品经理，你的仕途一定比其他人顺利的多。能干活的产品经理很多，但是能把话说清楚的还依然是凤毛麟角。

至于另外一个“产品经理是否一定要懂技术”的问题。我这么类比一下吧。做财经频道主持人一定要懂财经么？指挥打仗一定要会用枪么？踢足球一定要身体特别强壮么？都不一定，但是如果你懂财经，如果你会用枪，如果你身体强壮，那么你就会做的比别人好。明白了吗？

高保真原型的更新

与PRD一样，高保真原型也是在不停的修改中的。高保真原型并非为了做到传说中的“不改需求”的境界，而是能尽量的减少无谓的付出，能够在确定需求或者修改需求前更好的考虑和思量。比如在被问到“标题最长几个字？一次更新显示几条信息？”这样的问题的时候，我们经常会不假思索的给出一个值。但是到了实际制作的时候就会发现布局上很难实现，或者文字会被截断。或者显示5条信息的时候页面非常美观，但是只有2条信息的时候页面就会变成好像只有一只眼睛的怪兽。

既然是网站的原型，那么最好的方式就是将最新版本的高保真原型放在公司的内网。然后用一个类似http://10.1.1.1/prototype1.0/ 这样的URL指向它。这样，一旦产品经理更新了原型，所有的人都可以立即获得更新，而且可以看到发布的不同版本号的内容。创建一个内网环境非常容易，使用Windows 7自带的IIS就可以完成，这里就不再介绍了。如果实在不明白，那么就咨询一下工程师吧。他们会很乐意帮助你的。

 
Axure RP是一款制作网页原型图，或者叫做网页线框图的软件。（英文叫做prototyping software）大家可以使用Axure RP制作出来逼真的，基于HTML代码的网站原型用于评估，需求说明，提案，融资，策划等各种不同的目的。更精彩的是，该原型可以响应用户的点击，鼠标悬停，拖拽，提交表单，超链接等各种事件。除了真实的数据库支持外，它几乎就是一个真正的网站。不仅仅是图片，而是集合了HTML，CSS，JavaScript效果的，活生生的网站。使用Axure RP，能够让你在做出你想象中的网站之前，就先体验和使用你的网站！

Axure公司的故事

Axure公司创立于2002年，两个创始人是Victor Hsu和Martin Smith。Victor开始是一个电器工程师，然后变成了一个软件开发者，再后来变成了一个产品经理。（想必有读者已经开始了解到为什么Victor要开发这款软件了吧？他也是经过产品经理磨炼的人。）而Martin是一个经济学家和一个自学成才的黑客（都不是省油的灯啊！）。当两人在一家互联网创业公司共同工作的时候，通过阅读基于Powerpoint，Microsoft Visio和Microsoft Word格式的产品需求文档来开发软件。（任何在互联网公司工作过的人都应该能体会到，这是痛苦的来源。尤其是N多版本的PPT，VISIO和Word，那就是灾难了）两人不约而同的认为，应该有更好的办法。还真的有！所以，Axure RP诞生了。

Axure RP的第一个版本在2003年诞生。它是第一个专门被设计用来制作基于浏览器的网站原型的软件。9年之后，Axure RP被公认为是网页原型工具中的标准，并且被全世界成千上万的大公司中的用户体验专家，商业分析人员和产品经理使用着。

Axure RP的使用者在中国还很少，我见过不少产品经理，在使用Visio制作线框图，还有一些大神使用Word和Excel，还有一些设计高手直接使用Photoshop和Illustrator制作原型图。首先我们可以肯定很多人在工作中都主动的或者说被动的需要制作网站线框图，其次这些制作方式都不是错误。但是如果我们有更好的，更高效的办法，（记得，提高效率才能提高工资）为什么不去尝试呢？而且学习Axure RP，可比学习Office和Photoshop简单多了。

装修与Axure

没有接触和使用过Axure RP的读者可能还是不了解Axure RP是一个什么软件。我用我最喜欢的一个例子来跟大家解释一下：大家肯定都对装修有所了解。在装修自己房子的时候，你可能会做很多很多的工作，比如看建材，看家电，看各种家具城，看各种照片，看朋友的家，看户型图，看样板间，拉关系找朋友给推荐装修公司，有的也会看装修公司量身定做的3D效果图。（一般这个时候都已经签约了。）所有这些努力，都是希望在真的签约给钱，下料开工之前，尽最大的可能去了解最终的效果是什么样子，是不是自己想要的。因为一旦开始装修，就很难去更改。装修完了，结果发现自己不喜欢，不要了也是不可能的。装修还是一个花费很高的事情。

把一个毛坯房变成自己心目中理想的房子，是一件很困难，需要投入非常多精力的过程。那么如果我告诉大家，有一个“疯狂装修队”，他们能够来到你要装修的房子，完全的按照你的要求，把你的房子变成一个样板间：所有的水电气，灯，地板，墙壁，门窗，厨卫，家居，网络，绿色植物，家电全部都按照你的要求给你购买，设计，装修，安装。也就是说，给你制作出来一个完全按照你要求的“超级样板间”。并且呢，更棒的是，你还可以在里面住上一个星期。在这个期间去体验，提出改进的建议。一个星期后，当你完全满意后，再签订合同，付款，要求“疯狂装修队”按照“超级样板间”的样子开始施工。在此之前，所有的服务都是免费的。（或者说，仅付出很少的费用）

如果真有这样的疯狂装修队和超级样板间，作为消费者的你，是不是会很喜欢呢？是不是很棒？

我们相信未来的装修一定是这样的。只是我们还需要等待。

下面回到网页制作和Axure RP上面来。一个已经发布的网站，就像是一个装修好的房子。在制作网站之前，我们需要去考虑最终要做出来的网站是什么样子的，跟我们担心最终装修出来的房子是什么样子的一样。因为我们要承担时间和金钱的成本。造一个网站在大部分时候的成本可比装修要高多了。所以，如果在造出网站之前能够有一个“网站的超级样板间”给我们去评估，体验和反馈，那么该是多么好的一件事情呢？

现实中制作“超级样板间”的“疯狂装修队”还没有，但是制作“超级网站样板间”的“疯狂网站装修队”已经有了。这就是Axure RP。

我们使用Axure RP，就可以制作出“网站样板间”，让在花钱和投入精力之前，就知道网站是什么样子的，有没有满足期望，是不是合格，是不是值得，是不是用户会喜欢的。这个价值，跟大家体验现实中的“超级样板间”的感觉是一样的：你可以在装修之前先住进自己梦想中的房间。那么我想说的也是“使用Axure RP，能够让你在做出你的网站之前，就先体验和使用你的网站！”

爱上Axure RP的十大理由

Axure RP网站 上列举了你将会爱上Axure RP的10大理由（不过既然你已经买了这本书，我们的说教就显得有些多余），我们罗列如下，大家各取所需吧。

10. 你的需求说明（Requirements）从未看起来如此的棒！
让我们勇敢的面对吧，无论你对商业和系统的需求是多么的了解，写出所有相关人员都能够认真的阅读并且确认的需求文档从来都不是一个简单的事情。冗长而低效的会议让你无法忍耐，于是你决定来点不一样的。你迅速的使用Axure RP画出了整个系统的工作流程，并且用一种可以互动点击的方式演示给所有的相关人员。在创纪录的时间里面，你们达成了需求协议。所有的相关人员都对项目的前景十分兴奋。

“需求文档的问题就是我们都读同样的产品文档但是都在脑子中想象不同的事物。我们使用Axure RP创建高保真的原型以其达到功能和视觉上的统一意见。然后我们就可以针对这些高保真原型进行逆向工程。我们的成功很大程度上就归功于这些用视觉语言来描述的商业和IT需求，填补了鸿沟。Axure RP帮助我们从结果开始，真正意义上的达到以解决方案问中心。”–Bernard Schokman–Business Analyst & User Interface Impressionst—MyWare

9. 你的项目经理会爱上你！
“我已经使用Axure RP 4年了，主要把它用作一个与工程师和决策者沟通可用性的工具。我创建了交互的控件来加速设计，发布原型进行远程可用性测试，创建高保真原型来给工程师和决策者演示不同程度的复杂的交互。他们也很喜欢Axure RP，因为它能通过实际演示来交流而不仅仅是口头沟通。我爱Axure RP因为它节省了我的时间，金钱并且让我远离头痛。在我的用户体验工具箱中，Axure RP是一个无价之宝。” —Jo Anne Wright-User Experience Designer- customink.com

8. Axure RP可以在PC和Mac之间通用。
设计师喜欢用Mac，而其他人多半是用PC。Axure RP可以在这两个平台中通用，大大节省项目时间。因为Axure RP制作出来的原型，就像我之前描述的一样，是基于HTML的。你只要有一个浏览器，就可以浏览。对于这一点，Microsoft Visio就做不到啦。而且对于我们之后要提到的iPhone App开发来说，你也可以在手机上浏览你的App的原型。

7. 你可以提前知道用户到底是喜欢还是抱怨你的产品。
在一个产品真正的摆放到用户的眼前之前，你是很难知道用户的感受的。而对于网站的制作者，你并不想等到网站发布之后才去了解这一点。Visio制作的效果图没有很好的互动，所以你根据自己的想法，使用Axure RP制作了丰富的原型。在观察用户是如何使用这些原型之后，你发现你最喜欢的一个想法被证明是一个灾难，于是你开始尝试另外的方向。最终，经过几次反复的修改，你的开发过程非常的顺利，最终的产品也得到了用户的好评。

6. 你可以不再日夜的从Visio中复制和粘贴了。
相信我，从哪里日夜的复制和粘贴都不是一个好主意。

5. 你的分布式团队将感觉不那么“分布”。
你与你在世界上另外一个地方的同事一起做一个项目，断网断线会导致重做并且会让你们错过截至日期。所以你和你大洋彼岸的同事决定在Axure RP中创建一个共享的项目。你意识到不仅仅你俩可以同时编辑同一个文档，并且当你在办公室工作而他在床上休息，你不用叫醒他就可以知道他之前做的是哪些部分。你可以看项目历史从而了解到他已经完成了哪些部分。不互相踩脚趾实在是太棒了！（寓意不会互相重复做对方已经做过的工作…我的解释好像有点多余——|||）通过Axure RP的分享功能，你可以很容易的将Axure RP项目发布在互联网和局域网中，供成员分享。并且，还可以进行版本管理。

4. 你的客户会迫不及待的为你的想法买单！
你有一个非常好的主意（相信我，这种事情总在发生！），但是你很难把它“卖”出去（更要相信我，这种事情一直在发生！一切皆有可能，只是很少发生！）。幻灯片和设计图并不能起到立竿见影的效果，于是你飞快的使用Axure RP制作了一个互动的原型，与工程师沟通后你把它演示给了客户。她对于你能够给她看一些“真实”的东西而印象深刻，于是她等不及要立刻开始。

“在我们做新的客户提案的时候，Axure RP给了我们极大的优势。因为当我们走进会议室门的时候，我们有一个用户可以立刻使用和体验的原型，而不仅仅是一个抽象的想法。”—Pete Karabetis Information Designer / Project Manager VIM Interactive

3. 工程师终于知道你想要什么了，而且他们喜欢你的想法。
有时最终的产品经常会看起来跟你想的不一样。（我觉得“有时”这个词儿不准确，应该是“肯定”）在需求文档中加入更多的文字和图片会将你的工程师们推下悬崖！（这个时候你已经在下面等着他们了！）你用Axure RP制作出原型并且在文档中加入注释来详细的解释功能。工程师们精确的了解了你的需求并且决定，从今以后他们只愿意跟你一起工作（恭喜，你不会失业了，但是也没有周末了）。

2. 你的客户真正的可以使用你的产品，而你也可以立刻得到真正的反馈。

1. 使用Axure RP让你看起来帅呆了，美爆了！

Axure RP的特色功能

Axure RP有四大特色，分别如下：

概念图+设计【Sketch+Design】

1.即可粗略设计，也可精细设计的工具【Tools for quick and dirty or polished designs】
在Axure RP中，仅仅使用方块，占位符，形状和文本，可以让你飞快的制作漂亮的线框图。当你做好准备进行更加精细的视觉美化的时候，加上颜色，渐变，半透明填充，导入图片，使用网格和参考线进行精确定位，或者在其他工具（比如Photoshop，Illustrator等）的帮助下使你的项目达到你需要的合理的真实程度（Fidelity）。

如上图所示。第一张是比较粗略的线框图（Wireframe Prototype），第二张是视觉美化之后的高保真原型图（Hight Fidelity Prototype）。他们都算作是原型，只是真实程度（Fidelity）不同。我们在本书中，会主要关注在高保真原型图的制作。大家学会了高保真的，自然低保真的就水到渠成了。

2.能够随时的切换到手绘草图的效果【Switch to a sketch, hand drawn feel instantly】
现在你可以在项目的任何阶段，随时的通过 调整精细度（sketchiness）来将原型图修改为灰度的，手绘的效果。客户可能会因为这种原生态的感觉而喜欢上它。但是通过这种方式，你可以免去用户不必要的期待，让他们专注于功能，内容和互动。（而不是颜色，圆角还是直角，透明还是不透明）

上图就是将精细度设置的比较低的时候，线框图的效果。大家可以看到，Axure RP会自动的将矩形的边框变的崎岖不平，从而展现一种手绘的效果。大家可能还不是很清楚，那么我们再举一个例子。

我们在Axure RP中新建一个项目，然后拖拽一个矩形部件到页面区域中（大家可能还不太熟悉这个流程，不过没有关系，之后我们会详细介绍），现在这个矩形部件看起来是这个样子的（一点也不意外，对吗？）

然后，我们在页面属性区域的Page Formatting选项卡中找到Sketch Effects一项，如下图所示

然后将其中的Sketchiness滑动杆的值向右设置为45。这个时候我们再看看刚才的那个矩形部件，已经被“蹂躏”成这个样子了

如果你把Sketchiness设置为100，那么就进一步变成

当然，你可以把它变回去！

3. 几分钟内快速上手并且每天都能够变得更快【Start in minutes and get faster every day】
从第一天开始，Axure RP经典的图型工作环境（非常类似我们熟悉的Windows界面和Office界面），行内文本编辑和超过50种的键盘快捷键就能够让你高效的工作。当你开始熟悉选择模式，部件样式和动态面板管理器这些功能之后，你的效率将与日俱增。

4.使用主部件，可以做到“一处修改，处处更新”.【Change one, update everywhere with masters】
使用主部件【masters】来制作那些需要重复使用的部分，比如网站的头部【Headers】，尾部【Footers】或者其他模板【template】。一旦主部件被更新了，那么所有此主部件的副本都将自动被更新。你可以尽你所需在页面中使用masters，甚至可以在masters中再次使用masters从而获得最大的复用性。

5.部件库让你大踏步的开始【Widget libraries to jump start your projects】
下载那些发布的或者其他客户分享的部件库到你的Axure RP部件库中，或者创建你自己独一无二的部件库吧。加入你自己的图标，商标，品牌元素或者设计模式。

Axure RP的开发者社区提供了大量的部件库，广告行业使用的，iPhone的，Android的。部件库就像是Powerpoint的模板一样，能够让用户迅速的开始原型的创作。

互动

1.不仅仅是点击这么简单
你可以非常容易的创建简单的点击流网页，也可以使用条件逻辑，动态内容，动画，拖放，计算来创建高级功能和丰富的原型。你并不一定要创建高保真的原型，但是如果需要，你就可以很容易的把你的设计上升到新的高度，让你能够更加方便的评估，获得用户反馈以及用户测试。使用Axure RP，你可以容易的创建目前市面上常见的网页上的几乎所有的基于CSS，JavaScript和Ajax的交互动态功能。比如下面这个功能，就是著名图片分享网站Flickr的一个功能。

2.无需编程知识，所见即所得。
选择一个事件，比如OnClick【点击】，OnMouseEnter【鼠标悬停】，或者OnKeyUp【按键弹起】，然后选择一个用例并且选择动作，比如Open Link【打开链接】，Set Widget Value【设置部件值】，或者Show Panel【显示面板】。最后为动作设定选择参数，就完成了。一旦你掌握了这个诀窍，你会惊讶于你能做的，并且为居然能够如此快速的实现功能而感到惊叹。

在Axure RP中，完全不懂代码的人经过一定的学习也可以完成简单的网页互动功能，而这些功能原本是需要对CSS，HTML，JavaScript熟练掌握的工程师才可以做到的。虽然我建议互联网的从业者多少都要懂一些代码，但是这种便捷性能够极大的简化我们的工作。比如说我们对着一个Powerpoint上的页面截图说“这里可以点击，这里可以拖拽”，这样的效果就完全没有我们真正的在页面上进行点击和拖拽来的直接和生动。

3.一键点击生成HTML代码，无需浏览器
点击一个按钮，Axure RP会立刻将你的设计生成基于HTML代码和JavaScript代码的原型，并且该原型可以在Internet Explorer，Safari，Firefox或者Chrome中浏览。决策者，开发者和测试人员可以查看，并且与页面进行互动而无需安装Axure RP或者是特定的浏览器。你可以把你的文档发布在网络上，或者在http://share.axure.com 上进行分享。

4.你的原型就是你的品牌
它是你的网站原型，那么就应该是你的品牌。所以你的客户应该在原型中看到你的logo而不是Axure RP的logo。你可以添加Logo图片和标题到你的原型中。

文档

1.部件注释和页面说明
你可以对部件和页面添加说明从而更好的解释背景情况和详细的功能描述。注释按照自定义的字段进行组织，以便于更好的管理信息和使文档标准化。页面说明同时还可以针对不同的受众分成不同的分类。

2.强大的，可自定义的Word文档生成器
Axure RP可以生成自定义页头，页脚，标题页和标题样式的word文档模板，选择是一栏显示还是两栏显示，设定截图，注释和页面说明的顺序，然后，点击一个按钮立刻生成自定义规格说明，随时可用，并且可以随每次升级而自动更新。

3.导出所有文档
不仅仅可以导出所有的部件注释和页面说明，Axure RP还可以将部件的一些值，比如将列表部件或者下拉类别部件中的所有供选择的值导出为Word文档。你可以随时选择是要导出那些有注释的部件还是所有的部件。

4.通过过滤器将注释分类，然后导出为不同的文档
我们可以根据注释中的不同值，通过设定过滤器的方式，将不同值的注释分别导出。如果你在跟踪某个特定的版本或者在注释中更改了需求，那么你仅仅导出某个版本或者某个变化后的注释。

合作

1.在设计团队中共享项目
使用共享项目以便于在所有成员间同步工作。Axure RP会保留所有的工作历史并且如果需要的话可以导出之前版本的项目文档。使用一个共享的网络目录以便于建立共享项目。或者在一个SNV服务器上创建一个项目。最棒的地方就是，所有的这些都是免费的。

2.AxShare。共享你的项目并且获得反馈
你可以把自己的文件上传到http://share.axure.com，你的原型会在几分钟之内被生成并且共享。你还可以设定密码让只有你授权的人才可以访问。你可以在共享的项目中开启讨论功能从而大家可以在你的原型中进行讨论。

Axure RP与其他原型工具的比较

还有很多其他软件可以用来做网站原型，比如Microsoft Visio，Word，Photoshop等。它们都是非常强大的软件。但是对于网站原型的制作工作来说，没有Axure RP更加贴近需求。下面我们简单的对比一下这几个软件，让大家能够更好的了解它们。

对于网站原型制作来说，没有什么比Axure RP更加简单易学，功能强大，物美价廉的了。现在精通Office和Photoshop的人一大堆，但是精通Axure RP的人可还是凤毛麟角哦！赶快学习，抢占先机吧。

 
总步骤：7  难易度：难

问题描述：

Powerpoint已经是所有上班族脱离不开的一个提案工具了。有时候，虽然我们很烦，但是也会发现我们根本离不开PPT。老板们说的最多的就是：给我发个PPT吧。合作伙伴们呢，基本上电话里面说的再清楚，最后也会来一句“你今天把方案发到我的邮箱吧”。基本上呢，很少有人会直接拿Powerpoint里面默认的模板去做PPT的，那样会被人认为没有好好的做准备。而做一个体面的，合适的，内容的丰富的PPT，一般至少要花上3-4天。所以我们经常看到的就是，本来已经有了一个10几分钟就能够说清楚的好注意，好方案，为了沟通需要，往往要花上一个星期做方案，然后好不容易把人凑齐了进行提案，然后修改。终于有了一个定稿之后，要发给所有人。接下来就会发生PPT大爆炸：

1. .ppt文件还是.pptx文件？客户的office版本还是office xp呢！或者，客户也不知道自己的Office版本是什么。
2. PPT文件已经超过20M了，公司邮箱的最大的附件是15M。压缩也搞不定啊。用QQ传吧。可是QQ传过的文件在邮件中没有记录，不利于以后的查找。而且，客户不用QQ。
3. Mr A接收到了你发的PPT文件了，他发现其中有个地方需要修改。你修改了，但是你只发给了Mr A。
4. Mr A在自己的使用过程中，根据自己的需要更新了一些你原来PPT中的内容，但是并没有反馈给你。然后他又把他修改过后的PPT发给了Mr AA，MrAB，Mis AC等等。也许他突然想起来发给你了，你接收了这个文件，然后你命名为“xxxxx2.pptx”，或者“xxxxx最新.pptx”。
5. 于是，一段时间之后，你就会发现不但你自己的硬盘上有某个文档的N多个版本，而且所有跟你有工作关系的，跟这个项目有关的人手里也有无数的版本。大家的版本都叫“xxxx最新”或者“xxxx最最新”……疯了
6. 最差的是，因为你是最初的作者，那么经常有人打电话来要你针对某个客户或者某个进展再修改一版给他。于是你莫名其妙的成为了所有人的PPT秘书。

也许不都是PPT的过错。不过我真的怀念人们直接沟通的日子，难道没有PPT我们的脑子就不能理解问题了？还是我们就不会说话了呢？

抱怨归抱怨，世界还是要继续，明天9点还是要上班。在本节中，我告诉大家如何使用Axure RP制作与PPT一样的提案。然后如果你的合作伙伴可以上网的话。你要发给他们的仅仅是一个URL而已。而且你可以随时更改内容，保证版本的最新。

在Axure RP中，你可以像设计网页一样的设计PPT，把你的PPT想象成是一个有很多页面的网页就可以了。基本上所有我们在Powerpoint中能够实现的特效，动画和排版，我们在Axure RP中都可以实现。

结束发PPT的噩梦吧！（对不起我抱怨了…要平和，心灵鸡汤，生命没什么不能轻，淡定的人生不工作…）

问题分析

我们要做一个宽高比为16：10的PPT，也就是宽度和高度是W1280：H800的PPT。然后，因为最终这个演示是要在浏览器中查看的，对于大多数的浏览器来说，也都是支持全屏演示的（比如IE是F11，而且全屏演示并非是Powerpoint最有价值的地方，你完全可以不用全屏演示），所以不用担心。而且大部分时候，也不用全屏就可以看到所有的内容，也没有版本的限制。

步骤1 制作背景

我们首先创建一个背景。这个背景类似我们在Powerpoint中使用的模板。大家知道，如果你在Powerpoint中使用了模板，那么无论你的PPT有多少页，那么每页的背景，布局和字体是非常类似的。你也同样可以把公司的logo放在模板中，出现在各个页面中。

我们拖拽一个矩形部件到页面中，属性如下：

这就是我们要使用的背景部件。为了使这个背景不那么干涩，我们为它添加一个渐变的填充颜色。为此，我们点击背景色按钮，然后在弹出的窗口中，选择“Linear Gradient【线性渐变】”，然后在渐变的示例条上，两边的两个节点颜色是黑色，中间的两个节点的颜色是#666666. 在渐变角度里面，我们输入90，证明这个是一个垂直方向的渐变。如果是0的话，那么就是一个水平方向的渐变。整个设置如下图所示：

然后这个时候的背景如下图所示：

不过，在这个例子当中，我们还是回归到纯黑色的背景。大家知道我们可以同样制作与Powerpoint类似的渐变背景就可以了。

我们把Home页面的名称修改为Page 1

步骤2 将背景制作为主部件【Masters】

这就是我们的第一页。然后，我们右键单击黑色的背景，选择Convert→Convert to Master 然后在弹出的窗口中为这个新的Master命名为“Background”。这个时候，我们发现整个背景从纯黑色到有了一个淡红色蒙板的效果。这种淡红色说明当前的部件是一个Master。如下图所示：

我们可以为一个主部件添加多个副本，然后在不同的页面中使用。只要从页面左下方的Masters区域中拖拽相应的主部件就可以了。当我们需要修改的时候，只要修改了主部件，那么所有的副本都会自动的同步更新。我们在Axure RP窗口的左下角的Master区域可以看到我们刚才创建的这个叫做background的主部件。

我们在Master区域双击background，就会在编辑页面下打开。这个时候我们会是在编辑这个Master。一旦这个主部件被编辑了，那么所有的副本都会被更新。

步骤3 制作第一张幻灯片

然后，我们在页面中添加一个Text Panel部件，属性如下：

内容为“In Memory of Steve Jobs”。大家已经可以看出来了，我们要做一个纪念乔布斯的简单的PPT。

然后，我们把本节文件夹中的1.jpg添加到页面中。尺寸调整为W937：H690，坐标为X23：Y30。然后，我们生成项目，在浏览器中，看到的是如下的效果：

步骤4 Raise Event事件

接着，我们需要的效果是，无论用户点击这个页面的任何部分，都要跳转到第二张幻灯片去。这个看似容易的功能，其实我们要利用一个Axure RP的高级功能叫做Raise Event。这是为什么呢？因为每张幻灯片的背景都是同一个主部件的副本。所以呢，如果我们按照以前的方式，给主部件添加一个OnClick事件，让它跳转到第二张幻灯片的话，点击所有的副本都会跳转到第二张幻灯片。而我们要求的效果是，点击第一张幻灯片跳转到第二张幻灯片，点击第二张幻灯片跳转到第三张幻灯片，点击第三张跳转到第四张…也就是说虽然都是一个Master的副本，但是每个副本被点击后的行为不同。这正是Raise Event被发明出来的原因。大家不必惊慌，其实这个功能很容易实现。

我们先双击Master区域的background主部件，开始编辑它。在编辑窗口中，我们选中黑色的矩形部件，然后为它添加如下的事件：

当我们在Step2中选择Raise Event的时候，在Step4中会出现如下的画面：

我们需要点击下方的绿色加号来添加我们定制的动作名称。在这里我们输入nextSlide。因为我们这个动作主要是用来显示下一张幻灯片的。添加之后，我们要选中动作前面的复选框。

添加完成后，我们回到Page 1中。单击背景图片，这个时候我们发现在事件区域，已经出现了我们添加的nextSlide事件，如下图所示

然后我们双击，开始添加nextSlide事件。我们添加的事件如下：

可以看到，我们就像使用OnClick和OnMouseEnter一样的方式使用nextSlide事件。但是，nextSlide事件只能被拥有Raise Event的主部件的副本所调用。在其他的部件上面，我们是无法看到这个事件的。此外，主部件可以拥有多个Raise Event事件，然后每个副本可以去根据自身的情况来有选择的进行实现。通过Raise Event，我们可以让同一个Master的多个副本在使用同一个事件的时候，可以做不同的事情。比如我们在这个例子当中实现的，当当前页面是Page1的时候，nextSlide事件就打开Page2；当当前页面是Page2的时候，nextSlide事件就打开Page3。

步骤5 其他幻灯片

在这里我们处理Page2。仍然是一张图片配一句话。图片是2.jpg，尺寸为W1072：H670，坐标为X185：Y40。然后，Text Panel的属性如下：

完成之后是这个样子的：

我们仍然像Page1一样的添加所有的事件。不过这次Page2中背景的nextSlide事件变成了如下的内容：

我们在Page 3中拖拽一个Table部件，用以显示苹果公司最近一段事件的iPhone，iPad和iMac的销售情况。在Axure RP中使用Table很容易，与在Powerpoint中的方法非常类似。但是，如果我们为Table添加OnClick事件的话，需要为每个单元格都添加。这样非常麻烦，所以我们选择用一个Image Map来覆盖住Table的方式触发事件，在事件中，当然是打开下一张幻灯片。当然，就这个页面而言，我们可以用一个Image Map覆盖住整个页面。

在Page 4中，我们添加一个图片淡入的动画效果。为此，我们拖拽一个动态面板部件到页面中，属性如下：

然后，我们在它的state1中，把4.jpg添加进来，尺寸调整为W1024：H682，坐标为X0：Y0。接着，我们把4动态面板设置为隐藏。

在Page 4的OnPageLoad事件中，添加如下的内容：

当Page4加载的时候，我们可以看到4.jpg缓慢的在页面中淡出。

在Page 5中，我们让文字从页面下方浮上来。为此，我们先将5.jpg添加到页面中，尺寸为W1280：H771，坐标为X0：Y0。然后我们添加一个动态面板部件，命名为title，尺寸为W1280：H150，坐标为X0：Y800。所以在开始的时候，title是位于显示区域的外面的。我们双击title的state1，在其中添加文本部件，属性如下：

字体内容为“They explore. They create. They inspire.”。当title在白色背景上的时候，大家就看不到文字，但是当title出现在幻灯片上的时候，大家就可以看到文字了。

然后为Page 5添加如下的事件：

最后，在Page 6里面，我们教大家如何嵌入视频，这样在演示的时候，可以为用户提供多媒体的效果。

首先，我们要获得我们需要嵌入的视频的Flash地址。如果我们是自己制作的其他的格式的视频，那么我们先把它上传到优酷网，然后在页面上，我们要获得它的Flash地址。比如如下这个视频
http://v.youku.com/v_show/id_XMTU2NzAyNDk2.html

我们在页面上点击播放窗口下面的“分享”按钮，如下图

然后，在展开的区域中，复制如下的代码到剪贴板上备用。

然后，我们回到Page 6中，拖拽一个Inline Frame部件到页面中，尺寸为W1070：H670，坐标为X100：Y60. 右键点击这个部件，选择Edit Inline FrameNever Show Scrollbars，将部件设置为无边框。然后再次选择Edit Inline FrameToggle Border，这样部件也就没有明显的边框，能够跟背景很好的融合在一起。最后，选择Edit Inline FrameEdit Default Target，将刚才的地址粘贴到如下的位置去：

点击OK后，我们的Page 6就制作好了，在浏览器中看是如下的效果：

用户点击播放后就可以观看了。

值得注意的是，除了Safari浏览器外，在其他浏览器中Flash部件都会自动的被置于页面的最上方，没有任何其他的部件可以覆盖住Flash。所以呢，我们就不能用Image Map部件来进行切换下一页的操作。比较好的办法就是给用户一个明显的指示，比如添加一个“下一页”的标志在播放Flash的页面上，这样用户在观看完后，可以比较清楚的切换到下一页去。

步骤6 将项目放在公司网站上

我们在此就不再制作更多的页面了，其他页面的添加是很类似的。全部完成后，我们可以将整个页面的目录打包后交给公司的工程师们，让他们帮我们放在公司的对外商务合作的页面上去。比如如果公司的域名是http://www.goodcompany.com/ ，那么我们可以把这些提案，案例放置到http://www.goodcompany.com/bd/someproject.html 下面，然后把URL发给客户。当然如果这样的话，所有人都有可能会看到这个页面。如果我们需要一般的隐私性，比如只想让接收到URL的用户有资格查看，而其他用户看不到，那么我们会在步骤7中介绍一个简单的基于注册登录的方式来保护这个提案的内容。如果需要较高的隐私性，那么建议大家还是通过其他的方式，比如通过Email发送整个Axure RP项目的方式，而不是放在公开网站上的方式来发送案例。

步骤7 简单的加密

在这里我们介绍一个简单的加密提案内容的方式。首先，我们添加一个新的页面，叫做Login。让它出现在所有页面的上方。我们仍然为这个页面添加background背景。

接着我们构建一个如下的登录Form，使用Text Panel和Text Field部件即可。用户名那个Text Panel命名为username，密码那个Text Panel命名为password。另外，我们在登录按钮的下方还有一个目前没有任何内容的errorMsg部件，以蓝色的边框标示。

对于要输入密码的第二个Text Field部件，我们右键单击，选择Edit Text FieldMask Text (Password Field) 这样，用户输入的文本就会被用黑点替代。

假设我们预先设定并且在邮件中发给收件人的用户名为：genius，密码为ohmygod。记住，这个用户名和密码一定要发给对方哦，不然就出乌龙啦。

然后，我们为“登录”按钮添加如下的OnClick事件：

这里发生了什么事情呢？很容易理解。如果用户输入的用户名和密码是genius和ohmygod，那么我们我们就把一个叫做authorized的变量设置为yes，证明验证通过了，然后这个时候我们就让页面跳转到Page1，开始浏览PPT中的内容。如果不是这个用户名和密码，那么就把authorized变量的值设置为no，然后提示用户输入有误。

然后，我们要为每个页面添加如下的OnPageLoad事件：

对任何一个页面来说，如果用户没有成功登录，也就是说authorized变量的值为no，那么就跳转到login页面去，而不能浏览当前的页面。这也就防止了用户在没有输入正确的用户名和密码的情况下浏览幻灯片。如果没有输入正确的用户名和密码，那么就总是只能看到login页面。

然后我们为login页面添加如下的OnPageLoad事件：

然后，我们运行项目。就会发，如果我们不输入正确的用户名和密码，就无法继续的浏览下面的幻灯片。

注意，这只是一个很粗糙的加密的方式。只能起到一些简单的加密作用。其实不能算加密。只是能让不想看的人看起来的成本稍微高一些而已。所以，不要用这种方法去加密真正有秘密的文档哦。

此种方式也可以用来制作那些需要登录后才能浏览的页面。

总结

用Axure RP制作PPT，看起来有些不一样，其实很方便。尤其当你的提案是要帮助对方创建一个网站或者活动页面。这对于现代营销的很多案例非常适合。因为现在的很多市场推广方案都离不开一个根据促销或者推广战役而创建的一个网站。那么用Axure RP，把广告战役的页面和提案结合起来，相信我，你会在竞争中脱颖而出的。

》rp源文件下载：点击到达下载页

 
总步骤：7  难易度：难

问题描述

随着iPhone 4的火爆，开发iPhone 4应用的公司也越来越多。能在iPhone 4上运行的应用是五花八门，无奇不有。很多新的互联网创业者也希望能够在还不那么拥挤的移动互联网上占据一席之地。所以，在本节中，我们教大家如何使用Axure RP制作iPhone 4 APP应用的高保真模型。

问题分析

其实在iPhone 4上的高保真模型跟网页上的，在原理上面是一样的。链接，窗口切换，鼠标悬停等等效果的制作方式都是一样的。唯一不同的就是，iPhone 4使用的是特殊的UI部件，比如输入框啊，下拉列表，按钮，滑动按钮，键盘，输入方式等等。这些会与我们制作普通页面的不同。而且，对于页面的尺寸，iPhone 4也是固定的。我们可以制作W1024：H768，W1280：H1024，W1280：H800的不同尺寸的页面。但是所有的iPhone 4页面都是W640：H960的。因为有时候还要显示电池电量和信号栏，所以实际的高度尺寸是经常变化的。那么在制作原型的时候，一定要提前考虑到最终产品的尺寸。

我们之后会在综合案例中教大家如何制作一个整体的iPhone 4应用，在本节中，我们主要侧重在iPhone 4的各种不同的部件的制作上面。并且在最后，我们教大家模仿iPhone 4里面的图片应用做一个图片应用，就是这个应用，如下图：

步骤1 自制iPhone 4的部件库

在步骤1中，我们要制作一个iPhone 4的背景。这样呢，能让看原型的人一眼就知道我们在制作一个iPhone 4的原型。当然，iPhone 4S跟iPhone 4长的一模一样，但是如果之后iPhone 5发布了，我们只需要更换背景就好了。

我们准备一张如下的图片。大家可以在本节的目录中找到这张图片。

这张图片本身没有太多的特别，网络上有很多的iPhne 4的素材我们可以借用。将iPhone 4中间的部分删除掉就可以了。

然后，我们回到Axure RP中。接下来，我们要学习如何在Axure RP中创建一个自己的Library【部件库】。为此，在Axure RP的项目中，在部件区域，点击Wireframe旁边的下拉箭头，然后选择Create library…，如下图所示：

然后，在弹出文件浏览器中输入“iPhone 4”，因为这就是我们要制作的新的Library的名称。

点击确认后，我们会在部件区域看到我们新创建的iPhone 4部件库。如下图所示

同时，会弹出另外一个Axure RP的窗口，这个窗口是用来编辑新的iPhone 4的Library的部件库编辑窗口，如下图所示：

从这两个地方可以看出当前的窗口不是一个Axure RP的项目窗口，而是一个编辑Library的窗口，如下图所示。第一是当前窗口的标题是iPhone 4，第二是原本应该是网站地图区域的部分，现在出现的是部件库区域。

然后我们把左侧的New Widget 1修改为Background。就跟编辑页面的操作是一样的。只不过我们现在编辑的不再是一个一个的Page，而是一个一个的Widget。对比一下，下图是Axure RP的项目的编辑页面：

然后，我们双击Background部件，向部件的页面中添加一个Image部件。双击Image部件，选择我们本节目录中的Background.jpg，坐标设置为X0：Y0。如下图所示：

然后我们选择保存。这个时候，我们回到Axure RP的项目窗口中，这个时候，我们在部件区域看到的仍然是如下这样的界面：

然后，我们点击iPhone 4右侧的下拉箭头，选择“Refresh Library”

刷新后，我们就可以看到我们刚才保存的Background部件现在出现在iPhone 4 Library中了。如下图所示

当我们之后要构建iPhone 4的应用的页面的时候，就可以直接从部件区域拖拽Background部件到页面中进行使用了。就像我们使用Rectangle部件和Image部件一样。唯一不同的地方，就是我们要在部件区域中首先选中iPhone 4的部件库。

之后，这个部件库，可以在任何一个Axure RP项目中使用。经过刚才的步骤，我们创建一个新的iPhone 4部件库，这个部件库以一个叫做iPhone 4.rplib文件的形式存在。默认情况下，位于我的文档下面的My Axure RP Libraries目录下面。如下图所示：

在其他的Axure RP项目中使用iPhone 4部件库的时候，只要在部件区域中点击下拉箭头，选择“Load Library”：

然后找到iPhone 4.rplib文件，加载进来就可以了。

之后我们创建的所有新的基于iPhone 4的部件，都会保存在这个iPhone 4.rplib文件中。我们可以把这个文件共享，然后分享给其他的Axure RP用户。

步骤2 添加iPhone 4的按钮部件

我们在Library的编辑窗口中，再新建一个新的部件。方法是在部件库编辑窗口点击部件库区域的添加部件的按钮，然后将新的部件命名为Button，如下图所示：

双击Button，然后在编辑界面中拖拽一个Image部件，将Button.jpg图片导入进来，坐标为X0：Y0。然后，拖拽一个Text Panel部件到页面中，尺寸为W40，坐标为X19：Y9，字体为微软雅黑，大小为14号，颜色为白色，黑体，文本内容为“按钮”。完成后，如下图所示：

然后，我们保存iPhone 4部件库。这个时候，我们就又多了一个叫做Button的部件可以用了。而且我们可以自由的更改这个Button的尺寸和显示的字体内容。如果我们不希望用户改变按钮的尺寸，那么只要在部件库的部件编辑页面中将背景图片锁定即可，也就是点击如下的按钮：

对于这个按钮，当我们使用的时候，也可以添加各种事件。

同样的，我们可以添加如下的iPhone 4的常用按钮：

Edit Button

Back Button

Delete Button

步骤3 滑动开关

下面我们来制作iPhone里面比较特殊的滑动开关按钮，如下图所示：

我们可以把它们看做是同一个动态面板部件的两个不同的状态。在用户发生点击的动作的时候，发生滑动切换。

为此，我们新建一个新的部件，叫做Slide Button。在slidebutton的编辑窗口中，我们先拖拽一个动态面板部件，属性如下：

然后添加四个状态，分别为on to off step1，on to off step2，off to on step1和off to on step2。可以看出，我们在从on到off和从off到on的过程中都分为了两个步骤。这个background动态面板用来做滑动开关的背景部分。

然后，我们双击on to off step1状态，开始编辑。

将on to off step1.png导入到状态on to off step1中，坐标为X0：Y0，尺寸为W94：H27。
将on to off step2.png导入到状态on to off step2中，坐标为X0：Y0，尺寸为W94：H27。
将off to on step1.png导入到状态off to on step1中，坐标为X0：Y0，尺寸为W94：H27。
将off to on step2.png导入到状态off to on step2中，坐标为X0：Y0，尺寸为W94：H27。

下面我们解释一下这四个状态的意思：

此外，我们还制作了一个叫做slider.png的图片，如下图所示：
（W40：H27）

这个图片是滑动开关那个滑动的部分。

首先我们假设开始状态开关是开着的，我们要先关上开关，然后再打开开关，从而完成一个循环。滑块的宽度是40，所以在开始状态的时候，如下图所示：

所以background的右侧的灰色部分的宽度不能超过40，否则滑块就覆盖不住下面的多余的灰色部分，所以我们的on to off step1.png是56宽的蓝色部分和38宽的灰色o部分。如下图所示：

当滑块放上来的时候，刚好盖住下面的OFF部分。

当用户点击滑块后，随着滑块向左滑动，右侧要露出灰色的底色，而左侧的蓝色部分要不断消失。当滑块滑出38个像素后，这个时候要更改背景的状态为on to off step2，如下图所示：

否则，右侧又要露出蓝色的部分了，因为on to off step1.png的OFF的灰色部分的宽度是38。为什么是38而不是40呢？是因为我们的滑块在四个角的部分有2个像素半径的圆角透明效果。

更换背景为on to off step2后，滑块还要继续向左移动16个像素才能到达目的地。这样滑块一共移动了38+16=54个像素，刚好到达了最左侧。这个时候我们要将滑块的状态也就从On to off变成了Off to on，因为接下来滑块就该向右移动了。

对于从off到on的过程是完全类似的，只不过滑块是向右移动。我们在过程中也要切换一次background的状态以防止“露怯”。

接下来，我们把滑块添加到页面中。回到slide button的编辑首页去，然后拖拽一个动态面板部件，属性如下：

我们为它也添加两个状态，一个叫on to off，一个叫off to on。 我们先双击on to off，然后把slider.png添加到页面中。坐标为X0：Y0。然后我们为它添加如下的OnClick事件：

整个过程比较清楚，中间的wait 380ms是我们要让程序等待一会儿，否则就会出现还没有移动38像素，就已经开始把Background的状态设置为on to off step2了。

同样的，对于slider的off to on状态，用的图片也是slider.png，但是事件不同。

这个时候，我们生成一下iPhone 4这个Library，与生成页面的方式完全一样。在浏览器中，我们可以看到，这个slide button部件已经可以很好的工作了。

我们回到Axure RP项目的窗口中，然后刷新部件库，就可以看到现在我们的iPhone 4部件库中已经有我们需要的slide button部件了：

以上为本案例部分内容，所有内容请见 网站蓝图-Axure RP高保真网页原型制作 书籍

 
总步骤：5  难易度：难

问题描述

2011年10月6日，苹果前首席执行官史蒂夫.乔布斯离开了我们。我到苹果首页悼念他，无意之间发现了苹果网站右上角的搜索框，决定在Axure RP中实现它。

打开苹果的首页，我们单击右上角的搜索框，发现当获得鼠标的输入焦点的时候，它会自动展开，而当失去焦点的时候，它又会自动关闭，不占用空间。这样给了苹果的导航更多的空间去容纳各种产品的信息。滑动切换，完全的苹果风格。

苹果首页：http://www.apple.com/

获得焦点前：

获得焦点后：

问题分析

首先，我们多用几次苹果首页的搜索框，我发现了如下的切换过程：
1.当用户点击的时候，苹果搜索框的底色变成白色的。
2.搜索框左边的部分，包括搜索提示的那个小放大镜，会向左进行滑动，整个搜索框变大。
3.滑动结束后，搜索框变成一个更宽的，背景色为白色的输入框。
4.当搜索框失去焦点的时候，底色变成黑色的。
5.搜索框左边的部分，包括搜索提示的那个小放大镜，会向右进行滑动，整个搜索框变小。
6. 滑动结束后，搜索框是一个窄的，背景色是黑色的输入框。

在这里我们为了简化一些问题，暂时不去处理苹果搜索框下面的搜索提示部分的内容。这个部分的内容可以在“搜索提示效果”一节中同样的进行制作。

这里的关键点在于，怎么去实现搜索框的“膨胀”效果。我们不能简单的把一个图片进行放大和拉伸，那样会变型。所以，我们的做法是用“滑动”的效果来解决这个问题。我们把示例过程分为前台和后台两个部分，前台是用户看到的效果，后台是我们的实现过程。如下图所示：

我们用三个矩形来说明我们的做法，首先在step1中，我们看到一个窄的矩形，这个窄的矩形是由三个矩形，矩形1，矩形2和矩形3拼接而成的，但是矩形3其实并不可见。由step1的后台我们可以看出来，矩形3是不可见的，并且位于矩形1的下面。这个不可见的矩形3，我们在Axure RP中，可以通过动态面板来实现。所以，在这种情况下，用户看到的是一个窄的矩形。

然后在step2中，我们让矩形1向左侧滑动，并且把矩形3设置为可见，这样在前台，用户就会看到矩形1在滑动，然后矩形1下面的矩形3就会缓缓的露出来。所以，在step2的前台效果中，用户就会看到窄矩形“膨胀”成了一个宽的矩形。用户就会觉得整个画面伸缩了。当然，从宽矩形变成窄矩形的过程是相反的，我们只要让矩形1向右滑动，然后隐藏矩形3就可以了。

这是一个简单的类比，但是说明了我们解决这个问题的思路。就是用“滑动”。再加上之前分析的，在向左滑动进行“扩张”之前，我们要把背景色变为白色的，而在向右滑动进行“缩小”之前，我们要把背景色变为黑色的。

还是要声明一下，在这个例子中，我们无法做到100%的一致，因为Axure RP暂时还不支持可以改变背景的文本输入框，严格的来说，可以改变背景色，但是不支持像苹果搜索框那样的，上下两部分分别有不同背景色的设置。

步骤1 准备背景图片

我们把苹果首页导航栏右侧的搜索输入框截取下来，如下图所示，尺寸为W136：H38。这个图片我们之后要反复使用，我们将它命名为shortBlackBg.jpg。

如果大家不熟悉snag it，那么用PrtSc截图后，用Photoshop等软件编辑后，取搜索框这么大一块也可以。不过注意，尺寸一定要与图示中的一致，否则可能会在后续的学习编辑中出现对不齐的问题。

然后，我们在苹果的首页，用鼠标单击搜索输入框后，输入框会展开，在展开的状态下，我们再用snagit截一张图，叫做whiteBg.jpg，如下图所示：

这张图的尺寸是w200：h38。

然后，我们还需要一张与whiteBgWhole.jpg同样大小的，但是背景为黑色的图片。这个需要在Photoshop里面进行一些处理，关于photoshop的使用技巧，在本书里面就不赘述了。这个背景主要用来在宽搜索框变化为窄搜索框的时候，改变背景色以达到平滑过度而使用。我们把它命名为longBlackBg.jpg。

步骤2 准备项目

好，我们暂时准备上面三张图片，然后开始新建一个Axure RP项目。我们希望页面能够跟苹果首页一样有一个灰色的背景色，而不是白色的。为此，我们在home页的页面设置区域，选择Page Formatting选项卡，如下图：

然后在Back Color选项中输入颜色号# E9E9E9，然后就会发现整个页面区域变成灰色了。这个灰色是跟苹果首页的灰色一致的。

接着我们拖拽一个动态面板到页面区域中，属性如下：

然后我们为这个动态面板添加两个状态，分别命名为onLostFocus和onFocus。

然后我们双击onLostFocus，也就是搜索框失去焦点的时候的状态来进行编辑。我们向onLostFocus状态拖拽一个Image部件，然后双击它，在文件浏览器中选择shortBlackBg.jpg，在弹出的询问是否自动修改图片尺寸的对话框中选择“是”。然后我们可以看到图片出现在了状态onLostFocus的页面区域中，这个时候我们将图片的坐标设置为X64：Y0，如下图所示：

然后，我们拖拽一个Image Map部件到页面区域中，这个Image Map区域，就是放置在上图中搜索框的部分中，用来接受用户的点击而用的。在苹果首页上，当我们鼠标悬停在搜索栏的上方而没有点击的时候，鼠标会变成输入状态（也就是变成一个竖线）。但是这个效果，我们在Axure RP中无法做到，Axure RP中我们无法控制鼠标的任何操作和展现。只有Text Field输入框部件能够让鼠标悬停的时候出现输入状态的鼠标，但是如果我们把一个Text Field部件放在shortBlackBg图片的上方，那么因为我们无法让Text Field部件透明，也不能修改Text Field部件的背景颜色，所以会出现如下的效果：

这个肯定不是我们想要的。所以在此处，我们用Image Map部件代替Text Field部件来做一个折衷的效果。

为了覆盖住黑色背景的输入框部分，我们将Image Map部件的尺寸设置为W79：H17，坐标为X97：Y9。这样，刚好盖住输入框的中间部分。如下图所示：（放大视图后的效果）

为了大家看的清楚，我把图片放大了。之后，我们会在这个Image Map上添加相应事件来处理滑动。onLostFocus的内容我们暂时处理至此。

然后我们在右下角的动态面板管理器中，双击slideSearchBox下面的onFocus状态开始编辑。

我们首先制作背景部分，也就是前面所说的矩形3。当矩形1滑动的时候，矩形3会随时改变状态以配合。为此，我们拖拽另外一个动态面板部件到页面区域中，属性如下：

我们为它添加两个状态，分别命名为white和black。然后我们双击white。

在white状态中，我们拖拽一个Image部件，然后将这个Image部件设置为whiteBg.jpg。坐标仍然为X0：Y0。

我们要知道，在滑动完全结束后，也就是搜索框完全展开的时候，搜索框中间是一个文本输入框，用户可以输入文字。所以，既然base动态面板部件的white状态是完全展开的搜索框的状态，那么我们就需要在这里添加一个文本输入框Text Field。我们拖拽一个Text Field部件到页面区域中，将它的尺寸调整为W146：H16，坐标为X32：Y10，刚好覆盖在white.jpg中间的白色空白部分。如下图所示：

中间有一圈蓝色边框的就是我们添加的Text Field输入框部件。我们将这个部件命名为SearchBox。然后，我们右键单击SearchBox，选择Edit Text FieldToggle Border。然后我们可以看到，SearchBox没有边框了。在这个例子中，我们需要一个没有边框的输入框。

好了，然后我们关闭white状态，打开black状态。Black状态的编辑很容易，只要添加一个Image部件，然后将它的图片设置为longBlackBg.jpg，并且将坐标设置为X0：Y0即可。

步骤3 滑动模块

Base动态面板我们也准备好了，接下来准备用来滑动的模块。在Axure RP里面能“动”的，就只有Dynamic Panel动态面板部件了。所以，我们回到slideSearchBox的onFocus状态，因为“滑动”是在onFocus的状态下发生的。我们在onFocus状态添加一个新的动态面板部件，命名为slideDoor，并且为它添加两个状态分别叫做white和black。动态面板的尺寸为W98：H38。

我们选择这个宽度是有学问的，等会我们就会看到选择这个尺寸的原因了。我们把slideDoor的坐标修改为X0：Y0。然后双击编辑white状态，我们先添加一个Image部件到white状态的页面区域中，然后将它设置为whiteBg.jpg。这样，我们就看到W200：H38的whiteBg图片出现在了界面当中，然后，我们右键点击它，选择Edit Imageslice Image，如下图所示：

然后，鼠标就变成了一个小刀的形状，并且有一个十字的线出现在界面当中。如下图所示：

在这个图里面，我们在右上角可以看到有一排按钮。第一个十字状的按钮，说明这个是十字切割，十字切割是什么意思？我们用小刀一样的鼠标在图中的Image 部件的中间点击一下，就知道了，这个图片立刻“碎”成了四瓣，被“十字切割”了。

也就是说，一个图片经过切割之后，就变成了四个，而且四个部分可以单独的移动，再也没有任何联系。

而接下来的三个按钮，分别是水平切割，垂直切割和取消。顾名思义，水平和垂直切割都只在一个方向上进行切割，只能把一个图片切成两个部分，而不是像十字切割一样可以切成四个部分。其实十字切割也可以仅仅切成两个部分的，只要点击在图片的外面就可以了。我们接下来就要用十字切割来将这个Image部件切成两个部分。

如图所示，我们只要把切割点选择图片之外，就能够将图片分割为两个部分：

我们需要分割出来的两个部分，左侧的尺寸为W34：H38。为什么是34呢？因为34刚好是图片左侧的头部，包括放大镜部分的尺寸。也就是滑动的部分。如果比34小呢，放大镜部分就无法被包含，如果比34大，滑动部分过大会影响视觉的效果。笔者是经过了一些测试得出的最优的尺寸，也希望大家以后在项目如果遇到拿不定主意的问题，也通过测试确认一下。

在切割好图片后，我们把右侧的部分删除掉，就只剩下左侧的W34：Y38的部分，并且将它的坐标设置为X64：Y0，如图所示：

这个时候，我们回到onFocus动态面板的首页去看看，发现slideDoor并没有覆盖住base，也就是说矩形1并没有完全覆盖矩形3，所以导致矩形3在下面露出来了：

之前我们说过，可以通过控制矩形3来实现隐藏从而达到不露出来的效果。但是这里我们用一个更巧妙的方式解决这个问题。

回到slideDoor的white状态，向页面区域中拖拽一个矩形部件。将边框设置为无，然后将尺寸设置为刚好将宽度为34的Image的左侧全部覆盖。既然整个slideDoor的宽度是98，Image部件的宽度是34，那么这个覆盖矩形的宽度自然就是98-34=64了。高度仍然是38。坐标为X0：Y0. 填充颜色，我们一定要设置为与背景色一致，即为#E9E9E9。如下图所示：

这个时候，再回到onFocus的首页进行查看，可以看到slideDoor已经把base完美的覆盖了。

所以，在onFocus开始的一瞬间，用户看到的是上图的样子。也就是说，背景色变白了！然后，才是slideDoor的滑动过程。

下面自然是slideDoor的black状态了，black状态与white状态几乎一样，仅仅是其中的图片变成了longBlackBg.jpg的左侧的34像素宽的图片，也就是填充色是黑色的图片，如下图所示：

至此，我们所有的素材都准备完毕了。现在动态面板区域看起来是如下这个样子的：

以上为本案例部分内容，所有内容请见 网站蓝图-Axure RP高保真网页原型制作 书籍

 
总步骤：5 难易度：难

问题描述

试衣间是这样一种应用，用户将看到一个虚拟的模特，可以选择身材跟自己相似的模特，然后把一些漂亮的衣服给虚拟的模特穿上，看看效果，然后决定是不是自己也要买。这是一个很新兴的互动购物的方式。在这个例子中，我们参考的网站是Looklet，如下图所示：

用户可以点击右侧的某件裙子，然后左侧的模特就会“穿”上。这样用户在购买之前就可以看到比较真实的效果。如下图所示：

Looklet的地址：http://looklet.com

Looklet是一个很好的打造个人形象和购买市场潮牌的网站。可惜是英文的，不方便国内用户购买。不过很多牌子也是国内有的，比如Zara，Acne，Adidas，G-Star Raw等等。所以用户也可以搭配满意后，在线下购买。

Looklet就像一个有着无数件漂亮衣服的试衣间，用户可以随意搭配，并且还可以把自己的搭配保存起来，分享给网友和朋友。所以，建议大家亲自去看看吧。

下面我们就学习如何在Axure RP中制作这个效果。

问题分析

首先我们可以判断，身着内衣的女模特是一个背景，在选择服装之后，服装会覆盖在模特的身上，从而出现模特“穿”上了衣服的效果。所以，这些服装肯定是被放置在一些动态面板部件中。然后通过右侧列表中每件衣服的OnClick事件来控制面板的状态和显示隐藏。

另外，我们怎么来实现搭配呢？最容易想到的办法就是给每件衣服都制作成一个动态面板部件，当用户选择这件衣服的时候，就显示出来。然后将之前的显示的同类的衣服隐藏起来。这样避免模特穿上两件外套，两件裤子或者两双鞋。在这里，我们不去为每件衣服都做成一个动态面板，因为那样随着衣服的增多，动态面板将变的非常难于管理。而且，想象一下如果我们有30件夹克。那么用户选中一件夹克的时候，我们就要写事件来隐藏其他的29件夹克的29个动态面板！所以，这里我们对每一类服装，使用一个动态面板。比如帽子使用一个，上装使用一个，下装使用一个。这样更换衣服的时候，我们只要把不同的面板设置为不同的状态就可以了。

仍然，为了简化，我们要制作的试衣间只有16件衣服。如果读者要制作更多的，那么可以按照同样的方式添加自己喜欢的服饰。

这里还有一个难点就是怎么获得衣服的图片。我们需要衣服的透明背景的图片。这样，当衣服覆盖在模特身上时，才能跟模特结合的很好，像是“穿”上去的，而不是盖上去的。比如下面这件衣服的原图片是这样的，不是透明的，而是白色背景的。

如果我们把这张图片放在动态面板中覆盖在模特的身上，那就是下图的这种效果：

这当然不是我们想要的。

所以我们在程序中需要把这张图片在Photoshop中打开，然后将服装的部分“扣”出来，然后把其他的部分变成透明的。最终我们需要的是这样的图片，并且保存成PNG格式的：

我们所需要的是16件衣服的16张透明背景的PNG图片。我已经制作好了在本节的文件夹中，读者可以使用。至于在Photoshop中制作背景为透明的图片的扣图技巧，不是本书的重点。读者可以查阅Photoshop的相关书籍来进行学习。最好的办法，就是向设计部门的同事们请教吧，买个冰棍，好好学习一下。

步骤1 准备模特

我们先把模特背景准备好，为此，我们访问如下页面：

http://looklet.com/create

然后，我们把身着内衣的模特页面整个截取下来，粘贴在Home页面中，如下图所示：

我们将把这个作为背景，然后让这个模特穿上衣服。

我们先向页面中添加三个动态面板部件，分别命名为hats，tops和bottoms。这三个动态面板，我们分别用来放置帽子，上装和下装。它们的具体位置和尺寸，要根据里面衣服的位置和尺寸来决定。所以读者在里面放什么样的衣服，就要有什么样的尺寸和位置。这个我们等会表述。

步骤2 第一件上装

我们先来添加第一件衣服，它是Michael Kors的一件毛皮上装。我们已经准备好了这件衣服的透明背景的图片，命名为michael kors.png，如下图所示：

然后，我们双击tops动态面板部件，为它添加一个状态叫做Michael Kors，然后双击开始编辑这个状态。在这个状态中，我们把上述的图片通过一个Image部件添加到页面中来，接下来，就是最关键的，我们要在动态面板中调整这个图片的大小，位置，以使它在Home页面中的显示，能够与模特小姐的身形天衣无缝的结合在一起。同时，我们也要调整tops动态面板的位置，尺寸，以使它能够装下所有的衣服。比如夹克就比较短，如果我们把tops的高度设置的比较矮，那么夹克可以装的下，但是像大衣这种长衣服，那么下半部分就该显示不出来了。所以，经过调整后，我们得到如下的效果

大家可以看到。中间淡蓝色的就是动态面板tops。因为现在Michael Kors状态是第一个状态，所以它就显示了出来。通过我们对tops和Michael Kors状态中的Michael kors.png图片的位置调整，现在这件衣服已经看起来就是“穿”在模特身上的了。

但是要注意，之后我们再添加衣服的时候，就只能调整各自衣服所属于的状态中图片的位置，而不能改变tops面板的位置了。否则，之前添加的衣服的位置就又不正确了。为此，我们在Home页面中，选中tops面板，将它锁定。

然后，我们将Michael Kors这件衣服在looklet右侧选择区的缩略图截图，如下图所示

然后粘贴到Home页面中，调整它的位置，让它刚好将Home页面中右侧的选择区的第一件衣服覆盖住。如下图所示：

然后，我们对这个Image部件添加如下的事件：

以上为本案例部分内容，所有内容请见 网站蓝图-Axure RP高保真网页原型制作 书籍

 
项目名称：臭美
项目描述：记录你每天穿着的性感小应用

需求描述

苹果公司的iPhone重新定义了手机，Apple的App Store更是为开发者提供了一个直接可以服务于用户的平台。为苹果手机和各种安卓手机开发应用的开发者也如雨后春笋般的出现了。在这一节里面，我为大家介绍如何使用Axure RP创建一个iPhone App的高保真原型。

我们要制作的，是一款叫做臭美的App插件。这个插件是由两位作者跟几个朋友一起合作开发的。相信不久就可以在App Store中与各位读者见面。

臭美这个应用，用一句话描述的话，就是：臭美是一款记录你每天穿着的性感小应用。

我们觉得，如果你能知道去年的今天你穿了什么衣服，应该是一件很有趣的事情。而且，时光荏苒，红颜一去不返（蓝颜也一去不返…），如果能记录下每天自己的样子，经年累月，也是一件很有趣的记忆财富。

通过臭美这个iPhone应用，用户可以每天给自己拍照片，然后上传到臭美的服务器上，并且分享给自己的好朋友。坚持一段时间之后，用户就可以看到自己的穿着变化的记录，形成一本自己的“臭美日记”。

大家肯定在网页上看到过那些每天给自己拍一张照片的人分享出来的页面，很有趣不是吗？比如下图，这是一个英国的父亲连续13年为自己女儿拍照:

用户还可以通过地理位置找到周边的其他用户，浏览他们的臭美日记，并且关注。比如，漫步到北京的三里屯，上海的外滩，美国的加州，拿出手机来看看附近养眼的人儿，实在是一件很惬意的事情吧。（男女皆可）

用户也可以通过通讯录和社交网络搜索自己的好友的臭美日记，加以点评和关注。也许，你在臭美里面还能发现一些时尚明星，看看明星的臭美日记，哇，带劲吧？而且，通过查看附近的功能，你也许会发现蓦然回首的惊喜。

主要的功能列表：

我们没有列出完整的需求列表，因为大家也不会仔细看的。咱们继续往下。

需求分析

在整体规划上，iPhone App与网站没有很大的区别。当然，除了页面的尺寸问题。在这个例子里面，我们就不为大家先提供线框图了，因为页面逻辑比较简单，我们就采用设计师与产品经理一同工作的模式，直接制作高保真线框图。具体工作流程可以参考“从Photoshop到Axure RP一节”。

说点关于iPhone App开发的题外话。现在开发App是一种热潮，而且也相对来说也比较简单。如果有一个很好的主意，然后能够自己将需求描述清楚，那么有很多的从事iPhone App外包开发的优秀团队可以帮您实现梦想。大家可以到威锋网的论坛上去找一些团队和个人的开发者。个人开发者的费用会低一些。

高保真线框图
准备素材
从我们之前的案例中，大家可以了解到，制作iPhone App的高保真线框图是需要一些iPhone相关的部件的，比如说iPhone的背景，按钮等等。有了这些部件，我们能够快速的进行iPhone相关的应用开发。

在这里，我们就不再赘述之前介绍过的制作iPhone部件库的过程了，大家可以参考之前的“案例17—制作iPhone 4交互效果”。

首先我们将iPhone 4的背景制作出来。虽然真实的iPhone 4的分辨率是W640：H960的，但是我们的制作过程不需要这么大的分辨率，那样会导致我们设计的图片和原型的尺寸都过大了。所以，我们制作的虽然是iPhone 4的模样的原型，但是这个iPhone 4的原型的屏幕部分的分辨率是W320：H480（其实是iPhone3的，呵呵）。

我们首先在Axure RP中添加四条全局辅助线，分别位于如下的坐标：
X=439，X=759，Y=205，Y=685。这四条全局辅助线刚好形成了一个W320：H480的区域。这个区域就是我们之后的工作区域。用户能够看到的部件就是这个区域当中的部件。这个坐标系统也是跟Photoshop中我们的坐标是一致的。

在Photoshop中，我们的原始设计图是这样的：

其中的四条辅助线的坐标跟刚才我们在Axure RP中创建的是一模一样的。现在，我们要把Photoshop中的内容合并拷贝到Axure RP中。IPhone 4外壳的坐标为X403:Y73，尺寸为W379：H803。电池状态栏拷贝过来之后的坐标为X439：Y205，W320：H20。如下图所示：

然后，我们再合并拷贝一个底色到Axure RP中，这是一个浅米色的方格图片，用做我们这个应用的背景。它的坐标为X439：Y205，尺寸为W320：H480。完成之后如下图所示：

我们把这三个部件一起选中，然后转化为一个主部件，命名为iPhone 4 frame，供之后的页面使用。

首页Homepage

首页我们需要向用户介绍臭美是什么，然后提供登录和注册的入口就可以了。首页的最终设计图是这样的：

首页是怎么完成的？答案是“拼图”。也就是说，设计师在Photoshop中完成素材的制作，比如文本，按钮，装饰图标等，然后在Axure RP中完成布局和对齐。

除了我们上一节中制作的主部件背景之外，首页是由如下的图片拼接而成的，括号中是这个图片的坐标：

（X439：Y225）

（X534：Y232）

（X439：Y268）

（X465：Y574）

（X562：Y572）

（X659：Y572）

（X454：Y653）

接下来要做的，就是为这些小块添加互动事件了。

首页中只有人人网，新浪微博和腾讯微博这三个图片是有事件的。人人网的事件如下：

只是把一个叫做sns的变量设置为“renren”，然后在当前窗口中打开login页面。同样的新浪微博的事件会把sns变量的值设置为“sina”，腾讯微博的事件会把sns变量的值设置为“tencent”。下面我们开始login页面的制作。

登录页面login

登录页面除了页头之外，是由两个动态面板部件组成的。我们先拖拽一个动态面板部件到页面中，属性如下：

我们为它添加三个状态，分别命名为新浪，人人和腾讯。我们双击新浪开始编辑。

我们要制作如下的内容：

图中，除了鼠标选中的蓝色区域外，都是背景图片的内容。用来输入登录账号和登录密码的，是两个去除了边框的Text Field部件，用于接收用户的输入。而最后一个的Radio Button，并非是Axure RP的Radio Button，而是我们自制的一个动态面板。这个动态面板有两个状态，分别装载了如下两张图片：

并且添加了事件让状态改变。这样，我们就可以模拟了Radio Button的行为，并且使界面更加好看。

最后一步我们要实现的功能，就是当用户点击登录账号或者密码的输入框的时候，能够有一个键盘从页面的底部滑出，供用户进行输入。这个效果是熟悉iPhone 4输入的用户非常熟悉的。正常的时候用户看不到键盘，只有输入的时候键盘才会自动的出现。

这就需要第二个动态面板部件了。我们把这个部件拖拽进来，属性如下：

然后，我们在state1中，放置另外一个动态面板，属性如下：

然后，在这个新的keyboardpad的state1状态中，添加如下的图片：

坐标为X0：Y0，尺寸为W320：H215。

然后，回到keyboard的state1状态中，现在界面是这个样子的：

我们把键盘的图片放置在了蓝色边框的下方。这样，在开始的时候，用户就看不到这个键盘。而我们通过事件让这个keyboardpad滑动到视野中，以实现键盘滑动的效果。

我们要为sns登录动态面板的新浪状态中的两个Text Field部件添加如下的OnFocus事件和OnLostFocus事件。因为是当这个两个输入框获得焦点的时候，键盘才会滑入滑出。

这样，当用户在Text Field中进行输入的时候，键盘就会自动的滑出来。当用户的输入焦点离开输入框的时候，键盘又会缩会去。

我们并没有真正的去验证用户输入的用户名和密码是否正确，这个在Axure RP中也无法做到。所以，无论用户输入了什么，点击“登入”按钮后，都会到达新的页面，“我的臭美日记”。

最后，我们要为login页面添加OnPageLoad事件，根据sns变量的值决定在页面加载的时候，显示sns登录动态面板的哪个状态。这样就跟homepage页面中用户的选择对应了起来。

我的臭美日记My beauty dairy

我们先来看看我们最终要完成的我的臭美日记首页是什么样子的。如下图所示：

页面中，“账户详情”按钮会跳转到当前登录用户的账户详情页，“我的漂亮收藏”会跳转到当前登录用户收藏的图片的页面，“转评分享全月日记”会将当前月份的日历截图直接分享到其他社交网站去。让其他用户点评和分享。

这个页面的难点在与如下两个：
1． 要实现页面的垂直滚动。就像在iPhone 4中一样，外壳不能滚动，但是中间的内容是可以滚动的。
2． 页面要可以左右滑动。也就是说，如果我们点击2011年7月右侧的那个向右的箭头的时候，页面就会滑动到显示2011年8月的图片，如下图所示：

我们先来解决第一个问题。解决这个问题的方法就是使用inline Frame部件来显示页面。我们向my beauty dairy页面中拖拽一个Inline Frame部件，属性如下：

我们把这它的属性设置为show scrollbars as needed，并且去除边框。在页面地图区域，我们在my beauty dairy页面下添加一个子页面叫做scrolling，这个页面我们放置要嵌在my beauty dairy页面中inline frame部件中的页面，也就是inline frame的default target 。如下图所示：

我们把inline frame的default target设置为scrolling。然后我们在页面地图区域中点击scrolling页面，开始编辑这个页面。

我们在scrolling页面中拖拽一个动态面板部件，属性如下所示：

我们要在这个动态面板中放置7月和8月的照片日历。

双击state1，开始编辑。

我们要在如下的坐标位置合并拷贝如下的图片：

（X0：Y0）

（X4：Y52）

(X0：Y324)

（X0：Y350）

（X8：Y363）

（X156：Y363）

（X0：Y0）

组合完成后，界面暂时是如下所示的

其中，月完成的进度条是用来标识一个月用户拍照的天数占了全月总天数的百分比。这样可以通过这种方式来提示用户坚持住。

然后，我们用同样的方式，把8月份的照片内容添加到7月份的右侧。各个部分的坐标如下

（X320：Y0）

（X328：Y363）

（X476：Y363）

这样全部完成后，state1是如下的样子的：

其中的每张图片，都是可以点击的。大家可以注意到，2011年8月8日这天是空白的，原因是用户在这一天没有拍照。而程序中“今天”的日期是2011年8月17日，所以17日这天是可以拍照的，这天显示了一个小的照相机的图标。点击后会跳转到take photo homepage。

我们在7月右侧的箭头和8月左侧的箭头上分别覆盖一个Image Map部件，然后为它们分别添加如下的事件：

这两个按钮分别向左和向右移动calender动态面板，形成左右滑动的效果。

现在，我们生成项目，在浏览器中我们看到现在的my beauty dairy页面是这个样子的：

Inline frame的滚动条都露出来了。而且，因为我们的scrolling页面比较宽，所以在my beauty dairy页面中，右侧也超出了范围。这个怎么解决呢？

我们回到my beauty dairy页面中，现在页面是这个样子的：

我们从Photoshop中的iPhone 4的背景图片中，也就是这个图片中：

分别截取右侧和下侧的两个部分，如下图所示：（请注意虚线选择的部分）

然后，我们把这两个部分覆盖到my beauty dairy页面中，尺寸和坐标如下所示：

（X759：Y268，W27：H441）

（X439：Y684，W320：H38）

这样，这两个部分就会把Inline Frame显示出来的滚动条完全的覆盖住，如下图所示：

这个时候再在浏览器中查看，我们已经可以很好的实现之前介绍的两个问题了。在垂直方向和水平方向上，都可以很好的滚动。在垂直方向上，可以使用鼠标的滚轮进行操作。这个也是Axure RP中实现滚动的一个很好的技巧。尤其是在基于手机的应用当中。因为跟网页不一样，在网页中我们可以让页面垂直滚动很容易，因为浏览器就是容器。而在手机应用中，手机的“外壳”是容器，所以我们不能让外壳移动。那么，我们要实现在iPhone中的滚动查看，就只能使用这种在“外壳”中内嵌一个Inline Frame的方法来实现滚动。

以上为本案例部分内容，所有内容请见 网站蓝图-Axure RP高保真网页原型制作 书籍

标准版针对的是个人工作者、小团队的需求，需要快速制作Prototype但又不需要产出文件沟通和协同项目。
标准版在Prototyping的项目上跟专业版完全一样，
标准版与专业版的主要的差异是，专业版能够产出规格文件，且可以透过Share Project让多人编辑同一份档案。

查看 Axure RP 购买方式
检视 Axure RP 6.5 标准版功能 (Std, Standard) ｜ 专业版功能 (Pro, Professtional)

Axure RP 6.5 Std 标准版功能 (Standard Version)

线框图(Sketch & Wireframe)
– 绘制线框图( Sketch & Wireframe)
– Sitemap与网页架构(Sitemap to organize pages)
– 内建绘制线框图用的物件(Built-in widgets for wireframing)
– 自定义化物件库(Create custom widget libraries)
– 下载icon和iOS用的物件库(Download widget libraries like icons and iOS widgets)
– 制做圆角矩形、页签或椭圆形的对象(Shapes like rounded rectangles, tabs, and ellipses)
– 利用Master重复使用Patterns和模板(Masters for reusable patterns and templates)
– 拖放的操作环境(Drag and drop diagramming environment)
– 超过50个的快捷键(Over 50 familiar keyboard shortcuts)
– 对齐网格线、其他对象(Snap to grids, guides, and objects)
– 群组、对齐、水平或垂直分配、调整z轴，或锁定对象(Group, align, distribute, order, and lock widgets)
– 填满色彩，渐层或半透明(Solid, gradient, and semi-transparent fills)
– 可调整字体、加粗和行距(Rich text formatting like font, bold, and line spacing)
– 汇入图片，或从其他软件直接贴上(Import images or paste directly from other tools)
– 裁切图片(对截图很有帮助)(Slice images (helpful with screenshots))
– 旋转形状或图片(Rotate shapes and images)
– 设定页面的背景颜色(Background color on pages)
– 重复背景图片(Background image on pages with repeat options)
– 素描效果，制造手绘的感觉(Sketch effects to create a hand-drawn feel)

流程图(Flow Diagrams)
– 流程图用的对象和连接线(Flow shape widgets with connection points)
– 连接线(Connectors)
– 圆角或方型流程图形(Rounded or suqare connector corners)
– 各种形式的箭头符号(Variety of arrow ends for connectors)
– 各种实线或虚线的线条(Variety of solid and dashed line styles)
– 连接线绕过对象(Connectors route around widgets)
– 连接线跳其他连接线(Connectors hop other connectors)

产出简易原型(Basic Prototyping)
– 不用写程序，生成HTML/JavaScript原型(Generate HTML/javascript prototypes without coding)
– 直接在浏览器检视原型(View prototypes in browsers without a player)
– 不限制浏览人数，随你分享(Unlimited viewers. The prototype is yours to share.)
– Click的互动效果(Respond to clicks)
– 几乎所有对象都可以加入链接(Link when clicking almost any widget)
– 对象内的文字可以加入文字链接(Text links inside widget text)
– 跳出窗口或另开分页来开启连结(Links that open popups or new browser tabs)
– 连结时，呈现多种结果(Demonstrate multiple outcomes when linking)
– 在浏览器中，置中呈现(Center pages in the browser)
– 原型中可展示你的品牌LOGO和说明(Logo and caption to brand your prototype)

高互动原型(Advanced Prototyping)
– mouseover的互动效果(Respond to mouse enter and mouse out)
– 输入文字时的互动效果(Respond to key presses in the text fields)
– focus时的互动效果(Respond to form fields getting and losing focus)
– 设定条件逻辑(Conditional logic (ex. A functional logic form))
– 互动后可有多种结果(Perform multiple actions in a response)
– 可淡入或淡出物件(Hide and show widgets with transitions like fade)
– 移动对象时的互动效果，例如弹跳(Move widgets with transitions like bounce)
– 动态指定对象中的文字或数值(Set widget text and values dynamically)
– 算术和计算字符串函数(Math and string functions to calculate values)
– 设定对象的可用或不可用状态(Enable and disable widgets)
– 嵌入外部影片或地图(Inline frames for external videos and maps)
– 卷动到页面中某个位置(Scroll to page locations with transitions)
– 原型中的拖放互动功能(Prototype drag and drop functionality)
– 跨页面存取变量数据(Store data in variables to pass from page to page)
– 根据变量值呈现页面(Initialize pages based on variable values)
– 在浏览器中固定对象(浮动效果)(Pin to browser or “floating” widgets)

手机原型(Mobile Prototyping)
– 在iOS浏览器中检视原型(View prototypes in iOS browser)
– 在Android浏览器中检视原型(View prototypes in Android browser)
– 滑动的互动效果(Respond to swipes)
– 缩放画面大小(Viewport settings for scaling)
– 隐藏浏览器中的网址列(Hide browser address bar)
– iOS和Android的 Home screen icon(Home screen icon for iOS and Android)
– 隐藏iOS浏览器中的导览列(Hide browser nav on iOS)
– 适用于iOS的过场页面(Splash screen for iOS)
– iOS风格的状态栏(Status bar style for iOS)
– 适用于iOS的页面滑动(Inertial scrolling in panels for iOS)

AxShare 发布原型(AxShare Publishing)
– 透过AxShare(http://share.axure.com/)发布原型(Publish prototypes hosted by Axure)
– 密码保护(Password protect your prototypes)
– 不限制浏览人数(Unlimited viewers)
– 在原型中讨论，给予回馈(Enable discussions/feedback in your prototypes)
– 可同时发布10个原型(免费)(Publish up to 10 prototypes at a time free)
– AxShare专业版有更多的选项(AxShare Pro option for more prototypes and branding)

Axure RP 6.5 Pro 专业版功能 (Professional Version)

Axure Pro专业版具备所有标准版的功能，但是专业版多了产出规格文件、共享项目的功能：

产品规格文件(Specifications)
– 页面注记(Page notes)
– 分类页面注记内容(Separate page notes into categories)
– 物件批注(Widget annotations)
– 自行定义批注的段落(Customize annotation fields)
– 产出Word规格文件(Generate Word specifications)
– 自定义产出的规格文件内容(Select content for specification)
– 单栏或两栏式的文件布局(Configure single or two column layouts)
– 重新排序规格文件内容(Reorder specification content)
– 自定义呈现的页面画面(Customize screenshots)
– 汇入你的Word模板(Import your Word template)
– 自定义模板的样式和内容(Customize the template styles and content)
– 对象文字的内容规格(Include widget text for a content spec)
– 批注值过滤(Filtering by annotation value)
– 产出Excel档的页面注记和批注(Generate notes and annotations to view in Excel)

团队共享项目(Shared Projects for Teams)
– 多人同时编辑一个档案(Multiple people editing a project at the same time)
– 划分页面的编辑权限(Check out and check in at the page level)
– 自动记录和注记(Automatic history of check ins with notes)
– 汇出任一的修订版本(Export any revision)
– 在网络硬盘或SVN主机上储存项目(Store projects on a network drive or SVN server)
– Check out后可脱机编辑(Work on checked out pages offline)
– HTTPS或svn协议连接到SVN主机(Https or svn protocol to connect to SVN server)
– 透过SVN验证身分(Authentication through SVN server)

培训项一 （清晰概念认识的培训）

产品经理如何做策划、如何认识交互设计、用户体验优先级，以及项目过程中的“定”和“盯”。

培训项二 （提升原型设计技能与效率的培训）

Axure RP快速原型软件的使用培训，以及原型在项目中的各个阶段和设计一致性的培训。

主讲人：尹广磊 （讲师介绍)
悠识北京特约Axure RP原型设计顾问，WebPPD.com站长。

尹广磊个人主页 www.yintop.com

培训内容的详细介绍

培训项一. 清晰概念认识的培训：

长久以来，许多公司都注意到了，一个好的体验对于产品服务以及口碑传播的重要性。
但是，时至今日，由于其专业性以及大家对各名词的理解认识不同，
使得公司在实施这一想法时，通常人们会冠以“用户体验”、“以…为中心”，
这样一个泛泛的词汇，实施的过程往往是“眉毛胡子一把抓”或出现“舍本逐末”的现象。
本企业内训正是为企业团队，消除名词障碍，创建沟通语言的一致而设立。

培训内容的核心观点可以从以下文章中获得：

1. 产品是如何策划出来的？
2. 产品如何做交互设计？
3. 我心中“用户体验”几大要素的优先级？
4. 尹广磊眼中的产品和项目负责人
5. 尹广磊自述WebPPD两年半的运营经历

培训时长：3小时
培训费用：根据以下人数不同，收费标准不同。

1-4人，120元每人每小时
5-9人，100元每人每小时
10-20人，90元每人每小时
20人以上，80元每人每小时

培训项二. 提升原型设计技能与效率的培训：

Axure RP网站快速原型工具，可以快速的验证需求，并向开发团队清晰表达设计要求。
作为一款绝佳利器，它在产品的策划与原型设计阶段的优势是无可替代的。
熟练使用Axure RP如今已经成为新浪等门户巨头招聘产品设计等相关人员的必备要求。

有关Axure RP的中文介绍、交互实例演示、下载安装、官方教程等可以查看 www.axure.org
有关Axure RP的官方介绍视频可以查看：http://axure.cachefly.net/Flash/flash.html

如今越来越多的公司已经注意到“原型设计”在实际项目中的重要性，
腾讯的CDC设计团队更是提出了“非原型，不设计”的口号。

引入了“原型设计”之后，不但可以让产品效果在验证需求的阶段就变得可控，
更因Axure RP设计原型的准确、高效，而大大节省了项目沟通的时间。

快速原型的目的简言之有三：

1. 快速且低成本地获得反馈   (Get feedback earlier, cheaper )
2. 在多种可能中对比试验   (Experiment with alternatives )
3. 轻松修改或者放弃设计   (Easier to change or throw away )

培训时长：6小时
培训费用：根据以下人数不同，收费标准不同。

1-4人，120元每人每小时
5-9人，100元每人每小时
10-20人，90元每人每小时
20人以上，80元每人每小时
下图是培训时使用的示例和练习文件：

cforms contact form by delicious:days

或者与讲师联系：
尹广磊，Email/QQ/MSN地址皆为：yintop@qq.com