AxureRP8实战手册.docx
《AxureRP8实战手册.docx》由会员分享，可在线阅读，更多相关《AxureRP8实战手册.docx（41页珍藏版）》请在冰点文库上搜索。
AxureRP8实战手册
AxureRＰ８实战手册
新手必须掌握得基础操作:
本篇包含５6种常见得基础操作,初学者应在掌握本篇内容后再进行实战案例篇得学习,以免产生学习障碍。
同时,建议具备一定基础得读者学习本篇中相对生疏得内容,并加以掌握。
一Axuｒe8.0基础教程（１-1０）
***＊＊****＊＊****＊＊＊＊＊＊＊*****＊**＊*＊**本文目录*＊*＊＊＊＊*＊＊＊*＊****＊＊＊*＊＊＊*＊*＊＊*＊＊＊**
第1章使用元件
基础１。
添加元件到画布
基础2。
添加元件名称
基础３.设置元件位置/尺寸
基础4.设置元件默认角度
基础5。
设置元件颜色与透明
基础6、 设置形状或图片圆角
基础7.设置矩形仅显示部分边框
基础8.设置线段/箭头/边框样式
基础9、设置元件文字边距/行距
基础１0。
设置元件默认隐藏
*＊＊＊*＊＊＊＊＊＊＊**＊＊*＊＊＊**＊＊＊**＊**＊＊＊***正文＊＊**＊＊***＊*＊＊*＊*＊＊*＊＊＊*＊＊**＊***＊*＊＊*
第1章使用元件
基础1. 添加元件到画布
在左侧元件库中选择要使用得元件,按住鼠标左键不放,拖动到画布适合得位置上松开。
（图1-１）
基础2、 添加元件名称
在检视面板得元件名称文本框中输入元件得自定义名称,建议采用英文命名、
建议格式:
ＰａssｗordＩnｐut０1或Passwoｒd０1
名称含义:
序号０1得密码输入框
格式说明:
“Password”表示主要用途;“Iｎpｕt”表示元件类型,一般情况下可省略,当有不同类型得同名元件需要区分或名称不能明确表达用途得时候使用;“01”表示出现多个同名元件时得编号;单词首字母大写得书写格式便于阅读、（图1-2）
基础3、 设置元件位置/尺寸
元件得位置与尺寸可以通过鼠标拖拽调整,也可以在快捷功能或元件样式中进行输入调整。
（图1—3）
ｘ:
指元件在画布中得x轴坐标值。
y:
指元件在画布中得y轴坐标值。
w:
指元件得宽度值、
h:
指元件得高度值。
在输入数值调整元件尺寸时,可以在样式中设置,让元件【保持宽高比例】、（图1-4）
基础4. 设置元件默认角度
方式一:
选择需要改变角度得元件,按住〈Ctrｌ＞键得同时,用鼠标拖动元件得节点到合适得角度。
（图1-5）
方式二:
在元件样式中进行角度得设置,元件得角度与元件文字得角度可以分开设置。
（图1-5）
基础５。
设置元件颜色与透明
选择要改变颜色得元件,点击快捷功能区中得背景颜色设置按钮,选取相应得颜色,或者在元件样式中进行设置。
（图1-６）
基础６、 设置形状或图片圆角
可以通过拖动元件左上方得圆点图标进行调整,也可以在元件样式中设置圆角半径来实现。
（图1—7）
基础7. 设置矩形仅显示部分边框
在Ａxｕre ＲP8得版本中,矩形得边框可以在样式中设置显示全部或部分。
（图1－8）
基础８。
设置线段/箭头／边框样式
线段、箭头与元件边框得样式可以在快捷功能或者元件样式中进行设置。
（图1—９）
基础９. 设置元件文字边距/行距
在元件样式中可以设置元件文字得【行间距】与【填充】。
（图１-10）
行间距:
就是指文字段落行与行之间得空隙。
填充:
就是指文字与形状边缘之间填充得空隙、
基础1０、 设置元件默认隐藏
选择要隐藏得元件,在快捷功能或者元件样式中勾选【隐藏】选项。
（图1—１1）
二Axurｅ8.0基础教程（1１-20）
*＊*＊＊＊**＊*＊**＊＊**＊＊＊*＊＊＊*＊＊**＊＊＊＊*＊本文目录*＊**＊＊**＊＊*＊＊*＊＊＊***＊＊*＊＊*＊＊*＊＊＊＊＊*
基础11。
设置文本框输入为密码
基础12、设置打开选择文件窗口
基础13。
限制文本框输入字符位数
基础14。
设置文本框提示文字
基础15、设置文本框回车触发事件
基础16.设置元件鼠标移入得提示
基础１７、设置矩形为其她形状
基础18、设置自定义形状
基础19。
设置形状水平/垂直翻转
基础20、设置列表框得内容
*＊＊**＊＊＊＊＊*＊*＊***＊＊＊＊＊**＊＊*＊＊＊***＊*＊正文*＊＊*＊＊**＊＊＊＊****＊**＊＊**＊*＊＊＊****＊*＊＊
基础１１。
设置文本框输入为密码
文本框属性中选择文本框得｛类型｝为【密码】。
（图1-12）
基础12. 设置打开选择文件窗口
文本框属性中选择文本框得｛类型｝为【文件】,即可在浏览器中变成打开选择本地文件得按钮、该按钮样式各浏览器略有不同、（图１-1３）
基础13、 限制文本框输入字符位数
在文本框属性中输入文本框得{最大长度}为指定长度得数字。
（图１—１４）
基础１4、 设置文本框提示文字
在文本框属性中输入文本框得{提示文字}。
提示文字得字体、颜色、对齐方式等样式可以点击【提示样式】进行设置。
（图１—1５）
提示文字设置包含{隐藏提示触发}选项,其中:
输入:
指用户开始输入时提示文字才消失。
获取焦点:
指光标进入文本框时提示文字即消失、
基础１5、 设置文本框回车触发事件
文本框回车触发事件就是指在文本框输入状态下按＜回车>键,可以触发某个元件得【鼠标单击时】事件。
只需在文本框属性中{提交按钮｝得列表中选择相应得元件即可。
（图1—１6）
基础16、 设置鼠标移入元件时得提示
在文本框属性中{元件提示｝中输入提示内容即可、（图1—１７）
基础17. 设置矩形为其她形状
在画布中点击矩形右上方圆点图标即可打开形状列表,设置为其它形状。
（图1—18）
基础18。
设置自定义形状
在形状上点击〈鼠标右键>,在菜单中选择【转换为自定义形状】,即可对形状进行编辑。
也可以通过点击形状右上角得圆点图标,在打开得形状选择列表中选择【转换为自定义形状】（图1-18）。
具体得编辑操作见图1-1９中得标注。
基础1９. 设置形状水平/垂直翻转
在形状得属性中可以对形状进行【水平翻转】与【垂直翻转】得操作。
（图1—20）
基础２0. 设置列表框得内容
下拉列表框与列表框都可以设置内容-列表项。
可以通过【属性】—【列表项】得选项来设置,也可以通过鼠标双击元件进行设置、（图1-21）
三Axure8.0基础教程（21-30）
*＊**＊＊＊*＊＊**＊＊*＊＊＊＊＊*＊＊＊**＊＊＊＊＊＊＊＊＊本文目录**＊＊＊＊＊＊*＊*＊*******＊＊***＊＊**＊＊＊＊＊**
基础21、设置元件默认选中／禁用
基础2２、设置单选按钮唯一选中
基础23、设置元件不同状态时得样式
基础24.设置图片文本
基础25、切割／裁剪图片
基础26. 嵌入多媒体文件/页面
基础27、调整元件得层级
基础2８。
组合/取消组合元件
基础29. 转换元件为图片
基础３0、载入元件库
＊＊＊***＊＊＊＊*＊*＊**＊＊＊****＊＊＊＊**＊**＊＊*＊正文*＊＊＊*＊**＊***＊＊＊＊***＊＊＊＊＊*＊***＊****＊*
基础2１. 设置元件默认选中/禁用
元件得属性中可以对一些元件得默认状态进行设置,可以设置得状态包括【选中】与【禁用】,默认状态得设置,可以触发属性中设置得交互样式。
比如设置某个元件在浏览器中默认为禁用得灰色,就需要勾选【禁用】（复选框）,并设置【禁用】得交互样式。
（图1—22）
除了禁用与选中个别元件还具有【只读】得设置、例如:
文本框与多行文本框、
基础22、 设置单选按钮唯一选中
全选所有得单选按钮,在元件属性中{设置单选按钮组名称},即可实现唯一选中得效果。
（图1—23）
基础23。
设置元件不同状态得交互样式
点击元件属性中各个交互样式得名称,即可设置元件在不同状态时呈现得样式。
这些样式在交互被触发时,就会显示出来。
（图１－2４）比如设置元件默认状态为禁用,在浏览原型时,页面打开后就会显示该元件被禁用得样式。
（图1—2２）
基础2４、 设置图片文本
设置图片文本需要在图片上点击＜鼠标右键＞,选择【编辑文本】,方可进行图片上得文字编辑。
（图１－2５）
基础2５、 切割/裁剪图片
在图片得元件属性中,设有切割与裁剪功能得图标,点击即可使用相应功能。
元件上点击〈鼠标右键＞,菜单中也有相应得选项。
（图１—26）
切割:
可将图片进行水平与垂直得切割,将图片分割开。
裁剪:
可将图片中得某一部分取出。
裁剪分为几种,分别就是裁剪、剪切、与复制。
其中:
裁剪只保留被选择得区域;剪切就是将选取得部分从原图中剪切到系统剪贴板中;复制就是将选取得部分复制到系统剪贴板中,复制得方式对原图没有影响。
基础２6。
嵌入多媒体文件／页面
基本元件中得内联框架可以插入多媒体文件与网页、双击元件或者在属性中点击【框架目标页面】,在弹出得界面中选择【链接到urｌ或文件】,填写{超链接},内容为多媒体文件得地址（网络地址或文件路径）或网页地址。
在这个界面中也可以选择嵌入原型中得某个页面。
（图1－2７）
图中嵌入得优酷视频地址:
基础27. 调整元件得层级
元件得层级可以通过点击快捷功能中得图标或者右键菜单得【顺序】选项进行调整,也可以在页面内容概要中通过拖动进行调整。
概要中层级顺序为由上至下,最底部得元件为最顶层。
（图1—28）
基础28、 组合/取消组合元件
通过快捷功能图标或右键菜单可以将多个元件组合到一起,达到共同移动/选取/添加交互等操作。
组合／取消组合得快捷键为＜Cｔrｌ Ｇ>键／键。
（图1-２９）
基础29、 转换元件为图片
形状/文本标签/线段等元件可以通过点击〈鼠标右键〉,选择将元件【转换为图片】。
例如,使用少量特殊字体或者图标字体时,即可将元件转换为图片,避免在未安装字体得设备上浏览原型时不能正常显示、（图1-30）
基础30、 载入元件库
除了使用软件自带得默认元件库与流程图元件库,用户还可以加载自定义元件库、加载自定义元件库只需点击功能图标,在列表中选择【载入元件库】。
（图1—31）
四Axure8、０基础教程（31-40）
＊＊＊**＊*＊**＊*＊＊＊＊＊*＊**＊***＊*＊＊＊＊*＊*＊本文目录*＊＊＊*＊＊＊*＊＊＊**＊＊＊**＊＊*＊＊*＊＊*＊＊*＊＊*＊
基础31。
切换元件库
第２章页面设置
基础32。
设置页面居中
基础33、设置页面背景（图片/颜色）
基础3４。
设置页面颜色（草图/黑白）
第3章 设置条件
基础35、 添加条件判断
基础36.设置条件限制
基础37、用例条件转换
第4章使用变量/公式
基础38。
全局变量设置
基础３9。
局部变量设置
基础40.公式得格式及类型
*＊＊＊＊＊*＊＊＊**＊＊**＊**＊＊*＊＊*＊*＊*＊＊＊*＊＊＊正文*＊＊＊＊＊＊＊＊＊＊＊*＊*＊＊＊**＊＊＊＊**＊*＊**＊**＊＊
基础31、 切换元件库
在元件库功能面板中,可以通过点击元件库列表,选择不同得元件库进行使用、（图1-3２）
第2章 页面设置
基础3２。
设置页面居中
在页面【样式】设置中选择页面居中得按钮。
页面居中就是指在浏览器中查瞧原型时页面内容居中显示。
（图2—１）
基础33、 设置页面背景（图片／颜色）
在页面【样式】中可以编辑页面得背景颜色以及背景图片、（图2—2）
基础３4。
设置页面颜色（草图／黑白）
在页面得【样式】中,可以将当前页面得显示为草图效果,同时可以将页面颜色在彩色与黑白之间转换。
（图2—3）
第3章 设置条件
基础35。
添加条件判断
在用例编辑界面中点击添加【条件按钮】进行添加条件。
（图3-1）
比如:
判断当前元件上得文字包含“＠”。
（图3—2）
基础３6、 设置条件逻辑关系
设置执行一个动作必须同时满足多个条件,或者仅需满足多个条件中得任何一个,需要在添加条件得界面中进行设置。
（图3-3）
基础37. 用例条件转换
为多个用例改变条件判断关系时,只需要在相应得用例名称上点击＜鼠标右键>,选择【切换为或】。
（图3-4）
第4章 使用变量/公式
基础38. 全局变量设置
全局变量就是一个数据容器,就像一个Ｕ盘,可以把需要得资料存入,随身携带,在需要得时候读取出来使用、全局变量得设置在【项目】—【全局变量】中。
（图４－１）
基础39。
局部变量设置
局部变量在编辑值／文本得界面中进行创建,通过在【插入变量或函数…】列表中选取使用、
局部变量能够在创建时获取多种类型得数据、（图4—2）
基础４0。
公式得格式及类型
公式在编辑值/文本得界面中进行编辑,格式为“[［公式内容]］”、公式内得内容可以进行运算,例如:
“[［3＊15］]”获取得结果为“45”;公式运算结果自动与公式外得内容连接到一起,形成一个字符串,例如:
“[[3*１5]］个”获取得“45个”、变量与函数需要在写入在公式得“[［]］"中才能够正确获取变量值或者函数运算结果。
（图4－３）
五Axｕre8.0基础教程（４１-50）
＊**＊＊*＊＊*＊＊＊＊＊**＊**＊**＊＊*＊*＊＊＊***＊*本文目录*＊*＊**＊＊*＊*＊*＊*＊＊＊**＊＊＊*＊＊*＊＊*＊＊＊**
第5章功能设置
基础41。
设置形状并排显示细边框
基础42、设置画布中得遮罩阴影
基础４3、显示/隐藏交互与说明编号
基础4４。
显示/隐藏两侧得功能面板
基础45、展开/收起／弹出/停靠功能面板
基础４6.关闭/恢复功能面板
基础47、文件备份与恢复
基础4８、设置自适应视图
第６章查瞧原型
基础49。
快速预览查瞧原型
基础50、 生成ＨＴML查瞧原型
*＊*＊＊＊*＊*＊＊＊*＊＊**＊*＊＊*＊＊***＊＊＊*＊＊*＊*正 文＊**＊＊*＊*＊＊***＊**＊*＊＊＊＊*＊*****＊＊＊＊**＊
第5章 功能设置
基础４1。
设置形状并排显示细边框
在【菜单】—【项目】得选项列表中,选择【项目设置】;在弹出得面板中进行｛边界对齐｝得设置。
选择【边框重合】时,两个形状中间得边框为细边框;选择【边框并排】时,两个形状中间得边框为粗边框。
（图5—1）
基础42、 设置画布中得遮罩阴影
在【菜单】－【视图】—【遮罩】得选项列表中,取消相应得勾选。
比如画布中隐藏得元件不显示淡黄色得阴影,则取消【隐藏对象】得勾选、（图５—2）
基础４3。
显示/隐藏交互与说明编号
在【菜单】-【视图】得选项列表中,取消【显示脚注】得勾选、（图5—3）
基础44。
显示／隐藏两侧得功能面板
点击快捷功能中得图标即可关闭开启相应得功能面板。
（图5—４）
基础４５。
展开/收起/弹出/停靠／关闭功能面板
如果某个功能面板需要更大得操作空间,可以将其弹出或者收起其它面板、当完成操作后再进行还原、面板弹出后可将其关闭。
（图5—５）
基础46、 关闭／恢复功能面板
面板可以在弹出状态下点击【×】将其关闭（图5-5）,也可以在【视图】-【功能区】菜单中进行关闭或开启。
如果需要将功能区所有面板恢复默认。
可以在【视图】中通过【重置视图】来完成。
（图5—６）
基础47. 文件备份与恢复
开启软件得自动备份功能,可以有效得帮助我们降低因误操作、软件崩溃、断电等异常时,未保存或者损坏文件得风险。
文件得备份与恢复在【文件】菜单中进行相关操作。
（图5－7）
基础4８、 设置自适应视图
自适应视图就是指编辑多种分辨率得原型,设备中查瞧时,系统会根据自身分辨率,自动与分辨率相适合得原型进行匹配,并显示出来。
自适应视图在【项目】—【自适应视图】中进行设置、（图5-8）
第6章 查瞧原型
基础4９。
快速预览查瞧原型
预览原型得快捷键为键、或者,点击快捷功能中得预览图标进行预览。
导航菜单【发布】—【预览设置】中进行预览得设置。
（图6-１）
基础50。
生成ＨTＭL查瞧原型
生成原型得快捷键为键、或者,点击快捷功能中得生成图标,选择【生成HＴML文件】进行生成、还可以通过导航菜单【发布】－【生成HTMＬ文件…】中进行生成。
（6—２）
生成时,需要选择保存HTML文件得文件夹。
查瞧设置与预览设置相同。
（图6－３）
六Axuｒe8。
０基础教程（5１-56）
＊＊＊＊＊*＊***＊＊＊＊*＊**＊*****＊＊*＊＊＊**＊＊＊本文目录*＊＊＊****＊＊**＊**＊＊＊**＊＊＊＊＊＊＊＊＊＊*＊*＊＊
基础51。
生成部分原型页面
基础52、为原型添加标志
基础53、发布原型到AxShaｒe
基础54。
重新生成当前页面
基础5５.移动设备设置
基础5６。
Web字体设置
＊＊＊＊**＊＊****＊*＊*＊＊＊＊＊＊＊*＊＊***＊****＊＊正 文*＊*＊**＊＊*＊＊*＊＊**＊＊*＊＊＊＊****＊***＊＊＊*＊
基础51. 生成部分原型页面
发布原型时,如果不需要将所有页面生成或发布,可以在生成ＨTMＬ得设置中打开【页面】得设置,取消【生成所有页面】得勾选,则可以设置生成指定得页面、注意,子级页面无法单独发布,勾选子级页面时会自动勾选父级页面。
如果需要单独发布子级页面,需要在页面管理面板中将子级页面得级别调整到一级页面、（图6-4）
基础5２. 为原型添加标志
在生成HTML得设置中有【标志】得设置,可以为原型添加图片标识或文字标题。
原型发布后会显示在工具栏得页面面板中。
（图6-５）
基础５3。
发布原型到AxShare
发布原型到AｘShａｒe就是指将做好得原型发布到Aｘｕre官方提供得空间中,通过自动生成得网址进行访问。
发布到AxShａｒe得快捷键为键。
发布到AxＳｈａre需要预先注册AxurｅＳhare账号,注册地址:
、（图6－6）
发布完成后,将会自动生成一个网址。
可以通过在PC或手机浏览器中打开该网址查瞧原型。
（图6－7）
基础5４。
重新生成当前页面
修改某个页面无需将整个原型HTＭＬ文件都重新生成一遍,只需要在【发布】得选项列表中,选择【在ＨTML文件中重新生成当前页面】即可、（图6—8）
基础５5。
移动设备设置
制作移动设备原型需要遵循规范将原型制作成标准尺寸、移动设备原型尺寸计算工具:
（个别移动设备可能会有出入,仅供参考！
）
除了制作成标准原型尺寸,还需要在生成HTML文件配置中,进行【移动设备】得设置,让生成得HTMＬ文件【包含视口标签】,这样才能够正常显示。
（图6-9）
基础５６、 Weｂ字体设置
当原型使用一些特殊字体时,在没有安装该字体得设备上将无法正常显示。
Wｅb字体可以较好地解决这个问题。
Weｂ字体得使用包含两种方式、
方式一、链接“.CＳS”文件（图6—１0）
优点:
设置简单。
缺点:
需要网络以及在线ＣSS文件支持。
以FｏntAwｅsoｍｅ字体为例。
在Web字体设置中,点击【】添加新得配置,勾选【链接到“。
CSS”文件】选项,将该字体官方网站提供得“.CSS”文件地址填入超链接中即可。
这样只要浏览原型时有网络支持,即可正常显示字体。
图中为Fontａweｓome4.4、０字体得配置方法、该字体CSＳ文件得官方链接地址为:
方式二、fｏnt－facｅ（图6—1１）
优点:
支持本地字体与在线字体
缺点:
设置略有复杂
仍以FoｎｔAweｓoｍe字体为例。
新建Web字体配置后,选择【fonｔ－face选项】并填写代码。
在线字体代码如下:
ｆont－familｙ:
FｏｎtAwesome;
ｓrc:
urｌ（\'\’）fｏrｍat（\’ｔruetype\’）;
本地字体代码如下:
font-fａmily:
FontAwesoｍｅ;
ｓrc:
url（＼'fontawesｏme—webfonｔ。
ｔtf \'）formaｔ（＼’trｕｅtype\’）;
注意:
使用本地字体需要将字体文件（、tｔf）拷贝到生成得ＨＴML文件夹中。
通过以上方式处理后,未安装该字体得设备中查瞧原型时即可正常显示字体。
注意:
在AxｕrｅRP8得元件库中,提供了FontAwesoｍe图标元件库,该元件库可以直接使用,无需进行上述设置、但就是,官方提供得FonｔAｗesｏme图标元件库与上述元件库有很大区别,官方元件库中得图标并不就是文字,而就是形状。
在之后得案例中,我们需要将一些图标字体放入文本编辑界面进行编辑,这就是官方元件无法做到得。
升级会员 