搜索
思特奇版权所有，未经许可不得向外传播交互设计工具Axure北京神州数码思特奇信息技术股份有限公司VASD高健2010-07-20修订记录序号修订原因修订内容修订位置(页码)修订人核准人修订后版本发布日期1“几种常用交互设计工具的对比”表格中，Photoshop软件不能导出html页面，后经验证，Photoshop软件是可以导出html文件的，其将图片合成为一个“gif”格式的图片插入到html文件中。新增P10高健2.02010-8-12目录大纲Axure简介2软件常用功能3为何要使用交互设计1需求的沟通与传递交互设计工具Axure能做什么？软件的特点主要界面与功能文档管理和组件模块、注释与交互、动态面板生成以往常用的需求沟通与传递方式文字描述结构图流程图架构图拓扑图界面效果图以上内容通常会出现在“***项目需求说明书”中。特点：内容全面、详细，数据项及其流转过程通过图形化和文字内容结合演示缺陷：1.不利于非专业技术人员的阅读；2.内容描述较为复杂，文字较多，不利于短时间快速理解与评估；3.界面效果图仅作为范例图示，无法形成流程化演示；4.对于B/S类项目需求而言，无法体现功能设计中的用户体验思想；以往常用的需求沟通与传递方式与文字描述相比，采用交互设计原型是需求沟通与传递的更好方式！目录大纲Axure简介2软件常用功能3为何要使用交互设计1需求的沟通与传递交互设计工具Axure是做什么用的？软件的特点主要界面与功能文档管理和组件模块、注释与交互、动态面板生成交互设计广义定义人工制品、环境和系统的行为，以及传达这种行为的外形元素的设计与定义。用户对话产品狭义定义交互设计交互设计原型：从产品功能逻辑入手，结合对常见软件的经验积累和竞争产品的认识，加上对用户的理解，为产品设计一个尽量接近用户对产品运行方式理解的概念模型，成为产品设计的基础框架。常用形式——线框图。交互设计交互设计原型在网站建设项目中的应用：需求阶段——采用一系列图形或web界面对网页内容展现、功能设计思路、数据流转过程进行诠释，以此作为与客户沟通确认的依据之一；UI设计阶段——设计师以交互设计成果物作为界面设计参考；概设阶段——开发人员根据其功能设计流程和数据项设置进行系统概要设计；测试阶段——QA可以交互设计原型作为参考依据之一，对网站系统功能进行测试。交互设计交互设计在需求过程中的优劣势分析：优势：效果直观、通俗易懂易于展现功能流程各个环节非常良好的互动性与体验便于快速沟通快速确认劣势：制作过程复杂、增加需求整理工作的时间成本着重于界面细节，增加制作难度部分细节需要配合文档说明机会：交互设计原型可以很好的控制需求边界，避免因文字描述歧义带来的后续需求变更和测试目的不明确问题，节省后期时间成本。风险：客户方易陷于具体的界面功能细节讨论，从而可能会造成前期需求确认工作的拖延。交互设计工具几种常用交互设计工具的对比属性工具适用人群易用性导出Html页面间交互效果界面仿真度纸笔全部极高不能无根据绘画水平word较多高可以很低低ppt较多高可以很低低Visio中等中等可以很低中等Photoshop较少低可以无高Dreamweaver很少极低可以很高高交互设计工具需要一种工具：适用人群：较多（有办公软件使用基础即可）易用性：高（类office）导出Html：可以页面间交互效果：高界面仿真度：高Axure简介2软件常用功能3为何要使用交互设计1需求的沟通与传递交互设计工具Axure能做什么？软件的特点主要界面与功能文档管理和组件模块、注释与交互、动态面板生成目录大纲AxureAxure能做什么：能帮助网站需求设计者，快捷而简便的创建基于目录组织的原型文档、功能说明、交互界面以及带注释的网页，并可自动生成用于演示的网页文件和word文档，以提供演示与开发。Axure简介2软件常用功能3为何要使用交互设计1需求的沟通与传递交互设计工具Axure能做什么？软件的特点主要界面与功能文档管理和组件模块、注释与交互、动态面板生成目录大纲Axure特点：使用特点提供可视化开发界面，所有图形或组件均靠拖拽动作生成图形尺寸以“像素”为最小单位，与html代码统一，可达到高仿真效果可生成文本类原型，文件量小，方便网络传输；快速生成原型，效果直观，修改便利功能特点快速创建带注释的网页文件在不写任何一条html与javascript语句的情况下，通过创建的文档以及相关条件和注释，一键生成htmlprototype演示根据设计稿，一键生成一致而专业的word版本的原型设计文档可根据需要生成html、word文档或位图文件AxureAxure原型范例演示。Axure简介2软件常用功能3为何要使用交互设计1需求的沟通与传递交互设计工具Axure能做什么？软件的特点主要界面与功能文档管理和组件模块、注释与交互、动态面板生成目录大纲Axure主界面Axure主界面工具栏命令区，和我们操作的所有office软件一样，包含文件、编辑、查看和帮助，这些功能大抵是差不多的。表格也很容易理解，就是对表格编辑的命令。而Axure特有的几个特殊的命令栏目是：a、线框图：包含所有画原型线框图的相关命令。b、对象：包含所有对工作区物体的操作命令，操作放入工作区的所有线框，包括组合、排序、锁定以及脚注命令等。c、生成：自动生成html演示文件、word说明文档，以及对生成规则进行自行编辑、定义。d、共享：提供多人操作同一目录下的共享功能，类似于版本控制工具。工具栏快捷方式，基本和office风格一模一样，功能也很容易上手工作区，这就是我们平常操作工具，创建prototype的舞台，将自己的构思在这里释放，将自己的想法在这里展现。工作区的上部显示打开的文件名，可同时打开多文档，进行操作。站点地图，AxsureRP创建的文件是模拟真实网站页面关系的，sitemap就是通过树形目录关系，管理所有的站点页面文件与流程图文件。科学的文件关系结构，对有效的演示文档与生成易读的说明文档相当重要。组件箱，囤积了所有用来画线框图与流程图的对象。我们可以通过拖拽的方式将小图形放入工作区，进行操作。复用模块区，这里创建的页面文件和sitemap的页面相似，唯一不同的是，master的每个文件，可以当作一个公用整体，被各个页面文件反复调用。这个功能就相当于程序开发中的程序复用，用好这个功能，可以减少我们很大一部的工作量。页面注释，用来对当前创作页面进行注释与说明。同时可以在这里对页面里的关键字段和特殊问题进行详细的描述。页面载入时的交互功能。通过在这里设置，不同条件下，页面初次打开时的状况。注释与交互区。这个注释和交互和7、8不同，7、8针对的是页面，而9针对的是页面中的元素，也就是一个个线框组件。动态面板管理区。可以制作页面中的浮动层、标签切换等互动效果。Axure简介2软件常用功能3为何要使用交互设计1需求的沟通与传递交互设计工具Axure能做什么？软件的特点主要界面与功能文档管理和组件模块、注释与交互、动态面板生成目录大纲文档管理与组件文档管理（站点地图）文档管理的目的，其实是为了有一个清晰的产品思路。做一个原型需要首先构建一个清晰的文档关系，这样一方面能够让自己清楚文件关系与位置，更主要的是让开发者与接受者能清晰理解你的思路，生成更合理的产品说明word文档。左图：以电信网上营业厅为例，采用栏目结构作为文档管理，不同层级之间的页面关系比较清晰。图标（从左至右）1、增加一个子页面：为所选择的页面创建一个子页面。2、页面上移：同等级的页面中，将所选页面的上下排列次序，上移一个位置。3、页面下移：同等级的页面中，将所选页面的上下排列次序，下移一个位置。4、页面降序：将所选页面等级降序，作为原等级中，排列在所选页面上方之页面的子页面。5、页面升序：将所选页面等级升序，将所选页面的页面等级，升序为父页面的同等级页面。6、删除页面：将所选页面删除，同时删除其子页面。7、编辑页面：在工作区打开所选择页面，进行编辑。文档管理与组件文档管理（站点地图）右键调出命令菜单，与顶部按钮功能相同。文档管理与组件组件分为两种：线框图库和流程图库。左侧图中，自矩形之后为流程图库，之前为线框图库。重点说明：图片：给原型中插入一个图片站位，也可以直接置入真实的图片。超链接：插入带链接的文本。相当于插入了一段带a标签的文字。占位符：插入一个占位符。占位符通常用来表达在页面中某些特殊区域，如广告。框架：类似于html中的iframe对象。用于在页面中制造页面框架，每个框架中嵌入不同的页面。动态面版：是Axure为了表现多帧区域内容而制造的一个工具。类似于html中的css属性layer。水平/垂直菜单：用于制作水平或者垂直的菜单，可以添加漂浮的的子菜单，添加方法很简单，就是选择所要添加的菜单项，添加子菜单。文档管理与组件组件组件添加方式：鼠标拖拽在组件上右键可调出控制菜单，可以在控制菜单中编辑属性：形状：改变当前组件形状；位置和尺寸：改变当前组件的位置、大小；注：位置坐标以左上角为0,0组合、叠放次序、对齐、分散、锁定功能与ppt、visio相同注：工具栏区有功能按钮的快捷方式Axure简介2软件常用功能3为何要使用交互设计1需求的沟通与传递交互设计工具Axure能做什么？软件的特点主要界面与功能文档管理和组件模块、注释与交互、动态面板生成目录大纲模块、注释与交互、动态面板模块模块和站点地图面板很相似，文档操作也一样，它们的本质区别是，站点地图里的文件是最终展示页面，模块里的文件却只是一个库文件，是页面的一个部分。编辑：编辑方法同文档编辑方法。调用：拖拽、添加到页面特点：可以同步更新使用同一模块的所有文档。类似于编程中的include。功能：与站点地图基本相同，增加了文件夹管理的功能。模块、注释与交互、动态面板模块模块行为右键菜单中，行为分为三类：正常、作为背景、自定义组件普通文件（粉色）：就是一般的复用文件。是默认创建的复用文件。作为背景的文件（淡蓝色）：定位的复用模板，定位于页面的底层，并且锁定模板中的线框图在他原来创建的位置。这类复用模块主要用于创建head、foot、侧边栏等明确定位的复用模块。自定义组件（白色）：类似于自创了一个线框图。只决定了模块的功能和位置，但是进入到特定的页面中，模块中的各自部分的说明和功能可以重新定义。模块、注释与交互、动态面板注释与交互交互功能设置——是用户通过不同方式触发页面中元素或者载入页面时，发生的交互动作。如页面跳转、弹出。在生成html框架页面时，产生相应的对象功能，用以演示操作。注释说明——用文字详细说明对应元素的细节或页面的说明。让程序员在开发的时候清楚了解该对象或该页面的程序实现详情与细节。区域1：针对整个页面的说明和交互。区域2：针对页面中某个元素的说明与交互。模块、注释与交互、动态面板注释与交互范例模块、注释与交互、动态面板注释与交互线框元素注释自定义模块、注释与交互、动态面板注释与交互页面中的注释生成模块、注释与交互、动态面板注释与交互交互设计模块、注释与交互、动态面板注释与交互交互设计功能界面范例：添加一个链接模块、注释与交互、动态面板注释与交互交互设计功能界面模块、注释与交互、动态面板动态面板交互设计功能界面组件区域中的“动态面板”，可在文档中添加动态面板动态面板管理区域：可编辑管理动态面板模块、注释与交互、动态面板动态面板动态面板可以用来做什么？1）tab式页签的切换效果2）鼠标触发式和点击触发式的下拉菜单效果：这个可以结合Axure的默认组件中的“垂直菜单”、“水平菜单”来实现，常用于导航的原型制作。3）鼠标触发式的浮窗效果：类似“Alt”的效果，常用于浏览提示和触发式广告。4）JS的鼠标点击弹层效果：这个是目前使用被广泛使用的效果之一。5）注册表单中的根据焦点判断提示的效果：当焦点在输入框内的时候提示该表单栏目填写规范，当焦点离开输入框的时候根据填写的结果提示正确或者错误原因，这个需要动用高级设计交互编辑功能结合Axure的