Axure快速原型设计实用教案

《Axure快速原型设计实用教案》由会员分享，可在线阅读，更多相关《Axure快速原型设计实用教案（61页珍藏版）》请在金锄头文库上搜索。

1、用户(yngh)体验以用户为中心(zhngxn)去研发产品UserExperienceOptimization李巍 第1页/共60页第一页，共61页。用户(yngh)看到的20%却是由那些看不到的80%决定的第2页/共60页第二页，共61页。20%很不幸的消息(xioxi)，其实用户压根不关心我们的东西用户或者客户只关注一个产品的第3页/共60页第三页，共61页。良好(lingho)用户体验的作用用 户 体 验 是 什 么 ？它 在 项 目 中 的 意 义 ？ 没 有 它 不 行 ( b x n g ) 么 ？为 什 么 需 要 用 户 体 验 设 计第4页/共60页第四页，共61页。用户(y

2、ngh)体验带来的很实际的部分提高项目研发成功率降低培训(pixn)成本降低团队成本、后期维护的工作量提高产品的传播速度带来用户对产品的良好口碑减缓压力（个人意见）第5页/共60页第五页，共61页。用户体验(tyn)定义用户体验（UserExperience，简称UE）是一种(yzhn)纯主观在用户使用产品过程中建立起来的感受。是用户对产品的唯一评价但是对于一个界定明确的用户群体来讲，其用户体验的共性是能够被设计的。第6页/共60页第六页，共61页。不要让用户思考(sko)，并且提供改错的机制用户(yngh)体验可用性第一定律第7页/共60页第七页，共61页。不要期待用户会研究你的产品(chn

3、pn)，应该让他们速度实现自己的目标用户(yngh)体验可用性第二定律第8页/共60页第八页，共61页。点击(dinj)多少次都没关系，只要每次点击(dinj)都是无须思考、明确无误的选择。用户体验可用性第三(dsn)定律第9页/共60页第九页，共61页。实际(shj)项目中的UE以用户为中心的用户体验的考虑从开发的最早期就开始进入整个流程，并贯穿(gunchun)始终应用程序的用户体验主要是来自用户和人机界面的交互过程UE的设计不是盲目的，是考虑成本、技术等等条件的平衡第10页/共60页第十页，共61页。UE在实际项目(xingm)的平衡第11页/共60页第十一页，共61页。高保真原型(yu

4、nxng)的介绍根据功能，为了指导开发而画的草图高保真原型也叫做( jiozu)交互式原型实现了功能页面流程跳转做到用户的响应都会有反馈和最后开发出来的产品基本吻合第12页/共60页第十二页，共61页。高保真原型(yunxng)的对项目的意义团队了解需求的最佳方式(fngsh)程序员开发的最好参考项目开发和维护中所需标准的最好表现形式验收的依据第13页/共60页第十三页，共61页。高保真原型的制作(zhzu)工具纸和笔，白板(bibn)和油性笔AxureUIDesignerPPT第14页/共60页第十四页，共61页。什么(shn me)是Axure？ Axure的完整英文名是Axure RP

5、Pro，可以快速(kui s)创建应用软件或Web网站线框图、原型、规格说明书等的。Axure会使你以往的工作方式发生变革：进行更加高效的设计；体验到动态的原型；清晰有效(yuxio)的交流想法；第15页/共60页第十五页，共61页。Axure工作(gngzu)环境介绍主菜单(cidn)和工具栏站点地图面板控件面板模块面板线框图工作区页面注释和交互控件交互面板控件注释面板第16页/共60页第十六页，共61页。站点地图(dt)面板“添加子页面”按钮可以添加一个页面；“上移”、“下移”、“降级”、“升级”按钮，可以组织页面的层次和顺序;“删除”按钮或点击鼠标右键的“删除”选项可以删除一个页面；“设

6、计页面”按钮，打开该页面在线框图区域中进行线框图设计;在页面上点选右键菜单(cidn)中也可以进行同样的操作。按钮名称依次：添加子页面 上移 下移 降级 升级 删除 设计页面 搜索第17页/共60页第十七页，共61页。部件(bjin)面板(控件面板)控件是用于设计线框图(kungt)的用户界面元素。在控件面板中包含有常用的控件库，如按钮、图片、文本框等。添加控件 从控件面板中拖动一个控件到线框图区域中，就可以添加一个控件。控件可以从一个线框图中被拷贝(Ctrl+C)，然后粘贴(Ctrl+V)到另外一个线框图中。 操作控件 添加控件后，可在线框图中选择该控件进行鼠标拖曳移动该控件和改变控件大小，

7、还可以一次选择多个控件进行移动和改变大小。另外，还可以组合、排序、对齐、平均间距（Distribute）和锁定控件。 编辑控件风格和属性 （有多种方法(fngf)）鼠标双击：鼠标双击某个控件，可以对控件的最常用的属性进行编辑。例如，双击一个图片控件可以导入一张图片；双击一个下拉列表或列表框控件可以编辑列表项。 工具栏：点击工具栏上的按钮可编辑控件的文本字体、背景色、边框等。 右键菜单： 通过在控件上点击右键菜单，编辑控件的一些特定属性，不同的控件这些属性也各不相同。查看和搜索控件 控件面板工具栏中，线框图下拉菜单，可以查看所有控件库，或只看默认线框图或流程图控件库，或只看已经被加载的控件库。另

8、外，你还可以加载已有控件库、创建新控件库、编辑当前控件库、或更新控件库。第18页/共60页第十八页，共61页。控件注释(zhsh)面板页面(ymin)注释面板为控件添加(tin ji)注释，以说明控件的功能 对页面进行详细描述和说明第19页/共60页第十九页，共61页。Axure基本交互(jioh)设计控件的交互 示范定义一个(y )链接 定义行为 定义多个场景（场景说明） 页面事件: OnPageLoad 第20页/共60页第二十页，共61页。控件的交互(jioh)在控件交互(jioh)面板中可以定义的控件交互(jioh)由事件（Events）、场景（Cases）和行为（Actions）组成

9、l用户操作界面时就会触发事件，如鼠标的OnClick、OnMouseEnter和OnMouseOut；l每个事件可以包含一个或多个场景，场景就是事件触发后出现的一种情况，如点击(dinj)一个按钮后可以出现两种场景：一种是进入页面1；另一种是进入页面2；l每个场景中可执行多个行为，例如：打开链接、显示面板、隐藏面板、移动面板。第21页/共60页第二十一页，共61页。示范(shfn)定义一个链接按钮控件OnClick事件用例编辑器选择要链接的页面或其它网页地址第22页/共60页第二十二页，共61页。定义(dngy)行为目前AxureRPPro6所支持的行为：链接在当前窗口打开一个页面在新窗口/新

10、标签页中打开链接在弹出的窗口中打开一个页面在父窗口中打开一个页面关闭当前窗口在内部框架中打开链接在父框架中打开链接部件和变量设定变量/部件滚动窗口到图像热区启用(qyng)部件禁用部件设置部件为选中状态设定部件获取焦点展开树节点动态面板设置动态面板状态为指定(zhdng)状态显示动态面板 隐藏动态面板 切换动态面板可见性移动动态面板将动态面板置于顶层将动态面板置于底层杂项折叠树节点等待时间其他（在弹出窗口中显示文字描述）第23页/共60页第二十三页，共61页。定义多个(du)场景（条件判断）一个事件可以包含有多个场景，以传达(chund)多个不同的流程或交互。例如，可以在一个按钮的OnClic

11、k事件中加入两个场景，第一个场景为“如果成功”则执行第一个动作；第二个场景为“如果失败”则执行第二个动作。当在HTML原型中点击按钮时，会显示出这两个场景说明(“如果成功”和“如果失败”)，点选其中一个场景说明，就会执行这个场景中包含的行为。第24页/共60页第二十四页，共61页。页面(ymin)事件:OnPageLoadAxure支持一个页面级的触发事件：OnPageLoad，这个事件在原型载入页面时被触发。页面OnPageLoad事件在页面交互面板中定义，为页面OnPageLoad事件添加(tinji)场景的方式与在控件事件中相同。第25页/共60页第二十五页，共61页。Axure模块(m

12、 kui) 模块(m kui)可用在页面中或是其他模块(m kui)中，只要修改模块(m kui)，在所有引用这个模块(m kui)的也会相应跟着同步更新，常用于如页首(Header)、页尾(Footer)与导航(Navigation)。模块(m kui)的概念犹如PowerPoint 中母版、Dreamveawer中模板的概念，熟练掌握模块(m kui)可以大大提高原型设计的效率，并使原型易于管理维护。第26页/共60页第二十六页，共61页。什么(shnme)是HTML原型Html原型是指在Axure中设计了带注释(zhsh)的线框图并定义了交互之后，就可以产生的一个可以基于浏览器的、可互动

13、的原型。Html 原型是一些HTML和 JavaScript 文件，不需要(xyo)安装 Axure 或任何播放器就可以直接浏览原型，可以在IE6+、Mozilla、Firefox浏览器中运行。第27页/共60页第二十七页，共61页。HTML原型工作环境(hunjng)介绍配置(pizh)和生成原型 使用HTML原型发布原型第28页/共60页第二十八页，共61页。配置和生成(shnchn)原型工具点击主菜单生成（G）“常规生成”原型（P）或直接使用快捷键（F5），在打开的对话框，可以对原型进行配置(pizh)和生成。“更多生成”更多的生成器和配置(pizh)选项（M）或直接使用快捷键（F8），

14、在打开的对话框中，选择配置(pizh)类型，打开对原型进行配置(pizh)和生成。“生成当前页”在原型中重新生成当前页面（R）或直接使用快捷键（Crrl+F5），可以只对当前修改的页面进行重新生成。第29页/共60页第二十九页，共61页。使用(shyng)HTML原型HTML原型的界面可分成两个区域：左侧（站点地图）:是一个页面(ymin)导航列表，以层级形式展示原型中的页面(ymin)。（页面(ymin)注释）:显示当前页面(ymin)的注释。（脚本扩展）:运行页面(ymin)脚本。中间（线框图）:显示线框图和流程图，线框图可以按照所设计的交互进行鼠标和键盘的互动。第30页/共60页第三十页

15、，共61页。发布(fb)原型发布原型的方式有很多种：（发布到web服务器）发布HTML原型到Web服务器上，只要将网址告诉(os)客户、工作伙伴或其他人，他们就可以在浏览器上浏览原型。（压缩成ZIP压缩包）将HTML原型压缩成ZIP包，然后将ZIP压缩包传递给相关人员。其它人通过ZIP压缩包便可以直接在自己的计算机上浏览HTML原型。（发布为CHM文档）发布为CHM文档，就像ZIP压缩包一样，这种方式是将原型发布为一个单独的文档，不需安装任何软件就可以访问。想要输出 CHM原型文档，请在对话框的 分发 中，勾选“创建HTML帮助文件(.chm)”选项。如果你未安装HTML Help Works

16、hop的话，就必须(bx)先安装它才能产生CHM档。安装完成HTML Help Workshop 后，所安装的文件夹中将 会出现一个hhc.exe的文件，单击”Locate hhc.exe”链接到hhc.exe文件的位置。最终产生的CHM原型文档存放在原型所在的文件夹中。第31页/共60页第三十一页，共61页。高级交互设计用于设计高保真原型所需要(xyo)的一些复杂的交互行为第32页/共60页第三十二页，共61页。动态(dngti)面板可以让你实现高级(goj)的交互功能，实现原型的高保真度。 动态面板包含有多个状态（states），每个状态可包含一系列控件（你可以把一个(y )状态理解成一个

17、(y )独立的页面）。任何时候都只有一个(y )状态（页面）是可见的，或整个动态面板可以被隐藏。结合交互动作，可以让动态面板的状态进行隐藏、显示和改变。像添加其它控件一样，可以在控件面板中拖放动态面板控件到线框图中。 第33页/共60页第三十三页，共61页。实际效果-Tab页面(ymin)第34页/共60页第三十四页，共61页。实际效果-弹出层第35页/共60页第三十五页，共61页。动态面板(minbn)的结构第三层内容(nirng)第二层内容(nirng)第一层内容（最上层）我们可以把动态面板看成一个很多层叠在一起而每一层都能设定不同内容我们只能看到最上层显示的第36页/共60页第三十六页，

18、共61页。动态面板(minbn)的交互原理当我们进行一些(yxi)操作(譬如点击按钮、点击超链接等)使动态面板层的顺序改变，譬如第二层显示在最上层（如右图）这时候我们只能看到第二层了第三层内容第一层内容第二层内容（最上层）第37页/共60页第三十七页，共61页。理论(lln)效果演示第三层内容第二层内容第一层内容（最上层）显示(xinsh)第二层(按钮)第38页/共60页第三十八页，共61页。理论(lln)效果演示第三层内容第二层内容第一层内容（最上层）显示(xinsh)第二层(按钮)第三层内容第一层内容第二层内容（最上层）第39页/共60页第三十九页，共61页。编辑动态面板(minbn)的状

19、态在线框图中，双击动态面板控件可以(ky)打开一个动态面板状态管理器（DynamicPanelStateManager）对话框，在对话框中你可以(ky)创建、重命名、重新排序、删除和编辑动态面板的状态。进行状态设计和设计线框图是一样的，要注意的是，状态页面中的蓝色虚线外框表示动态面板的边界范围，超过这个边界范围外的物体在最终生成原型时将不可见。第40页/共60页第四十页，共61页。隐藏动态(dngti)面板可以设置(shzh)动态面板在默认时隐藏。只要选择动态面板，右键菜单选择“编辑动态面板”“设置(shzh)隐藏”即可。这将会隐藏面板内容，动态面板的遮罩会由蓝色变为黄色。第41页/共60页第

20、四十一页，共61页。动态面板(minbn)的管理动态面板管理器(DynamicPanelManager)提供了管理页面中所有动态面板的功能，可以在主菜单(cidn)上选择“视图”动态面板管理器“来调出动态面板管理器。动态面板的状态可以通过动态面板管理器进行新增、移除、编辑。另外，为了更方便的设计线框图，动态面板管理器中还提供了暂时隐藏或显示动态面板的功能。用鼠标点击动态面板名称右侧的淡蓝色小方块，可以在隐藏或显示之间切换。或者，你可以在顶部的页面名称（如Home）上点击鼠标右键，选择右键菜单(cidn)“全部隐藏”或“全部显示”，可以隐藏或显示页面中所有的动态面板。第42页/共60页第四十二页

21、，共61页。动态面板的交互( jioh)行为常用在动态面板上的交互行为：OnMove(移动动态面板时)OnShow(动态面板显示时)OnHide(动态面板隐藏时)OnPanelStateChange( 动态面板状态改变时)OnDragStart(开始拖放动态面板时)OnDrag(拖动动态面板时)OnDragDrop(结束( jish)拖放动态面板时)选择其中一个行为后，然后“用例编辑器”中选择要进行交互行为在控件交互面板上Label输入框中，可以对线框图中选择的动态面板进行命名，然后就可以使用这个名称去引用动态面板。如果没有为动态面板进行命名，动态面板会被默认命名为“panel”第43页/共6

22、0页第四十三页，共61页。动态(dngti)面板的应用举例Tab 页签动态面板可用于创建一个 Tab 页签控件。例如， Tab 页签控件有 3个页签，则可以使用一个包含 (bohn)有3个状态的动态面板，每一个动态面板的状态代表一个打开的页签状态。然后在每个页签上设置一个交互动作（OnClick），当点击某个页签时，切换到动态面板的对应的某一个状态。 页面动态初始化 动态面板可以和页面的 OnPageLoad 事件结合使用，实现根据变量的值呈现不同的初始化界面（根据变量值呈现不同的默认动态面板的状态）。 第44页/共60页第四十四页，共61页。OnMouseEnterOnMouseOut 在文

23、本类控件、按钮类控件、超级链接控件中有OnMouseEnter和 OnMouseOut事件。OnMouseEnter事件是当鼠标移入到一个控件上时(shn sh)发生，OnMouseOut事件是当鼠标移出一个控件时发生。 OnMouseEnter 和 OnMouseOut事件常常和动态面板一起使用，在原型(yunxng)中实现如菜单弹出、状态翻转、自定义提示等功能。 第45页/共60页第四十五页，共61页。部件(bjin)样式大部分控件具有(jyu)鼠标悬停样式 ，鼠标按下样式、鼠标选中样式，鼠标禁用样式要设置对应的样式(yngsh)(Selected Style)则必须配合相应的交互动作第4

24、6页/共60页第四十六页，共61页。菜单(ci dn)菜单控件分为垂直菜单（Vertical Menu）和水平菜单（Horizontal Menu），默认(mrn)情况下菜单带有3个菜单项。通过工具栏可以对菜单加底色、字体和其它样式。在菜单上右键单击可以 增加、删除菜单项或添加子菜单应用样式之后，可以将鼠标移到菜单项左上角的黑白小方框(fn kun) 上进行翻转效果预览。 第47页/共60页第四十七页，共61页。高级(goj)功能 第48页/共60页第四十八页，共61页。逻辑(lu j)条件要添加逻辑条件的控件选择事件（如：OnClick事件）用例编辑器条件创建器需要执行的动作第49页/共60

25、页第四十九页，共61页。OnChange事件(shjin)OnChange事件可用于下拉框（Droplist）和列表框（List Box）控件。OnChange事件是在下拉框或列表框的选项选择时发生(fshng)。这在原型中以下拉框进行导航非常有用，即当选择下拉框的某个选项时跳转到相应的页面上。 如果名称(mngchng)为droplist下拉框的选项等于名称(mngchng)为listbox列表框的选项时第50页/共60页第五十页，共61页。OnKeyUp事件(shjin)OnKeyUp事件常用于用户在表单中进行输入的实时校验。例如，验证输入的字符长度、用户名是否已经(y jing)存在、验

26、证码是否正确等，并在界面上进行动态信息提示。下图是用OnKeyUp事件实现的当输入的邮编不符合(fh)5个字符长度的两个状态：第51页/共60页第五十一页，共61页。OnFocus事件(shjin)OnLostFocus事件(shjin)OnFocus事件是当是当鼠标点击控件或用键盘tab键让控件获得(hud)焦点时发生；而OnLostFocus事件正好相反， 是当控件失去焦点时发生。OnFocus和OnLostFocus事件(shjin)可用于文本框，文本域，下拉列表，单选，多选控件第52页/共60页第五十二页，共61页。模块(m kui)的有效重复使用模块(m kui)的重要作用就是重复使

27、用。你可以将设计中可重用的部分做成模块(m kui)，只需要改变模块(m kui)中的一个地方，就可以修改所有相关的地方，使得维护非常方便。 第53页/共60页第五十三页，共61页。有时，可能需要让模块在不同的页面上有所不同。例如，对于作为导航元素的模块，在不同页面上所要突出显示的“当前导航项”要不同；或者对于作为Header头部的模块，在不同页面上时需要显示不同的标题文字。虽然(surn)这些应用例子也可以通过为每个页面创建一个额外的模块或在每个页面上做一些特别的编辑来实现，但是利用一些特别的功能，使得仍然可以只在一个模块中进行维护，做到模块的有效重用。第54页/共60页第五十四页，共61页

28、。控制(kngzh)模块中的控件 模块(mkui)中的动态面板在页面中可以选择所需要的模块(mkui)中的动态面板。选择“页面交互面板”中的OnPageLoad事件，设置模块(mkui)中的动态面板的状态，实现模块(mkui)中的一个部分只在某些页面上显示而在其它页面上不显示，这样你就可以只需要维护一个单独的模块(mkui)，最大化的实现模块(mkui)的重复使用。第55页/共60页第五十五页，共61页。实战制作一个相对复杂(fz)的原型T a b 又 叫 滑 动 门用 来 让 固 定 大 小 区 域 ( q y ) 里 面 能 尽 量 显 示 更 多 内 容第56页/共60页第五十六页，共6

29、1页。共享工程(gngchng)一个共享工程是可以被多人同时(tngsh)编辑，共享工程中也保存着工程被修订的历史。一个共享工程是被存储在一个普通的文件目录中，该目录可以被那些允许访问共享工程的网络上的人所访问。Axure共享工程所存储的服务器或计算机上不需要安装额外的软件。 在Axure中操作一个共享工程和在版本控制系统中操作文件是类似的，每个人在自己本地计算机上都有一个共享工程的副本。如果要修改页面、模块(m kui)、或工程属性，首先需要对这些项目进行检出（checked out），等完成修改后，再进行检入（checked in）到共享工程中，其它人就可以在本地获取所更新的共享工程了。事

30、实上，就是用SVN在进行共享工程的版本控制。 第57页/共60页第五十七页，共61页。创建(chungjin)共享工程通过主菜单“共享”“从当前文件创建共享工程(C)”，就可以创建一个新共享工程。这时会弹出一个创建共享工程的对话框， 根据(gnj)指示去输入工程名、共享工程的目录地址、本地共享工程的副本即可。第58页/共60页第五十八页，共61页。共享工程(gngchng)使用1、周群在她自己本地的计算机上检出页面1进行编辑。由于(yuy)同一时间只能有一个人检出同一个页面，所以这时李剑不能检出修改页面1； 2、周群提交修改和检入页面1到网络共享工程的目录中；3、李剑在他自己本地的计算机上获取

31、周群对页面1的修改，且现在李剑可以检出页面1进行自己的修改。第59页/共60页第五十九页，共61页。感谢您的观赏(gunshng)！第60页/共60页第六十页，共61页。内容(nirng)总结用户体验。点击多少次都没关系，只要每次点击都是无须思考、明确无误的选择。例如，双击一个图片控件可以导入一张图片。双击一个下拉列表或列表框控件可以编辑列表项。定义多个场景（场景说明）。一个事件可以包含有多个场景，以传达多个不同的流程或交互。当我们进行一些操作(譬如点击按钮、点击超链接等)。在菜单上右键单击可以 增加、删除菜单项或添加子菜单。1、周群在她自己本地的计算机上检出页面(y min)1进行编辑。感谢您的观赏第六十一页，共61页。