Axure工作空间分为四个部分,工具栏、左侧面板、右侧面板和设计空间。
1)工具栏:主要设置部件的样式、对齐、发布动作
2)左侧面板:由站点地图、部件库和母版库
3)右侧面板:事件设置,样式的详细设置
4)设计区域:主要的工作区域。
下面详细介绍各部分的功能,该章节为基础教程部分,注意学习哦!
1.1. 工具栏
1.1.1.选择、连接和画笔
选择分为两种模式,一种是部件全部在框选范围内的,一种是只要部分在框选范围内的。
Connect:连接线,常用于画流程图时使用,连接两个部件
Pen:这是axure8新增的功能,可以自由绘制矢量图,可以调节节点,绘制时有两种方式,一种是连续单击,一种是点击后持续按住鼠标左键画贝尔曲线。
1.1.2.排列顺序
排列顺序经常会使用到,在不断的添加部件时,有时为了让某个部件显示在前面或者后面,需要设置部件的显示顺序
1.1.3.组合与分散
组合部件是为了能方便选择,组合的部件可以整体选择,也可以对组合部件设置共同样式。
使用场景举例:弹出窗口、组合按钮
1.1.4.对齐和分布
这个其实用的不多,一般情况手工拖动,肉眼观察一下就差不多了,对界面没有特别要求的情况下不会使用,其中偶尔会用到的是平均分布或垂直分布,在选择至少三个相似形状和大小的部件,让其对齐后再平均分布。
使用场景:多个菜单项、列表项的对齐分布
例如上面三个形状大小一样的矩形,现在需要让它水平对齐,并且平均分布的话,可以分别先选中“向上对齐”:
再选中水平平均分布:
最终的结果如下:
1.1.5.锁定与解锁
对于界面上的部件,如果不想再进行其它部件操作的时候影响到它,可以选择将它锁定,锁定的部件以红色虚线边框显示,你不能对它进行选择和操作。
使用场景:锁定不受影响的设计部分
上图中,你拖动的结果只会影响到下面的绿色边框选中的部件,上面三个部件你是无法移动它的。
1.1.6.左右面板
这个是为了显示或隐藏左右两侧的面板,扩大设计区域。
你也可以通过点击左右面板的浮动箭头,让面板浮动起来,再点击关闭按钮:
1.1.7.发布
如果你的原型设计好了,想预览或者最终展示给用户、开发人员、测试人员等看时,可以F5预览,或者F8键导出html格式的页面,然后使用浏览器打开,这样没有安装axure的用户也可以看到你的原型结果了。
其中Share允许你将你的原型发布到axshare网站上,可以在线预览,而且你可以选择在发布时设置访问密码。(需要注册为网站用户)
1.2. 左侧面板
1.2.1.页面结构图
你的原型页面至少会包含一个页面,如果你的需求很复杂,有多个模块,多个页面的,你可以通过添加子文件夹和子页面来组织你的原型页面。
1.2.2.部件库
Axure默认自带了最常用的部件,如按钮、矩形、圆形、图像、占位符、标签,表单元素、菜单和表格、标记等,axure8里比axure7的版本里多了些组件,这些多出的组件是在实际应用的经验基础上,总结出更为常用的一般性部件。
如box,分成三种:白色有边框,浅灰色无边框和深灰色无边框:
按钮分为:普通按钮、主按钮(回车时会响应此按钮事件)和超链接按钮:
标签(markup)是新增的一类部件,有快照、箭头和即时贴(用于标注):
当然,除了axure自带的部件库,我们可以加载第三方的部件库,包括我们自己设计的部件库。
1.2.3.母版库
母版是用户自定义的一组部件,将它转成母版目的是可以一次设计,多次使用,避免重复劳动。另外一个好处是可以在母版里预先设计好位置,在拖动到设计区域时,会自动固定到该位置且是锁定状态,这样可以不用再次烦神怎么把它放在合适的位置。常用的用法是页面上公共部分的设计,例如工具栏和左侧菜单,如果我们希望它每次都固定在设计区域距左上角(10,10)的位置:
当从母版库拖动到设计区域时的效果:
可以发现母版被固定在界面的(10,10)位置,无法操作。
1.3. 样式工具栏
1.3.1.字体与大小
没啥好说的
1.3.2.对齐
这里的对齐是指部件上的文字的对齐方式,熟悉word的对此并不陌生。
1.3.3.边框与填充
边框与填充也没啥可说,唯一有个小技巧就是关于边框或背景颜色设置的问题。
当我们想根据UI提供的效果图上某块区域的颜色值,设置部件背景或边框色时,如果凭肉眼肯定无法准确获取对应的颜色值,当然我们也不用劳烦设计人员告诉我们这个颜色值到底是多少,只要使用一下颜色里的取色工具即可。
例如下图:
我们想使用一个矩形来当做菜单链接的背景区域,大致知道它是一个深红色背景,一个简单的取色方法是使用截图工具截取一部分图片,粘贴到axure的设计区域,选中要设置背景的矩形:
取色后设置的背景:
然后可以把那个截图给删除了。
1.3.4.位置信息
位置信息里有块新增的功能,关于宽度和高度的比例锁定,但是只会在手工输入宽度或高度的情况下才有效,如果你在设计区域改动大小的话,这时的锁定功能是无效的:
1.4. 右侧面板
1.4.1.交互和样式
这里是设计原型交互的重要面板,主要是用来添加各种交互事件。
有几类的部件支持的事件不太相同,分别了解一下。
页面事件:
在页面加载、窗口大小改变及窗口滚动时的事件
普通部件事件,如按钮、矩形、图片:
动态面板事件:
常用事件为onDrag、onLoad
单选、多选部件:
这些事件其实也很少用。
列表:
列表部件用的场景不多。
1.4.2.大纲
这里列出的是所有在设计区域的部件列表,可以通过名称快速搜索:
1.5. 右键菜单
1.5.1.交互样式
这是个非常重要的菜单,可以设置部件在鼠标经过(MouseOver)、鼠标按下(MouseDown)、选中状态(Selected)和不可用状态(Disabled)状态下的样式:
一个典型的应用是设计按钮的不同事件状态下的效果:
另一个应用就是开关按钮,通过设置部件的选中样式来表示开关按钮的状态,例如:
1.5.2.转换成动态面板
选中一个或多个部件,将它们转成动态面板。
最开始一般我们并不知道什么时候把它转成动态面板比较合适,所以我们常常是伴随着设计的过程中,根据需要将部件转成动态面板。
1.5.3.转换成母版
选中一个或多个部件,将它们转成母版,转时可以选择母版的应用方式,后期也能重新修改应用方式:
1.6. 导出html页面
为了将原型的设计结果输出,常用的方式为输出为html格式,这样其他人通过浏览器就可以查看我们的原型效果了。
快捷键为F5,axure会在本地启一个web服务器,通过访问本地服务器的方式预览html页面。
1.7. 在手机上查看
如果你想在手机上查看原型效果,可以在设计原型时,宽度设计成和手机分辨宽度差不多的大小,然后在发布(快捷键F8)时,只需要勾选一下发布选项即可:
然后将导出的所有html文件传到手机上,使用手机浏览器打开页面,或者如果你有web服务器,你可以上传到你的web服务器上查看。