Axure快速原型设计.

AXURE李巍[e-mail]中睿信息技术有限公司以用户为中心的快速原型设计用户体验以用户为中心去研发产品UserExperienceOptimization李巍[e-mail]用户看到的20%却是由那些看不到的80%决定的20%很不幸的消息，其实用户压根不关心我们的东西用户或者客户只关注一个产品的良好用户体验的作用用户体验是什么？它在项目中的意义？没有它不行么？为什么需要用户体验设计用户体验带来的很实际的部分提高项目研发成功率降低培训成本降低团队成本、后期维护的工作量提高产品的传播速度带来用户对产品的良好口碑减缓压力（个人意见）用户体验定义用户体验（UserExperience，简称UE）是一种纯主观的在用户使用产品过程中建立起来的感受。是用户对产品的唯一评价但是对于一个界定明确的用户群体来讲，其用户体验的共性是能够被设计的。不要让用户思考，并且提供改错的机制用户体验可用性第一定律不要期待用户会研究你的产品，应该让他们速度实现自己的目标用户体验可用性第二定律点击多少次都没关系，只要每次点击都是无须思考、明确无误的选择。用户体验可用性第三定律实际项目中的UE以用户为中心用户体验的考虑从开发的最早期就开始进入整个流程，并贯穿始终应用程序的用户体验主要是来自用户和人机界面的交互过程UE的设计不是盲目的，是考虑成本、技术等等条件的平衡UE在实际项目的平衡高保真原型的介绍根据功能，为了指导开发而画的草图高保真原型也叫做交互式原型实现了功能页面流程跳转做到用户的响应都会有反馈和最后开发出来的产品基本吻合高保真原型的对项目的意义团队了解需求的最佳方式程序员开发的最好参考项目开发和维护中所需标准的最好表现形式验收的依据高保真原型的制作工具纸和笔，白板和油性笔AxureUIDesignerPPT什么是Axure？Axure的完整英文名是AxureRPPro，可以快速创建应用软件或Web网站线框图、原型、规格说明书等的。Axure会使你以往的工作方式发生变革：进行更加高效的设计；体验到动态的原型；清晰有效的交流想法；Axure工作环境介绍主菜单和工具栏站点地图面板控件面板模块面板线框图工作区页面注释和交互控件交互面板控件注释面板站点地图面板“添加子页面”按钮可以添加一个页面；“上移”、“下移”、“降级”、“升级”按钮，可以组织页面的层次和顺序;“删除”按钮或点击鼠标右键的“删除”选项可以删除一个页面；“设计页面”按钮，打开该页面在线框图区域中进行线框图设计;在页面上点选右键菜单中也可以进行同样的操作。按钮名称依次：添加子页面上移下移降级升级删除设计页面搜索部件面板(控件面板)控件是用于设计线框图的用户界面元素。在控件面板中包含有常用的控件库，如按钮、图片、文本框等。添加控件从控件面板中拖动一个控件到线框图区域中，就可以添加一个控件。控件可以从一个线框图中被拷贝(Ctrl+C)，然后粘贴(Ctrl+V)到另外一个线框图中。操作控件添加控件后，可在线框图中选择该控件进行鼠标拖曳移动该控件和改变控件大小，还可以一次选择多个控件进行移动和改变大小。另外，还可以组合、排序、对齐、平均间距（Distribute）和锁定控件。编辑控件风格和属性（有多种方法）鼠标双击：鼠标双击某个控件，可以对控件的最常用的属性进行编辑。例如，双击一个图片控件可以导入一张图片；双击一个下拉列表或列表框控件可以编辑列表项。工具栏：点击工具栏上的按钮可编辑控件的文本字体、背景色、边框等。右键菜单：通过在控件上点击右键菜单，编辑控件的一些特定属性，不同的控件这些属性也各不相同。查看和搜索控件控件面板工具栏中，线框图下拉菜单，可以查看所有控件库，或只看默认线框图或流程图控件库，或只看已经被加载的控件库。另外，你还可以加载已有控件库、创建新控件库、编辑当前控件库、或更新控件库。控件注释面板页面注释面板为控件添加注释，以说明控件的功能对页面进行详细描述和说明Axure基本交互设计控件的交互示范定义一个链接定义行为定义多个场景（场景说明）页面事件:OnPageLoad控件的交互在控件交互面板中可以定义的控件交互由事件（Events）、场景（Cases）和行为（Actions）组成用户操作界面时就会触发事件，如鼠标的OnClick、OnMouseEnter和OnMouseOut；每个事件可以包含一个或多个场景，场景就是事件触发后出现的一种情况，如点击一个按钮后可以出现两种场景：一种是进入页面1；另一种是进入页面2；每个场景中可执行多个行为，例如：打开链接、显示面板、隐藏面板、移动面板。示范定义一个链接按钮控件OnClick事件用例编辑器选择要链接的页面或其它网页地址定义行为目前AxureRPPro6所支持的行为：链接在当前窗口打开一个页面在新窗口/新标签页中打开链接在弹出的窗口中打开一个页面在父窗口中打开一个页面关闭当前窗口在内部框架中打开链接在父框架中打开链接部件和变量设定变量/部件滚动窗口到图像热区启用部件禁用部件设置部件为选中状态设定部件获取焦点展开树节点动态面板设置动态面板状态为指定状态显示动态面板隐藏动态面板切换动态面板可见性移动动态面板将动态面板置于顶层将动态面板置于底层杂项折叠树节点等待时间其他（在弹出窗口中显示文字描述）定义多个场景（条件判断）一个事件可以包含有多个场景，以传达多个不同的流程或交互。例如，可以在一个按钮的OnClick事件中加入两个场景，第一个场景为“如果成功”则执行第一个动作；第二个场景为“如果失败”则执行第二个动作。当在HTML原型中点击按钮时，会显示出这两个场景说明(“如果成功”和“如果失败”)，点选其中一个场景说明，就会执行这个场景中包含的行为。页面事件:OnPageLoadAxure支持一个页面级的触发事件：OnPageLoad，这个事件在原型载入页面时被触发。页面OnPageLoad事件在页面交互面板中定义，为页面OnPageLoad事件添加场景的方式与在控件事件中相同。Axure模块模块可用在页面中或是其他模块中，只要修改模块，在所有引用这个模块的也会相应跟着同步更新，常用于如页首(Header)、页尾(Footer)与导航(Navigation)。模块的概念犹如PowerPoint中母版、Dreamveawer中模板的概念，熟练掌握模块可以大大提高原型设计的效率，并使原型易于管理维护。什么是HTML原型Html原型是指在Axure中设计了带注释的线框图并定义了交互之后，就可以产生的一个可以基于浏览器的、可互动的原型。Html原型是一些HTML和JavaScript文件，不需要安装Axure或任何播放器就可以直接浏览原型，可以在IE6+、Mozilla、Firefox浏览器中运行。HTML原型工作环境介绍配置和生成原型使用HTML原型发布原型配置和生成原型工具→点击主菜单→生成（G）“常规生成”原型（P）或直接使用快捷键（F5），在打开的生成原型对话框，可以对原型进行配置和生成。“更多生成”更多的生成器和配置选项（M）或直接使用快捷键（F8），在打开的GeneratorConfigurations对话框中，选择配置类型，打开生成原型对话框对原型进行配置和生成。“生成当前页”在原型中重新生成当前页面（R）或直接使用快捷键（Crrl+F5），可以只对当前修改的页面进行重新生成。使用HTML原型HTML原型的界面可分成两个区域：左侧（站点地图）:是一个页面导航列表，以层级形式展示原型中的页面。（页面注释）:显示当前页面的注释。（脚本扩展）:运行页面脚本。中间（线框图）:显示线框图和流程图，线框图可以按照所设计的交互进行鼠标和键盘的互动。发布原型发布原型的方式有很多种：（发布到web服务器）发布HTML原型到Web服务器上，只要将网址告诉客户、工作伙伴或其他人，他们就可以在浏览器上浏览原型。（压缩成ZIP压缩包）将HTML原型压缩成ZIP包，然后将ZIP压缩包传递给相关人员。其它人通过ZIP压缩包便可以直接在自己的计算机上浏览HTML原型。（发布为CHM文档）发布为CHM文档，就像ZIP压缩包一样，这种方式是将原型发布为一个单独的文档，不需安装任何软件就可以访问。想要输出CHM原型文档，请在生成原型对话框的分发中，勾选“创建HTML帮助文件(.chm)”选项。如果你未安装HTMLHelpWorkshop的话，就必须先安装它才能产生CHM档。安装完成HTMLHelpWorkshop后，所安装的文件夹中将会出现一个hhc.exe的文件，单击”Locatehhc.exe”链接到hhc.exe文件的位置。最终产生的CHM原型文档存放在原型所在的文件夹中。高级交互设计用于设计高保真原型所需要的一些复杂的交互行为动态面板可以让你实现高级的交互功能，实现原型的高保真度。动态面板包含有多个状态（states），每个状态可包含一系列控件（你可以把一个状态理解成一个独立的页面）。任何时候都只有一个状态（页面）是可见的，或整个动态面板可以被隐藏。结合交互动作，可以让动态面板的状态进行隐藏、显示和改变。像添加其它控件一样，可以在控件面板中拖放动态面板控件到线框图中。实际效果-Tab页面实际效果-弹出层动态面板的结构第三层内容第二层内容第一层内容（最上层）我们可以把动态面板看成一个很多层叠在一起而每一层都能设定不同内容我们只能看到最上层显示的动态面板的交互原理当我们进行一些操作(譬如点击按钮、点击超链接等)使动态面板层的顺序改变，譬如第二层显示在最上层（如右图）这时候我们只能看到第二层了第三层内容第一层内容第二层内容（最上层）理论效果演示第三层内容第二层内容第一层内容（最上层）显示第二层(按钮)理论效果演示第三层内容第二层内容第一层内容（最上层）显示第二层(按钮)第三层内容第一层内容第二层内容（最上层）编辑动态面板的状态在线框图中，双击动态面板控件可以打开一个动态面板状态管理器（DynamicPanelStateManager）对话框，在对话框中你可以创建、重命名、重新排序、删除和编辑动态面板的状态。进行状态设计和设计线框图是一样的，要注意的是，状态页面中的蓝色虚线外框表示动态面板的边界范围，超过这个边界范围外的物体在最终生成原型时将不可见。隐藏动态面板可以设置动态面板在默认时隐藏。只要选择动态面板，右键菜单选择“编辑动态面板”→“设置隐藏”即可。这将会隐藏面板内容，动态面板的遮罩会由蓝色变为黄色。动态面板的管理动态面板管理器(DynamicPanelManager)提供了管理页面中所有动态面板的功能，可以在主菜单上选择“视图→”动态面板管理器“来调出动态面板管理器。动态面板的状态可以通过动态面板管理器进行新增、移除、编辑。另外，为了更方便的设计线框图，动态面板管理器中还提供了暂时隐藏或显示动态面板的功能。用鼠标点击动态面板名称右侧的淡蓝色小方块，可以在隐藏或显示之间切换。或者，你可以在顶部的页面名称（如Home）上点击鼠标右键，选择右键菜单“全部隐藏”或“全部显示”，可以隐藏或显示页面中所有的动态面板。动态面板的交互行为常用在动态面板上的交互行为：OnMove(移动动态面板时)OnShow(动态面板显示时)OnHide(动态面板隐藏时)OnPanelStateChange(动态面板状态改变时)OnDragStart(开始拖放动态面板时)OnDrag(拖动动态面板时)OnDragDrop(结束拖放动态面板时)选择其中一个行为后，然后“用例编辑器”中选择要进行交互行为在控件交互面板上Label输入框中，可以对线框图中选择的动态面板进行命名，然后就可以使用这个名称去引用动态面板。如果没有为动态面板进行命名，动态面板会被默认命名为“panel”动态面板的应用举例Tab页签动态面板可用于创建一个Tab页签控件。例如，Tab页签控件有3个页签，则可以使用一个包含有3个状态的动态面板，每一个动态面板的状态代表一个打开的页签状态。然后在每个页签上设置一