主流原型设计⼯具-Axure
⽬录:
前⾔
Axure简介
Axure⼯作界⾯
Axure基础操作
Axure特点
Axure与墨⼑的区别
前⾔
在上⼀节软件开发与创新课程设计课上,王⽂娟⽼师发布了在个⼈博客上介绍主流原型设计⼯具,可以
对⽐介绍⼏种不同的原型设计⼯具的特点和使⽤⽅法,也可以重点介绍其中⼀种的学习任务,因此,这是我为软件开发与创新课程设计写的第⼆篇博客。
⼀、Axure简介
Axure是⼀个专业的快速原型设计⼯具。Axure是美国Axure Software Solution公司旗舰产品,是⼀个专业的快速原型设计⼯具,让负责定义需求和规格、设计功能和界⾯的专家能够快速创建应⽤软件或Web⽹站的线框图、流程图、原型和规格说明⽂档。作为专业的原型设计⼯具,它能快速、⾼效的创建原型,同时⽀持多⼈协作设计和版本控制管理。Axure已被⼀些⼤公司采⽤。Axure 的使⽤者主要包括商业分析师、信息架构师、可⽤性专家、产品经理、IT咨询师、⽤户体验设计师、交互设计师、界⾯设计师等,另外,架构师、程序开发⼯程师也在使⽤Axure。
1、Axure⼯作界⾯(Axure9)
Axure9的⼯作界⾯截图:
通过截图,我们可以将Axure9的⼯作界⾯分为以下11个部分:
(1)菜单栏
主要包含⽂件、编辑、视图、项⽬、布局、发布、团队、账户、帮助⼏个菜单。
⽂件:新建、新建元件库、打开、保存、另存为、从RP⽂件导⼊、新建团队项⽬、新建团队元件库、获取并打开团队项⽬、纸张尺⼨与设置、打印、导出页⾯为图⽚、⾃动备份设置、从备份中恢复、偏好设置(常规、画布、⽹格、辅助线、元件对齐、母版)、退出等功能;
编辑:撤销、重做、剪切、复制、粘贴、查、替换、全选、删除等功能;
视图:⼯具栏、样式栏、页⾯、元件、母版、交互、说明、样式、摘要是否显⽰控制、重置视图、标签/⽹格辅助线设置、遮罩设置;
项⽬:元件样式管理、页⾯样式管理、说明字段设置、全局变量设置和项⽬设置、⾃适应视图;
布局:元件的组合与取消组合、元件的显⽰层次控制、元件的对齐⽅式、分布⽅式、锁定元件转换母版、转换动态⾯板、重置连接线;。发布:预览原型、预览选项设置、发布到axure云、⽣成HTML⽂件、⽣成word说明书、⽣成管理配置⽂件;
团队:团购项⽬⽂件的签⼊、迁出等管理;
账户:Axure账号登录、退出,代理设置;
帮助:在线学习、在线培训、Axure论坛、意见反馈、欢迎界⾯、管理授权、检查更新、关于Axure等。
(2)基本⼯具栏
可通过“菜单---视图---⼯具栏---⾃定义基本⼯具栏列表”控制⼯具列表显⽰。以下是默认显⽰⼯具说明。
剪贴板:对元件的剪切、复制、粘贴;
选择模式:包含选择、相交选择;
连线⼯具:⽤于连接元件;
插⼊:绘画、矩形、圆形、线段、⽂本、图⽚、形状;
点:编辑形状的顶点;
顶层:将元件⾄于顶层;
底层:将元件⾄于底层;
组合:将多个元件组合成⼀个整体;
取消组合:将组合拆散;
缩放:缩放⽐例⽀持10%、25%、50%、80%、100%、150%、200%、300%、400%、800%、⾃定义缩放⽐列;分布:⽔平左侧、居中、右侧,垂直顶部、中部、底部,⽔平平均分布、垂直平均分布;
预览:⽤浏览器预览HTML原型效果;
共享:将原型⽂件上传⾄Axure云端;
账号:登录、退出Axure云端。
(3)样式⼯具栏
样式⼯具栏主要是对元件样式的管理,以下是详细说明。
司马南是什么人管理元件样式:⾃由灵活设置各类型元件的样式,包含颜⾊、字体、字号、边框、对齐、填充、透明度、阴影等;⽂字:字体、字重、字号、⽂字颜⾊、加粗、斜体、下划线、项⽬符号;
⽂本对齐⽅式:左对齐、左右居中、右对齐、两端对齐、顶部对齐、上下居中、底部对齐;
元件:背景⾊颜⾊、阴影设置;
边框线段:粗细、演⽰、虚线、箭头;
位置⼤⼩:元件X轴、Y轴、宽度、⾼度,宽⾼⽐锁定控制。
(4)页⾯⾯板
页⾯⾯板主要⽤于显⽰当前RP⽂件的所有页⾯,同时管理RP⽂件页⾯的增删改查。
添加:添加⽂件夹、添加同级页⾯、添加⼦页⾯、上⽅添加页⾯、下⽅添加页⾯;
移动:上移、下移、降级、升级;
剪贴:剪切、复制、粘贴、删除;
命名:重新命名当前页⾯;
重复:复制页⾯,复制⽂件夹、复制分⽀(下级内容);
图表类型:页⾯、流程图;
搜索:当页⾯较多时,可通过页⾯名称快捷搜索查定位。
(5)概要⾯板
当前操作页⾯的所有元件管理,可以控制某个、某些、全部元件是否在概要⾯板中展⽰。
根据元件类型展⽰:展⽰全部元件、展⽰母版元件、展⽰动态⾯板⾯板、展⽰动态⾯板或母版,单选互斥;
根据元件说明展⽰:展⽰具有名称的元件、展⽰具有脚注的元件,单选互斥;
根据元件显⽰隐藏规则展⽰:展⽰“全部元件”、展⽰“显⽰元件”、展⽰“隐藏元件”,单选互斥;
展⽰规则:元件类型、元件说明、显⽰隐藏三个规则可同时⽣效,⽤于控制元件是否在概要⾯板展⽰;
元件排序:按照顶层⾄底层排序、按照底层⾄顶层排序;
元件搜索:当元件数量较多时,可通过元件名称快捷搜索查定位。
(6)元件⾯板
元件⾯板⾃带默认元件、流程元件、Icon元件,同时可通过元件⾯板管理外部元件库。
关于过年的歌曲注1:选中元件⾯板中的元件,拖动到⼯作区中,即可使⽤;
注2:可将⾃⼰做好的组合元件保存在元件库中,下次可直接拖动使⽤;
默认元件:包括基本元件、表单元件、菜单/表格、标记元件;
流程元件:通过流程元件可实现类似于visio的功能;
icon元件:web应⽤、辅助功能、⼿势、运输⼯具、性别、⽂件类型、加载中、表单控件等icon元件;
元件库:元件库的导⼊、移除、编辑;
搜索:对所有元件的快捷搜索。
(7)母版⾯板
Axure中的母版可以简单理解为公共元件模板,将母版应⽤到相应页⾯中后,母版内容或样式发⽣变化,那么引⽤母版的页⾯内容或样式同样会跟着变化,常⽤于制作页⾯头部或底部内容。
母版⾯板主要⽤于管理母版元件的增删改查。
添加:添加⽂件夹、添加同级母版、添加⼦母版、上⽅添加母版、下⽅添加母版;
移动:上移、下移、降级、升级;
剪贴:剪切、复制、粘贴、删除;
命名:重新命名当前母版;于正被打事件
爸爸去哪儿第四季什么时候开播
重复:复制母版,复制⽂件夹、复制分⽀(下级内容);
拖放⾏为:拖放到任意位置、拖放到固定位置、脱离母版;
添加到页⾯中:选择指定⼀个、多个、全部页⾯进⾏母版添加,母版添加位置,母版去重;
从页⾯中移除:选择指定⼀个、多个、全部页⾯进⾏母版移除;
使⽤情况:当前母版在各页⾯中的使⽤情况;
搜索:当页⾯较多时,可通过页⾯名称快捷搜索查定位。
(8)样式⾯板
样式⾯板包含元件样式、页⾯样式。
元件样式:名称、位置、尺⼨、是否显⽰、颜⾊、字体、字号、边框、对齐、填充、透明度、阴影等样式控制,不同元件的样式稍有差别;页⾯样式:页⾯尺⼨、页⾯排列、页⾯背景填充。
(9)交互⾯板
交互⾯板包含页⾯交互、元件交互,其中元件交互⼜分为事件交互、样式交互。
页⾯交互:页⾯载⼊时、窗⼝尺⼨改变时、窗⼝滚动时、页⾯单击、页⾯⿏标操作时等;
元件---样式交互:⿏标悬停、⿏标按下、选中、禁⽤、获取焦点时交互;
元件---事件交互:单击、双击、⿏标按下、⿏标移⼊、⿏标移出、移动时、旋转时、尺⼨改变时、焦点获取时、内容改变时等交互,不同元件事件交互稍有差别。
(10)说明⾯板
说明⾯板主要是⽤于管理元件的注释,⽬前仅⽀持⽂本注释,可对注释内容进⾏富⽂本编辑。
(11)⼯作区
⼯作区也就是我们操作区域、操作边界,所有的元件操作应⽤都基于⼯作区进⾏。
可通过样式⾯板的页⾯尺⼨设置⼯作区域⼤⼩;
可通过基本⼯具栏中的缩放放⼤、缩⼩⼯作区展⽰⽅式。
2、Axure元件样式
(1)透明度
可以调整元件的透明度。0%为完全透明。这个值是整个元件的透明度,会和⽂字颜⾊、填充背景颜⾊⾥⾯设置的透明度叠加。(2)⽂字排版
字体设置可以设置字体、字形、字号、颜⾊。
排版样式可以设置⾏⾼、⽂字间距。
更多设置⾥还能设置项⽬符号、斜体、粗体、下划线、删除线、上标和下标、英⽂⼤⼩写切换。
段落格式:可以设置段落的⽔平⽅向对齐⽅式(居左、居中、居右、两端对齐)、垂直⽅向上中下对齐。
(3)填充
最有前途的职业颜⾊填充⽀持纯⾊填充、也⽀持线性渐变和径向渐变
图像填充可以引⼊⼀个图⽚作为元件的背景。并且可以设置填充位置和样式。
(4)边线
可以设置边框或线段的样式。包括颜⾊、线宽(线宽设置为0即为不显⽰边框)、线形(实线、虚线等8种样式可选)。
矩形类的元件,可以设置上下左右各个边框的可见性。
线段和连接线可以设置箭头样式。
(5)阴影
设置元件的外部阴影或内部阴影。可以⾃定义阴影位置、模糊度、颜⾊。
(6)圆⾓
可以设置矩形类元件的圆⾓属性。圆⾓半径数值控制圆⾓的⼤⼩,单位为像素。也可以设置四个圆⾓的可见性。
在画布中,选中的矩形元件,拖动左上⾓的黄⾊三⾓形把⼿,也可以改变圆⾓半径。
注意:边线可见性会影响圆⾓属性。⾓对应的两条边线必须都可见,圆⾓效果才会出现。(边线宽度为0不影响)
(7)内边距
内边距属性可以控制⽂字在元件内部的位置。可以分别设置上下左右的参数值。单位为像素。
3、Axure基础操作(使⽤元件为例)
(1)添加元件到画布
在左侧元件库中选择要使⽤的元件,按住⿏标左键不放,拖动到画布适合的位置上松开
(2)添加元件名称
⽂本框属性中输⼊元件的⾃定义名称,建议采⽤英⽂命名。建议格式:PasswordInput01或Password01,名称含义:序号01的密码输⼊框,格式说明:“Password”表⽰主要⽤途;“Input”表⽰元件类型,⼀般情况下可省略,当有不同类型的同名元件需要区分或名称不能明确表达⽤途的时候使⽤;“01”表⽰出现多个同名元件时的编号;单词⾸字母⼤写的书写格式便于阅读。
(3)设置元件位置/尺⼨
元件的位置与尺⼨可以通过⿏标拖拽调整,也可以在快捷功能或元件样式中进⾏输⼊调整。
古天乐艾滋x:指元件在画布中的x轴坐标值。
y:指元件在画布中的y轴坐标值。
w:指元件的宽度值。
h:指元件的⾼度值。
在输⼊数值调整元件尺⼨时,可以在样式中设置,让元件保持宽⾼⽐例。
(4)设置元件默认⾓度
选择需要改变⾓度的元件,按住键的同时,⽤⿏标拖动元件的节点到合适的⾓度。
(5)设置元件颜⾊与透明
选择要改变颜⾊的元件,点击快捷功能区中的背景颜⾊设置按钮,选取相应的颜⾊,或者在元件样式中进⾏设置。
(6)设置形状或图⽚圆⾓
可以通过拖动元件左上⽅的圆点图标进⾏调整,也可以在元件样式中设置圆⾓半径来实现。
(7)设置矩形仅显⽰部分边框
在Axure RP 8的版本中,矩形的边框可以在样式中设置显⽰全部或部分。
(8)设置线段/箭头/边框样式
线段、箭头和元件边框的样式可以在快捷功能或者元件样式中进⾏设置。
(9)设置元件⽂字边距/⾏距
在元件样式中可以设置元件⽂字的⾏间距与填充。
⾏间距:是指⽂字段落⾏与⾏之间的空隙。填充:是指⽂字与形状边缘之间填充的空隙。
(10)设置元件默认隐藏
选择要隐藏的元件,在快捷功能或者元件样式中勾选隐选项。