Axure 8.0基础教程:使用元件

Published on 2016 - 09 - 19

基础1. 添加元件到画布

在左侧元件库中选择要使用的元件,按住鼠标左键不放,拖动到画布适合的位置上松开。(图1)

基础2. 添加元件名称

文本框属性中输入元件的自定义名称,建议采用英文命名。

建议格式:PasswordInput01或Password01

名称含义:序号01的密码输入框

格式说明:“Password”表示主要用途;“Input”表示元件类型,一般情况下可省略,当有不同类型的同名元件需要区分或名称不能明确表达用途的时候使用;“01”表示出现多个同名元件时的编号;单词首字母大写的书写格式便于阅读。(图2)

基础3. 设置元件位置/尺寸

元件的位置与尺寸可以通过鼠标拖拽调整,也可以在快捷功能或元件样式中进行输入调整。(图3)

x:指元件在画布中的x轴坐标值。
y:指元件在画布中的y轴坐标值。
w:指元件的宽度值。
h:指元件的高度值。

在输入数值调整元件尺寸时,可以在样式中设置,让元件【保持宽高比例】。(图4)

基础4. 设置元件默认角度

方式一:选择需要改变角度的元件,按住键的同时,用鼠标拖动元件的节点到合适的角度。(图5)

方式二:在元件样式中进行角度的设置,元件的角度与元件文字的角度可以分开设置。(图5)

基础5. 设置元件颜色与透明

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

基础6. 设置形状或图片圆角

可以通过拖动元件左上方的圆点图标进行调整,也可以在元件样式中设置圆角半径来实现。(图7)

基础7. 设置矩形仅显示部分边框

在Axure RP 8的版本中,矩形的边框可以在样式中设置显示全部或部分。(图8)

基础8. 设置线段/箭头/边框样式

线段、箭头和元件边框的样式可以在快捷功能或者元件样式中进行设置。(图9)

基础9. 设置元件文字边距/行距

在元件样式中可以设置元件文字的【行间距】与【填充】。(图10)

  • 行间距:是指文字段落行与行之间的空隙。
  • 填充:是指文字与形状边缘之间填充的空隙。

基础10. 设置元件默认隐藏

选择要隐藏的元件,在快捷功能或者元件样式中勾选【隐藏】选项。(图11)

基础11. 设置文本框输入为密码

文本框属性中选择文本框的{类型}为【密码】。(图12)

基础12. 设置打开选择文件窗口

文本框属性中选择文本框的{类型}为【文件】,即可在浏览器中变成打开选择本地文件的按钮。该按钮样式各浏览器略有不同。(图13)

基础13. 限制文本框输入字符位数

在文本框属性中输入文本框的{最大长度}为指定长度的数字。(图14)

基础14. 设置文本框提示文字

在文本框属性中输入文本框的{提示文字}。提示文字的字体、颜色、对齐方式等样式可以点击【提示样式】进行设置。(图15)

提示文字设置包含{隐藏提示触发}选项,其中:

  • 输入:指用户开始输入时提示文字才消失。
  • 获取焦点:指光标进入文本框时提示文字即消失。

基础15. 设置文本框回车触发事件

文本框回车触发事件是指在文本框输入状态下按<回车>键,可以触发某个元件的【鼠标单击时】事件。只需在文本框属性中{提交按钮}的列表中选择相应的元件即可。(图16)

基础16. 设置鼠标移入元件时的提示

在文本框属性中{元件提示}中输入提示内容即可。(图17)

基础17. 设置矩形为其他形状

在画布中点击矩形右上方圆点图标即可打开形状列表,设置为其它形状。(图18)

基础18. 设置自定义形状

在形状上点击<鼠标右键>,在菜单中选择【转换为自定义形状】,即可对形状进行编辑。也可以通过点击形状右上角的圆点图标,在打开的形状选择列表中选择【转换为自定义形状】。具体的编辑操作见图19中的标注。

基础19. 设置形状水平/垂直翻转

在形状的属性中可以对形状进行【水平翻转】和【垂直翻转】的操作。(图20)

基础20. 设置列表框的内容

下拉列表框与列表框都可以设置内容-列表项。可以通过【属性】-【列表项】的选项来设置,也可以通过鼠标双击元件进行设置。(图21)

基础21. 设置元件默认选中/禁用

元件的属性中可以对一些元件的默认状态进行设置,可以设置的状态包括【选中】和【禁用】,默认状态的设置,可以触发属性中设置的交互样式。比如设置某个元件在浏览器中默认为禁用的灰色,就需要勾选【禁用】(复选框),并设置【禁用】的交互样式。(图22)

除了禁用与选中个别元件还具有【只读】的设置。例如:文本框与多行文本框。

基础22. 设置单选按钮唯一选中

全选所有的单选按钮,在元件属性中{设置单选按钮组名称},即可实现唯一选中的效果。(图23)

基础23. 设置元件不同状态的交互样式

点击元件属性中各个交互样式的名称,即可设置元件在不同状态时呈现的样式。这些样式在交互被触发时,就会显示出来。(图24)比如设置元件默认状态为禁用,在浏览原型时,页面打开后就会显示该元件被禁用的样式。

基础24. 设置图片文本

设置图片文本需要在图片上点击<鼠标右键>,选择【编辑文本】,方可进行图片上的文字编辑。(图25)

基础25. 切割/裁剪图片

在图片的元件属性中,设有切割和裁剪功能的图标,点击即可使用相应功能。元件上点击<鼠标右键>,菜单中也有相应的选项。(图26)

  • 切割:可将图片进行水平与垂直的切割,将图片分割开。
  • 裁剪:可将图片中的某一部分取出。裁剪分为几种,分别是裁剪、剪切、和复制。其中:裁剪只保留被选择的区域;剪切是将选取的部分从原图中剪切到系统剪贴板中;复制是将选取的部分复制到系统剪贴板中,复制的方式对原图没有影响。

基础26. 嵌入多媒体文件/页面

基本元件中的内联框架可以插入多媒体文件与网页。双击元件或者在属性中点击【框架目标页面】,在弹出的界面中选择【链接到url或文件】,填写{超链接},内容为多媒体文件的地址(网络地址或文件路径)或网页地址。在这个界面中也可以选择嵌入原型中的某个页面。(图27)

图中嵌入的优酷视频地址:http://player.youku.com/player.php/sid/XMTM2MDA3NDA0OA==/v.swf

基础27. 调整元件的层级

元件的层级可以通过点击快捷功能中的图标或者右键菜单的【顺序】选项进行调整,也可以在页面内容概要中通过拖动进行调整。概要中层级顺序为由上至下,最底部的元件为最顶层。(图28)

基础28. 组合/取消组合元件

通过快捷功能图标或右键菜单可以将多个元件组合到一起,达到共同移动/选取/添加交互等操作。组合/取消组合的快捷键为< Ctrl G>键/键。(图29)

基础29. 转换元件为图片

形状/文本标签/线段等元件可以通过点击<鼠标右键>,选择将元件【转换为图片】。例如,使用少量特殊字体或者图标字体时,即可将元件转换为图片,避免在未安装字体的设备上浏览原型时不能正常显示。(图30)

基础30. 载入元件库

除了使用软件自带的默认元件库与流程图元件库,用户还可以加载自定义元件库。加载自定义元件库只需点击功能图标,在列表中选择【载入元件库】。(图31)

基础31. 切换元件库

在元件库功能面板中,可以通过点击元件库列表,选择不同的元件库进行使用。(图32)

参考文档