第四课 页面框架制作软件AXURE5

1、1在日常工作当中，一些常规性、比较简单的专题我们可以自己搭建。但当需要为某一大型活动设计一个专题时，我们就可能需要向设计和制作下单，先自行勾画出一个框架草图，然后再交与相应的同事，进行版面设计和框架构建。对于一般的员工来说，大多数人会在一张纸上随意勾画各种框架，又或者使用WORD，通过插入多个表格来制作一个框架，虽然简单可行，但所表达的信息其实十分有限，也不容易明白，结果就是需要花费更多的时间在沟通层面上，效果也不尽如人意。23以上是一张从美工手上扫描出来的一张设计图。从草图上看，你能看出什么？如果你是一名美工或者制作，你是否理解该编辑对专题有什么要求？是什么主题？框架尺寸是多少？框架中文字链

2、有多少条？有没有特殊功能需求？如果你是一名美工或者制作，相信你一定会找那位编辑去详细询问版面的设计排版问题，因为草图的信息内容在少之又少。4实际上，在各个大型网络公司内部，都会有一个专门做版面设计的部门，通常我们会叫交互设计师（UI）、可用性专家（UE），他们的职责就是专门研究网站版面的互动性、用户体验、浏览速度、信息查找、SEO优化等内容。一个网站是否能体验人性化，很大程度取决于这个部门的实力，而当前，包括新浪、网易、搜狐、太平洋电脑网等大型网站都对该部门投入大量资源，每次页面有任何改动都必须经过该部门的同意方可进行，而腾讯在进行产品经理招聘时，首要笔试题目就是UE设计，可见版面设计对一个网

3、站来说是何等的重要56产品原型设计软件AXUREAxure是一个快速的原型工具，主要是针对负责定义需求、定义规格、设计功能、设计界面的专家，包括用户体验设计师（UX）、交互设计师（UI）、业务分析师（BA）、信息架构师（IA）、可用性专家（UE）和产品经理（PM）。Axure能让你快速的进行原型的设计，让相关人员对你的设计进行体验和验证，向用户进行演示、沟通交流以确认用户需求，并能自动生成规格说明文档。另外，Axure还能让团队成员进行多人协同设计，并对设计进行方案版本控制管理。Axure使原型设计及和客户的交流方式发生了变革：进行更加高效的设计；让你体验动态的原型；更加清晰的交流想法；目前全

4、球有很多大型公司和重要机构在使用Axure，国内的淘宝、雅虎、腾讯、当当等公司的产品经理也都在使用。67Axure的工作环境78Axure的工作环境站点地图面板对所设计的页面进行添加、删除、重命名和组织的操作。可以直接拖动页面改变其层级结构。双击页面即可在主工作区打开页面进行设计。组件面板该面板中有线框图控件和流程图控件，用这些控件进行页面框架和流程图的设计。可直接拖拽、拷贝控件到主工作区进行移动、改变尺寸操作。双击、右键点击控件可针对不同的控件进行编辑风格和属性的操作。模块面板模块是一种可以重复使用的特殊页面，在该面板中可进行模块的添加、删除、重命名和组织。如图示可以针对项目做页面模块，比如

5、页头、页尾；也可制作所有项目的公用模板，比如切换标签样式或图形按钮。89Axure的工作环境线框图面板在线框图面板中可以进行页面线框图、流程图的设计，线框图面板也就是Axure的主工作区。在最上方以标签形式显示打开的多个页面。控件交互面板定义控件的交互，如：设定链接、弹出、动态面板的显示和隐藏等。不同控件有不同的内建交互事件，如OnClick（鼠标点击）、OnMouseEnter（鼠标悬停）等，后面会有详细介绍。如果需要特殊说明的功能模块或有交互行为产生的控件一定要填写标签，如“个人信息提交按钮”、“选择商家等级下拉菜单”等等。910Axure的工作环境控件注释面板对控件进行注释、定义和功能进

6、行说明。里面的选项可以自定义，比如添加一个“功能说明”的项，并删除原有的项目。添加注释的控件在产品原型页面上会显示一个黄色便签的图标，点击可查看具体注释。汉化版的Axure不能修改下拉菜单注释，请避开此选项或者用其他方式表达。控件注释面板-自定义字段和视图点击注解面板上的“自定义”打开设定自定义字段和视图的菜单，可以根据项目需求设定注解项目，如功能说明（文本类型）；优先级（下拉菜单类型）；完成时间（日期类型）等等。自定义视图是将设定的字段分类放到不同组内，以方便选择，比如只有功能说明及优先级的字段可以建立功能分组，有功能说明及完成时间的字段可以建立项目控制分组。建立好的分组可以在控件注释面板顶

7、部的箭头按钮点击选择。1011Axure的工作环境页面注释和页面交互面板添加和管理页面的注释和交互事件。页面注释和页面交互面板-管理注释点击页面注释和页面交互面板顶部的箭头按钮，可以打开页面注释管理页面，可以添加不同的页面注释字段，如“页面说明”、“参与部门”等等，添加完成后，可点击箭头按钮为不同的字段添加说明。现在演示一下Axure的工作环境。11AXURE的简单页面排版AXURE的使用实际上是非常傻瓜化，基本上常用的页面排版按钮都齐全，只要你按着你的思路去把不同的组件像堆积木一样堆砌起来就能简单地构建出一个页面12勾画图片框架1314同理，其他构建的使用方法跟图片组件的使用方法相同，这里不

8、多叙述，这里只教授一些常用的快捷命令排列命令排列命令实际上跟PS里面的排列一样，是控制各组件之间的位置关系，如我们要构建一个文字链列表的话就需要用到这个命令15不断复制使用文本框把最下面一行拖动到适当位置16点击左对齐点击垂直等距分散17组合命令以刚才的文字链排布为例，当我们把7个文字链排列整齐之后，实际上，该排列仍然为7个相同的组件所构成，彼此独立，如果要移动该排列的话就必须框选7个组件然后拖动，既麻烦又容易出错，因此，我们常用组合命令把独立的组件整合起来形成一个新的组件。只要点击 则自动整合为一个新的组件，在拖动时会整体移动。18层叠关系当组件越来越多的时候，就有可能发生组件互相重叠而导致

9、部分组件被遮盖现象，这时我们就需要用到层叠按钮 ，其原理跟PPT里面的一样，根据需要把需要显示的组件置于上层即可1920基本交互设计控件交互面板中可以定义控件的交互，交互由事件（Events）、场景（Cases）和动作（Actions）组成： 用户操作界面时就会触发事件，如鼠标的OnClick、OnMouseEnter和OnMouseOut； 每个事件可以包含多个场景，场景也就是事件触发后要满足的条件； 每个场景可执行多个动作，例如：打开链接、显示面板、隐藏面板、移动面板。事件、场景和动作的关系2021基本交互设计大多控件只具备常见的三种触发事件：OnClick、OnMouseEnter 与O

10、nMouseOut，一些特殊的控件可触发的事件有些不同： 按钮控件只有OnClick 单选按钮和复选框有OnFocus、OnLostFocus 文本框、文本域、下拉菜单、列表框有OnKeyUp、OnFocus、OnLostFocus 页面加载或模块被载入时发生OnPageLoad目前Axure RP 5支持的事件如下： OnClick：鼠标点击 OnMouseEnter：鼠标的指针移动到对象上 OnMouseOut：鼠标的指针移动出对象外 OnFocus：鼠标的指针进入文字输入状态（获得焦点） OnLostFocus：鼠标的指针离开文字输入状态（失去焦点） OnPageLoad：页面或模块载入

11、 OnKeyUp：实时响应键盘输入2122基本交互设计定义链接1. 首先，拖拉一个按钮控件到线框图中，并选择这个按钮；2. 然后，控件交互面板中鼠标双击“OnClick”这个事件，这时会出现“交互事件属性”对话窗，在这个对话框中可以选择要执行的动作；3. 在“第二步”中，勾选“在当前窗口打开链接”动作。4. 在“第三步”中，点击“Link”，在弹出的“链接属性”对话框中可以选择要链接的页面或其它网页地址。22选择页面打开方式点击连接选项选择跳转页面23重点1：组件名字组件的名字十分重要，无论如何，每一个组件都必须有一个名字！首先，任何事件动作当中，软件都是根据组件名字来去标识排列，如果没有自定

12、义的话，软件就会自动添加序号，当组件多起来的时候，根本不知道序号所代表的是什么组件第二，在生成技术文档的时候，组件名字也会标识出来，因此要定义好24标签选项就是填写组件名称的地方，最好每个组件都有一个独立的名字，以方便日后维护2526重点2：高级交互设计动态面板动态面板是我们经常使用到的动态效果展示控件，可以让你的原型中实现高级的动态交互功能。动态面板包含有多个状态（states），每个状态可包含一系列控件。任何时候都只有一个状态是可见的，或这整个动态面板可以被隐藏。结合交互动作，可以让动态面板的状态进行隐藏、显示和改变。像其它控件一样，可以在控件面板中拖拉动态面板控件，将动态面板控件添加到线

13、框图中。在线框图中，双击动态面板可以打开一个“动态面板状态管理”对话框，在对话框中你可以创建、重命名、重新排序、删除和编辑动态面板的状态。第一个状态是动态面板的默认状态。在对话框中选中一个状态，然后点击“编辑状态”按钮，就可以中打开一个状态线框图进行状态设计。状态设计和线框图设计是一样的，状态线框图中的蓝色虚线外框表示动态面板的范围边界。2627高级交互设计动态面板可以设置动态面板在默认是隐藏状态，比如鼠标悬停在某一区域时，才显示此区域的详细内容，详细内容可以使用动态面板编辑，只有鼠标悬停在某一控件上时才触发显示，平时为隐藏状态。只要选择动态面板，右键菜单选择“编辑动态面板-设为隐藏”即可。这

14、将会隐藏面板内容，动态面板的遮罩会由蓝色变为黄色。交互动作可以引发动态面板的交互。在“交互事件属性”对话框中包含了以下可以引发动态面板交互的动作：选择其中一个动作后就可以和动态面板进行交互，并且可以在对话框下部的“编辑操作描述”选择一个要链接的状态。在控件注释和交互面板中，一定要在“标签”输入框中对动态面板进行标识，以后就可以引用这个动态面板。如果没有为动态面板指定标签名称，动态面板会被标识为“Unlabeled”。不光动态面板，所有会产生交互的控件都需要指定“标签”名称，以方便我们进行交互引用。27实例1：当鼠标停留在一张图片上时，指定区域会显示另一张图片实例2：鼠标停留在不同的标签上时，会

15、切换显示不同的内容实例演示如何使用动态面板及要注意的问题28实例演示如何使用动态面板实例演示如何使用动态面板及要注意的问题把动态面板拖进主面板中必须为每个组件填写名字名字一一对应双击该区域调出属性面板一个动态面板里面可包含许多层，每一个层都是独立的，都是为实现不同功能而存在双击State1层进入该层编辑面板29把一张图片拖进该层中返回主页面，此时动态面板中就显示了state中的内容添加另一张图片，当鼠标停留在此图片上时，就会显示左边的动态面板内容在此图片上选择第二个事件“鼠标进入某区域”30选择SHOW PANEL，意思为显示动态面板点击下面的PANEL，选择动态面板1，之所以说组件名称重要，

16、原因就在这里，当组件越来越多时，我们只能靠名字去选择何时的组件把动态面板设定为隐藏，因为一开始该内容应该不显示31所有被隐藏的动态面板都显示为黄色区域实际页面显示当中，当鼠标进入右边图片的区域时，左边的图片就会显示出来32区别：动态面板Panel跟层State有何区别动态面板Panel实际上只是为显示某些内容而划分出来的区域，它只是一个舞台而已，并不具备实际功能，同一个Panel上所有层State的内容永远只能在该Panel所划定的区域内显示，不能超出该界限State是具体内容的载体，就是舞台上不同的演员，根据需要可安排多个演员（State），在不同的事件下使用上不同的演员（State）来演出

17、，因此，一个舞台（Panel）上可拥有多个演员（State），可独立演出，也可根据需要同时演出，但重要的是，每个演员必须要有自己的名字以区分开来33实例2：鼠标停留在不同的标签上时，会切换显示不同的内容当鼠标停留在不同的标签上时则会自动切换不同的内容来显示34用矩形工具画出3个框架，并写上名字为每个组件填写名字35运用动态面板勾画出显示区域写上组件名字36双击动态面板，进入属性面板添加3个层面板双击动态1，进入动态1的编辑区域37在动态1中添加图片，并返回到HOME页面在HOME页面中，已经显示动态1的内容，接下来将继续做动态2和动态338动态2面板动态3面板39单击标签1，在双击右面交互事件

18、中on mouse enter(鼠标进入区域)按钮，调出属性面板在属性面板中，勾选set panel state to state，意思是在各层之间切换继续单击选项40由于现在只创建了1个动态面板，因此这里并没有其他选项，但要注意的是，每个组件均必须填写名字，方便识别前面创建了3个层，因此这里有3项可选，这里先选择动态1，之后的标签2与标签3均在这里选择动态2与动态3与之对应41标签2中选择动态2标签3中选择动态342标签1标签2标签343技术文档的生成AXURE之所以被各大公司所采用，除了因为他操作简便，快速上手之外，更重要的是他能够生成一份针对任何技术人员、产品经理的技术文档，只要关键字填

19、写得当，无论文档交付何人手中，其条目都是十分清晰，无需花费额外时间进行交流44一.页面中的技术文档实际上在保存工程文件时，软件会自动生成两份文档，一份是页面简单说明文档，另一份是包含详细目录的技术文档，首先介绍一下页面说明文档45页面注释页面注释是为各种相关人员所编写的注释说明，如美工、制作、技术、产品经理等，可以自行添加多个注释，该注释会在页面说明文档以及技术说明文档中显示，而在技术说明文档中，更可以因应需要选择显示哪些注释，加强针对性。页面注释浏览器底部将会显示注释内容46注释版面可以为每一个组件生成一个注释说明，默认情况下为做图内容，通常我们会根据需要自行修改，只需要点击一下任意一个组件

20、，然后再点击“自定义”，把原有的项目删除后再写上新的项目则可根据需要写上新的项目。不过要注意的是，这个注释面板是为整个文件服务，是通用的，所用组件的注释项目都会相同47注释字段的类型1.文本类型 文本类型可填写任意内容，是最为通用的类型2. 数字类型 数字类型只能填写数字3.日期类型 只能选择日期填空4.选择列表 也是常用类型之一，如果当中的内容相对固定的话，一般会选用“选择列表”，如这里的制作部门，其对象只有新闻中心，房源以及商业三个部门，对象相对固定，因此选用选择列表较为方便48当填写好注释项目后，我们只需要为需要添加注释的组件填写相应的栏目即可，填写完后保存就能马上看到效果49有注释的组

21、件在页面显示中右上角会有一个标签显示，而没有注释的组件则没有这个标签点击后就会出现相应的注释502.技术说明文档技术说明文档是AXURE RP的最重要部分，软件会根据你所做的设置对页面框架分门别类地列出所有规格和注释，十分专业5152生成Word文档设计完线框图后，就可以输出Word格式的需求书或功能性规格文件。默认的规格书生成器是Word 2007 (.docx文件)，需要安装Word 2007以生成和阅读.docx文件（也可以设置Word2000作为规格书生成器，后面会讲到）。如果没有安装Word 2007，可以安装Microsoft Office Compatibility Pack兼容

22、包，然后就可以让Office2000/XP/2003打开、创建、编辑、保存2007文件格式了。如果你未安装2007或兼容包，它会和Axure一起安装。在设计线框图时，如果把需求说明或规格描述写在了页面备注或控件注释中，生成规格文件时，Axure会自动汇总这些文字和插图，按照顺序出现在Word文档中。打开“生成-定义(F6)”可以生成和配置生成的Word文档。521、页面：选择生成哪部份页面，针对不同部门生成不同的文档时，可以选择不同的页面生成。可以手动设置“章节标题”和“站点地图标题”的内容，比如把章节标题的“Pages”换成“页面”；把站点地图标题的“Page Tree”换成“页面树”，在生

23、成的文档中，这部分的标题名称就会变成相应的中文。生成Word文档注意事项532、模块：如果是大型项目，针对模块（比如页头页尾或一些公用模块）说明时，可生成此部分。与“页面” 部分类似。生成Word文档注意事项543、注释：如果针对页面设定了多个注释的话，建议选择“显示注释名”，这样生成的文档会把注释类型和具体内容都显示出来，比如设定了“页面说明”、“完成时间”2个注释的话，文档上显示的就是“页面说明：xxxxx”、“完成时间：2008-12-19”，如不选择“显示注释名”，在生成的文档上只显示“xxxxx。 2008-12-19”生成Word文档注意事项554、屏幕截图：此设定是将原型中的页面

24、、动态层抓图，建议选择。建议把章节标题的“User Interface”换成“效果图”。并选择“不要缩放屏幕截图中的脚注”，这样会把脚注编号显示得更清楚，对应每个编号对应的功能说明。“为截图加上边框”这个选项也可以选择，并后期美化，让屏幕截图更显眼。生成Word文档注意事项565、注解：重要选项，建议把对象表格里章节标题的“Object Table”换成“功能说明”。把“Footnote”、“Label（功能点的标签）”、“说明（定义的注释名称）”打上勾。脚注列标题的“Footnote”换成“编号”；标签列标题的“Label”换成“功能点”。如果想在多个表格表现不同的内容，可以新增多个表格选择不同的项目生成，比如，第一个对象表格的章节标题命名为“功能列表”选择“Footnote”、“Label”，第二个对象表格的章节标题命名为“功能描述”选择“Label”、 “说明”，就会在文档里生成2个表格，第一个是编号和功能点标签，第二