AxureRP8实战手册
Axure RP 8.0函数大全 Axure函数手册用法及说明
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用途:获取元件对象的下边界坐标值。
Axure RP 8.0网站与APP原型设计从入门到精通 (6)[10页]
CSV 是一种通用的、相对简单的文件格式,被用户、商 业和科学广泛应用。最广泛的应用是在程序之间转移表格数 据,而这些程序本身是在不兼容的格式上进行操作的。因为 大量程序都支持某种CSV 变体,至少是作为一种可选择的输 入/ 输出格式。
打印生成器
打印生成器是Axure RP 中新增的生成器,是指如果需要 定期打印不同的页面或母版,可以创建不同的打印配置项, 这样就不需要每次都重新去配置打印属性。
Word 生成器
双击“管理配置文件”对话框中的“Word 生成器”选 项,弹出Generate Word Documentation (生成Word 文 档)对话框,其中的设置选项包括:常规、页面、模板、页 面属性、屏幕快照、元件素、布局、WORD模板。
第6章 项目输出
CSV 报告、打印生成器
CSV 报告生成器
生成器和配置文件
Axure RP 提供了HTML、Word、CSV 报告和打印4 种 类型的生成器:创建新的生成器、编辑生成器、重复生成器、 清除生成器。
创建多个生成器的好处如下:
可以生成一个带有说明的 HTML 原型和一个不带说明的
HTML 原型。
在大项目中生成HTML原型时,可以只生成当前工作的内
容页面,从而提高原型生成的速度。
在大项目中可以将Word 文档切分成多个部分输出,每
个部分都对应自己的应用模块。
第6章 项生成器
双击“管理配置文件”对话框中的“HTML 生成器”选 项,弹出“生成HTML ”对话框,其中包含多种设置选项: 常规、页面、页面说明、元件说明、交互、标志、Web 字体、 字体映射、移动设备、高级、讨论。
生成Word 文档
在Generate Word Documentation(生成Word 文档) 对话框中可以配置默认Word 文档生成器的选项。与生成 HTML 文档一样,也可以创建多个Word 文档生成器。根据 不同的内容,将大项目规划为多个小的Word 文档。
第Axure RP 8 交互原型设计案例教程13章
第1自适应视图
13.1 自适应视图基础
13.1.1 什么是自适应视图
简单地说,自适应视图就是页面中 的内容会自动随着浏览器窗口或者屏幕 大小的改变而自动切换到对应的页面视 图。一个比较典型的例子就是我们使用 智能手机时,通过设置自动切换为横屏 和竖屏显示时,网页中的内容会自动调 整,如图13-1 所示。
Axure RP 8 交互原型设计案例教程(微课版)
第13章
自适应视图
13.2 自适应视图事件和动作
13.2.1 自适应视图事件
图 13-10 基本视图布局
图13-11 默认“600”视图布局
Axure RP 8 交互原型设计案例教程(微课版)
第13章
自适应视图
13.2 自适应视图事件和动作
13.2.1 自适应视图事件
Axure RP 8 交互原型设计案例教程(微课版)
图 13-2 手机的自适应视图
第13章
自适应视图
13.1 自适应视图基础
13.1.2 创建自适应视图
图 13-3 勾选“启用”选项
图13-4 页面左上角出现的【管理自适应视图】按钮
Axure RP 8 交互原型设计案例教程(微课版)
第13章
自适应视图
图 13-12 调整后的“600”视图布局 图 13-13 调整后的“1024”视图布局
Axure RP 8 交互原型设计案例教程(微课版)
第13章
自适应视图
13.2 自适应视图事件和动作
13.2.1 自适应视图事件
(5)将中间的矩形命名为“提示”,在【属性】子面板中双击【自适应视图改变时】事件,在 打开的【用例编辑】对话框中添加【设置文本】动作,在【配置动作】栏中选择“提示”元件,单 击右下角的【fx】按钮,在打开的【编辑文本】对话框中添加表示当前窗口宽度和高度的两个函数, 如图13-14 所示。
Axure RP 8交互原型设计案例教程第7章 事件
Axure RP 8 交互原型设计案例教程
第7章
事件
7.2 元件事件
7.2.1 事件类型
图 7-8 元件的事件
Axure RP 8 交互原型设计案例教程
图7-9 页面的事件
第7章
事件
7.2 元件事件
7.2.2 元件事件详解
元件事件包含的内容很多,不同元件包含的事件内容也会有所不同。图7-10 列出了普通图形、 群组对象、单选按钮以及表格元件的事件,其中,普通图形元件中的事件内容最多。
图 7-2 添加事件
Axure RP 8 交互原型设计案例教程
第7章
事件
7.1 交互基础
7.1.2 一分钟学会交互 (3)在弹出的【用例编辑】对话框中单击“打开链接”左侧的三角标志展开隐藏的动作,单击 “当前窗口”,在【配置动作】栏中的“超链接”文本框中输入网址“”, 如图7-3 所示。
Axure RP 8 交互原型 设计案例教程
第7章
事件
第7章
事件
7.1 交互基础
7.1.1 交互三要素
Axure RP 中的交互就是指把静态线框图变成可用鼠标单击的交互式HTML 原型的功能。一 个完整的Axure RP 交互通常是由三部分内容构成的。 ������ 什么情况下发生交互? ������ 在什么地方发生交互? ������ 交互将产生什么结果? 例如,在网页浏览器中单击网页中的某个文本链接时,画面会切换到另一个网页中,如图7-1 所示。 这是一个非常简短但非常完整的交互。具体分析如下。 该交互是在什么情况下发生的?是在鼠标单击时发生的。 又是在什么地方发生的交互?是在文本上发生的。 这个交互产生了什么样的结果?结果就是画面跳转到了另一个页面。
第7章
Axure RP 8交互原型设计案例教程第10章 表单
图 10-8 多行文本框
图10-9 多行文本框 用于搜集建议和意见
Axure RP 8 交互原型设计案例教程
第10章
表单
10.2 管理表单
10.2.3 下拉列表框
下拉列表框从外观上看有点像文本框,但是下拉列表框只能允许用户从列表中选择某个选项, 而无法填写信息。该元件一般用于选择某项信息。例如,选择用户的籍贯或者出生日期等,如图 10-10所示。向下拉列表框中添加数据的方法是:选择下拉列表框后,在【属性】子面板中单击 “列表项”超链接,如图10-11 所示。
图 10-10 下拉列表
Axure RP 8 交互原型设计案例教程
图10-11 【列表项】超链接
第10章
表单
10.2 管理表单
10.2.3 下拉列表框
在打开的【编辑列表选项】对话框中单击【添加】按钮,即可添加一个列表项,如图10-12 所示。如果要同时添加多个列表项,则可以单击【添加多个】按钮,在弹出的对话框中输入 一个列表项后,按回车键换行再输入第二个列表项,重复此操作就可以添加多个列表项了,如图 10-13所示。
Axure RP 8 交互原型 设计案例教程
第10章
表单
第10章
表单
10.1 表单基础
10.1.1 认识表单元件
在默认的元件库中专门有一类表单元件,如图10-1 所示。
图 10-1 表单元件库
Axure RP 8 交互原型设计.1 表单基础
10.1.2 创建表单元件
表单元件与其他元件的创建方法相同,只要用鼠标将相应的表单元件拖曳到页面中即可。
Axure RP 8 交互原型设计案例教程
第10章
表单
10.2 管理表单
10.2.6 单选按钮
Axure RP8原型设计图解第10章 支付宝App低保真原型设计
1.
在母版区域里新建一个母版“标签导航”,打开这个母版;拖曳一个矩形1元件,宽度设
置为320,高度设置为480,坐标位置设置为(0,0)颜色填充为灰色(F2F2F2),去掉
边框线,作为手机屏幕背景,如图10.2所示。
图10.2 手机屏幕背景
2. 拖曳一个矩形1元件,宽度设置为320,高度设置为50,坐标位置设置为(0,430)边框颜色
图10.7 母版引用到页面
图10.8 标签导航选中状态设置
8.
按F5键发布原型。单击不同的标签导
航,相应的标签字体加粗,呈现为选
中状态,如图10.9所示。
图10.9 发布原型
10.4.2 “支付宝”九宫格导航布局设计
“支付宝”界面主要由三部分组成,界面航菜单已采用母版的方式设计,界面内容则采用九宫格导航方式。
10.1 需求描述
1 利用Axure的母版功能绘制猫眼电影App的底部标签导航。 2 绘制“电影”模块的热映内容界面布局。 3 绘制“电影”模块的待映内容界面布局。 4 绘制“电影”模块的榜单内容界面布局。 5 制作猫眼电影App海报轮播效果。 6 制作猫眼电影App页签切换效果。
7 制作猫眼电影App的“电影”模块界面内容上下滑动效果。
8 制作猫眼电影App的“预告片推荐”界面内容左右滑动效果。
10.1 需求描述 10.2 设计思路 10.3 准备工作 10.4 设计流程 10.5 小结
10.2 设计思路
1 2
在进行页面布局时,需要用到文本标签元件、矩形1元件、占位符元件、 横线元件、图片元件、动态面板元件等。 在设计底部标签导航时,需要将它设计成母版,这样在页面里可以直接使 用,避免重复制作和重复添加交互效果。 海报轮播效果制作需要借助于动态面板的状态自动切换效果进行设置。
Axure RP8原型设计图解第3章 用Axure元件库搭积木
3.1 绘制线框图所用的元件
பைடு நூலகம்
Axure RP 8原型设计软件里
默认内置了40种线框图元件,通 用型元件有20种,表单类元件有 7种,菜单与表格元件有4种,标 记元件有9种,如图3.3所示。
图3.3 线框图元件库
3.1.1 通用型元件的使用
通用型元件包括矩形1、矩形2、矩形3、椭圆形、占位符、按钮、主要按钮、链接按钮、 一级标题、二级标题、三级标题、文本标签、文本段落、水平线、垂直线、热区、动态面板、 内部框架、中继器等。最后3个元件,由于使用比较复杂,交互效果丰富,使用频率非常高, 放在后面的章节中详细介绍,如图3.4所示。
图3.4 通用型元件
1. 矩形元件、占位符元件和椭圆形元件的使用
矩形元件和占位符元件在本质上没有太大的区别,都可以用来做很多工作,如做一个横
向或者纵向的菜单,或者背景图。
这两种元件不同之处在于占位符元件更强调占位作用,如果想表达页面区域某个位置放 什么,可以放一个占位符,清晰明了地表达这个区域的含义。 椭圆形元件的使用和矩形元件的使用方式一样,只是形状不同。
5. 文本标签元件和文本段落元件的使用
文本标签元件是单行文本元件,文 本段落元件是多行长文本元件。如 果只有一行文本选择文本标签 元件,如果有多行文本可以使用文 本段落元件,如图3.14所示。
图3.14 文本标签和文本段落元件
6. 水平线和垂直线元件的使用
水平线和垂直线是很灵活 的两个元件,用它们可以设置
实战演练
1. 矩形1元件是白色(FFFFFF)背景、矩形2元件是浅灰色(F2F2F2),矩形3元件是灰色
(E4E4E4)背景。根据不同背景颜色需求,使用不同矩形元件。拖曳矩形3,高度设置
AxureRP8实战手册
AxureRP8实战手册新手必须掌握的基础操作:本篇包含56种常见的基础操作,初学者应在掌握本篇内容后再进行实战案例篇的学习,以免产生学习障碍。
同时,建议具备一定基础的读者学习本篇中相对生疏的内容,并加以掌握。
一 Axure8.0基础教程(1-10)***********************************本文目录***********************************第1章使用元件基础1. 添加元件到画布基础2. 添加元件名称基础3. 设置元件位置/尺寸基础4. 设置元件默认角度基础5. 设置元件颜色与透明基础6. 设置形状或图片圆角基础7. 设置矩形仅显示部分边框基础8. 设置线段/箭头/边框样式基础9. 设置元件文字边距/行距基础10. 设置元件默认隐藏************************************正文************************************ 第1章使用元件基础1.添加元件到画布在左侧元件库中选择要使用的元件,按住鼠标左键不放,拖动到画布适合的位置上松开。
(图1-1)基础2.添加元件名称在检视面板的元件名称文本框中输入元件的自定义名称,建议采用英文命名。
建议格式:PasswordInput01或Password01名称含义:序号01的密码输入框格式说明:“Password”表示主要用途;“Input”表示元件类型,一般情况下可省略,当有不同类型的同名元件需要区分或名称不能明确表达用途的时候使用;“01”表示出现多个同名元件时的编号;单词首字母大写的书写格式便于阅读。
(图1-2)基础3.设置元件位置/尺寸元件的位置与尺寸可以通过鼠标拖拽调整,也可以在快捷功能或元件样式中进行输入调整。
(图1-3)x:指元件在画布中的x轴坐标值。
y:指元件在画布中的y轴坐标值。
w:指元件的宽度值。
h:指元件的高度值。
在输入数值调整元件尺寸时,可以在样式中设置,让元件【保持宽高比例】。
Axure RP8 教程:iPhone滑动解锁效果
Axure RP8 教程:iPhone滑动解锁效果
今天带大家使用产品经理必备神器axure实现iphone滑动解锁效果,一起来看看~
一、准备素材
准备好一张背景图,绘制一个外边框命名“边框”,330*60,圆角30。
绘制一个圆形命名“滑块”,,50*50,圆角25,距离外边框各个边框距离5px。
新建一个页面,作为解锁以后进入的主页。
二、交互设置
将滑块转化为动态面板,设置动态面板载入事件,载入时设置变量location=滑块的x坐标。
设置动态面板拖动事件
1. 拖动时,设置动态面板水平拖动
这里需要注意三点:
(1)边界设置,滑块的位置应当大于等于location小于等于location + 320。
这里的270是这么来的:外边框的长度-2*间距。
(2)如果拖动时候如果当前滑块x坐标小于location + 270,则水平拖动。
270的由来:外边框长度– 2*间距–滑块宽度。
(3)如果拖动时候如果当前滑块x坐标大于等于location + 270,则进入主页。
2. 拖动结束后如果滑块没有到达终点,滑块退回到原来位置好了,到这里已经完全实现效果了,按下f5预览吧。
Axure8.0基础教程AxureRP8实战手册
Axure8.0基础教程AxureRP8实战手册目录Axure8.0基础教程(1-10)AxureRP8实战手册 (1)Axure8.0基础教程(11-20)AxureRP8基础操作 (8)Axure8.0基础教程(21-30)新手必须掌握的基础操作 (15)Axure8.0基础教程(31-40)新手必须掌握的基础操作 (22)Axure8.0基础教程(41-50)新手必须掌握的基础操作 (28)Axure8.0基础教程(51-56)新手必须掌握的基础操作 (35)Axure8.0基础教程(1-10)AxureRP8实战手册本篇包含56种常见的基础操作,初学者应在掌握本篇内容后再进行实战案例篇的学习,以免产生学习障碍。
同时,建议具备一定基础的读者学习本篇中相对生疏的内容,并加以掌握。
本文目录基础1. 添加元件到画布基础2. 添加元件名称基础3. 设置元件位置/尺寸基础4. 设置元件默认角度基础5. 设置元件颜色与透明基础6. 设置形状或图片圆角基础7. 设置矩形仅显示部分边框基础8. 设置线段/箭头/边框样式基础9. 设置元件文字边距/行距基础10. 设置元件默认隐藏正文基础1. 添加元件到画布在左侧元件库中选择要使用的元件,按住鼠标左键不放,拖动到画布适合的位置上松开。
(图1-1)基础2. 添加元件名称文本框属性中输入元件的自定义名称,建议采用英文命名。
建议格式:PasswordInput01或Password01名称含义:序号01的密码输入框格式说明:“Password”表示主要用途;“Input”表示元件类型,一般情况下可省略,当有不同类型的同名元件需要区分或名称不能明确表达用途的时候使用;“01”表示出现多个同名元件时的编号;单词首字母大写的书写格式便于阅读。
(图1-2)基础3. 设置元件位置/尺寸元件的位置与尺寸可以通过鼠标拖拽调整,也可以在快捷功能或元件样式中进行输入调整。
(图1-3)x:指元件在画布中的x轴坐标值。
互联网产品设计思维与实践 第2章 Axure工具基本操作
✎ 2.2 Axure工作界面介绍
主工具栏和样式工具栏
1、主工具栏主要用于文档的基本操作,例如撤销、剪切/粘贴、对齐以及发布预览等。
✎ 2.2 Axure工作界面介绍
主工具栏和样式工具栏
2、样式工具栏主要用于单个元件的样式更改操作,如更改字体以及字体的颜色、大小、样式;元件 的背景和线条颜色、元件大小等。
第2章 Axure工具基本操作
HTML
• Axure工作界面 • 软件基本操作
• 常用元件 • 设置元件样式
✎ ✎ 学习目标
2
了解AxureRP 8.0工作界面。
2 认识AxureRP 8.0的常用组件。
熟悉
掌握AxureRP 8.0的基本操作
。3
✎ 目录
软件基础
Axure工作界面介绍
常用元件 ☞点击查看本小节知识架构
页面编辑区
页面编辑区也叫工作区,是进行流程图、原型图制作的主要区域。页面区默认显示标尺,标尺的刻度为 像素。
✎ 2.2 Axure工作界面介绍
检查器面板
检查器面板也被译为“检视”面板,该面板用于设置元件交互样式、元件自身样式以及给元件添加备注的功能。
属性
样式
备注
✎ 2.2 Axure工作界面介绍
✎ 2.2 Axure工作界面介绍
母板
母版是一种可以复用的特殊模块,在绘制线框图
时,往往一个模块被反复使用,此时就需要用到母 版,比如页面的导航栏、标签栏等都可以通过母版来 调用。使用母版的优势是,当修改母版中的元件时, 页面中所有使用该母版的元件都会随着更改,在设计 时可以提高效率并方便管理。
✎ 2.2 Axure工作界面介绍
检查器面板
检查器面板也被译为“检视”面板,该面板用于设置元件交互样式、元件自身样式以及给元件添加备注的功能。
Axure RP 8交互原型设计案例教程第2章 图形元件
图 2-4 变换对象大小
Axure RP 8 交互原型设计案例教程
第2章
图形元件
2.1 图形元件的基本操作
2.1.4 变换图形元件
使用鼠标旋转对象需先按下【Ctrl】键,然后将鼠 标指针放在边界框周围8 个小方格的任意一个上,此 时鼠标指针变成弯曲箭头,按住鼠标左键拖动即可旋 转对象,如图2-5所示。
图 2-9 主工具栏的【对齐】和【分布】按钮
Axure RP 8 交互原型设计案例教程
第2章
图形元件
2.1 图形元件的基本操作
2.1.7 对齐和分布图形元件
(2)使用快捷菜单: (3)使用主程序菜单: 除了使用上面的【对齐】按钮对元件对齐之外,还可以使用Axure RP 软件提供的元件对齐功 能将两个元件对齐。但是,当将两个矩形相邻的边界对齐时,对齐的边看起来会变粗,如图2-10 所示。
Axure RP 8 交互原型 设计案例教程
第2章
图形元件
第2章
图形元件
2.1 图形元件的基本操作
2.1.1 认识元件库面板
Axure RP 将所有与设计原型的相关对象统称为元件(Widgets),并且专门存放于元件库面 板中。Axure RP 提供了三类元件库,分别是:默认、流程图和图标。
Axure RP 8 交互原型设计案例教程
图2-5 变换对象的方向
Axure RP 8 交互原型设计案例教程
第2章
图形元件
2.1 图形元件的基本操作
2.1.4 变换图形元件
2. 使用样式工具栏变换 在样式工具栏中,可以通过设置参数精确变换元件的位置和大小,如图2-6 所示。
图 2-6 样式工具栏的变换参数
Axure RP 8 交互原型设计案例教程
Axure RP8原型设计图解第1章 Axure原型设计概述
3. 在“ Select Destination”界面中选择安装存放路径,可以使用默认的安装路径,也可自 定义安装路径,之后单击“ Next”按钮进行下一步,如图1.8所示。
图1.8 选择安装路径
4. 在“ Program Shortcuts”界面中有两个单选按钮,“ All Users”代表所有用户都可以使用, “ Current User Only”代表只有自己可以使用,选择第一个单选按钮,单击“ Next”按钮 继续安装,如图1.9所示。
图1.20 发布菜单选项
“团队”菜单(见图1.21): 可以创建团队项目和获取团队项目,进行多人协作。
“账户”菜单(见图1.22): 可以进行账户登录和服务器代理设置。
图11.23): (1)通过开始演示动画选项,学习原型工具的使用,提供在线培训教学功能及进入Axure论坛
图1.16 工具栏选项
图1.17 功能区选项
(3)“遮罩”选项(见图1.18),通过勾选的方式来控制隐藏对象、母版、动态面板、 中继器、文本链接、热区是否添加遮罩效果。 “项目”菜单(见图1.19): (1)可对元件、页面的样式进行编辑; (2)具有自定义元件字段说明和页面字段说明功能; (3)具有添加全局变量功能。
图1.13 文件菜单选项
(2)可以导入RP文件,新建团队项目、打开团队项目; (3)可以进行打印纸张尺寸设置,打印index页面,导出index图片; (4)可以设置定时备份软件原型,避免制作软件原型丢失。 “编辑”菜单(见图1.14):
可以完成复制、剪切、粘贴、撤销、重做等操作,也可以使用快捷键来完成这些操作, 所以很少会使用这个菜单。 “视图”菜单(见图1.15):
图1.11 软件界面
Axure RP 8交互原型设计案例教程第1章 初识Axure RP
Axure RP 8 交互原型设计案例教程(微课版)
第1章
初识Axure RP
1.1 交互式原型设计和Axure RP
1.1.2 软件的优势和用户群
Axure RP 是一款将抽象需求转化为可视化产物的强大原型设计工具,设计师无需花费数月学 习编程语言,即可在很短的时间内设计出高保真的交互式原型。 Axure RP 的用户主要包括商业分析师(BA)、信息架构师(IA)、可用性专家(UE)、产 品经理(PM)、(IT)咨询师、用户体验设计师(UX/UE)、交互设计师、界面设计师(UI)等, 另外,架构师、程序开发工程师也在使用Axure RP。
图 1-8 切换左右面板按钮
Axure RP 8 交互原型设计案例教程(微课版)
第1章
初识Axure RP
1.2 认识Axure RP 界面
1.2.1 Axure RP 界面元素
单击面板左上角的按钮可将面板变成浮动状态,面板变成浮动状态后,拖动其标题栏可以将面 板放置在程序界面的任何位置,如图1-9 所示。
1.2.1 Axure RP 称和它的快捷键。如果将鼠标指针指向主工 具栏中的某个工具,也会自动显示该工具的名称和快捷键,这也是学习快捷键的一种好方法,如图 1-5所示。
图 1-5 显示工具的提示信息
Axure RP 8 交互原型设计案例教程(微课版)
Axure RP 8 交互原型设计案例教程(微课版)
第1章
初识Axure RP
1.2 认识Axure RP 界面
1.2.1 Axure RP 界面元素
1. 标题栏 标题栏可显示当前打开或新建的原型文档名称、Axure RP 程序名称以及注册信息等。 2. 菜单栏 Axure RP 包括【文件】、【编辑】、【视图】、【项目】、【排列】、【发布】、【团队】、 【账号】和【帮助】9 个主程序菜单,如图1-2 所示。 3. 主工具栏 主工具栏包括经常用的一些工具,如选择工具、对齐和分布工具等,如图1-3 所示。
Axure RP基础教程
Axure RP pro教程目录(一)Axure介绍 (2)(二)界面与功能 (3)(三)文档管理 (6)(四)模板复用 (10)(五)widgets工具-上 (13)(六)widgets工具-下 (16)(七)注释annotations (18)(八)交互interactions(上) (26)(八)交互interactions(中) (29)(一)Axure介绍Axure RP 能帮助网站需求设计者,快捷而简便的创建基于目录组织的原型文档、功能说明、交互界面以及带注释的wireframe网页,并可自动生成用于演示的网页文件和word文档,以提供演示与开发。
Axure RP 的特点是:∙快速创建带注释的wireframe文件,并可根据所设置的时间周期,软件自动保存文档,确保文件安全。
∙在不写任何一条html与javascript语句的情况下,通过创建的文档以及相关条件和注释,一键生成html prototype演示。
∙根据设计稿,一键生成一致而专业的word版本的原型设计文档。
接下来我会结合图片,分几个步骤分享我对Axure的认识,一、界面与功能二、工具栏三、站点地图四、组件与使用方法五、复用模板与使用六、交互功能与注释七、实例(二)界面与功能不论学习什么,打基础是很重要的。
关于基础练习,我印象最深的故事是王羲之练习书法的故事,将一池水染黑,需要怎样的毅力?再有就是达芬奇与鸡蛋的故事,一个简单的鸡蛋,达芬奇画了无数次。
我相信正是他们的一步一个脚印,才让他们有了后来伟大的成就。
故事老套,道理浅显,可是我认为很重要。
学习软件,应该先熟悉每个面板,每个基础功能,才能够真正谈到运用。
所以我的学习方法是了解软件的基础功能开始。
一、欢迎界面与功能运行Axure RP后,首先弹出的是欢迎界面,它拥有的功能和其他软件的欢迎界面没有什么特别的不同。
功能区1:文档区,这个区域显示用户最近打开的Axure RP文件,用户可以快捷的打开之前编辑的文件。
axure详细教程
Axure学习笔记软件中有不完善的地方,要靠自己的经验来规避和克服,还算好用。
熟练了Axure,对软件设计文档的编写大有帮助,因为可以有一些界面图出来。
画界面图时多用Axure,画流程图时多用Visio,为的是熟练Axure,并且Axure画界面要简便许多,节约时间。
(四)范本复用masters和sitemap面板很相似,文档操作也一样,它们的本质区别是,sitemap里的档是最终展示页面,masters里的文件却只是一个模块,是页面的一个部分。
masters的英文直译是主人或雇主,但是我认为这里可以叫做模板,或者复用模块。
masters 的文件,是页面中重复的模块,由于在不同页面中这些模块是一样的,所以拿出来作为一个模块编辑,然后在不同页面中进行调用。
这个功能类似于网页程序开发中的程序复用,不同页面中调用同一段程序,一般把这段程序单独做成一段页面程序,然后用include命令进行调用。
master的档就相当于这段被调用的页面程序。
dreamweaver也有类似的功能,就是template,可以参照理解。
一、功能条master的功能条功能基本和sitemap一模一样,功能也基本一样。
唯一不同的是master可以创建档夹,可以通过档夹收纳不同的档,因此唯一不同的就是第一个功能按钮,功能作用是增加一个档夹。
behavior是行为的意思,这个功能是axure升级到4版本后加入的,是针对master的不同使用情况而添加的一个功能,也是要重点介绍的功能。
1、normal:普通档。
就是一般的复用档。
是默认创建的复用文件。
2、place in background:定位的复用模板,这类模板的特点是定位于页面的底层,并且锁定模板中的widgets在他原来创建的位置。
这类复用模块主要用于创建head、foot、侧边栏等明确定位的复用模块。
3、custom widgets behavior:自定义模块。
这类模块就类似于自创了一个widgets。
- 1、下载文档前请自行甄别文档内容的完整性,平台不提供额外的编辑、内容补充、找答案等附加服务。
- 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
- 3、如文档侵犯您的权益,请联系客服反馈,我们会尽快为您处理(人工客服工作时间:9:00-18:30)。
AxureRP8实战手册新手必须掌握得基础操作:本篇包含56种常见得基础操作,初学者应在掌握本篇内容后再进行实战案例篇得学习,以免产生学习障碍。
同时,建议具备一定基础得读者学习本篇中相对生疏得内容,并加以掌握。
一 Axure8.0基础教程(1-10)***********************************本文目录***********************************第1章使用元件基础1。
添加元件到画布基础2。
添加元件名称基础3. 设置元件位置/尺寸基础4. 设置元件默认角度基础5。
设置元件颜色与透明基础6、设置形状或图片圆角基础7. 设置矩形仅显示部分边框基础8. 设置线段/箭头/边框样式基础9、设置元件文字边距/行距基础10。
设置元件默认隐藏************************************正文************************************第1章使用元件基础1. 添加元件到画布在左侧元件库中选择要使用得元件,按住鼠标左键不放,拖动到画布适合得位置上松开。
(图1-1)基础2、添加元件名称在检视面板得元件名称文本框中输入元件得自定义名称,建议采用英文命名、建议格式:PasswordInput01或Password01名称含义:序号01得密码输入框格式说明:“Password”表示主要用途;“Input”表示元件类型,一般情况下可省略,当有不同类型得同名元件需要区分或名称不能明确表达用途得时候使用;“01”表示出现多个同名元件时得编号;单词首字母大写得书写格式便于阅读、(图1-2)基础3、设置元件位置/尺寸元件得位置与尺寸可以通过鼠标拖拽调整,也可以在快捷功能或元件样式中进行输入调整。
(图1—3)x:指元件在画布中得x轴坐标值。
y:指元件在画布中得y轴坐标值。
w:指元件得宽度值、h:指元件得高度值。
在输入数值调整元件尺寸时,可以在样式中设置,让元件【保持宽高比例】、(图1-4)基础4. 设置元件默认角度方式一:选择需要改变角度得元件,按住〈Ctrl>键得同时,用鼠标拖动元件得节点到合适得角度。
(图1-5)方式二:在元件样式中进行角度得设置,元件得角度与元件文字得角度可以分开设置。
(图1-5)基础5。
设置元件颜色与透明选择要改变颜色得元件,点击快捷功能区中得背景颜色设置按钮,选取相应得颜色,或者在元件样式中进行设置。
(图1-6)基础6、设置形状或图片圆角可以通过拖动元件左上方得圆点图标进行调整,也可以在元件样式中设置圆角半径来实现。
(图1—7)基础7. 设置矩形仅显示部分边框在Axure RP 8得版本中,矩形得边框可以在样式中设置显示全部或部分。
(图1-8)基础8。
设置线段/箭头/边框样式线段、箭头与元件边框得样式可以在快捷功能或者元件样式中进行设置。
(图1—9)基础9. 设置元件文字边距/行距在元件样式中可以设置元件文字得【行间距】与【填充】。
(图1-10)行间距:就是指文字段落行与行之间得空隙。
填充:就是指文字与形状边缘之间填充得空隙、基础10、设置元件默认隐藏选择要隐藏得元件,在快捷功能或者元件样式中勾选【隐藏】选项。
(图1—11)二 Axure8.0基础教程(11-20)***********************************本文目录***********************************基础11。
设置文本框输入为密码基础12、设置打开选择文件窗口基础13。
限制文本框输入字符位数基础14。
设置文本框提示文字基础15、设置文本框回车触发事件基础16. 设置元件鼠标移入得提示基础17、设置矩形为其她形状基础18、设置自定义形状基础19。
设置形状水平/垂直翻转基础20、设置列表框得内容************************************正文************************************基础11。
设置文本框输入为密码文本框属性中选择文本框得{类型}为【密码】。
(图1-12)基础12. 设置打开选择文件窗口文本框属性中选择文本框得{类型}为【文件】,即可在浏览器中变成打开选择本地文件得按钮、该按钮样式各浏览器略有不同、(图1-13)基础13、限制文本框输入字符位数在文本框属性中输入文本框得{最大长度}为指定长度得数字。
(图1—14)基础14、设置文本框提示文字在文本框属性中输入文本框得{提示文字}。
提示文字得字体、颜色、对齐方式等样式可以点击【提示样式】进行设置。
(图1—15)提示文字设置包含{隐藏提示触发}选项,其中:输入:指用户开始输入时提示文字才消失。
获取焦点:指光标进入文本框时提示文字即消失、基础15、设置文本框回车触发事件文本框回车触发事件就是指在文本框输入状态下按<回车>键,可以触发某个元件得【鼠标单击时】事件。
只需在文本框属性中{提交按钮}得列表中选择相应得元件即可。
(图1—16)基础16、设置鼠标移入元件时得提示在文本框属性中{元件提示}中输入提示内容即可、(图1—17)基础17. 设置矩形为其她形状在画布中点击矩形右上方圆点图标即可打开形状列表,设置为其它形状。
(图1—18)基础18。
设置自定义形状在形状上点击〈鼠标右键>,在菜单中选择【转换为自定义形状】,即可对形状进行编辑。
也可以通过点击形状右上角得圆点图标,在打开得形状选择列表中选择【转换为自定义形状】(图1-18)。
具体得编辑操作见图1-19中得标注。
基础19. 设置形状水平/垂直翻转在形状得属性中可以对形状进行【水平翻转】与【垂直翻转】得操作。
(图1—20)基础20. 设置列表框得内容下拉列表框与列表框都可以设置内容-列表项。
可以通过【属性】—【列表项】得选项来设置,也可以通过鼠标双击元件进行设置、(图1-21)三 Axure8.0基础教程(21-30)***********************************本文目录***********************************基础21、设置元件默认选中/禁用基础22、设置单选按钮唯一选中基础23、设置元件不同状态时得样式基础24. 设置图片文本基础25、切割/裁剪图片基础26. 嵌入多媒体文件/页面基础27、调整元件得层级基础28。
组合/取消组合元件基础29. 转换元件为图片基础30、载入元件库************************************正文************************************基础21. 设置元件默认选中/禁用元件得属性中可以对一些元件得默认状态进行设置,可以设置得状态包括【选中】与【禁用】,默认状态得设置,可以触发属性中设置得交互样式。
比如设置某个元件在浏览器中默认为禁用得灰色,就需要勾选【禁用】(复选框),并设置【禁用】得交互样式。
(图1—22)除了禁用与选中个别元件还具有【只读】得设置、例如:文本框与多行文本框、基础22、设置单选按钮唯一选中全选所有得单选按钮,在元件属性中{设置单选按钮组名称},即可实现唯一选中得效果。
(图1—23)基础23。
设置元件不同状态得交互样式点击元件属性中各个交互样式得名称,即可设置元件在不同状态时呈现得样式。
这些样式在交互被触发时,就会显示出来。
(图1-24)比如设置元件默认状态为禁用,在浏览原型时,页面打开后就会显示该元件被禁用得样式。
(图1—22)基础24、设置图片文本设置图片文本需要在图片上点击<鼠标右键>,选择【编辑文本】,方可进行图片上得文字编辑。
(图1-25)基础25、切割/裁剪图片在图片得元件属性中,设有切割与裁剪功能得图标,点击即可使用相应功能。
元件上点击〈鼠标右键>,菜单中也有相应得选项。
(图1—26)切割:可将图片进行水平与垂直得切割,将图片分割开。
裁剪:可将图片中得某一部分取出。
裁剪分为几种,分别就是裁剪、剪切、与复制。
其中:裁剪只保留被选择得区域;剪切就是将选取得部分从原图中剪切到系统剪贴板中;复制就是将选取得部分复制到系统剪贴板中,复制得方式对原图没有影响。
基础26。
嵌入多媒体文件/页面基本元件中得内联框架可以插入多媒体文件与网页、双击元件或者在属性中点击【框架目标页面】,在弹出得界面中选择【链接到url或文件】,填写{超链接},内容为多媒体文件得地址(网络地址或文件路径)或网页地址。
在这个界面中也可以选择嵌入原型中得某个页面。
(图1-27)图中嵌入得优酷视频地址:基础27. 调整元件得层级元件得层级可以通过点击快捷功能中得图标或者右键菜单得【顺序】选项进行调整,也可以在页面内容概要中通过拖动进行调整。
概要中层级顺序为由上至下,最底部得元件为最顶层。
(图1—28)基础28、组合/取消组合元件通过快捷功能图标或右键菜单可以将多个元件组合到一起,达到共同移动/选取/添加交互等操作。
组合/取消组合得快捷键为< CtrlG>键/键。
(图1-29)基础29、转换元件为图片形状/文本标签/线段等元件可以通过点击〈鼠标右键〉,选择将元件【转换为图片】。
例如,使用少量特殊字体或者图标字体时,即可将元件转换为图片,避免在未安装字体得设备上浏览原型时不能正常显示、(图1-30)基础30、载入元件库除了使用软件自带得默认元件库与流程图元件库,用户还可以加载自定义元件库、加载自定义元件库只需点击功能图标,在列表中选择【载入元件库】。
(图1—31)四 Axure8、0基础教程(31-40)***********************************本文目录***********************************基础31。
切换元件库第2章页面设置基础32。
设置页面居中基础33、设置页面背景(图片/颜色)基础34。
设置页面颜色(草图/黑白)第3章设置条件基础35、添加条件判断基础36. 设置条件限制基础37、用例条件转换第4章使用变量/公式基础38。
全局变量设置基础39。
局部变量设置基础40. 公式得格式及类型************************************正文************************************基础31、切换元件库在元件库功能面板中,可以通过点击元件库列表,选择不同得元件库进行使用、(图1-32)第2章页面设置基础32。
设置页面居中在页面【样式】设置中选择页面居中得按钮。
页面居中就是指在浏览器中查瞧原型时页面内容居中显示。
(图2—1)基础33、设置页面背景(图片/颜色)在页面【样式】中可以编辑页面得背景颜色以及背景图片、(图2—2)基础34。
设置页面颜色(草图/黑白)在页面得【样式】中,可以将当前页面得显示为草图效果,同时可以将页面颜色在彩色与黑白之间转换。