Axure快速原型设计

合集下载

Axure快速原型设计教程

Axure快速原型设计教程

目录Part I : 介绍(Introduce)1交互原型设计软件Axure RP Pro 4 中文教程(二) 18PartV:Widget工具 18PartVII:交互interactions(上) 33Part I : 介绍(Introduce)互联网行业产品经理的一项重要工作,就是进行产品原型设计(Prototype Design)。

而产品原型设计最基础的工作,就是结合批注、大量的说明以及流程图画框架图wireframe,将自己的产品原型完整而准确的表述给UI、UE、程序工程师,市场人员,并通过沟通会议,反复修改prototype 直至最终确认,开始投入执行。

进行产品原型设计的软件工具也有很多种,我写的这个教程所介绍的Axure RP,是taobao、dangdang等国内大型网络公司的团队在推广使用的原型设计软件。

同时,此软件也在产品经理圈子中广为流传。

之所以Axure RP得到了大家的认同和推广,正是因为其简便的操作和使用,符合了产品经理、交互设计师们的需求。

在正式谈Axure RP之前,我们先来看看做产品原型设计,现在大致有哪些工具可以使用,而他们的利弊何在。

纸笔:简单易得,上手难度为零。

有力于瞬间创意的产生与记录,有力于对文档即时的讨论与修改。

但是保真度不高,难以表述页面流程,更难以表述交互信息与程序需求细节。

Word:上手难度普通。

可以画wireframe,能够画页面流程,能够使用批注与文字说明。

但是对交互表达不好,也不利于演示。

PPT:上手难度普通。

易于画框架图,易于做批注,也可以表达交互流程,也擅长演示。

但是不利于大篇幅的文档表达。

Visio:功能相对比较复杂。

善于画流程图,框架图。

不利于批注与大篇幅的文字说明。

同样不利于交互的表达与演示。

Photshop/fireworks:操作难度相对较大,易于画框架图、流程图。

不利于表达交互设计,不擅长文字说明与批注。

Dreamweave:操作难度大,需要基础的html知识。

axure原型方法

axure原型方法

axure原型方法(实用版)目录1.Axure RP 简介2.Axure 原型设计方法3.Axure 原型设计流程4.Axure 原型设计工具与资源5.Axure 原型设计案例分析6.Axure 原型设计技巧与实践正文一、Axure RP 简介Axure RP 是一款专业的原型设计工具,广泛应用于网站、App 等各种产品界面的设计与制作。

通过 Axure RP,设计者可以快速构建出界面原型,并进行交互设计和用户体验测试,从而提高产品的设计质量和效率。

二、Axure 原型设计方法1.线框图设计:通过简单的线条和图形,快速勾勒出界面的基本结构和布局,以便进行初步的交互设计。

2.页面布局设计:根据需求和设计风格,对页面元素进行精细的布局和排版,包括字体、颜色、图标等。

3.交互设计:通过 Axure RP 内置的交互组件,实现页面元素之间的交互效果,如按钮点击、菜单弹出等。

4.动态效果设计:通过 Axure RP 的动画功能,为页面元素添加动态效果,提高用户体验。

5.页面组织结构设计:对整个产品或项目进行页面结构的规划和设计,包括页面层级、导航方式等。

三、Axure 原型设计流程1.需求分析:了解产品或项目的需求,明确设计目标和任务。

2.设计方案:根据需求分析,制定原型设计方案,包括设计风格、交互方式等。

3.初步设计:利用 Axure RP 进行初步的原型设计,包括线框图、页面布局等。

4.交互设计:根据设计方案,添加交互组件,实现页面元素之间的交互效果。

5.动态效果设计:为页面元素添加动画效果,提高用户体验。

6.测试与优化:对原型进行测试,发现并解决问题,进行设计优化。

7.输出与交付:将最终的原型设计输出为 HTML 格式,供开发团队进行开发。

四、Axure 原型设计工具与资源1.Axure RP 软件:专业的原型设计工具,提供丰富的组件库和功能。

2.Adobe XD:Adobe 公司推出的设计工具,支持原型设计,具有强大的设计资源库。

Axure原型设计基础教学ppt课件(完整版)

Axure原型设计基础教学ppt课件(完整版)

Axure RP是一款快速原型设计工具。Axure代表美国Axure Software Solution公 司;RP则是Rapid Prototyping(快速原型)的缩写。Axure RP是该公司旗舰产品, 是一个专业的快速原型设计工具,让负责定义需求和规格、设计功能和界面的用 户能够快速创建应用软件或Web网站的线框图、流程图、原型和规格说明文档。 它不需要用户具备任何编程或写代码基础,就可以快速、高效地创建原型,设计出 交互效果良好的产品原型,常用于互联网产品设计、网页设计、UI设计等领域。 作为专业的原型设计工具,它还能同时支持多人协作设计和版本控制管理。
图2-1 线框图
图2-2 线框图式思维转化
Axure线框工具可以帮助用户简化烦琐的设计过程,为用户节省时间和精力。在制 作线框图的时候,尽量创建可编辑、可重复使用的元素,如图2-3、图2-4所示。这 样,制作原型的时候,在之前的基础上继续细化这些元素即可。
图2-3 线框图元素一
图2-4 线框图元素二
2.1 Axure RP的工作环境
Axure的可视化工作环境可以让用户轻松快捷地以鼠标操作的方式创建带有注释 的线框图。不用进行编程,就可以在线框图上定义简单连接和高级交互。软件可 以在线框图的基础上自动生成HTML原型和Word格式的文件,见表2-1。
表2-1 产品对比
随着Axure RP原型设计工具的广泛应用,Axure RP已经被很多大型企业所采用,使 用者越来越趋于广泛,不但包括了最初Axure RP原型工具的主推对象:产品经理、 需求工作人员、专注功能交互和界面设计的交互设计师、可用性专家、UI设计师 等,甚至产品规划、设计、开发、测试、运营环节的参与人员,如:商业分析师、信 息架构师、IT咨询师、架构师、程序开发工程师也在使用Axure。

axure原型设计流程

axure原型设计流程

axure原型设计流程Axure原型设计是一个非常重要的流程,它涉及到多个步骤和环节。

下面我会从多个角度来介绍Axure原型设计的流程。

第一步是需求分析,这是Axure原型设计的第一步。

在这个阶段,设计师需要与项目相关人员深入沟通,了解项目的需求和目标。

这包括用户需求、功能需求、交互需求等。

只有充分了解项目的需求,才能更好地进行后续的原型设计工作。

第二步是构思和规划。

在这个阶段,设计师需要根据需求分析的结果,开始构思和规划原型的整体结构和布局。

这包括页面的层次结构、导航方式、功能模块的布局等。

设计师需要考虑用户的操作习惯和体验,确保原型的结构合理、清晰。

第三步是绘制草图。

在这个阶段,设计师可以利用Axure工具进行页面的草图绘制,包括页面的布局、元素的排版等。

这个阶段的目的是初步呈现出原型的整体框架,以便后续的细化工作。

第四步是交互设计。

在这个阶段,设计师需要对原型进行交互设计,包括页面的链接、按钮的交互效果、表单的填写等。

这个阶段需要设计师对用户的操作流程进行深入思考,确保用户可以顺利完成各项操作。

第五步是视觉设计。

在这个阶段,设计师可以对原型进行视觉设计,包括页面的颜色、字体、图标等。

这个阶段需要设计师考虑用户的视觉感受,确保原型的外观美观、舒适。

第六步是评审和修改。

在这个阶段,设计师需要与项目相关人员进行原型的评审,收集反馈意见,并对原型进行适当的修改和调整。

这个阶段需要设计师具备一定的沟通能力和团队合作精神。

最后一步是输出和分享。

在这个阶段,设计师需要将完成的原型输出成可交互的文件,并分享给项目相关人员进行最终确认。

这个阶段需要设计师对Axure工具的使用非常熟练,确保原型的输出质量。

总的来说,Axure原型设计的流程涉及到需求分析、构思规划、草图绘制、交互设计、视觉设计、评审修改、输出分享等多个环节,设计师需要在每个环节都做到严谨细致,才能完成一个高质量的原型设计工作。

Axure快速原型设计

Axure快速原型设计

原型易于管理维护。
什么是HTML原型
Html原型是指在 Axure中设计了带注释的线框图并定义了交互之后,就可 以产生的一个可以基于浏览器的、可互动的原型。
Html 原型是一些HTML和 JavaScript 文件,不需要安装 Axure 或任何播放器就可以 直接浏览原型,可以在IE6+、Mozilla、Firefox浏览器中运行。
按钮名称依次:添加子页面 上移 下移 降级 升级 删除 设计页面 搜索
部件面板(控件面板)
控件是用于设计线框图的用户界面元素。在控件面板中包含有常用的控件库, 如按钮、图片、文本框等。
添加控件 从控件面板中拖动一个控件到线框图区域中,就可以添加一个控件。控件可以从一 个线框图中被拷贝(Ctrl+C),然后粘贴(Ctrl+V)到另外一个线框图中。 操作控件
理论效果演示
第一层内容(最上层) 显示第二层(按钮) 第二层内容
第三层内容
理论效果演示
第一层内容(最上层) 第二层内容(最上层) 显示第二层(按钮) 第二层内容 第一层内容
第三层内容
编辑动态面板的状态
在线框图中,双击动态面板控件可以打开一个动态面
板状态管理器(Dynamic Panel State Manager)对话框,在对话框中你可以创建、重命 名、重新排序、删除和编辑动态面板的状态。
添加控件后,可在线框图中选择该控件进行鼠标拖曳移动该控件和改变控件大小,
还可以一次选择多个控件进行移动和改变大小。另外,还可以组合、排序、对齐、 平均间距(Distribute)和锁定控件。 编辑控件风格和属性 (有多种方法) 鼠标双击:鼠标双击某个控件,可以对控件的最常用的属性进行编辑。例如,
实际效果tab页面实际效果弹出层劢态面板的结构第三层内容第二层内容第一层内容最上层?我们可以把劢态面板看成一个很多层叠在一起?而每一层都能设定丌同内容?我们只能看到最上层显示的劢态面板的交互原理?当我们迚行一些操作譬如点击按钮点击超链接等?使劢态面板层的顸序改发譬如第二层显示在最上层如右图?这时候我们只能看到第二层了第三层内容第一层内容第二层内容最上层理论效果演示第三层内容第二层内容第一层内容最上层显示第二层按钮理论效果演示第三层内容第二层内容第一层内容最上层显示第二层按钮第三层内容第一层内容第二层内容最上层编辑劢态面板的状态在线框图中双击劢态面板控件可以打开一个劢态面板状态管理器dynamicpanelstatemanager对话框在对话框中你可以创建重命名重新排序删除和编辑劢态面板的状态

axure原型案例

axure原型案例

axure原型案例Axure原型案例。

在产品设计与开发过程中,原型设计是一个非常重要的环节。

它可以帮助产品团队更直观地了解产品的功能和交互细节,也可以帮助开发团队更好地把握产品的需求和设计思路。

而在原型设计工具中,Axure是一个非常受欢迎的选择,它强大的功能和灵活的操作方式,使得它成为了众多产品设计师的首选工具之一。

在这篇文档中,我将分享一个关于Axure原型设计的案例,希望能够通过具体的实例,来展示Axure在产品设计中的应用和价值。

案例背景:某互联网公司正在开发一款新的移动应用,该应用主要定位于提供健身运动相关的服务。

在产品开发的初期阶段,产品团队需要对应用的功能和交互进行详细的规划和设计,以便为后续的开发工作提供清晰的指导。

设计目标:1. 展示应用的整体架构和功能模块。

2. 完整呈现应用的交互流程和用户操作路径。

3. 提供可交互的原型演示,以便进行用户测试和产品迭代。

设计过程:首先,我们使用Axure进行了应用的整体架构设计,包括首页、个人中心、健身课程、社区互动等功能模块。

通过Axure的线框工具,我们可以快速绘制出各个页面的布局和元素排列,从而形成了应用的整体框架。

接着,我们利用Axure的交互功能,对各个页面之间的跳转和用户操作进行了设计。

通过设置链接和交互事件,我们可以模拟用户在应用中的各种操作行为,比如点击按钮、滑动页面、填写表单等。

这样一来,我们就可以清晰地呈现应用的交互流程和用户操作路径,为开发工作提供了详细的参考。

最后,我们将设计好的原型导出为HTML文件,并进行了用户测试和产品迭代。

通过与用户的交互测试,我们发现了一些潜在的问题和改进点,并及时对原型进行了调整和优化。

这些反馈和改进不仅提高了产品的用户体验,也为开发团队提供了更清晰的需求和指导。

总结:通过这个案例,我们可以看到Axure在产品设计中的重要作用。

它不仅可以帮助设计师快速构建原型,还可以帮助团队更好地沟通和协作,提高产品设计和开发的效率。

《Axure RP原型设计》课程标准

《Axure RP原型设计》课程标准课程名称:Axure RP原型设计学分:4计划学时:72适用专业:计算机应用技术1.前言1.1课程性质本课程是计算机应用技术专业的一门专业拓展课,其功能在于向学生介绍使用Axure RP创建快速原型的方法,培养学生轻松创建应用软件或Web网站的线框图、流程图、原型和规格说明文档的能力。

通过本课程的学习,使学生熟悉Axure RP的工作环境,重点掌握线框图和流程图的创建方法,简单链接和高级交互,多人协助和版本管理等技术,从而能够进行高效的原型设计,为将来从事APP软件开发、用户体验设计、交互设计、界面设计等相关工作奠定基础。

本课程的先修课程为C语言程序设计,后续课程为移动WEB开发(HTML5+CSS3)。

1.2设计思路本课程是以高职计算机类移动开发方向学生的就业为导向,在行业专家的指导下,对移动开发过程中所涉及的岗位进行职业能力分析,以实际工作中移动WEB开发前期原型设计任务为引领,以原型设计过程中涉及的专业知识与技能为课程主线,通过项目组织教学,倡导学生在项目活动中学会动态原型设计的基本技能。

在教学内容的选择上,贯彻“技能培养为主,知识够用为度”的教学思想,以学生为主体,注重学生实际操作能力与应用能力的培养。

根据原型设计的工作流程,按项目构筑课程教学内容,通过项目引领和任务驱动,并配以案例分析进行教学,着重培养学生的实践应用技能。

建议本课程课时为72学时,计算机类三年制安排在第5学期,计算机类五年一贯制安排在第9学期。

2.课程目标2.1总体目标通过本课程的学习,要求学生充分认识到原型制作的重要性,掌握快速创建动态原型的方法,掌握简单链接和高级交互的实现方法,并学会如何进行多人协同设计和对版本进行管理控制。

教学过程中利用以任务做驱动,对项目和案例进行分析和实现,在此过程中逐渐学会快速创建动态原型,不仅可以让团队成员一起体验自己的设计,而且可以向用户演示和交流以确认用户需求,并为下一步学习移动WEB 开发等课程奠定基础。

axure原型设计流程

axure原型设计流程Axure是一种强大的原型设计工具,它被广泛应用于用户体验设计和界面设计领域。

Axure原型设计流程通常包括以下几个主要步骤:1. 确定需求,在进行Axure原型设计之前,首先需要明确产品的需求和目标。

这包括确定产品的功能、用户群体、使用场景等。

通过与产品经理、设计师和开发人员的沟通,明确需求是非常重要的一步。

2. 收集素材,在进行原型设计之前,需要收集相关的素材,包括UI设计稿、交互设计稿、产品需求文档等。

这些素材将成为原型设计的基础,有助于更好地理解和呈现产品的设计思路。

3. 创建草图,在开始使用Axure进行原型设计之前,可以先进行手绘或简单的草图设计,将自己的想法快速呈现出来。

这有助于在后续的Axure设计中更快地找到方向。

4. Axure设计,在收集了足够的素材和明确了需求后,可以开始使用Axure进行原型设计。

在这个阶段,需要根据产品需求和设计稿,利用Axure的各种功能进行界面设计、交互设计、页面链接等操作。

5. 用户测试,设计完成后,需要进行用户测试。

将Axure原型展示给目标用户群体,收集他们的反馈意见,了解用户对产品的使用体验和界面设计的感受,以便对原型进行优化和改进。

6. 优化修改,根据用户测试的结果,对原型进行优化修改。

这包括调整界面设计、改进交互体验、修复bug等。

通过不断的优化修改,使原型更加贴近产品需求和用户期望。

7. 输出文档,最后,完成优化后的Axure原型设计,并输出相关的文档和交付物。

这些文档可以包括原型演示视频、交互设计说明、界面设计规范等,以便后续的开发和交付工作。

总的来说,Axure原型设计流程是一个不断迭代、不断优化的过程,需要设计师、产品经理和开发人员之间的密切合作,以确保最终的原型设计能够满足产品需求和用户期望。

这样的流程能够有效地提高产品设计的质量和用户体验,为产品的后续开发和上线奠定良好的基础。

axure基本用法

axure基本用法===========一、Axure简介-------Axure是一款非常受欢迎的快速原型设计工具,它可以帮助用户快速创建高保真度的产品原型,同时也可以用于产品设计和开发。

通过Axure,你可以创建动态、交互式的原型,并模拟各种用户行为和场景。

--------### 1. 创建项目首先,打开Axure软件,创建一个新的项目。

在创建项目时,你需要选择一个合适的名称和保存位置。

### 2. 添加页面在Axure中,你需要通过添加页面来构建原型的基础结构。

你可以通过菜单栏中的“页面”选项来添加新的页面。

在页面编辑器中,你可以设置页面的标题、背景色、导航栏等。

### 3. 添加元素在每个页面中,你可以添加各种元素,如按钮、文本框、图像、列表等。

你可以通过工具栏中的相应工具来选择和放置元素。

同时,你也可以通过属性面板来编辑元素的属性,如大小、位置、颜色、字体等。

### 4. 交互设计Axure的强大之处在于它的交互设计功能。

你可以通过设置元素的交互事件,如点击、悬停、按下、松开等,来模拟各种用户行为。

同时,你还可以设置元素的动态效果,如淡入淡出、滑动、缩放等。

### 5. 预览原型完成原型的设计后,你可以通过菜单栏中的“预览”选项来查看原型。

在预览模式下,你可以测试各种用户行为和交互效果,并随时调整原型的设计。

### 6. 导出原型最后,你可以将原型导出为多种格式,如HTML、PNG、PDF等,以便在各种设备和平台上进行测试和展示。

--------### 1. 动态面板和交互效果Axure提供了许多高级的交互效果和动态面板,如滑动门、时间轴、条件逻辑等。

这些功能可以帮助你创建更加复杂和精细的交互设计。

### 2. 页面串联和跳转在Axure中,你可以将多个页面串联起来,形成一个完整的使用流程。

同时,你也可以设置页面的跳转和返回机制,以实现更加灵活的用户体验。

### 3. 变量和函数Axure支持使用变量和函数来增强你的设计逻辑和可复用性。

axure的用法

axure的用法Axure是一种快速原型设计工具,用于创建用户界面和交互设计的模型。

Axure具有以下用法:1. 设计原型:使用Axure可以快速创建具有交互功能的原型设计。

用户可以添加页面、部件、交互元素、状态和动画效果,以实现更贴近最终产品的界面设计。

2. 界面设计:Axure提供了多种预设的界面部件和模板,使用户可以轻松设计出符合用户体验和品牌要求的用户界面。

3. 交互设计:Axure允许用户定义不同页面元素之间的交互。

用户可以为按钮、链接、表单等添加交互动作,如点击、滚动、弹出菜单等,以模拟用户在实际使用中的交互体验。

4. 团队协作:Axure支持多人协作,团队成员可以同时编辑同一个原型设计,进行实时协作,并通过评论和批注功能进行沟通和反馈。

5. 导出产物:在设计完成后,Axure可以导出多种格式的产物,如HTML、PDF、PNG、Word等,以便与团队成员、客户或开发人员共享和交流。

总之,Axure是一款强大的原型设计工具,它提供了丰富的功能和工具,帮助用户快速创建高质量的用户界面和交互设计。

当进一步使用Axure时,你可以尝试以下用法:6. 模拟互动流程:Axure允许设计师创建用户可以点击和浏览的互动流程。

你可以创建不同页面之间的过渡效果、链接和导航,模拟用户在应用程序或网站中的导航和流程。

7. 数据驱动设计:Axure允许你使用变量和条件逻辑来创建数据驱动的原型。

你可以为表单字段定义规则,验证输入数据并显示不同的结果,模拟实际应用程序中的数据处理和反馈。

8. 设计系统组件:Axure允许你创建可重复使用的设计组件,以便在整个项目中保持一致性。

你可以创建自定义部件库,包含按钮、表单、导航和其他常用元素,以便团队成员可以重复使用和快速创建界面。

9. 用户测试原型:Axure提供了一些功能,如注释、用户反馈和用户浏览记录,帮助你进行用户测试和获取用户反馈。

你可以将原型分享给用户,让他们完成指定任务并记录他们的反馈,以便进一步改进设计。

  1. 1、下载文档前请自行甄别文档内容的完整性,平台不提供额外的编辑、内容补充、找答案等附加服务。
  2. 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
  3. 3、如文档侵犯您的权益,请联系客服反馈,我们会尽快为您处理(人工客服工作时间:9:00-18:30)。

物件註解(Annotation) 窗格: 您可以为Widget加上註解来指定功能,您可 以在这个窗格中增加和自订Widget的註解。
网页说明及互动(Pages Notes & Interactions)窗格:您可以在这个窗格中 加入网页层级的说明与互动效果到设计中。
示意图及註解
1. 2. 3. 4. 5. 定义Sitemap 以介面物件(Widgets)绘製示意图(Wireframe) 撰写物件註解(Annotation ) 撰写网页说明(Page Notes ) 秘技(Quick Tips)
编辑物件(Widget)的样式与属性 编辑Widget的样式与属性有下列3种方式: a. 连续按滑鼠左键两下: 在Widget上连续按滑鼠左键两下可以让您变更一些基本的 Widget属性,例如:在Image Widget上连续按滑鼠左键两下可 以让您汇入影像;在Droplist或List Box Widget上连续按滑 鼠左键两下可以让您编辑选单项目。 b. 工具列: 使用工具列可编辑Widget 的样式,例如:外框色彩、填满色 彩、字型和字体大小。
1. 交互(Interaction)
Interactions窗格是用来定义Widget在Wireframe中的交互表现方式,交互表现的方式包含简单的连结到Rich Internet Application (RIA)的复杂行为,而且这些交互表现都可以在Prototype中执行。 Axure Annotation Pane
1.定义Sitemap
企划一个网站或Web AP,在动手开始绘製网站页面的示意图(Wireframe)或 流程图之前,您应该事先思考网站架构,并决定资讯内容与层级。当您计的网站页面。
Sitemap窗格是用来管理设计中网页的工具,您可以在Sitemap 窗格中可以 新增、删除和调整网页层级。
以下是 Axure RP 5.0版所提供的动作型态 (Action): 1.Open link in Current Window 开启网页 2.Open link in Popup Window 开启网页在Popup窗口 3.Open link in Parent Window 开启网页在Parent窗口 4.Close Current Window 关闭目前窗口 5.Open link in Frame 开启网页在inline frame中 6.Set Panel state(s) to State(s) 指定某个Dynamic Panel的显示状态 7.Show Panel(s) 显示Dynamic Panel 8. Hide Panel(s) 隐藏Dynamic Panel 9. Toggle Visibitdty for Panel(s) 切换Dynamic Panel显示或隐藏 10.Move Panel(s) 移动Dynamic Panel 11. Set Variable and Widget value(s) equal to Value(s) 设定变量或Widget 的值 12.Open link in Parent Frame 开启网页在上层内嵌框架中 13.Scroll to Image Map Region 卷动画面到Image Map的位置 14.Enable Widget(s) 把Widgets变成可用状态 15.Disable Widget(s) 把Widgets变成变成不可用状态 16.Wait Time(s) 动作之前先等候(毫秒) 17.Other 以文字说明来描述实际动作
2. 定义基本连结 下列步骤说明如何新增一个基本连结到Button Widget。
加入基本连结最快的方法就是按一下Interactions窗格中的「Quick Link」,弹出Sitemap窗格的网页清单 后,你可以为选定的对象(Widget)指定连结到哪一个网页。
如果不是透过Quick Link的话,那么请按照下列步骤(对照下图) 进行交互的设定。
Axure快速原型设计
程娜2009年1月24
一.认识AxureRP 二.AxureRP基本操作 三.架构图&流程图 四.互动设计 五.公司范例
一.认识Axure RP
1. 什么是Axure RP 2. Axure RP可以帮助哪些人 3. 如何学习Axure RP的操作
1.什么是Axure RP
步骤一:指定对象 于画布中放置一个Button Widget并选取它。 步骤二:新增假设条件(Add Case) 在 Interactions窗格中选择OnClick ,并点选「Add Case」 (或在OnClick上连续按鼠标左键两下)以增加 一个假设条件(Case)到按钮的OnClick触发事件,这时会出现「Interaction Case Properties」对话窗, 您可以在此处选择想要执行的动作。
主选单/工具列: 在主选单与工具列中,可以执行常用的动作指令,例如: 开啟与储存档案、输出Prototype或Spec文件。 Sitemap 窗格: Sitemap窗格将您所设计的网页以树状结构的方式呈现, 您可以在这裡新增、移除、重新命名和组织设计的网页。 Widgets窗格: 包含一系列常用的使用者介面物件,例如:按钮、影像、 Text Panel与矩形,您可以直接透过拖拉的方式来设计网页。 Masters窗格:在这裡您可以新增、移除、重新命名和组织设计好的 Master。Master是一种可以容纳多项界面元素的集合样板(Temlate),您 可以将常用的共用区块设计成Master,未来在设计Wireframe时重复使用 Master,来提高规划的效率。
Wireframe窗格: 您可以在这个窗格中设计网页资讯元素,编排内容,设计 介面,设计互动特性等等。未来可以将这些设计好的页面,输出成Prototype 或Spec文件。 互动设计 (Interaction) 窗格:互动的范围很广,从最基本的超连结、popups,一直到动态显示和隐藏widget。您可以在这个窗格中定义Widget的互动。
在 Sitemap中的任一网页上连续按滑鼠左键两下,网页会在Wireframe 窗 格中开啟。
2. 以介面物件(Widgets)绘制示意图(Wireframe)
介面物件(Widget)是用来设计Wireframe的使用者介面元素, 您可以在Widgets 窗格中找到一些常用的Wireframe Widget,例如:Button、Image和 Text Panel。 Axure RP 各种Widgets呈现效果,请参考Widgets效果总览
大多数的对象,只具备最常见的三种触发事件(Event) - OnClick、OnMouseEnter 与OnMouseOut。 某些特定的Widget的可触发事件有些不同: * * * * * Button对象只有OnClick。 Radio Button,CheckBox 这2种对象则具有OnFocus / OnLostFocus 触发事件。 Text Field,Text Area这2种对象则具备 OnKeyUp / OnFocus / OnLostFocus 触发事件。 Droplist,List Box这2种对象则具备 OnChange / OnFocus / OnLostFocus 触发事件。 网页加载浏览器时,则有 OnPageLoad触发事件。
步骤三:选择动作型态(Select Action) 在Interaction Case Properties对话窗的Step 2. Select Actions,勾选「Open Link in Current Window 」这个动作型态。 步骤四:编辑实际动作(Edit Action Description) 按一下Interaction Case Properties对话窗的下方,step 3 的”Link” ,并选择实际执行动作时要 开启的网页。
c. 快显功能表(Context Menu):
在Widget上按下滑鼠右键会出现快显功能表,您可以透过功能 表中的选项来设定Widget的特殊属性,这些选项也会因Widget 的类型而有所不同。
初级交互设计
1. 交互(Interaction) 2. 定义基本连结 3. 动作型态(Action)及实际动作(Action Description) 4. 多重条件(Multiple Cases ) 5. 网页层级的交互: OnPageLoad 6. 秘技(Quick Tips)
axure快速原型设计就能帮助大家,快速的出一份原型。让您和别人的沟通变得更 加轻松。
3.如何学习Axure RP的操作
如果您本身已经会使用PowerPoint或者Visio,您可以很快学会AxureRP的 操作。 学习AxureRP的最好方式就是下载安装,直接去体验,任意的玩一玩各种功 能,然后试著按下[F5]输出成Prototype。 或者您也可以下载我们提供的AxureRP范例,打开这些范例的RP档(AxureRP 专属的Project File),然后试著按下[F5]输出成Prototype。
3. 动作型态(Action)及实际动作(Action Description) 除了基本连结之外,Axure RP还提供了许多的动作型态, 这些动作都可以在任何触发事件的假设条件中被执行。 你可以同时指定一种/多种动作型态(Action)之后,接着定 义实际动作(Action Description),这样子才能完成展现在 Prototype上的一个/多个实际动作。
Axure RP是一个快速绘制线框图和原型的工具。
2.Axure RP可以帮助哪些人
产品经理是否碰到了当自己收集了客户意见后出了一份word文档,交给客户看,结果 可能因为一份文档要花比较多的时间去看,客户可能没有时间和精力去认真去看去 理解,所以和客户沟通起来会比较困难。
项目经理和开发人员,设计大家交流项目工作的时候。也只是一份文档,或者简单 的用excel visio 画的图,这样的图并不能够准确的表达一些页面上的元素。比如 说,哪个地方是个下拉框。哪个地方是个输入框,或者对输入框有什么限制等情况。 都没有办法在那些图上能够准备的表达出来。所以项目组成员之间的沟通也得多一 些时间。
相关文档
最新文档