Axure快速入门（Learn by doing）

tianzc

[/url]

Axure快速入门（Learn by doing）

对于繁忙的各位来说，如果有一个快速入门的教程一定可以节约你大量时间，而又能有效掌握Axure的使用。Axure公司已经为你考虑到了这点，所以提供了一个快速入门的教程让你下载。下载地址：[url=http://www.axure.com/Samples/AxureQuickStart.pdf]http://www.axure.com/Samples/AxureQuickStart.pdf 以下是我对该文档的完整翻译（翻译：陈良泳，转载请注明出处，首发于www.prototype001.cn）： 本教程指导你在Axure RP中创建一个线框图、生成一个交互式原型和规格说明书。这个过程大概不超过30分钟时间。通过本教程，你可以学到： 如何使用部件 如何使用模板 如何生成原型和规格 如何使用动态面板创建动态界面 学习本教程，你需要下载Axure RP（www.axure.com/downloads.aspx）和样例文件QuickStart.rp（www.axure.com/Samples/QuickStart.rp） 首先运行Axure RP，通过菜单File -> Open，打开QuickStart.rp文件，这时会在线框图面板（Wireframe Pane）中看到打开的主页面。 [img=http://www.prototype001.cn/wp-content/uploads/2009/01/image-thumb1.png]image[/img]   上图是Axure RP界面环境，本教程引用了界面中的标注说明 1、设计线框图 添加页面注释可以在页面注释面板中（Page Notes pane）为各个页面添加注释。当你打开了QuickStart.rp文件后，在线框图面板中出现了主页面。在页面注释面板中（线框图面板的下方）添加以下页面注释“用户可以通过这个主页搜索航班或登陆用户的帐户”。 [img=http://www.prototype001.cn/wp-content/uploads/2009/01/image-thumb2.png]image[/img] 在页面注释面板中添加页面注释 添加部件可以从部件面板中（Widgets pane）拖动部件到线框图面板，以设计线框图。拖动按钮形状部件（Button Shape）到主页线框图中的Account Login区域的右下角。 [img=http://www.prototype001.cn/wp-content/uploads/2009/01/image-thumb3.png]image[/img] 按钮形状部件 [img=http://www.prototype001.cn/wp-content/uploads/2009/01/image-thumb4.png]image[/img]   从部件面板中拖入按钮形状部件到线框图中 编辑部件双击一个部件，可以对部件最常用的属性进行编辑。在部件上点击鼠标右键，可以出现右键菜单编辑部件的特定属性。双击刚拖入的按钮形状部件，输入文本“登陆”，然后右键点击该部件，选择菜单项Edit Button Shape -> Rectangle。 [img=http://www.prototype001.cn/wp-content/uploads/2009/01/image-thumb5.png]image[/img] 右键菜单选择按钮形状 格式化部件可以在线框图面板上方的工具栏中为部件添加样式如字体大小、边框、填充色、字体颜色等。通过格式化工具栏，使按钮形状部件具有加粗的字体、灰色填充、加粗的白色边框。 [img=http://www.prototype001.cn/wp-content/uploads/2009/01/image-thumb6.png]image[/img] 格式化工具栏 [img=http://www.prototype001.cn/wp-content/uploads/2009/01/image-thumb7.png]image[/img]   格式化后的按钮形状部件 添加注释（部件注释）选择一个部件后，通过在注释和交互面板中（Annotations & Interactions pane）输入文本，可以为部件添加注释。你也可以点击“Customize”这个链接添加自定义的注释项。 选择按钮形状部件，在注释和交互面板的文本框中输入“登陆按钮”，然后在描述文本框中添加描述文本“这个按钮将用户引导到用户帐户页面” [img=http://www.prototype001.cn/wp-content/uploads/2009/01/image-thumb8.png]image[/img]   在注释和交互面板中为部件添加注释 添加基本链接可以点击交互面板中的“Quick Link”这个快捷方式为部件添加一个简单的链接。选择登陆按钮，点击交互面板中的快速链接这个快捷方式。然后选择“我的帐户”页面，OK确定。这时注意在交互面板中已经为OnClick事件添加了一个场景1(Case 1)。 [img=http://www.prototype001.cn/wp-content/uploads/2009/01/image-thumb9.png]image[/img] 更多交互动作除了添加基本链接，还可以使用更多的动作。可以为一个事件（如OnClick）添加一个或多个动作。例如，你可以让你一个按钮在当前窗口中打开一个新页面的同时，再弹出一个新的窗口。 在交互面板中OnClick 事件下的场景1（Case 1）上双击鼠标左键，你可以看到更多可以使用的动作，OK确定。 2、使用模板 添加模板模板是许多部件的组合，让你在进行设计时重复使用。一些常见的模板如头部、尾部、导航等。对模板进行修改后，所有对模板的引用也相应修改。 在模板面板中（masters pane）点击添加模板按钮（Add Master），然后在新添加的模板上点击鼠标右键，选择“重命名”，将它命名为“Footer”。鼠标双击该模板，以打开准备设计模板。 [img=http://www.prototype001.cn/wp-content/uploads/2009/01/image-thumb10.png]image[/img] 添加模板 编辑模板模板的设计方法和页面设计相同。添加一个水平线部件（Horizontal Line ）和一个文本面板部件（Text Panel），在文本面板部件中输入文本“Copyright, 2008”。 [img=http://www.prototype001.cn/wp-content/uploads/2009/01/image-thumb11.png]image[/img] 编辑模板Footer 嵌套模板通过将模板面板中的模板拖入页面或模板中，可以达到模板嵌套的目的。添加一个新的名字为“Template”的模板，双击打开设计。将模板面板中的Header模板拖入Template模板中放在顶部，然后将Footer模板拖入Template模板中放置在底部。 [img=http://www.prototype001.cn/wp-content/uploads/2009/01/image-thumb12.png]image[/img] 嵌套了Header和Footer和Template模板 模板的行为模板默认时为普通行为（Normal），可以放置在线框图的任何位置；模板的作为背景行为（Place in Background）则锁定为模板创建时在页面上的位置；模板的自定义组件行为（Custom Widget）则使得拖入页面后和原模板脱离关系，变得想其它部件一样可以任意编辑。 右键单击模板面板中的Template模板，选择Behavior -> Place in Background。 [img=http://www.prototype001.cn/wp-content/uploads/2009/01/image-thumb13.png]image[/img] 改变模板的行为 在页面中添加模板只需将模板面板中的模板用鼠标拖入到线框图中，即可在页面上加入模板。将模板面板中的Template模板拖入到主页面中。另外，在站点地图面板中鼠标双击打开My Account页面，同样拖入Template模板。 [img=http://www.prototype001.cn/wp-content/uploads/2009/01/image-thumb14.png]image[/img]   添加模板到页面中 进行全局修改对一个模板做出的修改，会使得所有被引用的模板进行相应改变。打开Header模板，鼠标双击图片打开文件选择对话框，在你的机器上选择一张Logo图片；或者将图片部件替换为一个Logo模板。然后打开主页和我的帐户页面，你会发现已经应用了所作的修改。 [img=http://www.prototype001.cn/wp-content/uploads/2009/01/image-thumb15.png]image[/img] 修改模板后全局都相应修改 3、生成原型 生成原型当生成原型时，可以设置许多选项如目标文件夹地址、要包含哪些页面注释和部件注释。按下键盘的F5键或选择菜单Generate -> Prototype，在弹出的对话框中点击Generate按钮即可生成原型。当询问你是否设置目标文件夹地址时，选择Yes。 [img=http://www.prototype001.cn/wp-content/uploads/2009/01/image-thumb16.png]image[/img] 查看原型Axure RP原型是一些HTML、Javascript和图片文件，你可以使用主流的web浏览器进行查看。浏览原型时会打开web浏览器，你可以通过左边的站点地图面板（Sitemap pane）进行页面导航，页面注释会显示在页面底部的一个frame中。点击登陆按钮右上角的黄色纸片图标，可以显示部件的注释。点击“登陆”按钮，会链接到我的帐户页面。 注意：如果你是在IE浏览器中查看原型，出现Active X 警告信息，则要点击允许按钮。要想不在出现Active X 警告，选择“工具->Internet 选项”，在“高级”页签中，在设置安全的部分，勾选上“允许活动内容在我的计算机的文件中运行”。 [img=http://www.prototype001.cn/wp-content/uploads/2009/01/image-thumb17.png]image[/img] 4、生成规格说明 生成规格说明当生成规格说明时，有许多选项可以设置，如目标文件地址、要包含哪些页面和模板、要包含哪些页面注释和部件注释。你也可以自定义规格说明文档的模板，例如添加一个标题文档页面、修改文档头部和尾部。 返回到Axure RP中，点击F6或选择主菜单“Generate -> Speciication”，在弹出的对话框中点击“Generate”按钮，即可生成规格说明文档。 [img=http://www.prototype001.cn/wp-content/uploads/2009/01/image-thumb18.png]image[/img] 查看WORD规格说明文档Axure RP规格说明生成为Microsoft Word格式文档，完全包含了屏幕插图、注释说明、交互说明。会产生一个Microsoft Word 2007 (.docx)文档。伴随Axure RP安装的Ofice Compatibility Pack 能使你在以前版本的Word中查看和编辑规格文档。 通过浏览整个文档，你会发现每一页都包含有页面注释、页面插图、部件注释列表、页面交互说明。 [img=http://www.prototype001.cn/wp-content/uploads/2009/01/image-thumb19.png]image[/img] 生成的Word 2007格式的规格说明文档 5、创建动态界面和条件流程使用动态面板（Dynamic Panel）动态面板使得能在原型中模拟动态功能。动态面板包含一个或多个状态，能够对各个状态使用动作，进行状态隐藏、显现、修改。 回到Axure RP界面中，在主页上的“Account Login”区域拖入一个动态面板部件（Dynamic Panel）到Email文本框之上，双击动态面板部件，打开动态面板状态管理器对话框，在动态面板标签后的输入框中输入“Error Panel”，选择状态“State1”，然后点击按钮“编辑所有状态”。 [img=http://www.prototype001.cn/wp-content/uploads/2009/01/image-thumb20.png]image[/img] 编辑动态面板 面板状态打开后，就可以像页面和模板一样进行编辑，可以从部件面板中拖入部件。蓝色虚框代表动态面板的边界。 往状态面板中拖入一个文本面板部件（Text Panel），输入文本“登陆失败，请重试”。 [img=http://www.prototype001.cn/wp-content/uploads/2009/01/image-thumb21.png]image[/img] 隐藏动态面板可以将动态面板设置为默认隐藏，然后通过交互动作将其动态显示。在主页中右键单击动态面板部件，在菜单中选择Edit Dynamic Panel -> Set Hidden。 [img=http://www.prototype001.cn/wp-content/uploads/2009/01/image-thumb22.png]image[/img] 创建多个场景可以在一个事件中添加多个场景，达到多个条件流程。选择“登陆”按钮，双击交互面板中OnClick事件下的Case 1，在Step 1: Description中修改“Case 1”为“如果登陆成功”，点击确定。然后在OnClick事件上双击，添加第二个场景，在Step 1: Description中输入场景描述为“如果登陆失败”，在Step 2: Select Ations中选择动作显示面板（Show Panel(s)），在Step 3下选择蓝色的panel链接，在弹出的对话框中选择Error Panel，点击确定。 [img=http://www.prototype001.cn/wp-content/uploads/2009/01/image-thumb23.png]image[/img] 按下F5重新生成原型。点击登陆按钮，出现先前添加的两个场景描述文本，点击“如果登陆失败”，会显示错误信息；点击“如果登陆成功”，则跳转到我的帐户页面。 另外也可以在场景中添加逻辑条件判断，校验邮件和密码的输入，而不需要显示场景条件描述。 访问www.axure.com/expert.aspx了解条件逻辑的更多信息。 6、更多内容至此，本教程结束。关于Axure RP的更多功能，如条件逻辑、变量中存储数据、多人协作共享工程，请访问www.axure.com/expert.aspx上的关于这些主题的文章和视频内容。 另外你也可以下载我编写的《Axure快速原型设计.pdf 》，里面包含了完整的Axure功能介绍。

收藏分享评分