Axure RP工具简单使用
- 格式:docx
- 大小:1.31 MB
- 文档页数:9
AXURE_RP教程带案例Axure RP 是一款功能强大的原型设计工具,它可以帮助用户快速制作交互式的原型。
下面将为你介绍 Axure RP 的基本功能,并提供一个案例来帮助你更好地理解和应用。
Axure RP 的主要功能包括页面设计、组件库、交互设计和团队协作等。
通过这些功能,用户可以快速创建可交互和可视化的原型,并与团队成员共享和反馈。
其次,交互设计是 Axure RP 的另一个重要功能。
用户可以通过添加链接、动态面板和条件语句等方式来定义页面的交互行为。
例如,用户可以将按钮添加链接,点击按钮时跳转到指定页面;用户还可以通过动态面板实现页面元素的显示与隐藏效果;用户还可以通过条件语句来控制交互流程,例如根据用户的输入内容显示不同的提示信息等。
最后,Axure RP 还提供了团队协作功能,用户可以将原型文件上传到 Axure Cloud,与团队成员共享并进行在线协作。
在 Axure Cloud 中,用户可以添加评论和标记,方便团队成员进行反馈和修改。
此外,Axure RP 还支持版本控制和权限管理等功能,确保团队成员之间的工作流程和安全性。
下面将以一个在线购物平台的案例来演示如何使用 Axure RP 进行原型设计。
1.首先,可以创建一个包含主页、商品列表和购物车页面的原型文件。
2.在主页中,可以添加一个栏和商品分类选项,用户可以输入关键字或选择分类来商品。
3.在商品列表页面中,可以显示多个商品的信息,例如商品名称、价格和图片等,用户可以点击商品进入商品详情页面。
4.在商品详情页面中,可以显示商品的详细信息,例如商品描述、参数和评论等,用户可以选择购买数量并加入购物车。
5.在购物车页面中,可以显示用户选择的商品和总价等信息,用户可以进行结算并填写收货地址等信息。
通过以上步骤,可以使用 Axure RP 创建一个简单的在线购物平台原型。
在设计过程中,可以根据实际需求和反馈进行不断调整和优化。
总结来说,Axure RP 是一款功能强大的原型设计工具,它可以帮助用户快速制作交互式的原型。
axure slice用法
在Axure RP 中,"slice" 是用于将设计切片并导出为图像文件的功能。
以下是使用Axure RP 中的切片的基本步骤:
1. 打开Axure RP,并打开您的设计文件。
2. 选择您要切片的元素。
您可以选择整个页面,也可以选择单个元素。
3. 在Axure RP 的右侧工具栏中,找到并点击"切片" 工具。
4. 您将看到一条顶部工具栏上出现了一个"切片" 工具栏。
在这个工具栏上,您可以选择不同的切片选项,例如选择切片类型(自动或手动)、切片命名、切片大小等。
5. 根据您的需求进行切片设置。
您可以手动调整切片的大小和位置,或者使用自动切片工具根据页面布局自动创建切片。
6. 完成切片设置后,点击工具栏上的"导出切片" 按钮。
7. 在弹出的对话框中,选择您要导出切片的文件类型(如
PNG、JPEG 等)、导出文件的路径和文件名。
8. 点击"导出" 按钮,Axure RP 将根据您的设置导出切片。
这样,您就可以将设计中的元素切片并导出为图像文件,以便在其他应用程序中使用。
axure tdesign 使用方法《AxureRP设计使用方法》AxureRP是一款强大的原型设计工具,广泛应用于产品交互设计领域。
本文将详细介绍AxureRP的基本使用方法,帮助您快速上手并发挥其潜力。
一、AxureRP概述AxureRP是一款交互式原型设计工具,可帮助设计师在纸上或铅笔头上绘图的同时,快速创建具有高保真度的产品原型。
它支持多人协作,允许团队成员在同一平台上进行沟通和修改,是团队协作的理想选择。
二、安装与启动安装AxureRP需要一些时间和耐心,但是一旦完成,你将拥有一个易于使用的界面和一个庞大的元件库,以帮助你更快地创建原型。
启动AxureRP后,你将看到一个简洁而直观的用户界面。
三、创建项目在AxureRP中创建项目非常简单。
只需点击“新建项目”按钮,选择合适的项目模板,并输入项目名称即可。
接下来,你可以开始创建你的原型界面。
四、创建界面元素AxureRP提供了丰富的界面元素供你选择和使用。
你可以通过拖放的方式将元素放置在画布上,并调整它们的大小和位置。
为了使原型更加真实,你可以使用不同的颜色、字体和背景来装饰你的界面。
五、交互设计AxureRP的一大优势在于其强大的交互设计功能。
你可以使用各种交互动作,如点击、滑动、悬停等,来创建动态的交互效果。
此外,AxureRP还支持添加事件监听器,以便在用户与界面元素交互时触发特定的动作或函数。
六、元件库与自定义元件AxureRP的元件库包含了大量的预定义元件,这些元件可以帮助你更快地创建原型。
然而,有时你可能需要创建自己的自定义元件,以适应特定的设计需求。
通过使用AxureRP的元件编辑器,你可以创建自己的自定义元件,并将其保存到元件库中供以后使用。
七、原型测试与反馈完成原型设计后,你需要进行测试以确保其功能正常并满足用户需求。
AxureRP提供了便捷的原型测试功能,你可以邀请团队成员或利益相关者参与测试,并提供反馈和建议。
根据反馈进行修改和完善,以确保最终的原型能够满足用户需求。
Axure RP 工具及使用摘 要:随着软件需求的日益增大,软件工程师的工作量也越来越多,因此需要一些工具来帮助软件工程师,从而提高编程的效率。
这时候,Axure RP 这款工具可以发挥很大的作用。
Axure RP 是一个专业的原型设计工具,可以帮助工程师设计界面、流程图和规格说明文档,从而可以更好地创建应用软件和Web 网站。
本文通过设计一个注册用户页面的Web 应用来对Axure 这个工具进行入门级别的说明,包括工具的界面接收和每部分工具的简单用法。
通过本文的实验,可以很好的了解到Axure 这个原型设计工具的方便快捷,从而使得工程师的工作效率可以得到很大的提升。
关键词:Axure ,原型分析工具,入门用法,1.Axurp 工具简介Axure RP 是美国Axure Software Solution 公司旗舰产品,是一个专业的快速原型设计工具,Axure 代表美国Axure 公司,RP 则是Rapid Prototyping (快速原型)的缩写。
该工具让负责定义需求和规格、设计功能和界面的专家能够快速创建应用软件或Web 网站的线框图、流程图、原型和规格说明文档。
作为专业的原型设计工具,它能快速、高效的创建原型,同时支持多人协作设计和版本控制管理。
Axure RP 已被一些大公司采用。
Axure RP 的使用者主要包括商业分析师、信息架构师、可用性专家、产品经理、IT 咨询师、用户体验设计师、交互设计师、界面设计师等,另外,架构师、程序开发工程师也在使用Axure 。
2.Axure 工具的界面说明首先是对Axure 整个界面的简单说明,如图1所示。
图1 Axure 界面说明图①菜单栏。
所有应用程序都有的内容。
文件菜单主要包含新建、保存、另存为等内容。
编辑菜单主要有撤销、重做、复制、粘帖等功能。
视图菜单主要控制界面工具栏的出现和隐藏。
项目菜单主要为全局性系统设置菜单。
布局菜单主要负责页面中对象的对齐,分组,转换等功能。
axure rp9 的操作手册
摘要:
1.Axure RP9 简介
2.Axure RP9 的功能特点
3.Axure RP9 的操作方法
4.Axure RP9 的应用场景
5.Axure RP9 的优点与不足
正文:
Axure RP9 是一款专业的原型设计工具,可以帮助设计师快速制作出高质量的产品原型。
它具有丰富的组件库和强大的交互功能,让设计师可以自由地设计出各种复杂的交互效果。
Axure RP9 的功能特点主要表现在以下几个方面:首先,它具有丰富的组件库,包含各种常见的界面元素和控件,设计师可以根据需求选择使用。
其次,它具有强大的交互功能,可以实现各种复杂的交互效果,如动态面板、条件逻辑、循环等。
再次,它支持团队协作,可以多人同时进行设计,提高工作效率。
Axure RP9 的操作方法相对简单,设计师只需要拖拽组件到画布上,然后通过设置组件的属性和交互来完成设计。
对于初学者来说,Axure RP9 提供了丰富的教程和文档,可以帮助他们快速上手。
Axure RP9 的应用场景非常广泛,主要应用于产品原型设计、交互设计、用户体验设计等领域。
无论是网站、APP 还是其他数字产品,都可以使用
Axure RP9 进行原型设计。
Axure RP9 虽然功能强大,但也存在一些不足。
首先,它的学习曲线较陡,对于初学者来说需要一定的时间来掌握。
其次,它的使用成本较高,需要付费购买,虽然它提供了7 天的免费试用期。
Axure动态面板的使用流程动态面板的概述动态面板是Axure RP中的一个重要功能,它可以模拟Web应用程序或移动应用程序的交互过程。
通过使用动态面板,用户可以创建一个交互式的原型,以便更好地展示和验证设计想法。
本文将介绍使用Axure动态面板的基本流程。
创建动态面板使用Axure RP创建动态面板非常简单。
以下是创建动态面板的步骤:1.打开Axure RP软件。
2.创建一个新的项目或打开一个现有的项目。
3.在页面中选择一个元素,例如一个按钮或文本框。
4.右键单击选择的元素,然后选择“转换为动态面板”选项。
5.在动态面板编辑器中,可以自由调整和修改元素的位置、样式和交互行为。
动态面板的使用一旦创建了动态面板,我们可以使用以下方法来使用它:1.添加交互事件:在动态面板编辑器中,选择一个元素,然后添加交互事件,例如点击事件、悬停事件等。
通过添加交互事件,我们可以模拟用户与原型的交互行为。
2.切换状态:在动态面板编辑器中,可以为元素创建不同的状态。
例如,可以创建一个按钮的正常状态和悬停状态,然后在交互事件中切换按钮的状态,以模拟按钮被点击或鼠标悬停的效果。
3.创建过渡效果:动态面板还支持过渡效果,可以在状态之间创建平滑的过渡动画。
例如,可以在按钮状态之间添加淡入淡出或滑动效果,以增强原型的交互性。
4.添加条件逻辑:使用动态面板,可以添加条件逻辑来控制页面上不同元素的显示和隐藏。
例如,可以创建一个菜单栏,然后根据用户的点击行为来显示不同的下拉菜单。
5.导出和共享:一旦完成动态面板的设计,可以将其导出为HTML文件或生成URL链接分享给团队成员或用户进行查看和体验。
动态面板的优势使用Axure动态面板有以下几个优势:•交互性:通过使用动态面板,可以模拟真实应用程序的交互过程,帮助用户更好地理解和验证设计想法。
•可视化:动态面板编辑器提供了一个直观的界面,用户可以直接在编辑器中设计和调整页面交互。
•快速迭代:使用动态面板可以快速创建和修改设计原型,减少了传统开发阶段的时间和成本。
axure rp9 的操作手册摘要:一、引言二、Axure RP 9的特点三、Axure RP 9安装与界面介绍四、Axure RP 9基本操作1.创建项目2.添加页面3.设计页面元素4.设置页面交互5.添加附件五、Axure RP 9高级功能1.团队协作2.项目设置与优化3.生成原型六、Axure RP 9常见问题及解决方法七、总结正文:一、引言Axure RP 9是一款强大的原型设计工具,广泛应用于网页、移动应用等各种交互设计领域。
本文将详细介绍Axure RP 9的操作手册,帮助大家更好地掌握这款软件。
二、Axure RP 9的特点Axure RP 9具有以下特点:丰富的组件库、强大的交互功能、高度的自定义性、支持多种输出格式等。
三、Axure RP 9安装与界面介绍1.安装:根据官方提供的安装教程进行安装。
2.界面介绍:Axure RP 9界面主要包括菜单栏、工具栏、组件面板、属性面板、页面面板等。
四、Axure RP 9基本操作1.创建项目:点击“文件”>“新建”,选择项目类型,输入项目名称和保存路径,即可创建一个新项目。
2.添加页面:在页面面板中,点击“新建页面”,可以为项目添加新的页面。
3.设计页面元素:从组件面板中选择需要的元素,拖拽到页面上进行设计。
4.设置页面交互:选中页面元素,在属性面板中设置交互事件,如单击、双击、悬停等。
5.添加附件:在页面元素上右键单击,选择“添加附件”,可以为页面元素添加图片、文档等附件。
五、Axure RP 9高级功能1.团队协作:通过“文件”>“项目设置”>“协作”,设置团队成员及权限。
2.项目设置与优化:在“文件”>“项目设置”中,可以对项目进行优化,如压缩图片、合并重复元素等。
3.生成原型:点击“工具”>“生成原型”,选择输出格式,如HTML、PDF等,即可生成原型。
六、Axure RP 9常见问题及解决方法1.缺少组件:检查组件面板中是否缺少需要的组件,如有,请安装相应的插件。
axure 常用功能的使用手册(最新版)目录1.Axure 常用功能的使用手册概述2.Axure 的页面布局功能3.Axure 的交互功能4.Axure 的动态面板功能5.Axure 的样式和主题功能6.Axure 的团队协作和版本控制功能7.Axure 的常用插件介绍正文Axure 常用功能的使用手册概述Axure RP 是一款专业的原型设计工具,广泛应用于网站、APP、软件等产品的原型设计中。
本文将为您介绍 Axure 的常用功能,帮助您更高效地进行原型设计。
一、Axure 的页面布局功能1.页面布局:通过页面布局功能,可以方便地对页面的结构进行调整,包括拖拽式布局、列布局、网格布局等。
2.页面组件:Axure 提供了丰富的预设组件,如按钮、文本框、图片等,方便设计师快速搭建页面原型。
3.页面样式:可以对页面进行样式设置,如修改背景色、字体、大小等,让原型更具视觉表现力。
二、Axure 的交互功能1.交互事件:通过设置交互事件,可以实现页面元素的动态交互,如点击、悬停、滚动等。
2.交互动作:在交互事件中添加交互动作,可以实现页面元素的动态效果,如跳转页面、显示隐藏元素、弹出提示框等。
3.条件逻辑:通过条件逻辑,可以实现复杂的交互逻辑,如判断条件、循环执行等。
三、Axure 的动态面板功能1.动态面板:通过创建动态面板,可以实现页面元素的动态切换、展开和收缩等效果。
2.面板状态:可以设置面板的状态,如默认状态、鼠标悬停状态、点击状态等。
3.面板交互:可以为动态面板设置交互事件和动作,实现更丰富的交互效果。
四、Axure 的样式和主题功能1.样式管理:可以统一管理页面元素的样式,方便设计师进行样式调整和复用。
2.主题设置:可以设置主题,包括颜色、字体等,让原型具有统一的视觉效果。
五、Axure 的团队协作和版本控制功能1.团队协作:支持多人实时协作,提高工作效率。
2.版本控制:可以查看原型的历史版本,方便恢复和追溯设计变更。
AXURE_RP入门教程Axure RP是一款功能强大的原型设计工具,用于创建高保真的交互原型和线框图。
本文将为您提供一个简单而实用的Axure RP入门教程,帮助您快速上手并了解该工具的常用功能。
二、界面介绍Axure RP的界面分为三个主要区域:工具箱、主界面和交互区域。
1.工具箱:位于左侧,包含常用的元素和工具,如按钮、文本框、图片等。
2.主界面:位于中央,是您进行设计的主要区域。
3.交互区域:位于右侧,包含页面、交互和属性等选项,用于设置页面属性和添加交互效果。
三、创建一个简单的原型1.创建页面:在交互区域点击“页面”选项卡,然后单击“新建页面”按钮。
设置页面名称、尺寸和背景颜色,并单击“确定”按钮,即可创建一个空白页面。
2.添加元素:在工具箱中选择适当的元素,如按钮、文本框或图片,并将其拖动到主界面中。
您可以调整元素的大小和位置,以适应设计需求。
4.设置交互效果:在交互区域中点击“交互”选项卡,并选择适当的交互动作。
例如,您可以选择“点击”交互动作,将一个按钮与另一个页面链接起来。
还可以在交互区域中设置其他交互效果,如弹出框、滚动条等。
四、预览和分享原型1.预览原型:在工具栏中点击“预览”按钮,即可预览整个原型的交互效果。
您可以在预览模式下测试按钮、链接和其他交互效果的可用性和一致性。
五、其他常用功能和技巧1.组合和对齐:您可以选择多个元素并使用工具箱中的对齐工具对其进行组合和对齐。
2.动态面板:动态面板是一种可以滚动和切换内容的容器,可以在交互区域中找到并添加到主界面中。
3. 主题和样式:Axure RP提供了各种预设的主题和样式,可以通过右键单击元素并选择“样式”选项来应用它们。
4.注释和讨论:在工具栏中点击“注释”按钮,在主界面中添加注释和讨论内容,可以方便与团队成员进行沟通和交流。
六、学习资源和进阶技巧除了本教程的基础内容外,您还可以参考Axure RP官方网站提供的详细文档和视频教程,深入了解该工具的高级功能和技巧。
Axure RP Pro 7.0操作手册2015目录目录 (1)第1章编写目的 (2)第2章Axure RP Pro 7.0安装 (2)第3章AxureRP-Pro 7.0操作 (6)3.1. 认识AxureRP-Pro7.0操作界面 (6)3.2. AxureRP-Pro DEMO制作过程 (9)第4章生成演示文档 (11)第5章Q&A ............................................... 错误!未定义书签。
第1章编写目的无第2章Axure RP Pro 7.0安装●运行AxureRP-Pro-Setup7.0.exe安装文件。
●点击,勾上。
●选择安装路径。
C:\Program Files\Axure\Axure RP Pro 7.0,点击,●点击。
●点击。
●点击。
安装完成。
第3章AxureRP-Pro 7.0操作运行AxureRP3.1. 认识AxureRP-Pro7.0操作界面1下图是Axure RP 环境与介面中各区块的简单描述主选单/工具列:在主选单与工具列中,可以执行常用的动作指令,例如:开启与储存档案、输出Prototype或Spec文件。
Sitemap 窗格: Sitemap窗格将您所设计的网页以树状结构的方式呈现,您可以在这里新增、移除、重新命名和组织设计的网页。
1、增加一个子页面:为所选择的页面创建一个子页面。
2、页面上移:同等级的页面中,将所选页面的上下排列次序,上移一个位置。
3、页面下移:同等级的页面中,将所选页面的上下排列次序,下移一个位置。
4、页面降序:将所选页面等级降序,作为原等级中,排列在所选页面上方之页面的子页面。
5、页面升序:将所选页面等级升序,将所选页面的页面等级,升序为父页面的同等级页面。
6、删除页面:将所选页面删除,同时删除其子页面。
7、编辑页面:在工作区打开所选择页面,进行编辑。
选择部件库窗格:包含一系列常用的使用者介面对象,例如:按钮、影像、Text Panel与矩形,您可以直接透过拖拉的方式来设计网页。
Axure RP工具及使用摘要:随着软件需求的日益增大,软件工程师的工作量也越来越多,因此需要一些工具来帮助软件工程师,从而提高编程的效率。
这时候,Axure RP这款工具可以发挥很大的作用。
Axure RP是一个专业的原型设计工具,可以帮助工程师设计界面、流程图和规格说明文档,从而可以更好地创建应用软件和Web网站。
本文通过设计一个注册用户页面的Web应用来对Axure这个工具进行入门级别的说明,包括工具的界面接收和每部分工具的简单用法。
通过本文的实验,可以很好的了解到Axure这个原型设计工具的方便快捷,从而使得工程师的工作效率可以得到很大的提升。
关键词:Axure,原型分析工具,入门用法,1.Axurp工具简介Axure RP是美国Axure Software Solution公司旗舰产品,是一个专业的快速原型设计工具,Axure代表美国Axure公司,RP则是Rapid Prototyping(快速原型)的缩写。
该工具让负责定义需求和规格、设计功能和界面的专家能够快速创建应用软件或Web网站的线框图、流程图、原型和规格说明文档。
作为专业的原型设计工具,它能快速、高效的创建原型,同时支持多人协作设计和版本控制管理。
Axure RP已被一些大公司采用。
Axure RP的使用者主要包括商业分析师、信息架构师、可用性专家、产品经理、IT咨询师、用户体验设计师、交互设计师、界面设计师等,另外,架构师、程序开发工程师也在使用Axure。
2.Axure工具的界面说明首先是对Axure整个界面的简单说明,如图1所示。
图1Axure界面说明图①菜单栏。
所有应用程序都有的内容。
文件菜单主要包含新建、保存、另存为等内容。
编辑菜单主要有撤销、重做、复制、粘帖等功能。
视图菜单主要控制界面工具栏的出现和隐藏。
项目菜单主要为全局性系统设置菜单。
布局菜单主要负责页面中对象的对齐,分组,转换等功能。
发布菜单则可以将文件发布成html文件。
团队菜单主要是配置管理相关功能。
帮组菜单则是在线帮助、查看版权信息等内容。
②工具按钮栏。
在进行设计时会用到的工具,有部分功能在菜单栏上也能实现。
③页面地图栏。
此栏显示你设计的页面及页面之间的树状关系,页面的上下文菜单可以增加、删除页面,改名等。
④部件栏。
构成页面的元素,各种所需的控件,通过拖动到页面上需要的位置便可实现添加控件的功能。
⑤母版栏。
也可以称为模版栏。
在整个系统界面的设计中,有一些内容可能会在多个页面中重复出现,这些内容可以被组织成一个Master,Master 可以通过包组织管理。
拖动Master到页面中,master中的控件一起作为一个整体出现在页面中。
简单说Master就是为了重用。
另外修改master内容后,使用了master的页面内容也被修改(从生成原型的效果上来看)。
⑥页面工作区。
页面设计的区域,可以打开多个页面,点击页面标签,右键上下文菜单包括了打开关闭页面的操作。
双击页面地图栏的页面,工作区打开该页面。
⑦页面属性栏。
输入页面注释,设置页面的交互事件,页面属性。
⑧部件交互和注释栏。
输入部件的注释,设置各个部件的交互事件。
⑨部件属性和样式栏。
设置各个部件的属性和样式。
⑩部件管理栏。
主要管理动态面板。
动态面板包括多个状态,每个状态里边可以放置不同的内容,通过事件切换状态,使页面表现不同状态的内容。
之后会在下面的操作说明中展示。
3.Axure工具的操作说明以下内容是通过构建一个注册网址来简单说明Axure工具的使用方法。
(1)初始化首先打开Axure工具,默认是新建一个项目,一开始的站点地图构成为一个Home主页外加三个页面。
如图2。
图2新建项目如图3所示。
通过删除和重命名将站点的页面改成注册和注册结果两个页面。
图3 修改页面名字然后按Ctrl+S保存为web.rp文件。
(2)注册界面的显示设计选择Placeholder,如图4。
图4 Placeholder先将页面工作区下方的页面属性区隐藏。
然后拖动两个Placeholder到页面工作区,最后设置为隐藏。
如图5。
隐藏后Placeholder会改变成如图6中的颜色。
图5 放置Placeholder图6 PlaceHolder隐藏后然后选择Heading 1部件,拖动到页面工作区,并且改变其中的文字。
如图7、8和9。
图7 Heading 1部件图8 拖动Heading 1部件图9 改变部件文字选择Label部件,添加到页面工作区,并修改名字为“用户名”。
如图10和11。
图10 Label 部件图11 添加Label 部件选择Text Field 部件,并且添加到页面工作区当中。
如图12和13。
图12 Text Field 部件图13 添加Text Field 部件然后按照以上的方法,再添加几个用户属性,最后如图14所示。
图14然后选择Radio Button ,添加三个单选按钮,如图15和16所示。
图15 Radio Button 控件图16 添加单选按钮然后选择Button 控件,并且添加两个Button 控件的页面工作区,同时修改名称。
如图17和18。
图17Button控件图18 添加Button控件之后再前三个输入框后添加隐藏提示,如图19所示。
图19 添加隐藏提示然后通过右侧控件属性栏,通过样式修改,改变隐藏提示的字体颜色,如图20。
图20 改变字体颜色再之后,将隐藏提示设置为动态面板,并将其隐藏起来。
如图21和22。
图21 设置为动态面板图22 隐藏文字至此,注册界面的外观设计大致完成了。
(3)注册界面的交互设计注册界面外观设计完后,需要对各个部件进行交互的设计,主要是各个事件的实现。
首先,要对每个部件进行命名,以方便之后交互事件的执行。
通过软件右上方的部件交互和注释一栏,可以对部件进行命名。
如图23。
图23 部件命名单选按钮要指定按钮组,如图24。
图24 指定按钮组然后为每个输入框和单选按钮设置提交按钮,如图25。
图25 设置提交按钮然后再为输入框设置提示文字,如图26。
图26 输入框提示设置然后开始为每个输入框设置事件。
首先是输入框获取焦点时的事件。
当输入框文字为提示文字“请输入用户名”时,会将输入框清空。
先点击部件交互中的获取焦点(如图27),然后点击新增条件(如图28),然后按照图29设置条件,最后配置动作(如图30)。
图27 获取焦点图28 点击新增条件图29 设置条件图30 配置动作同理,为输入框配置失去焦点时的事件,如图31。
图31同理按照上述方式,可以为其他输入框设置相同类型的焦点获取和失去焦点的事件。
接着就是设置重置按钮,最后结果如图32。
图32 重置按钮事件再接下来就是提交按钮的事件设置。
当第一和第二个输入框与提示文字相同时,将该输入框后面的隐藏提示文字显示出来。
因为一开始将隐藏的提示文字设置为动态面板,所以需要设置的是动态面板的状态。
如图33所示。
图33显示隐藏文字最后,提交按钮的事件设置如图34所示。
图34 提交按钮事件(4)注册结果界面的外观设计如图35所示,注册结果界面主要为四组注册信息。
注册成功后会跳转到这一页面,Label1-Label4是暂时替代信息的,接下来会定义页面交互事件,使得注册页面的信息能够传递到注册结果页面中。
图35 注册结果界面设计(5)页面交互事件设计首先,在注册页面的提交按钮中增加一些事件,主要是设置变量值,使得这些变量值可以跨页面传递。
如图36。
图36 增添事件选择新增变量,如图37。
图37 新增变量新增变量名称如图38所示。
图38 新增变量名称如图39和图40所示,将一个变量设置为一个部件文字,具体部件按照变量名和部件名称一一对应。
最终结果如图41所示。
图39设置为部件文字图40 设置选择的部件图41 最终变量值设置因为单选按钮不同于文本框输入,因此要选择另外的办法。
可以在单选按钮选中的同时设置变量的值。
图42 选中状态改变时选中单选按钮,在部件交互栏中选择“选中状态改变时”,如图42。
增加条件,当这个按钮选中为真时,如图43。
然后设置变量的值。
按照这种方式设置另外两个单选按钮。
图43 按钮选中为真图44 设置变量之后回到注册结果页面,在下方的页面交互栏中,选择“页面加载时”的事件,如图45。
进入到事件设置中后,选择文本设置,然后将Label1-Label4设置为各自对应的变量值,如图46和47所示。
图45 页面加载时事件图46 设置为变量值图47设置后的事件至此,这个简单的注册页面大致上完成。
以下就是进行发布。
(6)发布为HTML文件整个页面设计好后便可将其发布,如图48和49。
之后可以在浏览器中直接打开HTML文件。
在浏览器打开的结果如图50、图51和图52所示。
其中的红色提示功能正常执行。
图48 发布成HTML 图49 发布成HTML 图50 注册页面图51 注册界面图51 注册结果页面4.总结和心得通过使用Axure来设计一个注册页面,总的来说还是挺方便的,对比单纯用html+css来设计界面,Axure在布局上有很大的优势,如果直接编辑css来控制页面的布局会很复杂,特别是程序量十分大的时候。
而上文设计的注册页面,总的工程量并不是十分大,因此直接编辑html+css也不会有太大的差别。
在进行部件或者页面交互的设计中,对于简单的交互来说,Axure是会比较方便的,但是对于比较复杂的条件交互事件时,对比JavaScript来说,我认为Axure就显得更加复杂。
总的来说,Axure作为原型设计工具,可以方便工程师设计应用,不用一行一行地敲代码,减少工作量,提升效率。
5.参考文献[1]金乌.Axure RP7网站和APP原型制作从入门到精通 [M].北京:人民邮电出版社,2015.[2]马凤娟, 宋大伟. 基于axure的web网站原型设计—以糗事百科网站为例[J]. 电脑知识与技术, 2015(30).[3](美)施瓦茨. Axure RP 6原型设计精髓[M]. 华中科技大学出版社, 2013.。