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 水平线
就是一条水平的线，可以作为表示页面一些区域分割时使用，比如在两块不同区域之间添加一条水平线，来明显的区分。水平线可以通过设置元件属性中的角度Roto变成斜线来使用。
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 元件文字：是指每个元件上面可编辑的文字。不包含：动态面板、图片热区、垂直线、水平线、内部框架、下拉列表、列表框。
l 元件值长度：仅包含单行和多行文本框、下拉列表和列表框。
l 选中于：仅适用于单选按钮和复选框，选中时值为“真”，未选中时值为“假”。
l 选中项于：仅适用于下拉列表和列表框，通过获取元件当前值来确定选中状态。
l 动态面板状态：动态面板专用，以获取事件激发时动态面板的状态作为判断条件。
l 动态面板可见性：动态面板专用，以动态面板显示或隐藏作为判断条件。
l 焦点元件上的文字：即通过鼠标点击或Tab切换被选中的元件上的文字，比如文本框获取焦点时，光标在文本框内闪动；按钮获取焦点时四周会出现虚线。
l 值：可以是字母、数字、汉字、符号、函数、公式；可以直接输入，或者点击fx进入编辑。可以设置等于、不等于大于、包含、是、不是等条件。具体使用方法以后结合案例详解。
l 拖放光标：是指拖动动态面板时光标（鼠标指针）的位置，以拖放光标是否进入某个元件的范围为条件。
l 元件范围：是指元件覆盖的范围，以是否触碰到指定元件为条件。本文作者：@小楼；转载自：Axure原创教程网
Axure教程 axure新手入门基础（5）
2013-08-26 10:39Nairo分类：原型设计微信二维码
（五）系统函数与变量
1、变量的种类：
全局变量：可以在整个原型的任意位置调用和修改。
局部变量：仅作用于某一事件的某一动作内。
自定义变量：自行新建的全局变量。
2、axure函数
特殊变量：特殊变量其实是软件自带的函数，就像excel中的函数一样，可以调用获得一些特定的值。
功能：除了运算符之外的三个函数，可以对变量进行进一步操作以获取需要的值。比如：截取变量字符串中的某一段或者计算变量字符串的长度。
3、特殊变量的使用
使用时我们只需要点击选择相应的变量或直接输入[[变量名称]]，再通过不同的表达式就能得到我们要的效果。比如我们想在文本框内显示当前的日期(yy-mm-dd格式)，就可以通过下面的表达式实现：[[Year]]-[[Month]]-[[Day]]
4、函数的使用
功能中的函数都是通过“变量名.函数名（参数）”来实现：
例1：截取变量“页面名称”中的前三个字符
[[PageName.substring(0, 3)]]
例2：获取页面名称字符的长度
[[PageName.length]]
例3：将变量转换成小数点后保留两位的数值
[[自定义变量名.toFixed(2)]]
5、变量的使用情景
1）记录登录状态；
2）显示编辑框还能输入多少汉字；
3）滚动条的实现；
4）根据不同的变量跳转至不同的页面
N）……
太多，就不一一列举了。
简单说，变量的使用一般程序：添加变量，修改变量值，判断变量值，根据不同的值执行不同的动作。
值得注意的是，在事件中设置在当前页打开新窗口时，如果同时对变量有操作，记得把变量操作写在跳转页面之前，写在后面变量会不起作用。
本文作者：@小楼；转载自：Axure原创教程网
Axure教程关于Axure rp触发事件中IF和ELSE IF的使用说明（6）
2013-08-26 10:44Nairo分类：原型设计微信二维码
IF=如果
ELSE IF=否则，如果
举例：事件“天气变化时”
用例1：IF True 下雨执行带伞
用例2：ELSE IF 下冰雹执行戴钢盔
用例3：ELSE IF True 执行什么都不带
什么意思呢？在Axure里，默认一个事件中的每个用例都是有关联的，是由上至下来执行的，上面的示例用白话来说就是：
当天气变化时，如果（IF）是（True）下雨，就带伞，否则（ELSE）如果（IF）是下冰雹，是的话戴钢盔，否则（ELSE）如果（IF）真的（True）不下雨也不下冰雹就什么都不带。
举例2：事件“检查性别时”
IF True 男的站左边
IF True 女的站右边
这个例子是说,如果（IF）真的（True）是男的站左边，如果（IF）
真的（True）是女的站右边。
这里没有第三种情况了，那就是说只要不符合上面两种情况，就没有任何动作。
不知道这样的解说清不清楚，希望大家能够理解。
本文作者：@小楼；转载自：Axure原创教程网
Axure教程 axure元件使用思路的补充（7）
2013-09-09 10:46Nairo分类：原型设计微信二维码
我们曾经对axure线框图基本元件进行过说明，现结合这我对这些元件的使用习惯，对部分元件的使用，再做一些补充。
1、图片：可以编辑悬停、按下时候显示不同的图片，做图片的一些特殊效果。
2、文本（lable）：这个元件到处都能用得到，这个元件是可以通过事件触发改变元件文字的，可以通过全局变量，实现如登陆前后不同的文字提示效果。对我来说这个元件还有一个用处就是除错，因为axure没有调试器，所以当因为变量值出现问题导致交互效果无法出现的时候，我通常会在调用变量时顺便加上一个动作，拖进去一个文
本，让文本文字等于变量值，这样就能一目了然的看到是不是因为变量值不正确出的错。
3、矩形：这个也是最常用的axure元件之一，常见的使用方式我就不说了，我对矩形的使用，我通常是把矩形拖进编辑区然后根据需要调整好大小，再转换成动态面板，这样做比拖入动态面板-调整大小-双击状态-拖入矩形-调整大小，要省很多的事。可能很多人都这么用，但是我觉得还是有必要讲出来，让新手少走些弯路。
4、占位符：除了懒得找广告图片，用它来表示广告位之外基本很少用，不过我倒是经常把它缩小做关闭按钮使用。
5、圆角矩形：不知道为什么axure单独有个这个，我已经把它在我做的小楼axure元件库1.0中淘汰了，因为我把矩形改成了默认能够直接编辑圆角的。
6、动态面板：教程里各种各样的用法太多，就不说了。不过有一个我没有讲过，就是函数里的DragTime，这个函数能获取拖动面板的时长，精确到毫秒，这个功能在移动端原型里应该有很大作用，因为我很少接触，所以没有怎么用。不过我用这个函数的特点，做了一个随机骰子，实现了猜大小的游戏，有兴趣的话去小楼元件里下载参考一下。
7、图片热区：基本上不用，用的时候基本功能也可以用透明矩形来代替。之前没有提到是的，图片热区能够作为锚记，通过对其他元件设定滚动事件返回到锚记，比如一些网站页面较长，一般在右侧下部有一个点一下就回到页面开始部位的功能，这个博客就有这个功能。
8、文本框（单行）：真心希望axure能加上文本框验证的设置，这样就省很多事。感觉对密码框的支持还不够，不能通过事件触发的让输入的字符变成隐式的。
9、复选框：这个难度大一些的用法，就是像全选、反选、勾选计数，这些效果，基本上是苦力活。
10、内部框架：web端使用最多的是后台设计或者选项卡的实现（会有刷新，不如动态面板的好），但是在移动端，这个axure元件的作用就很大了，把它在主页拖动到手机外壳图片上并设置好大小覆盖整个屏幕，再双击指定一个页面作为框架内的主页，就能像设计网站一样，方便的实现手机屏幕上的多种效果。
本文作者：@小楼；转载自：Axure原创教程网
Axure教程带遮罩层的弹出框（9）
2013-09-09 12:01Nairo分类：原型设计微信二维码
示例原型下载：小楼Axure原创元件-带遮罩层的弹出框
实现目标：
1、点击按钮弹出带遮罩层的对话框；
2、页面上下左右滚动时，弹出的对话框水平和垂直始终居中。实现步骤如下：
Axure8.0基础教程手册 目录 基础1.添加元件到画布 ------------------------------------------------------------------------------- 4 基础2.添加元件名称 ---------------------------------------------------------------------------------- 4 基础3.设置元件位置/尺寸--------------------------------------------------------------------------- 5 基础4.设置元件默认角度 ---------------------------------------------------------------------------- 6 基础5.设置元件颜色与透明 ------------------------------------------------------------------------- 6 基础6.设置形状或图片圆角 ------------------------------------------------------------------------- 7 基础7.设置矩形仅显示部分边框 ------------------------------------------------------------------- 7 基础8.设置线段/箭头/边框样式 ------------------------------------------------------------------- 8 基础9.设置元件文字边距/行距 --------------------------------------------------------------------- 8 基础10.设置元件默认隐藏 -------------------------------------------------------------------------- 9 基础11.设置文本框输入为密码 -------------------------------------------------------------------- 9 基础12.设置打开选择文件窗口 ------------------------------------------------------------------ 10 基础13.限制文本框输入字符位数 --------------------------------------------------------------- 11 基础14.设置文本框提示文字 --------------------------------------------------------------------- 11 基础15.设置文本框回车触发事件 --------------------------------------------------------------- 11 基础16.设置鼠标移入元件时的提示------------------------------------------------------------- 12 基础17.设置矩形为其他形状 --------------------------------------------------------------------- 12 基础18.设置自定义形状 --------------------------------------------------------------------------- 13 基础19.设置形状水平/垂直翻转 ----------------------------------------------------------------- 14 基础20.设置列表框的内容 ------------------------------------------------------------------------ 14 基础21.设置元件默认选中/禁用 ----------------------------------------------------------------- 14 基础22.设置单选按钮唯一选中 ------------------------------------------------------------------ 15
1介绍 互联网行业产品经理的一项重要工作，就是进行产品原型设计(Prototype Design)。而产品原型设计最基础的工作，就是结合批注、大量的说明以及流程图画框架图wireframe，将自己的产品原型完整而准确的表述给UI、UE、程序工程师，市场人员，并通过沟通会议，反复修改prototype 直至最终确认，开始投入执行。 进行产品原型设计的软件工具也有很多种，我写的这个教程所介绍的Axure RP，是taobao、dangdang等国内大型网络公司的团队在推广使用的原型设计软件。同时，此软件也在产品经理圈子中广为流传。之所以Axure RP得到了大家的认同和推广，正是因为其简便的操作和使用，符合了产品经理、交互设计师们的需求。 在正式谈Axure RP之前，我们先来看看做产品原型设计，现在大致有哪些工具可以使用，而他们的利弊何在。 纸笔：简单易得，上手难度为零。有力于瞬间创意的产生与记录，有力于对文档即时的讨论与修改。但是保真度不高，难以表述页面流程，更难以表述交互信息与程序需求细节。 Word：上手难度普通。可以画wireframe，能够画页面流程，能够使用批注与文字说明。但是对交互表达不好，也不利于演示。 PPT：上手难度普通。易于画框架图，易于做批注，也可以表达交互流程，也擅长演示。但是不利于大篇幅的文档表达。
Visio：功能相对比较复杂。善于画流程图，框架图。不利于批注与大篇幅的文字说明。同样不利于交互的表达与演示。 Photoshop/fireworks：操作难度相对较大，易于画框架图、流程图。不利于表达交互设计，不擅长文字说明与批注。 Dreamweave：操作难度大，需要基础的html知识。易于画框架图、流程图、表达交互设计。不擅长文字说明与批注。 以上这些工具，都是产品经理经常会使用到的，但是从根本上来说，这些工具都不是做prototype design的专门利器，需要根据产品开发不同的目的，不同的开发阶段，选择不同的工具搭配使用，才能达到表达、沟通的目的。 比如使用纸笔，更适合在产品创意阶段使用，可以快速记录闪电般的思路和灵感；也可以在即时讨论沟通时使用，通过图形快速表达自己的产品思路，及时的画出来，是再好不过的方法。而word则适合在用文字详细表达产品，对产品进行细节说明时使用，图片结合文字的排版，是word最擅长的工作。而ppt自然是演示时更好。visio则可以适用于各种流程图、关系图的表达，更可通过画use case 获取用户需求。PS/FW是图片处理的工具，DW则是所见即所得的网页开发软件，这些是设计师的看家本领，对于普通的产品经理来说，需要耗费太多的精力去掌握。 其实每件工具，每个软件，在创造它的初期，软件设计师们都给它赋予了性格、气质。因为每个工具的产生，都是为了满足人类的某一方面需求。比如锄头是锄土的，起子是起螺丝的，电熨斗是烫衣服的。但是不同的工具都有自己的工作领域，在其他领域它并不擅长。而以上的软件在创造的初期，并非为了帮助产品经
Axure RP 8.0函数大全Axure函数手册用法及说明Axure RP 8.0函数大全是根据小楼老师的《Axure RP 8 函数速查表》整理而来，方便大家查询。这些函数不用去记，大概了解他们的用途即可。需要的时候再来查一下就可以了。 在做课件的时候，将所有的函数用途和参数注解，整理了一份表格资料。后来，觉得这个东西挺有用，所以，分享给大家当做参考资料。 函数能够提高原型的制作效率，但也容易导致画蛇添足。如果是单纯的学习，建议通过一些有趣味的原型，多加锻炼使用。这样在实际应用中，才能够手到拈来，随心所欲。如果是用于工作，在不熟悉函数使用的情况下，尽量避免纠结于某个函数的使用，以免影响工作效率，得不偿失。扎实学习，灵活使用。这句话不仅适用于函数，也适用于Axure以及其他的任何工具。 Axure函数的基本语法 在axure交互设计时，函数可以用在条件公式和需要赋值的地方，其基本语法是用双方括号包含，变量值和函数用英文句号连接。 例如：[[LVAR. Width]] 表示变量LVAR的宽度。 [[This. Width]] 当前元件的宽度 元件函数 This用途：获取当前元件对象。当前元件是指当前添加交互动作的元件。 Target用途：获取目标元件对象。目标元件是指当前交互动作控制的元件。 x用途：获取元件对象的X轴坐标值。
y用途：获取元件对象的Y轴坐标值。 width用途：获取元件对象的宽度值。 height用途：获取元件对象的高度值。 scrollX用途：获取元件对象的水平滚动距离（当前仅限动态面板）。scrollY用途：获取元件对象的垂直滚动距离（当前仅限动态面板）。text用途：获取元件对象的文本文字。 name用途：获取元件对象的自定义名称。 top用途：获取元件对象的上边界坐标值。 left用途：获取元件对象的左边界坐标值。 right用途：获取元件对象的右边界坐标值。 bottom用途：获取元件对象的下边界坐标值。 opacity用途：获取元件对象的不透明比例。 rotation用途：获取元件对象的旋转角度。 鼠标指针函数 Cursor.x用途：鼠标指针在页面中位置的X轴坐标。 Cursor.y用途：鼠标指针在页面中位置的Y轴坐标。 DragX用途：鼠标指针沿X轴拖动元件时的瞬间(0.01秒)拖动距离。DragY用途：鼠标指针沿Y轴拖动元件时的瞬间(0.01秒)拖动距离。TotalDragX用途：鼠标指针拖动元件从开始到结束的X轴移动距离。TotalDragY用途：鼠标指针拖动元件从开始到结束的Y轴移动距离。DragTime用途：鼠标指针拖动元件从开始到结束的总时长。
小楼axure 图文教程（十六）微信摇一摇效果 作者: 小楼一夜听春语分类:Axure教程发布时间: 2013-07-22 21:43?6没有评论编辑本教程axure原型百度云盘下载：小楼原创原型-微信摇一摇效果 本文出自诉客?产品经理的心声，转载时请注明出处及相应链接。 本来是想借着这个axure原型效果写一下拖动面板后通过变量让其他面板联动的的效果，结果做到一半，想起来，这个联动效果不用拖的，而是移动面板，糗P了。既然做了，就做下去吧，结果又碰到了一个软件的bug。我勒个去！ 说一下这个axure6.5中的bug，就是无论你在动态面板的哪个事件（拖动开始，拖动时，拖动结束）中，只要设置了变量值，那么在这些事件中的内部框架加载页面就会失效。本来简单实现的功能，又不得不在框架上加了一个动态面板状态。 其实在这个效果中，实现方法没什么值得过多说的，不过有些值的我们注意的地方是很有价值的。 先说实现过程： 我的想法是这样的，先说内容页，内容页在主页加载时就要加载到内部框架里，但是不能动，当摇动结束时，重新加载内容页，这时候再让它动。为了实现这个效果就要加个变量作为开关，主页加载时没有变量，这时候加载内容页就可以通过内容页的onloadpage事件判断变量没有值不作任何动作。当摇动结束时，给变量赋值，并且重新加载内容页，这个时候在内容页的onloadpage事件中就能判断变量被赋值，执行动态的效果。 那么过程就应该是在主页放上手机外壳元件，里面放个框架，然后把他们一起转换成动态面板，在打开主页时，就把摇一摇的界面加载到框架里，在拖动这个动态面板时，让面板可以随意拖动（摇一摇），当拖动结束时，给指定的变量复制，并把内容页重新加载到框架。、
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、矩形：矩形可用作背景、按钮等元件使用；双击矩形可输入文本；拖入矩形时默认是直角矩形，可通过左右拖动左上角的黄色小三角来改变圆角半径；也可通过右键选择形状来改变当前形状。 4、占位符：顾名思义，主要用于替代一些没有交互或交互比较简单的区域。
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-交互事件:元件属性区?域闪电样式?的小图标代?表交互事件?；
axure新手入门基础 名词解释： 线框图：一般就是指产品原型，比如：把线框图尽快画出来和把原型尽快做出来是一个意思。 axure元件：也叫axure组件或axure部件，系统自带了一部分最基础常用的，网上也有很多别人做好的，软件使用到一定阶段可以考虑自己制作元件，以便提高产品原型的制作速度。 生成原型：是指把绘制好的原型通过axurerp生成静态的html页面，检查原型是否正确，同时，方便演示。建议生成时选择用谷歌浏览器打开（第一次会有提示安装相关插件），ie会每次都有安全提示，不如谷歌浏览器方便。 （一） Axurerp的界面 1-主菜单工具栏：大部分类似office软件，不做详细解释，鼠标移到按钮上都有对应的提示。
2-主操作界面：绘制产品原型的操作区域，所有的用到的元件都拖到该区域。 3-站点地图：所有页面文件都存放在这个位置，可以在这里增加、删除、修改、查看页面，也可以通过鼠标拖动调整页面顺序以及页面之间的关系。 4-axure元件库：或者叫axure组件库、axure部件库，所有软件自带的元件和加载的元件库都在这里，这里可以执行创建、加载、删除axure元件库的操作，也可以根据需求显示全部元件或某一元件库的元件。 5-母版管理：这里可以创建、删除、像页面头部、导航栏这种出现在每一个页面的元素，可以绘制在母版里面，然后加载到需要显示的页面，这样在制作页面时就不用再重复这些操作。 6-页面属性：这里可以设置当前页面的样式，添加与该页面有关的注释，以及设置页面加载时触发的事件onpageload。 7-元件属性：这里可以设置选中元件的标签、样式，添加与该元件有关的注释，以及设置页面加载时触发的事件； A-交互事件:元件属性区域闪电样式的小图标代表交互事件； B-元件注释：交互事件左面的图标是用来添加元件注释的，在这里我们能够添加一些元件限定条件的注释，比如：文本框的话，可以添加注释指出输入字符长度不能超过20。 C-元件样式：交互事件右侧的图标是用来设置元件样式的，可以在这里更改原件的字体、尺寸、旋转角度等，当然也可以进行多个元件的
小楼axure教程 （五）动态面板的用途 小楼一夜听春语分类: Axure教程发布时间: 2013-07-09 22:24?61条评论编辑 小楼axure教程 （五）动态面板的用途 写了几个Axure教程之后发现，可能教程的起点有些高了，过分的去讲效果的实现，而忽略了axure功能以及基础元件的使用，那么从这个教程开始，把这些逐渐的展开讲解。 关于动态面板 动态面板是axure原型制作中使用非常频繁的一个元件，主要用途就是实现一些动态的交互效果。所以，如果动态面板使用不熟悉的话，对axure原型的制作会有很大的影响，那么动态面板都能做什么呢？主要有以下几个方面： 1、隐藏与显示 2、滑动效果 3、拖动效果 4、多状态效果 以上这些效果都在移动面板的元件属性里面体现。那通过这几个属性都能实现什么样的功能呢？简单的举几个例子。 1、显示隐藏效果 我们经常在做原型的时候，需要点击按钮后出现一些界面上没有的元素，比如：
登录功能在不填写用户名时点击登录按钮，显示出要求用户填写用户名的提示。 情景B： 当我们需要在用户的某一个操作时，弹出一个提示框。当用户点击提示框的确定按钮时提示框消失。 诸如以上情景都需要用到动态面板的显示隐藏效果。 动态面板初始状态是隐藏还是显示，可以通过右键单击动态面板—编辑选项—设为显示（或）设为隐藏来实现。 2、动态面板的滑动效果 与显示隐藏效果不同，动态面板的滑动效果一般是通过其他交互事件来激发的，可能是点击某个按钮，也可能是页面加载时实现。比如： 情景A： 情景B： 点击登录按钮，登录面板的弹出收起效果。 一般滑动效果都需要有复杂的激发过程，比如通过页面的onpageload事件。现在，在此不做过多讲解，以后通过案例来进行介绍，则更易懂一些。 3、动态面板的拖动效果 动态面板的拖动效果，对于移动互联网产品原型来说是必须的，主要用于APP的产品原型。用来实现面板被拖动时产生的一些效果。 情景A： 手机的滑动解锁功能。
axure教程(十)如何用axure rp画流程图？ axure发表于232天3小时43分钟前 来源：https://www.doczj.com/doc/4118227313.html,标签：axure rp画流程图axureAxure教程 axure系列教程这一章的主要内容是讲述如何用axure rp画流程图： 1. 流程图 2. Flow Widget 3. 建立流程图 4. 关联网页 5. 输出流程图 6. 秘技(Quick Tips) 1.流程图 流程图可以用来表达各式各样的流程，包括：Use Case、商业流程与网页流程，在Axure RP中，流程图常被用来提供一个高阶视角(high level view)来看网页设计可以达成的工作。在Sitemap窗格中的网页标示图案，预设为网页形状的ICON，您可以在Sitemap中的 网页上按鼠标右键并选择「Diagram Type->Flow」，将网页标示图案设定为流程图ICON。
不过，这不是建立流程图所必要的动作。这个动作与绘制流程图没有关联性，只是用来辨识这个页面放置流程图或线框图。 2. Flow Widget 按下Widgets窗格工具列上的「Flow」可以找到各种流程Widget。
在Widgets 窗格中有各种形状的Widget可以用来代表不同的流程步骤，如果您找不到适合的形状，也可以使用Image Widget来代替。 依惯例，在流程图中不同的形状的图形分别代表着特定的意义，但是Axure RP 并没有限制这些图形的使用，一般来说，只要您的客户看的懂就是最好的规则。 3. 建立流程图 就像Wireframe Widget一样，Flow Widget也可以直接从Widgets 窗格中拖拉到Wireframe 窗格，然后透过工具列或快捷菜单(Context Menu)来编辑样式与属性，如果要改变流程形状的话，可以按鼠标右键并选择「Edit Flow Shape」子选单中的项目。 连接线 Flow Widget和Wireframe Widget最主要的不同就是Flow Widget具有可以附加连接线的连接点。
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案例】 下面是近收集到的最好的网页设计资源，希望大家能够喜欢。网页模板macbook pro retina 15 mockup (psd).stationary mockup templ 【篇二：axure案例】 用axure写产品需求文档实例-axure中文网 axure中文网axure官 方正版 快速原型设计工具 2015-12-22 分类：阅读(21824) 评论(10) 说来有些惭愧，写这篇文章是用来教大家写需求文档的。但其实， 我很少会写传统意义上的产品需求文档；甚至，我连word都很少用。用惯了axure的任意布局方式，再用word感觉非常别扭，尤其是 在添加图片时，简直感到捉急。当然，这不是我不用word写需求文档的根本原因。 简单来谈一下，为什么软件开发项目中，需要需求文档这么个东西？在稍微大一点的开发团队中，产品经理未必能向所有开发人员，传 达具体的产品开发需求。这时就需要一份文档来供所有的项目参与 人员阅读。而产品经理又常常爱拍脑袋、容易变卦，所以文档也是 开发人员约束产品经理的一项武器。在产品上线前的测试环节，测 试人员也同样会拿产品需求文档来验收产品质量。当团队进入新人时，文档也可以让新人更快地了解产品。 总的来说，产品需求文档有三个核心作用： 传达产品开发需求；保证各部门沟通有理有据产品质量控制有具体 标准由此可见，产品需求文档是必不可少的。那一份好的需求文档，就应该能准确传达出产品的开发需求。那么产品需求文档该用什么 方式写，才能更好地传达出产品开发需求呢？ 就我所见，行业大多产品经理都是用word axure原型的方式组成产 品需求文档。那这种方式，是否真的能方便地表达出产品需求？我 问了很多程序猿，他们在开发时，一般都是看着效果图和原型图写 代码，只有在遇到问题时，才会查看word文档。也就是说，开发需要一边写代码，一边看效果图，一边看原型，还要时不时查看文档。而且，大多数程序猿都不会逐字逐句去读产品经理的长篇大论。那 产品经理写word真的合适吗？这样的用户体验真的好吗？花费大量时间写word真的有价值吗？在axure画原型的同时，我们为什么 不能直接在旁边标注呢？这样岂不是方便快捷很多吗？
小楼axure 图文教程（十一）新手入门基础（3）作者: 小楼一夜听春语分类:Axure教程发布时间: 2013-07-15 22:29?6没有评论编辑 本文出自诉客-产品经理的心声，转载时请注明出处及相应链接。 （三）Axurerp元件的触发事件 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教程发布时间: 2013-07-11 22:48 ?6没有评论编辑示例原型下载：小楼原创元件-日历 实现目标： 1、点击日历图标出现日期选择面板，点击其中一个预先设定好的日期，日期在文本框显示。 2、点击日历图标中的清空，则删除文本框中的日期。 3、点击今天则文本框日期显示为当前日期（通过变量实现，未接触过变量的同学可略过）。 4、点击关闭，则关闭日期选择面板。 最终效果如下：（看不到动态效果时，请点击图片。） 实现过程： 首先，准备一个文本框，一个日历图标，一个动态面板，一个日期选择面板的图片（示例用图是从百度图片下载的），把这些元件的标签都设置好（不会设置标签参看教程：小楼axure rp教程（一）文本框焦点效果）。 准备好这些，我们就可以开始制作了。
1、双击动态面板，再双击打开状态1，然后，把日期选择图片粘贴到里面，并拖动到左上角的位置，点右键—顺序–设置为最底层。 2、从元件库里面拖出四个图片热区，分别调整成合适的大小后覆盖在清空、今天、关闭三个按钮和要选择的日期数字上。 3、分别设置每个热区的鼠标点击事件。 A点击清空上的热区时，删除日期文本框的文字。
B点击今天上的热区时，调用系统日期变量[[Year]]-[[Month]]-[[Day]]，将当前日期填入文本框。如果要是填前一天的就是[[Year]]-[[Month]]-[[Day-1]]喽，当天是月初1号，就是[[Year]]-[[Month-1]]-[[Day-1]]。然后设置动态面板隐藏，可以加上500毫秒淡入淡出的动画效果。 （设置动态面板隐藏的图就不截了，不会的参照C步骤） C点击关闭上的热区时，设置隐藏动态面板。 D点击日期数字上的热区时，直接设置文本框的值等于对应的日期就可以了。然后隐藏动态面板。
作者：陪学地址：https://www.doczj.com/doc/4118227313.html,分类：axure交互设计 初学axure时会想如何快点实现做交互的效果，做交互要对部件的属性和axure 的基础功能有认识和了解才能更快的实现，我介绍这个案例主要用到的部件是“动态面板”需要对动态面板的属性有所了解。 切换面板在网页中算是非常常见的，如视频网站的电视剧分类标签、资讯网站的资讯分类等，当鼠标移入到这个标签的时候显示的内容会相应的变化，同时标签的样式也会发生变化；这些交互效果都可以利用动态面板的几个状态来进行相互切换得来。 步骤1：从部件库中拖拽一个动态面板到线框图编辑区中，并在“部件交互和注释”窗口中命名为“通知” 步骤2：双击动态面板“通知”，打开 动态面板管理窗口，点击“+”按钮，新增4个状态，并将状态命名为：公告、规则、论坛、安全、公益
步骤3：在“通知”动态面板管理窗口中，双击“公告”状态，打开“公告”状态，在公告状态中输入公告的内容 步骤4：选中公告中的文字，在“部件属性和样式”窗口中，点击“鼠标悬停时”，打开“设置交互样式”窗口，设置鼠标悬停时字体颜色：#FF4400；切换到标签“鼠标按键按下时”，设置字体颜色：#FF4400。 小技巧：经常看到在网页中，当鼠标悬停时两个或多个部件（例如图片和文字）的样式同时发生变化，要实现这个效果只要把要改变样式的两个部件放在动态面板同一个状态中，设置它的交互样式，同时在动态面板属性中勾选“触发鼠标交互
样式”这样就可以实现了 步骤5：打开“公告”状态，选中“公告”，在“部件交互和注释”窗口中，双击“鼠标移入时”事件，打开用例编辑器 步骤6：在用例编辑器中，第二步：点击新增动作—— 选择“动态面板”；第四步：配置新动作—— 勾选中“通知（面板状态）”，在“选择状态”后下拉选择“公告”；点击“确定”，保存设置，并关闭用例编辑器。
Axure8.0基础教程 基础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. 设置形状或图片圆角 可以通过拖动元件左上方的圆点图标进行调整，也可以在元件样式中设置圆角半径来实现。（图1-7）
基础7. 设置矩形仅显示部分边框 在Axure RP 8的版本中，矩形的边框可以在样式中设置显示全部或部分。（图1-8） 基础8. 设置线段/箭头/边框样式 线段、箭头和元件边框的样式可以在快捷功能或者元件样式中进行设置。（图1-9） 基础9. 设置元件文字边距/行距 在元件样式中可以设置元件文字的【行间距】与【填充】。（图1-10） 行间距：是指文字段落行与行之间的空隙。 填充：是指文字与形状边缘之间填充的空隙。
小楼axure教程（五）动态面板的用途 作者: 小楼一夜听春语分类: Axure教程发布时间: 2013-07-09 22:24 ?61条评论编辑小楼axure教程（五）动态面板的用途 写了几个Axure教程之后发现，可能教程的起点有些高了，过分的去讲效果的实现，而 忽略了axure功能以及基础元件的使用，那么从这个教程开始，把这些逐渐的展开讲解。 关于动态面板 动态面板是axure原型制作中使用非常频繁的一个元件，主要用途就是实现一些动态的 交互效果。所以，如果动态面板使用不熟悉的话，对axure原型的制作会有很大的影响， 那么动态面板都能做什么呢？主要有以下几个方面： 1、隐藏与显示 2、滑动效果 3、拖动效果 4、多状态效果 以上这些效果都在移动面板的元件属性里面体现。
那通过这几个属性都能实现什么样的功能呢？简单的举几个例子。 1、显示隐藏效果 我们经常在做原型的时候，需要点击按钮后出现一些界面上没有的元素，比如： 情景A：登录功能在不填写用户名时点击登录按钮，显示出要求用户填写用户名的提示。 情景B：当我们需要在用户的某一个操作时，弹出一个提示框。当用户点击提示框的确定按钮时提示框消失。 诸如以上情景都需要用到动态面板的显示隐藏效果。 动态面板初始状态是隐藏还是显示，可以通过右键单击动态面板—编辑选项—设为显示（或）设为隐藏来实现。 2、动态面板的滑动效果 与显示隐藏效果不同，动态面板的滑动效果一般是通过其他交互事件来激发的，可能是点击某个按钮，也可能是页面加载时实现。比如： 情景A：网站上的一些滚动文字的效果。 情景B：点击登录按钮，登录面板的弹出收起效果。 一般滑动效果都需要有复杂的激发过程，比如通过页面的onpageload事件。现在，在此不做过多讲解，以后通过案例来进行介绍，则更易懂一些。 3、动态面板的拖动效果 动态面板的拖动效果，对于移动互联网产品原型来说是必须的，主要用于APP的产品原型。用来实现面板被拖动时产生的一些效果。 情景A：手机的滑动解锁功能。 情景B：手机页面的纵向浏览功能。 情景C：手机页面的横向换页功能。
作者: 小楼一夜听春语分类: Axure教程发布时间: 2013-07-31 12:00 ?6没有评论编辑今天是axure rp6.5新手教程的最后一节了，写了这么长时间，也不知道给大家帮上忙 了吗？在这最后一节，把之前没有讲的两个特殊函数说一说。至于在这20章教程里面没有 写到的东西，将会在axure7.0的教程里慢慢补全，敬请期待！ 本教程案例原型下载：小楼axure 图文教程（二十）动态面板拖动效果（函数DragX， DragY） 今天的教程示例如下： 如图，是通过拖动任意一个面板，让另外一个面板镜像移动。 看似有些复杂的效果，其实非常简单就实现了。 首先介绍两个函数： DragX：获取被拖动面板左右瞬时挪动的距离； DragY：获取被拖动面板上下瞬时挪动的距离； 我们只需要在两个动态面板里各写上两个动作就好了。 左面的面板，我们当面板拖动时，将它设置为拖动状态，这样就能随意拖动了； 然后，让左面面板拖动的时候，右面的面板移动相对距离，因为我们是让两个面板上下 方向（Y轴）同方向移动，而左右方向（X轴）朝相反的方向移动。所以在相对距离里面X
轴我们要把DragX前面加上负号，这样就是反方向移动了。Y轴就直接获取DragY的函数值就可以了。 同理，我们在右边的面板上，也写上这两个动作，这样拖动右面板的的时候左面板也镜像移动了。
好了，让我们看看效果！ 呵呵，axure 6.5教程完结，这周末之前，axure7.0教程就要开始和大家见面了，敬请期待！ 我一定会回来的！！！！！！！！！！！！ 本文出自诉客?产品经理的心声，转载时请注明出处及相应链接。
Axure rp 6.5 软件基础入门
把目前写的文章都目录整理了一下，方便各位查看，希望各位也给微博转转！ 给你推荐一条微博： - //@非原型_不设计:#非原型不设计# 想学axure的朋友们，还在找axure6.5版本的教程吗，全部在这里，没有太多高深的变量和交互应用，却是最实际的入门教程，不断更新，希望大家喜欢！ - 原文地址：https://www.doczj.com/doc/4118227313.html,/1776765170/yFQeBoaom 关于Axure rp的相关介绍 爱上axure的十大理由 001.Axure rp 6.5的软件安装、汉化与注册 002.认识Axure的软件界面 003. 生成网页原型的三种方法 004. 如何关闭IE浏览器在生成原型时候的安全警告 005.在chrome中使用axure生成原型的问题 006. 站点地图区域 007. 认识axure组件区域 008. 认识axure部件库中各个部件的属性 009.图片组件——axure线框图部件库介绍 010.文本面板——axure线框图部件库介绍 011.矩形、占位符组件——axure线框图部件库介绍 012.水平线、垂直线——axure线框图部件库介绍 013. 图片热区——axure线框图部件库介绍 014. 文本框、文本编辑框、按钮——axure线框图部件库介绍 015. 如何安装（装载）axure组件（部件） 016. 动态面板——axure线框图部件库介绍 017. 单选按钮、复选按钮——axure线框图部件库介绍 018. 内部框架——axure线框图部件库介绍 019. 菜单组件——axure线框图部件库介绍 020.树——axure线框图部件库介绍 021.Axure自动备份功能！让意外不在可怕！ 022.axure母版（模板）区域介绍 023. axure制作项目符号列表样式 024.axure制作圆形组件——axure制作技巧 025. axure网格设置
小楼axure 图文教程（八）带遮罩层的弹出框作者: 小楼一夜听春语分类: Axure教程发布时间: 2013-07-12 22:58 ?6没有评论编辑 本文出自诉客-产品经理的心声，转载时请注明出处及相应链接。 示例原型下载：小楼Axure原创元件-带遮罩层的弹出框 实现目标： 1、点击按钮弹出带遮罩层的对话框； 2、页面上下左右滚动时，弹出的对话框水平和垂直始终居中。 实现步骤如下： 1、拖入编辑区2个矩形，并点右键—转换—转换为动态面板； 2、双击其中一个动态面板设置标签为“遮罩层”（看个人喜好随便命名），并双击状态1进入编辑；
3、点击状态1里面的矩形，设置大小与网站页面大小相同，以便完全遮盖；然后，设置矩形边框为“无”；最后设置填充色的透明度为50%（看个人喜好），并选择填充色为灰色（看个人喜好）； 4、关闭状态1编辑页面，选择另外一个动态面板，按照第2步命名并进入编辑； 5、设置里面的矩形为合适大小，并拖入一个按钮（或者矩形/文本面板）作为关闭按钮；设置按钮onclick事件为隐藏遮罩层和当前编辑的这个动态面板；
6、关闭当前的编辑页面，再次选择作为对话框的这个面板—右键—编辑选项—固定到浏览器…； 7、勾选固定到浏览器窗口，水平和垂直都选择居中，并勾选“保持在前面”； 8、拖入一个按钮（或者矩形/文本面板）到编辑区，双击输入文字“登录”；然后点右键—顺序—置于底层； 9、按着ctrl选择两个动态面板（或者挨个设置），点右键—编辑选项—设为隐藏。 10、好了，生成原型就能看到效果了。
扩展：固定到浏览器选项可以让动态面板无论页面怎么滚动，总是停留在一个位置，那么网站两侧的对联广告，或者浮在页面上的一些按钮、图片等，都能用这种方式来实现。