AXURE 学习手册.docx
《AXURE 学习手册.docx》由会员分享，可在线阅读，更多相关《AXURE 学习手册.docx（13页珍藏版）》请在冰豆网上搜索。
AXURE学习手册
AXURE学习手册
1、部件样式编辑器2
2、线渐变填充实现半透明发光阴影效果4
3、让Axure直接输出页面元素的PRD（产品需求说明书）6
4、在原型中重新生成当前页面10
5、使用脚本扩展制作可移动可改变大小的图像和按钮形状部件10
1、部件样式编辑器
功能简介：
“部件样式编辑器”是Axure的基本功能，主要用于统一设置和自定义部件的样式。
适用场景：
“部件样式编辑器”对于保持用户体验一致性非常重要，借助该功能可以统一设置部件的字体、字号、粗体、斜体、下划线、对齐、垂直对齐、上下左右边距、行路、文字颜色、填充颜色、线条颜色、线宽和线型。
例如在一个互联网网站项目中约定了不同类型的部件，或者不同功能的部件要有指定的颜色，如果不使用“部件样式编辑器”就需要记住一大堆颜色的RGB值，如果使用“部件样式编辑器”就只需要自定义名称就可以了。
使用简介：
单击“线框图”菜单->“部件样式编辑器”菜单项，打开“部件样式编辑器”对话框。
对话框包含两个选项卡：
“部件默认值”和“自定义”。
在“部件默认值”选项卡中用于按部件类型设置默认值。
将影响原型中所有已有的部件和未来新创建的部件。
下载（62.37KB）
2011-5-1114:
39
在“自定义”选项卡中可以创建自定义部件样式。
自定义部件样式中可以包含一个或多个选中属性，要包含一个属性需要先选中属性左侧的复选框。
应用自定义样式的部件将在部件默认值的基础上应用选中的属性。
下载（64.28KB）
2011-5-1114:
39
自定义部件样式将出现在“文本格式”工具栏的“默认”下拉列表框中，选中一个部件后可以在这里选择部件的样式，如果选择默认则代表使用“部件默认值”选项卡中的设置，如果选择自定义部件样式名称则代表使用“自定义”选项卡中的设置。
下载（838Bytes）
2011-5-1114:
39
2、线渐变填充实现半透明发光阴影效果
功能简介：
“线性渐变填充”是Axure的基本功能，针对指定部件，可以设置两个或若干个颜色，每个颜色可以放在从0%到100%的任何位置，可以设置红、绿、蓝的成分以及透明度，指定填充角度后这些颜色将按指定的位置、颜色和透明度填充指定部件。
适用场景：
用于按钮形状（包括矩形，占位符），表格单元格，菜单和菜单项，树节点的背景。
本例以“半透明发光阴影效果”为例演示“线性渐变填充”功能。
完成后的效果如图所示：
下载（207.56KB）
2011-5-1218:
22
使用简介：
首先用四个“占位符”部件，编辑按钮形状，分别调整为向上三角形、向左三角形、向下三角形、向右三角形。
如图所示。
下载（20.01KB）
2011-5-1218:
22
选中其中的一个三角形，例如向右三角形，设置如图所示填充效果。
下载（9.87KB）
2011-5-1218:
22
其他三个三角形的设置类似，区别在于填充的角度不同，左侧的向右三角形的填充角度为0，上侧的向下三角形的填充角度为90度，右侧的向左三角形的填充角度为180度，下侧的向上三角形的填充角度为270度。
然后设置线宽为无，并把四个三角形的顶点对接到一起，如图所示。
下载（12.48KB）
2011-5-1218:
22
最后把调整到比放在前面的部件稍大一圈，就得到半透明发光阴影的效果了
3、让Axure直接输出页面元素的PRD（产品需求说明书）
功能简介：
撰写PRD（ProductRequirementDocument，产品需求说明书）是产品经理的重要工作之一，由于PRD在相当大的程度上起到指导开发的作用，因此在PRD的格式上常常需要按着开发的技术，此时产品经理不仅要使用Axure制作网站原型，进行交互设计，还需要单独的撰写PRD。
实际上灵活运用Axure可以直接输出PRD。
在本例中以基于ZendFramework开发项目时撰写PRD中的格式较验为例讲解如何让Axure直接输出PRD。
生成的PRD如图所示。
4、下载（6.03KB）
5、2011-5-2121:
33
使用简介：
ZendFramework支持的较验规则参见：
这些较验规则可以分解成如下方式描述：
1.必填，对应于notempty
2.格式
1.仅限于字母数字，对应于alnum
2.仅限于字母，对应于alpha
3.条形码，对应于barcode
4.信用卡卡号，对应于creditcard
5.日期，对应于date
6.纯数字，对应于digits
7.电子邮件地址，对应于emailaddress
8.浮点数，对应于float
9.十六进制，对应于hex
10.域名，对应于hostname
11.国际银行标准帐号，对应于iban
12.整数，对应于int
13.IP地址，对应于ip
14.国际标准图书编号，对应于isbn
15.邮政编码，对应于postcode
16.正则表达式，对应于regex
17.
18.自定义，对应于callback
允许空白，对应于alnum或alpha中的allowwhitespace选项
大于，对应于greaterthan和between
小于，对应于lessthan和between
最小长度，对应于stringlength的min属性
最大长度，对应于stringlength的max属性
在AxureRPPro中单击“线框图”菜单中的“自定义标注字段和视图”菜单项，打开“自定义标注字段和视图”对话框，创建“必填”，“格式”，“允许空白”，“大于”，“小于”，“最小长度”，“最大长度”标注字段，如图所示。
下载（53.39KB）
2011-5-2121:
33
进入“自定义标注字段和视图”对话框的“视图”选项卡，创建“格式较验”视图，添加“必填”，“格式”，“允许空白”，“大于”，“小于”，“最小长度”，“最大长度”标注字段，如图所示。
下载（43.78KB）2011-5-2121:
33
在线框图中放置一个文本框部件，在“部件属性”边栏的“标注”选项卡中按如图所示填写。
下载（13.99KB）2011-5-2121:
33按F6生成的规格说明书将具有如前图所示的效果。
4、在原型中重新生成当前页面
适用场景：
∙对页面进行小范围的修改时，希望能快速看到展示效果，特别是在使用Axure制作高度保真的页面时，需要进行大量的微调
∙在撰写PRD（ProductRequirementDocument，产品需求文档）时，Axure直接输出的规格说明书不符合要求，就需要手工截取原型中的局部效果粘贴到文档中，由于线框图效果和浏览器的效果不完全相同，或者需要截图某个交互效果，就希望能快速在浏览器中显示正在设计中的线框图，然后截取局部效果图
使用简介：
1.在Axure中单击“生成”菜单中的“原型”菜单项，或者按F5快捷键。
打开“生成原型”对话框，然后生成原型，将在浏览器中打开原型
2.在浏览器中保持打开原型页面
3.在Axure中修改了某个页面之后，单击“生成”菜单中的“在原型中重新生成当前页面”菜单项，或者按Ctrl+F5快捷键将重新生成打开的页面。
注意：
Axure并不会在浏览器中打开这个页面
4.在浏览器的原型页面左侧的树形列表中，单击该页面的链接，将在窗口右侧中显示更新后的效果
5、使用脚本扩展制作可移动可改变大小的图像和按钮形状部件
注意
∙本部件基于Axure的“脚本扩展”插件，在使用前请确认已安装“脚本扩展”插件
∙关于“脚本扩展”插件的详细信息请见：
http:
//bbs.hpx-party.org/viewthread.php?
tid=539
∙安装“脚本扩展”插件的方式参见：
http:
//bbs.hpx-party.org/viewthread.php?
tid=541
∙对于“脚本扩展”插件的使用者，仅需要如同使用普通的Axure部件库一样
∙对于“脚本扩展”插件的开发者，还需要掌握HTMLDOM模型，JavaScript脚本，正则表达式，jQuery库，jQueryUI库
∙下面会列出本文涉及到的“脚本扩展”插件技术以及Axure原型中的HTMLDOM模型和JavaScript脚本，不包含通用的知识，例如jQuery的函数说明
∙本部件目前尚无保存移动后的位置和改变后的大小的功能，请在调整后自行截图
用途
∙基本功能：
图像部件和按钮形状部件在运行“脚本扩展”后，可以在页面上自由拖动图像部件和按钮形状部件，也可以自由改变图像部件和按钮形状部件的尺寸
∙适用场景：
特别适用于项目前期需要和客户讨论页面布局的场合
本文涉及到的“脚本扩展”插件技术
1.unitId变量，用于识别当前部件在原型中的编号
复制代码
本文涉及到的Axure原型中的HTMLDOM模型和JavaScript脚本
1.varframe$=$（'#mainFrame'）[0].contentWindow.$;//用于取得页面在原型中的框架的jQuery对象
2.varimg=frame$（'#u'+unitId+'_img'）;//用于取得当前部件的图像元素。
仅适用于图像部件和按钮形状部件
3.varcontainer=frame$（'#u'+unitId+'_container'）;//用于取得当前部件的显示容器。
仅适用于图像部件和按钮形状部件
4.varann=frame$（'#u'+unitId+'ann'）;//用于取得当前部件的标注标记
5.varelement=frame$（'#u'+unitId）;//用于取得当前部件
复制代码
源代码
1.varframe$=$（'#mainFrame'）[0].contentWindow.$;
2.varimg=frame$（'#u'+unitId+'_img'）;
3.varcontainer=frame$（'#u'+unitId+'_container'）;
4.varann=frame$（'#u'+unitId+'ann'）;
5.varelement=frame$（'#u'+unitId）;
6.varimgsrc=img.css（'background-image'）.match（/\/（[^\/]*\/[^\/]*png）/）;
7.imgsrc=imgsrc[1];
8.container.hide（）;
9.ann.hide（）;
10.element.attr（'src',imgsrc）.resizable（）.parent（）.draggable（）;
复制代码
下载
∙请在此http:
//bbs.hpx-party.org/viewthread.php?
tid=541下载hpx-party.org.rplib部件库，本文对应于部件库中的“可拖放可调整大小的图像部件”，“可拖放可调整大小的按钮形状部件”
∙请在此http:
//open.hpx-party.org/resizable/体验使用效果
下载（133.66KB）
2011-6-1716:
48
升级会员 