Axure RP使用基础教程

一、Axure界面介绍

1、页面导航面板(Pages)

        Axure的页面管理采用类似操作系统的文件夹和页面文件的管理方式,不同点是,页面文件可以存在子页面,这一点是考虑了页面与页面跳转或者嵌套页面等网页特点。

页面文件管理导航面板

2、元件库(Libaries)

        Axure的元件库,类似与PPT的模板,或者是Office提供的各种形状、图标,可以通过拖拽的方式,帮助我们快速创建原型。

Axure的元件库导航

2.1元件库导入

        Axure提供了多种元件库的导入功能,包含官网下载,本地导入、导入共享原件、手工创建等方式。其中手工创建可将我们日常用到较多的图形、样式、效果等管理成元件库,使用是,可直接拖拽到画布中,这里的原件不是简单的图形、形状、样式,还包含了网页所支持的特效,如渐进渐出、隐藏显示、幻灯片、链接跳转等

元件库管理

2.2 元件库使用

元件库提供了方便的导航筛选和元件名称搜索功能。


元件库筛选
元件库检索
拖拽使用元件

3.工具栏(ToolBar)

工具栏提供了常用按钮的快捷入口,既可以通过鼠标点击激活,也可以通过快捷键激活。

选择有两种模式,相交模式:鼠标按住拖动选择多个元素时,只要鼠标滑过的区域与元素有相交,该元素即被选中;包含模式:鼠标按住拖动选择多个元素时,只有鼠标滑过的区域完全覆盖了该元素,该元素才能被选中。

默认为相交模式,该模式类似与PPT中的选中模式。

锁定位置的作用主要是将元素锁定在特定位置,以方便处理其他元素,元素一旦锁定后,变无法拖动位置。

工具栏

预览功能是将当前涉及的原型发布到浏览器浏览,其原理是Axure搭建了一个小型的静态文件服务器,创建的原型转成HTML文件,发布到服务器上,浏览器进行访问预览。

发布功能是将设计的原型图转成HTML静态文件,如果设置了各类动作,Axure会自动生成js的方法帮助实现HTML中的特效。

工具栏

4.检视器面板(Inspector)

在画布中,选中元素,右侧可看到样式面板,包含了三部分:样式,类似与CSS所需的各类属性;。

4.1 样式面板(Style)

面板提供了元素所需的各种样式属性设置功能,包含了元素名称、盒子模型中的边框、内外边距、圆角、透明度、字体、着重号、对齐方式等

样式面板

4.2备注面板(Notes)

可对元素设置元素备注,备注后效果如下图:

元素备注

4.3交互面板(Properties)

属性面板提供了完整的web页面所需的各类事件绑定所需的设置,如点击事件、双击事件、显示、隐藏、链接等。


属性设置面板

5、大纲面板(Outline)

Axure提供了所有元素的大纲导航面板,类似于PS中的图层管理面板,可完成各个元素的组合,取消组合,元素压盖顺序调整,元素名称命名,组名称命名,删除、选中、多选等操作。为控制多个图层、元素提供了边界的入口。

大纲面板

二、基础操作

1.使用元件

1.1设置元件名称

可通过检视面板修改元素名称,也可以通过大纲面板,选中修改。

设置元件名称

1.2设置元件大小、位置、角度

在样式面板可设置元件的大小,位置,也可以通过拖动的方式设置。

x:从左侧到右侧的距离,单位px

y:从上到下的距离,单位px

w:元件的宽度,单位px

h:元件的长度,单位px

R:元件的角度,单位度

T:文字的角度,单位度


设置元件大小、位置、角度

1.3设置元件的颜色和透明度

        选择要改变颜色的元件,点击快捷功能区中的背景颜色设置按钮,选取相应的颜色,或者在元件样式中进行设置。

设置元件的颜色和透明度

1.4设置元件的盒子模型属性

Axure完美的支持Web页面的布局中的盒子模型属性的设置。

盒子模型中的各个属性设置

1.5设置元件默认隐藏

        在检视的样式面板中,右上角的隐藏选择框,如果勾上,则该元件默认为隐藏,在画布中则以浅色的形式存在。

默认隐藏元件

1.6标记元件文字

对需要添加文字的元件,双击该元件,即可输入文字。

双击添加文字

2、元件交互

2.1设置元件的类型、Tips、约束

可以通过检视面板中的属性面面板,设置元件的类型(如Text、Email、Password)、占位符、Tips、长度、是否隐藏边框、是否只读、是否禁用、表单提交按钮等信息

表单交互基本属性设置

2.2 元件事件设置

选择元件后在检视的交互属性界面,选择事件类型(点击、双击、右键、鼠标滑过、点击后等),在弹出的对话框中,可设计页面跳转、界面元素显示隐藏、渐入渐出效果等各类动作。

事件设置

2.3设置下拉列表值

通过元件库选择List Box元件,在检视的交互属性面板点击添加项菜单,可以批量添加下拉值。


下拉列表值设定

2.4单选按钮唯一选中

可以对多个单选按钮设置唯一选中效果,选中多个单选按钮,设置按钮组名即可。


单选按钮唯一选中

3.其他常用操作

3.1转换元件为图片

右键中可支持元件转化为图片的操作


转为组件为图片

3.2 元件组合和取消组合

在实际的原型绘制过程中,需要将多个元件组合成一个整体,比如多个单选框需要组成一组、文字描述和按钮元件、页面的header、footer、导航条等。


组合


取消组合

3.3 调整元件的层级

类似与HTML中的Z-index一样,多个元件存在压盖的层级顺序,默认的顺序是先拖入的元件被后拖入的元件压盖,也即后来居上。可通过右键调整层级,也可以在概要(Outline)处拖拽调整,概要出的层级是靠上部的元件压盖靠近下部的元件。

右键调整元件层级


概要(Outline)拖拽调整

3.4 添加事件执行的条件

在事件设置页面,可通过添加条件的方式,来满足复杂的交互

设置条件的入口
条件设置面板

3.5 设置变量

局部变量


全局变量

4、常用功能设置

4.1 设置形状并排显示时边框是否重叠


边界重合设置

4.2 显示和隐藏交互和说明编号

一个元件设置了备注或者添加了交互时间后,默认显示编号,可设置显示或不显示


脚注序号显示隐藏

4.3 显示/隐藏两侧的功能面板

点击可展开左侧或右侧的面板

左右侧面板开关

4.4 响应式布局设置

        通过设置自适应视图,使得原型HTML在多种分辨率设备中查看时,系统会根据自身分辨率,自动与分辨率相适合的原型进行匹配,并显示出来。

自适应视图
多终端分辨率设置

三、Axure RP撰写需求文档

需求文档的撰写已经从最开始的纯文字,逐渐转变到图文结合,再到线框图,再到原型图,再到JS高仿真Demo等形式,为的是保证客户需求的传达和落地不偏离,环节交接无抛接。

总的来说,需求文档有三个作用:

1. 传达客户、功能、应用、产品开发需求;

2. 保证各环节沟通有理有据

3. 软件及产品质量控制有具体标准

        很多程序猿在开发时,一般都是看着效果图和原型图写代码,只有在遇到问题时,才会查看word文档。也就是说,开发需要一边写代码,一边看效果图,一边看原型,还要时不时查看文档。

        而且,大多数程序猿都不会逐字逐句去读产品经理的长篇大论。那需求写word真的合适吗?这样的用户体验真的好吗?花费大量时间写word真的有价值吗?在Axure画原型的同时,我们为什么不能直接在旁边标注呢?这样岂不是方便快捷很多吗?

        其实,流行一种直接在原型图上标注的需求文档撰写方式。在新版的Axure8中,也已经推荐了原型加标注的需求文档样式。Axure8新增了一组部件—不干贴,就是方便产品设计人员进行功能标注。

以下方式仅供参考


需求文档结构
脚注模式


不干胶模式
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 158,233评论 4 360
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 67,013评论 1 291
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 108,030评论 0 241
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 43,827评论 0 204
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 52,221评论 3 286
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 40,542评论 1 216
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 31,814评论 2 312
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 30,513评论 0 198
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 34,225评论 1 241
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 30,497评论 2 244
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 31,998评论 1 258
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 28,342评论 2 253
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 32,986评论 3 235
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 26,055评论 0 8
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 26,812评论 0 194
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 35,560评论 2 271
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 35,461评论 2 266

推荐阅读更多精彩内容