AXURE 学习手册

AXURE 学习手册1、部件样式编辑器 (2)2、线渐变填充实现半透明发光阴影效果 (4)3、让AXURE直接输出页面元素的PRD（产品需求说明书） (6)4、在原型中重新生成当前页面 (10)5、使用脚本扩展制作可移动可改变大小的图像和按钮形状部件 (10)1、部件样式编辑器功能简介：“部件样式编辑器”是Axure的基本功能，主要用于统一设置和自定义部件的样式。

适用场景：“部件样式编辑器”对于保持用户体验一致性非常重要，借助该功能可以统一设置部件的字体、字号、粗体、斜体、下划线、对齐、垂直对齐、上下左右边距、行路、文字颜色、填充颜色、线条颜色、线宽和线型。

例如在一个互联网网站项目中约定了不同类型的部件，或者不同功能的部件要有指定的颜色，如果不使用“部件样式编辑器”就需要记住一大堆颜色的RGB值，如果使用“部件样式编辑器”就只需要自定义名称就可以了。

使用简介：单击“线框图”菜单->“部件样式编辑器”菜单项，打开“部件样式编辑器”对话框。

对话框包含两个选项卡：“部件默认值”和“自定义”。

在“部件默认值”选项卡中用于按部件类型设置默认值。

将影响原型中所有已有的部件和未来新创建的部件。

在“自定义”选项卡中可以创建自定义部件样式。

自定义部件样式中可以包含一个或多个选中属性，要包含一个属性需要先选中属性左侧的复选框。

应用自定义样式的部件将在部件默认值的基础上应用选中的属性。

自定义部件样式将出现在“文本格式”工具栏的“默认”下拉列表框中，选中一个部件后可以在这里选择部件的样式，如果选择默认则代表使用“部件默认值”选项卡中的设置，如果选择自定义部件样式名称则代表使用“自定义”选项卡中的设置。

2、线渐变填充实现半透明发光阴影效果功能简介：“线性渐变填充”是Axure的基本功能，针对指定部件，可以设置两个或若干个颜色，每个颜色可以放在从0%到100%的任何位置，可以设置红、绿、蓝的成分以及透明度，指定填充角度后这些颜色将按指定的位置、颜色和透明度填充指定部件。

适用场景：用于按钮形状（包括矩形，占位符），表格单元格，菜单和菜单项，树节点的背景。

本例以“半透明发光阴影效果”为例演示“线性渐变填充”功能。

完成后的效果如图所示：使用简介：首先用四个“占位符”部件，编辑按钮形状，分别调整为向上三角形、向左三角形、向下三角形、向右三角形。

如图所示。

选中其中的一个三角形，例如向右三角形，设置如图所示填充效果。

其他三个三角形的设置类似，区别在于填充的角度不同，左侧的向右三角形的填充角度为0，上侧的向下三角形的填充角度为90度，右侧的向左三角形的填充角度为180度，下侧的向上三角形的填充角度为270度。

然后设置线宽为无，并把四个三角形的顶点对接到一起，如图所示。

最后把调整到比放在前面的部件稍大一圈，就得到半透明发光阴影的效果了3、让Axure直接输出页面元素的PRD（产品需求说明书）功能简介：撰写PRD（Product Requirement Document，产品需求说明书）是产品经理的重要工作之一，由于PRD在相当大的程度上起到指导开发的作用，因此在PRD的格式上常常需要按着开发的技术，此时产品经理不仅要使用Axure制作网站原型，进行交互设计，还需要单独的撰写PRD。

实际上灵活运用Axure可以直接输出PRD。

在本例中以基于Zend Framework开发项目时撰写PRD中的格式较验为例讲解如何让Axure直接输出PRD。

生成的PRD如图所示。

使用简介：Zend Framework支持的较验规则参见：/manual/1.11/en/zend.validate.set.html这些较验规则可以分解成如下方式描述：1.必填，对应于notempty2.格式1.仅限于字母数字，对应于alnum2.仅限于字母，对应于alpha3.条形码，对应于barcode4.信用卡卡号，对应于creditcard5.日期，对应于date6.纯数字，对应于digits7.电子邮件地址，对应于emailaddress8.浮点数，对应于float9.十六进制，对应于hex10.域名，对应于hostname11.国际银行标准帐号，对应于iban12.整数，对应于int13.IP地址，对应于ip14.国际标准图书编号，对应于isbn15.邮政编码，对应于postcode16.正则表达式，对应于regex17.18.自定义，对应于callback允许空白，对应于alnum或alpha中的allowwhitespace选项大于，对应于greaterthan和between小于，对应于lessthan和between最小长度，对应于stringlength的min属性最大长度，对应于stringlength的max属性在Axure RP Pro中单击“线框图”菜单中的“自定义标注字段和视图”菜单项，打开“自定义标注字段和视图”对话框，创建“必填”，“格式”，“允许空白”，“大于”，“小于”，“最小长度”，“最大长度”标注字段，如图所示。

进入“自定义标注字段和视图”对话框的“视图”选项卡，创建“格式较验”视图，添加“必填”，“格式”，“允许空白”，“大于”，“小于”，“最小长度”，“最大长度”标注字段，如图所示。

在线框图中放置一个文本框部件，在“部件属性”边栏的“标注”选项卡中按如图所示填写。

按F6生成的规格说明书将具有如前图所示的效果。

4、在原型中重新生成当前页面适用场景：∙对页面进行小范围的修改时，希望能快速看到展示效果，特别是在使用Axure制作高度保真的页面时，需要进行大量的微调∙在撰写PRD（Product Requirement Document，产品需求文档）时，Axure直接输出的规格说明书不符合要求，就需要手工截取原型中的局部效果粘贴到文档中，由于线框图效果和浏览器的效果不完全相同，或者需要截图某个交互效果，就希望能快速在浏览器中显示正在设计中的线框图，然后截取局部效果图使用简介：1.在Axure中单击“生成”菜单中的“原型”菜单项，或者按F5快捷键。

打开“生成原型”对话框，然后生成原型，将在浏览器中打开原型2.在浏览器中保持打开原型页面3.在Axure中修改了某个页面之后，单击“生成”菜单中的“在原型中重新生成当前页面”菜单项，或者按Ctrl + F5快捷键将重新生成打开的页面。

注意：Axure并不会在浏览器中打开这个页面4.在浏览器的原型页面左侧的树形列表中，单击该页面的链接，将在窗口右侧中显示更新后的效果5、使用脚本扩展制作可移动可改变大小的图像和按钮形状部件注意∙本部件基于Axure的“脚本扩展”插件，在使用前请确认已安装“脚本扩展”插件∙关于“脚本扩展”插件的详细信息请见：/viewthread.php?tid=539∙安装“脚本扩展”插件的方式参见：/viewthread.php?tid=541∙对于“脚本扩展”插件的使用者，仅需要如同使用普通的Axure部件库一样∙对于“脚本扩展”插件的开发者，还需要掌握HTML DOM模型，JavaScript脚本，正则表达式，jQuery 库，jQuery UI库∙下面会列出本文涉及到的“脚本扩展”插件技术以及Axure原型中的HTML DOM模型和JavaScript脚本，不包含通用的知识，例如jQuery的函数说明∙本部件目前尚无保存移动后的位置和改变后的大小的功能，请在调整后自行截图用途∙基本功能：图像部件和按钮形状部件在运行“脚本扩展”后，可以在页面上自由拖动图像部件和按钮形状部件，也可以自由改变图像部件和按钮形状部件的尺寸∙适用场景：特别适用于项目前期需要和客户讨论页面布局的场合本文涉及到的“脚本扩展”插件技术1.unitId变量，用于识别当前部件在原型中的编号复制代码本文涉及到的Axure原型中的HTML DOM模型和JavaScript脚本1.var frame$ = $('#mainFrame')[0].contentWindow.$;//用于取得页面在原型中的框架的jQuery对象2.var img = frame$('#u' + unitId + '_img');//用于取得当前部件的图像元素。

仅适用于图像部件和按钮形状部件3.var container = frame$('#u' + unitId + '_container');//用于取得当前部件的显示容器。

仅适用于图像部件和按钮形状部件4.var ann = frame$('#u' + unitId + 'ann');//用于取得当前部件的标注标记5.var element = frame$('#u' + unitId);//用于取得当前部件复制代码源代码1.var frame$ = $('#mainFrame')[0].contentWindow.$;2.var img = frame$('#u' + unitId + '_img');3.var container = frame$('#u' + unitId + '_container');4.var ann = frame$('#u' + unitId + 'ann');5.var element = frame$('#u' + unitId);6.var imgsrc = img.css('background-image').match(/\/([^\/]*\/[^\/]*png)/);7.imgsrc = imgsrc[1];8.container.hide();9.ann.hide();10.element.attr('src', imgsrc).resizable().parent().draggable();复制代码下载∙请在此/viewthread.php?tid=541下载.rplib部件库，本文对应于部件库中的“可拖放可调整大小的图像部件”，“可拖放可调整大小的按钮形状部件”∙请在此/resizable/体验使用效果。