Axure学习教程
- 格式:docx
- 大小:592.67 KB
- 文档页数:27
本篇包含56种常见的基础操作,初学者应在掌握本篇内容后再进行实战案例篇的学习,以免产生学习障碍。
同时,建议具备一定基础的读者学习本篇中相对生疏的内容,并加以掌握。
本文目录基础1. 添加元件到画布基础2. 添加元件名称基础3. 设置元件位置/尺寸基础4. 设置元件默认角度基础5. 设置元件颜色与透明基础6. 设置形状或图片圆角基础7. 设置矩形仅显示部分边框基础8. 设置线段/箭头/边框样式基础9. 设置元件文字边距/行距基础10. 设置元件默认隐藏正文基础1. 添加元件到画布在左侧元件库中选择要使用的元件,按住鼠标左键不放,拖动到画布适合的位置上松开。
(图1-1)基础2. 添加元件名称文本框属性中输入元件的自定义名称,建议采用英文命名。
建议格式:PasswordInput01或Password01名称含义:序号01的密码输入框格式说明:“Password”表示主要用途;“Input”表示元件类型,一般情况下可省略,当有不同类型的同名元件需要区分或名称不能明确表达用途的时候使用;“01”表示出现多个同名元件时的编号;单词首字母大写的书写格式便于阅读。
(图1-2)基础3. 设置元件位置/尺寸元件的位置与尺寸可以通过鼠标拖拽调整,也可以在快捷功能或元件样式中进行输入调整。
(图1-3)x:指元件在画布中的x轴坐标值。
y:指元件在画布中的y轴坐标值。
w:指元件的宽度值。
h:指元件的高度值。
在输入数值调整元件尺寸时,可以在样式中设置,让元件【保持宽高比例】。
(图1-4)基础4. 设置元件默认角度方式一:选择需要改变角度的元件,按住键的同时,用鼠标拖动元件的节点到合适的角度。
(图1-5)方式二:在元件样式中进行角度的设置,元件的角度与元件文字的角度可以分开设置。
(图1-5)基础5. 设置元件颜色与透明选择要改变颜色的元件,点击快捷功能区中的背景颜色设置按钮,选取相应的颜色,或者在元件样式中进行设置。
(图1-6)基础6. 设置形状或图片圆角可以通过拖动元件左上方的圆点图标进行调整,也可以在元件样式中设置圆角半径来实现。
快速学会Axure的键盘操作与快捷方式Axure是一款功能强大的原型设计工具,它能够帮助用户快速创建交互式原型,用于展示和验证设计理念。
然而,对于初学者来说,掌握Axure的各种操作和功能可能需要一些时间。
为了提高工作效率,学习Axure的键盘操作和快捷方式是非常重要的。
本文将介绍一些常用的Axure快捷方式和键盘操作技巧,帮助读者快速上手。
1. 快捷键的设置在使用Axure之前,我们可以先设置一些自定义的快捷键,以便更好地适应自己的工作习惯。
在Axure的“首选项”中,可以找到“快捷键”选项,并对各个功能进行设置。
比如,可以将创建新页面的快捷键设置为“Ctrl + N”,这样就可以更快速地创建新页面了。
2. 基本的键盘操作在Axure中,一些基本的键盘操作可以帮助我们更高效地进行原型设计。
比如,使用“Ctrl + C”和“Ctrl + V”可以复制和粘贴元素,使用“Ctrl + Z”可以撤销上一步操作。
此外,使用“Ctrl + 左键单击”可以选中多个元素,使用“Ctrl + Shift + 左键单击”可以取消选中某个元素。
3. 元素的移动与对齐在设计原型时,经常需要对元素进行移动和对齐操作。
使用方向键可以微调元素的位置,使用“Ctrl + 方向键”可以将元素按照固定的距离进行移动。
此外,使用“Ctrl + G”可以将选中的元素进行分组,方便后续的操作。
对齐元素是原型设计中非常重要的一步,可以使用“Ctrl + L”将元素左对齐,使用“Ctrl + R”将元素右对齐,使用“Ctrl + T”将元素顶对齐,使用“Ctrl + B”将元素底对齐。
使用这些快捷方式可以快速对齐元素,提高设计效率。
4. 元件的编辑与交互在Axure中,元件是原型设计的基本单位,对元件的编辑和交互操作是非常常见的。
使用“F2”可以快速编辑选中的元件,使用“Ctrl + Enter”可以退出编辑状态。
此外,使用“Ctrl + K”可以添加超链接,使用“Ctrl + E”可以添加交互动作。
Axure使用介绍文档目录一、Axure rp 的界面 (2)二、Axure rp的线框图元件 (3)三、Axure rp的元件触发事件 (4)四、Axure rp的条件生成 (6)五、系统函数与变量 (8)六、动态面板的使用 (14)七、母版的使用 (20)八、中继器的使用 (28)一、Axure rp 的界面(界面显示各个区域可在主菜单工具栏-视图中找到)1、菜单工具栏:同大部分软件类似,可选择Axure各个功能的工具区。
2、操作界面:绘制产品的操作区,所有元件、部件可拖与此区域操作。
3、站点地图:页面文件存放区域,可增加、删除、修改、查看页面;可设置页面级别。
4、元件库(部件库):主要分为流程图和线框图;可拖动元件库里的元件到操作界面进行产品绘制;为提高效率,元件库也可自行导入已经可使用的元件。
5、母版:母版的使用主要针对于顶部导航、底部导航,多个页面中重复出现的元素,可先绘制与母版中,再拖动到需使用的页面(比起重复操作,修改扩展行也更强)。
6、页面属性:可设置当前页面的注释、交互、与样式。
7、元件交互与注释:可对操作页面中用到的元件或元件与元件之间的交互事件进行设置(如动态面板显示与隐藏、鼠标点击事件、鼠标移入移出事件等)。
8、元件属性和样式:可设置选中元件的基本样式与属性。
9、部件管理(动态面板管理):该区域可对已设置的动态面板状态进行操作,可添加、删除、进行排序,也可双击动态面板进入编辑。
二、Axure rp的线框图元件1、图片:图片元件拖入编辑时,可双击载入本地磁盘的图片,载入图片是Axure 会自动提示将大图进行优化,避免原型文件过大;载入的图片可以选择原图大小也可以保持元件大小。
2、文本:标题1、标题2、单行文本、多行文本都属于文本类型的元件,在网页中的名称为lable,主要用于文字描述、文本链接等功能3、矩形:矩形可用作背景、按钮等元件使用;双击矩形可输入文本;拖入矩形时默认是直角矩形,可通过左右拖动左上角的黄色小三角来改变圆角半径;也可通过右键选择形状来改变当前形状。
Axure学习笔记软件中有不完善的地方,要靠自己的经验来规避和克服,还算好用。
熟练了Axure,对软件设计文档的编写大有帮助,因为可以有一些界面图出来。
画界面图时多用Axure,画流程图时多用Visio,为的是熟练Axure,并且Axure画界面要简便许多,节约时间。
(四)范本复用masters和sitemap面板很相似,文档操作也一样,它们的本质区别是,sitemap里的档是最终展示页面,masters里的文件却只是一个模块,是页面的一个部分。
masters的英文直译是主人或雇主,但是我认为这里可以叫做模板,或者复用模块。
masters 的文件,是页面中重复的模块,由于在不同页面中这些模块是一样的,所以拿出来作为一个模块编辑,然后在不同页面中进行调用。
这个功能类似于网页程序开发中的程序复用,不同页面中调用同一段程序,一般把这段程序单独做成一段页面程序,然后用include命令进行调用。
master的档就相当于这段被调用的页面程序。
dreamweaver也有类似的功能,就是template,可以参照理解。
一、功能条master的功能条功能基本和sitemap一模一样,功能也基本一样。
唯一不同的是master可以创建档夹,可以通过档夹收纳不同的档,因此唯一不同的就是第一个功能按钮,功能作用是增加一个档夹。
behavior是行为的意思,这个功能是axure升级到4版本后加入的,是针对master的不同使用情况而添加的一个功能,也是要重点介绍的功能。
1、normal:普通档。
就是一般的复用档。
是默认创建的复用文件。
2、place in background:定位的复用模板,这类模板的特点是定位于页面的底层,并且锁定模板中的widgets在他原来创建的位置。
这类复用模块主要用于创建head、foot、侧边栏等明确定位的复用模块。
3、custom widgets behavior:自定义模块。
这类模块就类似于自创了一个widgets。
Axure教程axure础(1)名词解释:线框图:一般就是指产品原型,比如:把线框图尽快画出来和把原型尽快做出来是一个意思。
axure元件:也叫axu re组件或axure部件,系统自带了一部分最基础常用的,网上也有很多别人做好的,软件使用到一定阶段可以考虑自己制作元件,以便提高产品原型的制作速度。
生成原型:是指把绘制好的原型通过axur e rp生成静态的htm l页面,检查原型是否正确,同时,方便演示。
建议生成时选择用谷歌浏览器打开(第一次会有提示安装相关插件),ie会每次都有安全提示,不如谷歌浏览器方便。
(一)Axure rp的界面1-主菜单工具栏:大部分类似offic e软件,不做详细解释,鼠标移到按钮上都有对应的提示。
2-主操作界面:绘制产品原型的操作区域,所有的用到的元件都拖到该区域。
3-站点地图:所有页面文件都存放在这个位置,可以在这里增加、删除、修改、查看页面,也可以通过鼠标拖动调整页面顺序以及页面之间的关系。
4-axure元件库:或者叫ax ure组件库、axure部件库,所有软件自带的元件和加载的元件库都在这里,这里可以执行创建、加载、删除axu re元件库的操作,也可以根据需求显示全部元件或某一元件库的元件。
5-母版管理:这里可以创建、删除、像页面头部、导航栏这种出现在每一个页面的元素,可以绘制在母版里面,然后加载到需要显示的页面,这样在制作页面时就不用再重复这些操作。
6-页面属性:这里可以设置当前页面的样式,添加与该页面有关的注释,以及设置页面加载时触发的事件o npage load。
7-元件属性:这里可以设置选中元件的标签、样式,添加与该元件有关的注释,以及设置页面加载时触发的事件;A-交互事件:元件属性区域闪电样式的小图标代表交互事件;B-元件注释:交互事件左面的图标是用来添加元件注释的,在这里我们能够添加一些元件限定条件的注释,比如:文本框的话,可以添加注释指出输入字符长度不能超过20。
AXURE_RP入门教程Axure RP是一款功能强大的原型设计工具,用于创建高保真的交互原型和线框图。
本文将为您提供一个简单而实用的Axure RP入门教程,帮助您快速上手并了解该工具的常用功能。
二、界面介绍Axure RP的界面分为三个主要区域:工具箱、主界面和交互区域。
1.工具箱:位于左侧,包含常用的元素和工具,如按钮、文本框、图片等。
2.主界面:位于中央,是您进行设计的主要区域。
3.交互区域:位于右侧,包含页面、交互和属性等选项,用于设置页面属性和添加交互效果。
三、创建一个简单的原型1.创建页面:在交互区域点击“页面”选项卡,然后单击“新建页面”按钮。
设置页面名称、尺寸和背景颜色,并单击“确定”按钮,即可创建一个空白页面。
2.添加元素:在工具箱中选择适当的元素,如按钮、文本框或图片,并将其拖动到主界面中。
您可以调整元素的大小和位置,以适应设计需求。
4.设置交互效果:在交互区域中点击“交互”选项卡,并选择适当的交互动作。
例如,您可以选择“点击”交互动作,将一个按钮与另一个页面链接起来。
还可以在交互区域中设置其他交互效果,如弹出框、滚动条等。
四、预览和分享原型1.预览原型:在工具栏中点击“预览”按钮,即可预览整个原型的交互效果。
您可以在预览模式下测试按钮、链接和其他交互效果的可用性和一致性。
五、其他常用功能和技巧1.组合和对齐:您可以选择多个元素并使用工具箱中的对齐工具对其进行组合和对齐。
2.动态面板:动态面板是一种可以滚动和切换内容的容器,可以在交互区域中找到并添加到主界面中。
3. 主题和样式:Axure RP提供了各种预设的主题和样式,可以通过右键单击元素并选择“样式”选项来应用它们。
4.注释和讨论:在工具栏中点击“注释”按钮,在主界面中添加注释和讨论内容,可以方便与团队成员进行沟通和交流。
六、学习资源和进阶技巧除了本教程的基础内容外,您还可以参考Axure RP官方网站提供的详细文档和视频教程,深入了解该工具的高级功能和技巧。
Axure8.0基础教程AxureRP8实战手册目录Axure8.0基础教程(1-10)AxureRP8实战手册 (1)Axure8.0基础教程(11-20)AxureRP8基础操作 (8)Axure8.0基础教程(21-30)新手必须掌握的基础操作 (15)Axure8.0基础教程(31-40)新手必须掌握的基础操作 (22)Axure8.0基础教程(41-50)新手必须掌握的基础操作 (28)Axure8.0基础教程(51-56)新手必须掌握的基础操作 (35)Axure8.0基础教程(1-10)AxureRP8实战手册本篇包含56种常见的基础操作,初学者应在掌握本篇内容后再进行实战案例篇的学习,以免产生学习障碍。
同时,建议具备一定基础的读者学习本篇中相对生疏的内容,并加以掌握。
本文目录基础1. 添加元件到画布基础2. 添加元件名称基础3. 设置元件位置/尺寸基础4. 设置元件默认角度基础5. 设置元件颜色与透明基础6. 设置形状或图片圆角基础7. 设置矩形仅显示部分边框基础8. 设置线段/箭头/边框样式基础9. 设置元件文字边距/行距基础10. 设置元件默认隐藏正文基础1. 添加元件到画布在左侧元件库中选择要使用的元件,按住鼠标左键不放,拖动到画布适合的位置上松开。
(图1-1)基础2. 添加元件名称文本框属性中输入元件的自定义名称,建议采用英文命名。
建议格式:PasswordInput01或Password01名称含义:序号01的密码输入框格式说明:“Password”表示主要用途;“Input”表示元件类型,一般情况下可省略,当有不同类型的同名元件需要区分或名称不能明确表达用途的时候使用;“01”表示出现多个同名元件时的编号;单词首字母大写的书写格式便于阅读。
(图1-2)基础3. 设置元件位置/尺寸元件的位置与尺寸可以通过鼠标拖拽调整,也可以在快捷功能或元件样式中进行输入调整。
(图1-3)x:指元件在画布中的x轴坐标值。
axure使用教程Axure是一款功能强大的原型设计软件,它可以帮助用户快速创建具有交互功能的网站和应用程序原型。
以下是一些关于如何使用Axure的基本教程。
1. 创建新项目:- 打开Axure软件,选择“新建”来创建一个新项目。
- 在弹出的对话框中选择网页或应用程序的类型,然后点击“确定”。
2. 添加页面:- 在左侧的“页面”面板上右击,选择“添加页面”来创建新的页面。
- 在弹出的对话框中输入页面的名称,然后点击“确定”。
3. 绘制元素:- 在页面上拖动和绘制各种元素,如文本框、按钮、图像等。
- 使用“选择”工具来调整和移动元素的位置和大小。
4. 设定交互功能:- 选择一个元素,然后在右侧的“交互”面板上选择所需的交互动作,如单击、悬停等。
- 设定交互的目标页面或动作,如链接到其他页面或显示隐藏层。
5. 创建链接:- 在一个元素上右击,选择“交互”→“链接到”来创建链接。
- 在弹出的对话框中选择目标页面,然后点击“确定”。
6. 创建动态效果:- 在页面上选择一个元素,然后在右侧的“交互”面板上选择所需的动作和触发条件。
- 设定动作的具体效果和参数,如淡入、移动等。
7. 预览和测试:- 点击软件界面上的“预览”按钮来预览整个项目的交互效果。
- 在预览模式下,可以通过点击元素进行交互测试。
8. 导出和分享:- 点击软件界面上的“发布”按钮来导出项目为HTML文件。
- 将导出的HTML文件分享给其他人或在浏览器中查看原型。
以上是一个简单的Axure使用教程,希望能帮助您快速上手并了解如何设计交互原型。
请注意,本文中不能再出现与标题相同的文字。
Axure培训教程引言Axure是一款专业的产品原型设计工具,广泛应用于互联网、移动应用、软件等领域的产品设计和交互设计。
本教程旨在帮助读者了解Axure的基本功能,掌握Axure的使用技巧,从而能够独立完成产品原型的设计。
第一章:Axure简介1.1Axure概述Axure是一款由美国AxureSoftwareSolutions公司开发的产品原型设计工具,支持Windows和Mac操作系统。
Axure提供了丰富的设计元素和交互功能,可以帮助设计师快速构建产品原型,实现产品设计和交互设计的可视化。
1.2Axure的优势(1)强大的交互功能:Axure支持多种交互效果,如、弹出层、动态面板等,能够模拟真实的产品交互效果。
(2)丰富的设计元素:Axure提供了丰富的图标、按钮、图片等设计元素,方便设计师快速构建原型。
(3)团队协作:Axure支持团队协作,多个设计师可以同时编辑同一个项目,提高工作效率。
(4)兼容性:Axure的原型可以在浏览器中查看,兼容多种设备,方便设计师进行跨平台设计。
第二章:Axure基本操作2.1Axure界面介绍(1)菜单栏:包含文件、编辑、视图、项目、发布等菜单选项。
(2)工具栏:提供常用的绘图工具和操作按钮。
(3)页面面板:显示项目中的所有页面,可以在此添加、删除和重排页面。
(4)部件库:提供丰富的设计元素,如按钮、图片、文本框等。
(5)设计区域:用于绘制和编辑原型。
2.2创建项目(1)启动Axure,“新建项目”。
(2)设置项目名称、保存路径等信息,“创建”。
(3)在页面面板中添加页面,设置页面名称和大小。
2.3添加设计元素(1)从部件库中拖拽设计元素到设计区域。
(2)选中设计元素,在属性面板中设置样式、字体、大小等属性。
(3)调整设计元素的位置和大小,使其符合设计要求。
2.4设置交互效果(1)选中设计元素,在交互面板中添加交互事件。
(2)设置交互条件,如鼠标、键盘按键等。
Axure中文教程一、教学内容本节课的教学内容来自于Axure RP 8.0中文版教程,主要讲解Axure的基本操作和功能。
包括:Axure界面的熟悉,模板的使用,框架的创建,元件的添加与编辑,交互的设置,以及演示的等。
二、教学目标1. 让学生了解并熟悉Axure RP 8.0的界面和操作。
2. 培养学生利用Axure进行原型设计的思维和能力。
3. 提高学生对交互设计和用户体验的理解。
三、教学难点与重点重点:Axure的基本操作和功能,如元件的添加、编辑和交互的设置。
难点:如何设计出符合用户需求的交互效果,以及如何运用Axure 进行原型设计的思维。
四、教具与学具准备教具:计算机、投影仪、教学PPT。
学具:学生计算机、Axure RP 8.0软件。
五、教学过程1. 实践情景引入:以一个简单的网页设计为例,让学生了解Axure的使用和基本功能。
2. 讲解教材内容:介绍Axure RP 8.0的界面和操作,包括模板的使用,框架的创建,元件的添加与编辑,交互的设置等。
3. 示范演示:教师利用Axure设计一个简单的网页原型,并进行交互设置,展示给学生。
4. 随堂练习:学生根据所学内容,利用Axure设计一个简单的网页原型,并进行交互设置。
5. 作业布置:让学生利用Axure设计一个简单的APP界面原型,并进行交互设置。
六、板书设计板书设计主要包括Axure的基本操作和功能,以及设计原型时的注意事项。
七、作业设计1. 题目:设计一个简单的购物APP界面原型,并进行交互设置。
答案:学生根据自己的设计思路,利用Axure设计出一个购物APP 界面原型,包括商品展示、商品详情、购物车等模块,并进行交互设置。
2. 题目:利用Axure设计一个简单的新闻APP界面原型,并进行交互设置。
答案:学生根据自己的设计思路,利用Axure设计出一个新闻APP 界面原型,包括新闻列表、新闻详情、搜索新闻等功能,并进行交互设置。
Axure教程 axure新手入门基础(1)2013-08-19 21:43Nairo分类:原型设计微信二维码首先做个声明:此次教程里为了快速完成,借用了一些网上已有教程的图文,不是剽窃,只图方便。
另外,因为汉化版本可能功能名称等略有差别,请自行理解。
名词解释:线框图:一般就是指产品原型,比如:把线框图尽快画出来和把原型尽快做出来是一个意思。
axure元件:也叫axure组件或axure部件,系统自带了一部分最基础常用的,网上也有很多别人做好的,软件使用到一定阶段可以考虑自己制作元件,以便提高产品原型的制作速度。
生成原型:是指把绘制好的原型通过axure rp生成静态的html页面,检查原型是否正确,同时,方便演示。
建议生成时选择用谷歌浏览器打开(第一次会有提示安装相关插件),ie会每次都有安全提示,不如谷歌浏览器方便。
(一) Axure rp的界面1-主菜单工具栏:大部分类似office软件,不做详细解释,鼠标移到按钮上都有对应的提示。
2-主操作界面:绘制产品原型的操作区域,所有的用到的元件都拖到该区域。
3-站点地图:所有页面文件都存放在这个位置,可以在这里增加、删除、修改、查看页面,也可以通过鼠标拖动调整页面顺序以及页面之间的关系。
4-axure元件库:或者叫axure组件库、axure部件库,所有软件自带的元件和加载的元件库都在这里,这里可以执行创建、加载、删除axure元件库的操作,也可以根据需求显示全部元件或某一元件库的元件。
5-母版管理:这里可以创建、删除、像页面头部、导航栏这种出现在每一个页面的元素,可以绘制在母版里面,然后加载到需要显示的页面,这样在制作页面时就不用再重复这些操作。
6-页面属性:这里可以设置当前页面的样式,添加与该页面有关的注释,以及设置页面加载时触发的事件onpageload。
7-元件属性:这里可以设置选中元件的标签、样式,添加与该元件有关的注释,以及设置页面加载时触发的事件;A-交互事件:元件属性区域闪电样式的小图标代表交互事件;B-元件注释:交互事件左面的图标是用来添加元件注释的,在这里我们能够添加一些元件限定条件的注释,比如:文本框的话,可以添加注释指出输入字符长度不能超过20。
C-元件样式:交互事件右侧的图标是用来设置元件样式的,可以在这里更改原件的字体、尺寸、旋转角度等,当然也可以进行多个元件的对齐、组合等设置。
8 动态面板:这个是很重要的区域,在这里可以添加、删除动态面板的状态,以及状态的排序,也可以在这里设置动态面板的标签;当绘制原型动态面板被覆盖时,我们可以在这里通过点击选中相应的动态面板,也可以双击状态进入编辑。
Axure rp的界面就介绍到这里,界面中的各个区域基本上在做产品原型的过程中,使用都很频繁,所以建议不要关闭任何一个区域。
如果不小心关闭了,可以通过主菜单工具栏—视图—重置视图来找回。
本文作者:@小楼;转载自:Axure原创教程网Axure教程 axure新手入门基础(2)2013-08-19 21:47Nairo分类:原型设计微信二维码(二)Axure rp的线框图元件l 图片图片元件拖入编辑区后,可以通过双击选择本地磁盘中的图片,将图片载入到编辑区,axure会自动提示将大图片进行优化,以避免原型文件过大;选择图片时可以选择图片原始大小,或保持图片元件的大小。
l 文本在网页中文本的名称是lable,用于页面中添加说明文字、文字连接,或一些动态的提示。
l 矩形矩形的应用比较广泛,比如作为页面的背景、按钮、以及一些元件的遮盖等;矩形的形状可以通过鼠标右键点击–编辑选项—改变形状,来变成我们需要的形状,比如做选项卡时候我们需要顶部圆角的矩形,就可以通过改变矩形的形状来实现。
l 占位符制作原型时,可以用它来代替对一些没有交互或者交互比较简单容易说明的区域;也可以做成关闭按钮。
占位符在保真比较高的产品原型中作用不大。
l 圆角矩形这个个人认为是因为圆角矩形应用广泛,所以单独拿出来作为元件给使用者,免去了对矩形的设置。
l 动态面板非常重要的axure元件,必须要学会使用的元件,动态面板的显示、隐藏、多状态等,都是非常有用的。
在这里不过多介绍,详细介绍请参考:小楼axure图文教程(五)动态面板的使用。
l 水平线就是一条水平的线,可以作为表示页面一些区域分割时使用,比如在两块不同区域之间添加一条水平线,来明显的区分。
水平线可以通过设置元件属性中的角度Rotº变成斜线来使用。
l 垂直线没什么好说的,和水平线一样的作用。
l 图片热区用于点击图片中某个区域产生交互事件时使用,图片热区也是矩形的一种,可以通过设置矩形无边框,背景色100%透明度来实现。
l 文本框(单行)用于输入文字的axure元件,用于登录、标题、密码框(鼠标右键–编辑选项–隐藏文本)等功能。
l 文本框(多行)从字面意思就知道了它的功能,用于实现更多文字内容输入的axure 元件,用于回复、评论、微博发布框这类的功能。
l 下拉列表(框)鼠标点击时展开多个选项的axure元件,主要用来类别选择或多条件查询效果时使用。
l 列表框一个多选项的列表,带滚动条效果,个人认为样子很丑,应用不是很多,应用场景可以参考word自定义快速访问工具栏中选择添加项的效果。
l 复选框复选框用于同类别内容可以同时选择多个时候使用,比如注册时候个人兴趣的选择,又比如批量删除邮件时选择多个邮件的功能。
l 单选按钮多个选项仅能选择其一时候使用,比如性别选择。
多个单选按钮联动效果需要同时选中多个需要联动的单选按钮—鼠标右键—编辑选项–指定单选按钮组来实现。
不嫌麻烦的话也可以通过设置每个单选按钮的onclick事件来实现。
l 内部框架用于在页面中嵌入其他页面的axure元件,可以设置好大小后双击它,指定要嵌入的页面。
框架可以通过编辑选项取消滚动条,应用场景多见于网站后台原型和移动互联网产品原型。
l 表格表格很常见,就不多做解释,每个表格都可以设置单独的事件,但是axure还不支持单元格的合并。
l 菜单纵向主要用于网站导航。
多使用于网站后台。
l 菜单横向主要用于网站导航,多使用于网站前台。
l 树主要用于网站导航。
多使用于网站后台。
用上述所有axure元件做的示例:【点击下载】本文作者:@小楼;转载自:Axure原创教程网Axure教程 axure新手入门基础(3)2013-08-19 22:27Nairo分类:原型设计微信二维码(三)Axure rp元件的触发事件l OnClick(点击时): 鼠标点击事件,除了动态面板的所有的其他元件的点击时触发。
比如点击按钮。
l OnMouseEnter(鼠标移入时): 鼠标进入到某个元件范围时触发,比如当鼠标移到某张图片时显示该图片的介绍。
l OnMouseOut(鼠标移出时): 鼠标离开某个元件范围时触发。
比如鼠标离开图片时,图片介绍消失。
l OnKeyUp(按键弹起时): 文本框(单行与多行)编辑时,键盘按下某一个按键松开时触发,不支持其他axure元件。
比如统计文本框输入的字数。
l OnFocus(获取焦点时): 当一个元件通过点击或切换获取焦点时触发。
比如搜索框编辑时,清空“请输入关键字”的提示。
l OnLostFocus(失去焦点时): 当一个组件失去焦点时触发。
比如用户名、密码的验证。
l OnChange(选中项改变时):下拉列表框或列表框的选中项改变时触发,不支持其他元件。
比如选择地址时,选择不同的省份,显示对应的省内城市。
动态面板专属事件l OnMove(移动时):当动态面板移动时触发。
是指通过其他事件的触发控制面板移动时,比如当进度条移动时,进度比例的变化。
l The OnShow and OnHide events(显示或隐藏时):当动态面板隐藏或显示时触发。
比如图片显示时按钮文字是关闭图片,图片隐藏时按钮文字变为打开图片。
l OnPanelStateChange(状态改变时):当动态面板更改面板的状态时触发。
比如通过改变动态面板状态实现的进度条效果,当状态改变时改变相应的进度比例。
l OnDragStart: Occurs when the drag begins(开始拖动面板时):当开始拖动动态面板时触发。
比如在动态面板拖动开始时,显示“拖动开始”的文字提示。
l OnDrag: Occurs as the panel is dragged(面板拖动时):动态面板拖动时触发,比如拖动一块动态面板另外一块跟随移动。
l OnDragDrop: Occurs when the panel is dropped(面板拖动结束时):当拖拽结束时触发。
比如滑动解锁,面板拖动结束时根据滑块的位置设置相应的效果。
本文作者:@小楼;转载自:Axure原创教程网Axure教程 axure新手入门基础(4)2013-08-19 22:33Nairo分类:原型设计微信二维码(四)条件生成器在axure原型制作的过程中,很多时候我们需要触发一个又一个事件,以交互设计效果展示的需求。
在这些事件里我们经常需要在满足某一条件时完成指定的动作。
比如:文本框文字为空的时候点击按钮无效。
或者拖动动态面板没到达指定位置退回原位等。
这一节教程我们就讲一下,如何使用条件生成器,至于条件的设置,以后结合相关的案例再逐渐深入。
(一)条件逻辑条件生成器是在我们双击某一事件打开用例编辑器后才能打开。
如截图里1的位置,蓝色的“添加条件”点击后即打开条件生成器。
打开条件生成器后,2的位置有2个选项,一个是“全部”一个是“任何”。
全部:是指事件触发后必须同时满足条件生成器里设置的所有条件时才继续下一步动作,否则不执行任何动作。
用白话来举例:如果个税满五年(条件1)并且缴纳时间未间断(条件2),就能参加摇号(下一步动作)。
这个例子举得好心酸:(。
任何:是指事件触发后只要满足条件生成器里的任意一个条件即执行下一步动作。
用白话举例:如果连续5年缴纳个税(条件1)或者连续60个月缴纳社保(条件2),就可以买房(下一步动作)。
尼玛,心更酸了!(二)可设置的条件可设置的条件是指图片中3的位置包含的内容。
分别是:l 变量值:软件内自带了一个变量“onloadvariable”,也可以添加、删除、重命名变量,管理变量可以从菜单栏左数第四个(汉化版本的“线框图”)中的第三项“管理变量”进行上述操作。
当然在条件编辑器里选择变量时最后一项“新建”也可以完成对变量的管理。
变量值可以是字母、数字、特殊字符和汉字或者是它们的任意组合。
l 变量长度:是指变量值的字符个数,在axure里一个汉字的长度是1。
变量长度的值可以通过axure自带函数进行获取。
l 元件文字:是指每个元件上面可编辑的文字。