Axure原型设计基础项目三定义元件库学习目标 1.掌握元件库的创建方法。2.掌握元件库的设置方法。3.掌握元件库的基本操作方法。3.1 创
建元件库 3.1.1 元件库窗口元件库窗口即位于软件界面左侧的第2个功能模块,如图3-1所示,这个模块用于对所有元件进行管理。进行
原型页面制作时,只需要在元件上按住鼠标左键,然后拖动到主编辑区松开,即可将元件摆放在指定的位置上。页面的内容就是由一个一个元件组成
的,所以说,网页的内容通常都能通过元件的组合搭配模拟出来。“元件库列表”用于选择元件库,能够帮助我们方便地切换元件库或者显示全部的
元件库,如图3-2所示。软件本身自带了3个元件库:默认元件库(Default)、流程图元件库(Flow)、图标元件库(Icons)
。“选项”菜单用于管理元件库,如图3-3所示,既可以方便地载入和卸载元件库,也可以创建和编辑自定义元件库。图3-1 元件库窗口图3
-2 选择元件库 图3-3 管理元件库3.1.2 元件的类别1.类别(1)Default>基本元件。基本元件是组成各类原型
的基本元素,如图3-4所示。图3-4 基本元件(2)Default>表单元件。在编程开发中,表单元件用于向页面中输入数据以形成表单
,并提交到服务器,如图3-5所示。图3-5 表单元件● 文本框和多行文本框:用于输入文字。● 下拉列表框和列表框:用于输入不同的选
项。● 复选框和单选按钮:分别用于多选和单选的输入。● 提交按钮:在编程开发中,单击该按钮能够完成表单的提交动作,但是在原型制作中
不涉及与服务器的交互,所以一般会用自定义的形状按钮或图片按钮来代替它。(3)Default>菜单和表格。● 树:该菜单是一种比较常
用的菜单形式,经常用于制作网站后台的功能列表。● 表格:在页面中呈现数据表时会用到表格,但是Axure的表格不支持合并单元格的操作
,遇到这种需求时,通常用一个矩形进行遮盖,达到看似合并的效果。● 水平菜单和垂直菜单:用于制作网站导航栏或者分类标签等,如图3-6
所示。图3-6 菜单和表格 (4)Default>标记元件。标记元件主要用于在完成的原型上标记说明,如图3-7所示。图3-7 标
记元件双击标记元件可以为其添加文字。选中标记元件,可以在工具栏上修改其填充颜色、线框颜色、线框粗细、线框样式、阴影样式等。(5)F
low。该类元件用于绘制流程图。一般来说,不同形状的流程图元件代表不同的意义。例如,矩形用作执行框,圆角矩形用作开始或结束标记,斜
角矩形用作数据框,括弧用于注释或说明,半圆形用作页面跳转或流程跳转的标记,三角形控制传递,梯形代表手工操作,如图3-8所示。图3-
8 Flow(6)Icons。这是Axure RP 8提供的基于形状的Font Awesome图标元件库,可以直接拖曳使用,无须进
行字体安装、Web字体设置,也不用担心浏览原型时图标不能正常显示,如图3-9所示。图3-9 Icons2.检视:[元件]以“检视:
矩形”为例。(1)元件的名称。检视:矩形模块中的第一项是元件名称的编辑框,如图3-10所示。为元件添加名称有助于我们准确、方便地选
取元件。图3-10 元件名称(2)元件属性。元件属性模块用于给当前元件添加交互事件,如图3-11所示。图3-11 添加交互“添加用
例”功能用于在单击下方任意一个触发事件后添加用例并打开用例编辑窗口;“创建连接”功能用于设置元件被单击后跳转到当前项目的其他页面。
(3)元件说明。元件说明模块用于给元件添加注释说明,如图3-12所示。例如,在绘制带有输入框的原型时,需要为输入框设置输入限制,如
不能包含特殊字段等。因为在原型上实现复杂的验证不方便,所以可通过这种方式来说明验证要求,如图3-13所示。图3-12 元件说明
图3-13 添加说明(4)元件样式。元件样式模块用于给当前元件设置相应的样式,可以使原型更加生动、形象,如图3-14所示。图
3-14 元件样式3.1.3 创建元件库(1)在元件库面板的“选项”菜单中选择“创建元件库”,如图3-15所示。图3-15 创建元
件库(2)在弹出的“保存Axure RP元件库”的对话框中,选择一个用于保存元件库的位置,并输入自定义的元件库名称,如图3-16所
示。注意元件库文件的图标和后缀名样式。图3-16 设置文件名(3)单击“保存”按钮后会打开元件库编辑器,如图3-17所示。(4)元
件库编辑器与原型的编辑页面大同小异。不同之处在于站点地图变成了元件库的管理模块,页面功能设置变成了对元件属性和说明的设置,如图3-
18所示。图3-17 元件库编辑器图3-18 元件编辑状态3.2 设置元件库 (1)设置元件名称,如图3-19所示。图3-19
设置元件名称(2)编辑元件组成内容,调整属性及样式,如图3-20所示。图3-20 调整属性及样式(3)添加元件交互样式,如图3-2
1所示。图3-21 添加元件交互样式1)单击“更多事件>>>”,如图3-22所示。图3-22 更多事件2)设置鼠标悬停时导入图片,
如图3-23所示。图3-23 导入图片确定导入,如图3-24所示。图3-24 确定导入3)设置鼠标选中时导入图片,如图3-25所示
。图3-25 选择图片4)确定导入,如图3-26所示。图3-26 确定导入5)选择“鼠标单击时”,添加元件交互样式,如图3-27所
示。图3-27 选择“鼠标单击时”6)设置添加图片条件,如图3-28所示。图3-28 设置添加图片条件(4)设置元件图标和提示信息
,如图3-29所示。图3-29 设置元件图标和提示信息(5)按照上面的步骤可以为元件库添加多个元件,无论是复杂的模块还是简单的图标
都可以作为元件,如图3-30所示。当完成所有元件的编辑后按组合键“Ctrl+S”或选择“保存”选项保存到元件库,如图3-31所示,
然后关闭元件库编辑器。 图3-30 添加元件图3-31 保存3.3 使用元件库 (1)返回原型编辑器,在元件库面板的“选项”菜单
中,选择“刷新元件库”,如图3-32所示。做好的元件就会在元件列表中显示出来,效果如图3-33所示。图3-32 刷新元件库图3-3
3 交互效果(2)除了可以自己创建元件库,还可以导入他人制作的元件库。(3)自定义元件库可以通过元件库面板的“选项”菜单中的“载入
元件库”命令载入,也可以通过“卸载元件库”命令删除。如果元件库的内容需要修改,可以选择“编辑元件库”命令进行操作。(4)除了可载入
元件库,还可以通过复制的方式将自定义元件库添加到元件库的列表中。把.rplib文件复制到Axure安装目录的\DefaultSet
tings\Libraries文件夹中,重新打开Axure,就能够在列表中看到这个元件库的名称并可进行选择和使用了。项目小结 本项
目详细介绍了Axure RP 8的元件库的创建、设置和使用方法。元件库基本类型为矩形框、文本标签、图标、文本输入框等,通过设置元件的交互样式,就可以实现简单的事件处理。进行原型页面制作时,只需要用鼠标左键点住元件库里面的元件,然后拖动到主编辑区松开,即可将元件摆放在指定的位置上。页面的内容就是由一个一个元件组成的,所以说,网页的内容通常都能通过元件的组合搭配模拟出来。感谢观看 THANKS! |
|
