AXURE 学习手册Word格式文档下载.docx

1、“部件样式编辑器”菜单项，打开“部件样式编辑器”对话框。对话框包含两个选项卡：“部件默认值”和“自定义”。在“部件默认值”选项卡中用于按部件类型设置默认值。将影响原型中所有已有的部件和未来新创建的部件。下载 （62.37 KB）2011-5-11 14:39在“自定义”选项卡中可以创建自定义部件样式。自定义部件样式中可以包含一个或多个选中属性，要包含一个属性需要先选中属性左侧的复选框。应用自定义样式的部件将在部件默认值的基础上应用选中的属性。下载 （64.28 KB）自定义部件样式将出现在“文本格式”工具栏的“默认”下拉列表框中，选中一个部件后可以在这里选择部件的样式，如果选择默认则代表使用“

2、部件默认值”选项卡中的设置，如果选择自定义部件样式名称则代表使用“自定义”选项卡中的设置。下载 （838 Bytes）2、 线渐变填充实现半透明发光阴影效果“线性渐变填充”是Axure的基本功能，针对指定部件，可以设置两个或若干个颜色，每个颜色可以放在从0%到100%的任何位置，可以设置红、绿、蓝的成分以及透明度，指定填充角度后这些颜色将按指定的位置、颜色和透明度填充指定部件。用于按钮形状（包括矩形，占位符），表格单元格，菜单和菜单项，树节点的背景。本例以“半透明发光阴影效果”为例演示“线性渐变填充”功能。完成后的效果如图所示：下载 （207.56 KB）2011-5-12 18:22首先用四

3、个“占位符”部件，编辑按钮形状，分别调整为向上三角形、向左三角形、向下三角形、向右三角形。如图所示。下载 （20.01 KB）选中其中的一个三角形，例如向右三角形，设置如图所示填充效果。下载 （9.87 KB）其他三个三角形的设置类似，区别在于填充的角度不同，左侧的向右三角形的填充角度为0，上侧的向下三角形的填充角度为90度，右侧的向左三角形的填充角度为180度，下侧的向上三角形的填充角度为270度。然后设置线宽为无，并把四个三角形的顶点对接到一起，如图所示。下载 （12.48 KB）最后把调整到比放在前面的部件稍大一圈，就得到半透明发光阴影的效果了3、 让Axure直接输出页面元素的PRD（

4、产品需求说明书）撰写PRD（Product Requirement Document，产品需求说明书）是产品经理的重要工作之一，由于PRD在相当大的程度上起到指导开发的作用，因此在PRD的格式上常常需要按着开发的技术，此时产品经理不仅要使用Axure制作网站原型，进行交互设计，还需要单独的撰写PRD。实际上灵活运用Axure可以直接输出PRD。在本例中以基于Zend Framework开发项目时撰写PRD中的格式较验为例讲解如何让Axure直接输出PRD。生成的PRD如图所示。4、 下载 （6.03 KB）5、 2011-5-21 21:33Zend Framework支持的较验规则参见：这些

5、较验规则可以分解成如下方式描述：1. 必填，对应于notempty2. 格式1. 仅限于字母数字，对应于alnum2. 仅限于字母，对应于alpha3. 条形码，对应于barcode4. 信用卡卡号，对应于creditcard5. 日期，对应于date6. 纯数字，对应于digits7. 电子邮件地址，对应于emailaddress8. 浮点数，对应于float9. 十六进制，对应于hex10. 域名，对应于hostname11. 国际银行标准帐号，对应于iban12. 整数，对应于int13. IP地址，对应于ip14. 国际标准图书编号，对应于isbn15. 邮政编码，对应于postcod

6、e16. 正则表达式，对应于regex17. 18. 自定义，对应于callback 允许空白，对应于alnum或alpha中的allowwhitespace选项 大于，对应于greaterthan和between 小于，对应于lessthan和between 最小长度，对应于stringlength的min属性 最大长度，对应于stringlength的max属性在Axure RP Pro中单击“线框图”菜单中的“自定义标注字段和视图”菜单项，打开“自定义标注字段和视图”对话框，创建“必填”，“格式”，“允许空白”，“大于”，“小于”，“最小长度”，“最大长度”标注字段，如图所示。下载 （5

7、3.39 KB）2011-5-21 21:进入“自定义标注字段和视图”对话框的“视图”选项卡，创建“格式较验”视图，添加“必填”，“格式”，“允许空白”，“大于”，“小于”，“最小长度”，“最大长度”标注字段，如图所示。下载 （43.78 KB）2011-5-21 21:在线框图中放置一个文本框部件，在“部件属性”边栏的“标注”选项卡中按如图所示填写。下载 （13.99 KB）2011-5-21 21:33按F6生成的规格说明书将具有如前图所示的效果。4、 在原型中重新生成当前页面 对页面进行小范围的修改时，希望能快速看到展示效果，特别是在使用Axure制作高度保真的页面时，需要进行大量的微调

8、 在撰写PRD（Product Requirement Document，产品需求文档）时，Axure直接输出的规格说明书不符合要求，就需要手工截取原型中的局部效果粘贴到文档中，由于线框图效果和浏览器的效果不完全相同，或者需要截图某个交互效果，就希望能快速在浏览器中显示正在设计中的线框图，然后截取局部效果图1. 在Axure中单击“生成”菜单中的“原型”菜单项，或者按F5快捷键。打开“生成原型”对话框，然后生成原型，将在浏览器中打开原型2. 在浏览器中保持打开原型页面3. 在Axure中修改了某个页面之后，单击“生成”菜单中的“在原型中重新生成当前页面”菜单项，或者按Ctrl + F5快捷键将

9、重新生成打开的页面。注意：Axure并不会在浏览器中打开这个页面4. 在浏览器的原型页面左侧的树形列表中，单击该页面的链接，将在窗口右侧中显示更新后的效果5、 使用脚本扩展制作可移动可改变大小的图像和按钮形状部件注意 本部件基于Axure的“脚本扩展”插件，在使用前请确认已安装“脚本扩展”插件 关于“脚本扩展”插件的详细信息请见：http:/bbs.hpx-party.org/viewthread.php?tid=539 安装“脚本扩展”插件的方式参见：tid=541 对于“脚本扩展”插件的使用者，仅需要如同使用普通的Axure部件库一样 对于“脚本扩展”插件的开发者，还需要掌握HTML DO

10、M模型，JavaScript脚本，正则表达式，jQuery库，jQuery UI库 下面会列出本文涉及到的“脚本扩展”插件技术以及Axure原型中的HTML DOM模型和JavaScript脚本，不包含通用的知识，例如jQuery的函数说明 本部件目前尚无保存移动后的位置和改变后的大小的功能，请在调整后自行截图用途 基本功能：图像部件和按钮形状部件在运行“脚本扩展”后，可以在页面上自由拖动图像部件和按钮形状部件，也可以自由改变图像部件和按钮形状部件的尺寸 适用场景：特别适用于项目前期需要和客户讨论页面布局的场合本文涉及到的“脚本扩展”插件技术 1. unitId变量，用于识别当前部件在原型中的

11、编号复制代码本文涉及到的Axure原型中的HTML DOM模型和JavaScript脚本 1. var frame$ = $（#mainFrame）0.contentWindow.$;/用于取得页面在原型中的框架的jQuery对象2. var img = frame$（#u + unitId + _img）;/用于取得当前部件的图像元素。仅适用于图像部件和按钮形状部件3. var container = frame$（_container/用于取得当前部件的显示容器。4. var ann = frame$（ann/用于取得当前部件的标注标记5. var element = frame$（ +

12、unitId）;/用于取得当前部件源代码 6. var imgsrc = img.css（background-image）.match（/（/*/*png）/）;7. imgsrc = imgsrc1;8. container.hide（）;9. ann.hide（）;10. element.attr（src, imgsrc）.resizable（）.parent（）.draggable（）;下载 请在此 http:tid=541 下载hpx-party.org.rplib部件库，本文对应于部件库中的“可拖放可调整大小的图像部件”，“可拖放可调整大小的按钮形状部件”/open.hpx-party.org/resizable/ 体验使用效果下载 （133.66 KB）2011-6-17 16:48