工具简介
主要介绍axure的基本元件使用,熟悉该软件的各个功能区。
1.添加元件到画布
在打开axure软件之后,添加元件到画布,在左侧元件库中选择要使用的元件,按住鼠标左键不放,拖到画布适合的位置后松开鼠标,如下图所示:
在检视面板的元件名称文本框输入元件的自定义名称,这样方便后面制作原型的过程中,设置元件属性等时便于查找元件,如下图所示:
元件的尺寸与位置可以通过鼠标拖拽,也可以在快捷功能或元件样式中进行输入调整。
x:指元件在画布中的x轴坐标值。
y:指元件在画布中的y轴坐标值。
w:指元件的宽度值。
h:值元件的高度值。
在输入数值调整元件尺寸时,可以在样式中设置,让元件保持宽度比例,如下图所示:
方式一:选择需要改变角度的元件,按住<ctrl>键的同时,用鼠标拖动元件的节点到合适的角度。
方式二:在元件样式中进行角度的设置,元件的角度与元件文字的角度可以分开设置,如下图所示:
选择要改变颜色的元件,但击快捷功能区中的背景颜色设置按钮,选取相应的颜色,或者在元件样式中进行设置,如下图所示:
可以通过拖动元件左上方的圆点进行调整,也可以在元件样式中设置圆角半径来实现,如下图所示:
矩形的边框可以在样式中设置显示全部或者部分及颜色实线/虚线,如下图所示:
线段,箭头的样式可以在快捷功能或者元件样式中进行设置,如下图所示:
在元件样式中可以设置元件文字的行间距与填充。
行间距:指文字段落行与行之间的空隙。
填充:指文字与形状边缘之间填充的空隙。
如下图所示:
选择要隐藏的元件,在快捷功能或者元件样式中勾选隐藏选项,如下图所示:
文本框的属性中选择文本框的类型为密码,如下图所示:
在文本框属性中输入文本框的最大长度为指定长度的数字,如下图所示:
在文本框属性中输入提示文字,提示文字的字体,颜色,对齐方式等样式可以单击提示样式进行设置。
提示文字设置主要在用户开始输入时,提示文字消失,或者鼠标进入文本框时提示文字消失,如下图所示:
文本框回车触发事件是指在文本框输入状态下按回车键,可以触发某个元件的鼠标点击事件,只需在文本框属性中提交按钮的列表中选择相应的元件即可,如下图所示:
在case编辑界面中单击添加条件按钮进行添加条件,如下图所示:
设置一个执行动作必须同时满足多个条件,或者仅需满足多个条件中的任意一个,需要在添加条件界面进行设置,如下图所示:
为多个条件判断关系时,只需要在相应的case名称上单击鼠标右键,选择切换if或else if,如下图所示:
如果要使用自己的元件库,用户可以自己进行本地载入,在元件库点击载入元件库即可,如图所示:
在元件库功能面板中,可以通过点击元件库列表,选择不同元件库进行使用,如下图所示:
在页面样式设置中选择页面居中的按钮,页面居中是指在浏览器中查看原型时页面内容居中显示,如下图所示:
可以设置页面背景颜色,背景图片,草图,黑白,如下图所示:
全局变量是一个数据容器,就像一个U盘,可以把需要的资料存入,随身携带,在需要的时候读取出来使用,全局变量的设置在项目——全局变量中,如下图所示:
局部变量在编辑值/文本的界面中进行创建,通过在插入变量或函数列表中选取使用。
局部变量能够在创建时获取多种类型的数据,如下图所示:
设置格式为[[公式内容]],公式内容可以进行计算,例如:[[3*18]],获取结果为:54;公式运算结果自动与公式外的内容连接在一起,形成一个字符串,例如:[[3*18]]名同学,获取的54名同学。变量和函数需要写在一个公式里面[[]],才能正确获取变量值或者函数运算结果,如下图所示:
开启软件自动备份功能,可以有效地帮助我们降低因误操作,软件崩溃,断电等异常时,未保存或者损坏文件的风险,文件的备份与恢复在文件菜单中进行相关操作,如下图所示:
自适应视图是指编辑多种分辨率的原型,设备中查看时,系统会根据自身分辨率,自动与分辨率相适合的原型进行匹配,并显示出来,自适应视图在项目,自适应视图中进行设置,如下图所示:
单击元件属性中各个交互样式的名称,即可设置元件在不同状态时呈现的样式,这些样式在交互触发时,就会显示出来,如下图所示:
在图片的元件属性中,设有切割和裁剪功能的图标,也可以使用快捷键Ctrl+6切割,Ctrl+7裁剪.
切割:将图片进行水平与垂直的切割,将图片分开。
裁剪,将图片中的某一部分取出来。
如下图所示:
基本元件中的内嵌框架可以插入多媒体文件与网页,双击元件或者在属性中点击框架目标页面,在弹出界面进行设置URL地址或文件,如下图所示:
预览原型的快捷键为F5,或者单击快捷功能中的预览图标进行预览,导航菜单,发布-预览选项中进行预览的设置,如下图所示:
生成原型的快捷键为F8,或者单击快捷功能中的生成图标,选择生成HTML元件进行生成,还可以通过导航菜单,发布-生成HTML文件,中进行生成,如下图所示:
生成的HTML需要存放在文件夹中,如下图所示:
可以只生成原型中的部分界面,如下图所示:
标志设置,可以为原型添加图片标识或者文字标题,原型发布后会显示在工具栏的页面面板中,如下图所示:
发布到AxShare时指将做好的原型发布到Axure官方提供的空间中,通过自动生成的网址进行访问,快捷键为F6,发布需要先注册账号,注册地址为:https://share.axure.com,如下图所示:
点击发布到AxShare后,弹出如下设置界面:
点击发布后,成功发布会自动生成一个网站,如下图所示:
当原型使用一些特殊字体时,在没有安装该字体的设备上将无法正常显示,Web字体可以较好地解决这个问题,Web字体使用包含两种方式。
方式一,连接css文件,设置简单,需要网络以及在校css文件支持。
方式二:@font—face,支持本地字体与在线字体,设置有点复杂。
选择@font-face
通过对本章的了解,初学者都可以设计基本的原型界面以及发布原型了。
原创文章,作者:交互精选,如若转载,请注明出处:https://www.iamue.com/35949/