基础培训Word下载.docx

基础培训Word下载.docx

《基础培训Word下载.docx》由会员分享，可在线阅读，更多相关《基础培训Word下载.docx（11页珍藏版）》请在冰点文库上搜索。

（图1-4）

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

方式一：

选择需要改变角度的元件，按住键的同时，用鼠标拖动元件的节点到合适的角度。

（图1-5）

方式二：

在元件样式中进行角度的设置，元件的角度与元件文字的角度可以分开设置。

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

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

（图1-6）

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

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

（图1-7）

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

在AxureRP8的版本中，矩形的边框可以在样式中设置显示全部或部分。

（图1-8）

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

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

（图1-9）

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

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

（图1-10）

行间距：

是指文字段落行与行之间的空隙。

填充：

是指文字与形状边缘之间填充的空隙。

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

选择要隐藏的元件，在快捷功能或者元件样式中勾选【隐藏】选项。

（图1-11）

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

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

（图1-12）

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

文本框属性中选择文本框的{类型}为【文件】，即可在浏览器中变成打开选择本地文件的按钮。

该按钮样式各浏览器略有不同。

（图1-13）

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

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

（图1-14）

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

在文本框属性中输入文本框的{提示文字}。

提示文字的字体、颜色、对齐方式等样式可以点击【提示样式】进行设置。

（图1-15）

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

输入：

指用户开始输入时提示文字才消失。

获取焦点：

指光标进入文本框时提示文字即消失。

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

文本框回车触发事件是指在文本框输入状态下按<

回车>

键，可以触发某个元件的【鼠标单击时】事件。

只需在文本框属性中{提交按钮}的列表中选择相应的元件即可。

（图1-16）

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

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

（图1-17）

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

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

（图1-18）

基础18.设置自定义形状

在形状上点击<

鼠标右键>

，在菜单中选择【转换为自定义形状】，即可对形状进行编辑。

也可以通过点击形状右上角的圆点图标，在打开的形状选择列表中选择【转换为自定义形状】

（图1-18）。

具体的编辑操作见图1-19中的标注。

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

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

（图1-20）

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

下拉列表框与列表框都可以设置内容-列表项。

可以通过【属性】-【列表项】的选项来设置，也可以通过鼠标双击元件进行设置。

（图1-21）

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

元件的属性中可以对一些元件的默认状态进行设置，可以设置的状态包括【选中】和【禁用】，默认状态的设置，可以触发属性中设置的交互样式。

比如设置某个元件在浏览器中默认为禁用的灰色，就需要勾选【禁用】

（复选框），并设置【禁用】的交互样式。

（图1-22）

除了禁用与选中个别元件还具有【只读】的设置。

例如：

文本框与多行文本框。

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

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

（图1-23）

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

点击元件属性中各个交互样式的名称，即可设置元件在不同状态时呈现的样式。

这些样式在交互被触发时，就会显示出来。

（图1-24）比如设置元件默认状态为禁用，在浏览原型时，页面打开后就会显示该元件被禁用的样式。

基础24.设置图片文本

设置图片文本需要在图片上点击<

，选择【编辑文本】，方可进行图片上的文字编辑。

（图1-25）

基础25.切割/裁剪图片

在图片的元件属性中，设有切割和裁剪功能的图标，点击即可使用相应功能。

元件上点击<

，菜单中也有相应的选项。

（图1-26）

切割：

可将图片进行水平与垂直的切割，将图片分割开。

裁剪：

可将图片中的某一部分取出。

裁剪分为几种，分别是裁剪、剪切、和复制。

其中：

裁剪只保留被选择的区域；

剪切是将选取的部分从原图中剪切到系统剪贴板中；

复制是将选取的部分复制到系统剪贴板中，复制的方式对原图没有影响。

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

基本元件中的内联框架可以插入多媒体文件与网页。

双击元件或者在属性中点击【框架目标页面】，在弹出的界面中选择【链接到url或文件】，填写{超链接}，内容为多媒体文件的地址（网络地址或文件路径）或网页地址。

在这个界面中也可以选择嵌入原型中的某个页面。

（图1-27）

基础27.调整元件的层级

元件的层级可以通过点击快捷功能中的图标或者右键菜单的【顺序】选项进行调整，也可以在页面内容概要中通过拖动进行调整。

概要中层级顺序为由上至下，最底部的元件为最顶层。

（图1-28）

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

通过快捷功能图标或右键菜单可以将多个元件组合到一起，达到共同移动/选取/添加交互等操作。

组合/取消组合的快捷键为<

CtrlG>

键/键。

（图1-29）

基础29.转换元件为图片

形状/文本标签/线段等元件可以通过点击<

，选择将元件【转换为图片】。

例如，使用少量特殊字体或者图标字体时，即可将元件转换为图片，避免在未安装字体的设备上浏览原型时不能正常显示。

（图1-30）

基础30.载入元件库

除了使用软件自带的默认元件库与流程图元件库，用户还可以加载自定义元件库。

加载自定义元件库只需点击功能图标，在列表中选择【载入元件库】。

（图1-31）

基础31.切换元件库

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

（图1-32）

基础32.设置页面居中

在页面【样式】设置中选择页面居中的按钮。

页面居中是指在浏览器中查看原型时页面内容居中显示。

（图2-1）

基础33.设置页面背景（图片/颜色）

在页面【样式】中可以编辑页面的背景颜色以及背景图片。

（图2-2）

基础34.设置页面颜色（草图/黑白）

在页面的【样式】中，可以将当前页面的显示为草图效果，同时可以将页面颜色在彩色与黑白之间转换。

（图2-3）

基础35.添加条件判断

在用例编辑界面中点击添加【条件按钮】进行添加条件。

（图3-1）

比如：

判断当前元件上的文字包含“@”。

（图3-2）

基础36.设置条件逻辑关系

设置执行一个动作必须同时满足多个条件，或者仅需满足多个条件中的任何一个，需要在添加条件的界面中进行设置。

（图3-3）

基础37.用例条件转换

为多个用例改变条件判断关系时，只需要在相应的用例名称上点击<

，选择【切换为或】。

（图3-4）

基础38.全局变量设置

全局变量是一个数据容器，就像一个U盘，可以把需要的资料存入，随身携带，在需要的时候读取出来使用。

全局变量的设置在【项目】-【全局变量】中。

（图4-1）

基础39.局部变量设置

局部变量在编辑值/文本的界面中进行创建，通过在【插入变量或函数…】列表中选取使用。

局部变量能够在创建时获取多种类型的数据。

（图4-2）

基础40.公式的格式及类型

公式在编辑值/文本的界面中进行编辑，格式为“[[公式内容]]”。

公式内的内容可以进行运算，例如：

“[[3*15]]”获取的结果为“45”；

公式运算结果自动与公式外的内容连接到一起，形成一个字符串，例如：

“[[3*15]]个”获取的“45个”。

变量与函数需要在写入在公式的“[[]]”中才能够正确获取变量值或者函数运算结果。

（图4-3）

基础41.设置形状并排显示细边框

在【菜单】-【项目】的选项列表中，选择【项目设置】；

在弹出的面板中进行{边界对齐}的设置。

选择【边框重合】时，两个形状中间的边框为细边框；

选择【边框并排】时，两个形状中间的边框为粗边框。

（图5-1）

基础42.设置画布中的遮罩阴影

在【菜单】-【视图】-【遮罩】的选项列表中，取消相应的勾选。

比如画布中隐藏的元件不显示淡黄色的阴影，则取消【隐藏对象】的勾选。

（图5-2）

基础43.显示/隐藏交互与说明编号

在【菜单】-【视图】的选项列表中，取消【显示脚注】的勾选。

（图5-3）

基础44.显示/隐藏两侧的功能面板

点击快捷功能中的图标即可关闭开启相应的功能面板。

（图5-4）

基础45.展开/收起/弹出/停靠/关闭功能面板

如果某个功能面板需要更大的操作空间，可以将其弹出或者收起其它面板。

当完成操作后再进行还原。

面板弹出后可将其关闭。

（图5-5）

基础46.关闭/恢复功能面板

面板可以在弹出状态下点击【×

】将其关闭（图5-5），也可以在【视图】-【功能区】菜单中进行关闭或开启。

如果需要将功能区所有面板恢复默认。

可以在【视图】中通过【重置视图】来完成。

（图5-6）

基础47.文件备份与恢复

开启软件的自动备份功能，可以有效的帮助我们降低因误操作、软件崩溃、断电等异常时，未保存或者损坏文件的风险。

文件的备份与恢复在【文件】菜单中进行相关操作。

（图5-7）

基础48.设置自适应视图

自适应视图是指编辑多种分辨率的原型，设备中查看时，系统会根据自身分辨率，自动与分辨率相适合的原型进行匹配，并显示出来。

自适应视图在【项目】-【自适应视图】中进行设置。

（图5-8）

基础49.快速预览查看原型

预览原型的快捷键为键。

或者，点击快捷功能中的预览图标进行预览。

导航菜单【发布】-【预览设置】中进行预览的设置。

（图6-1）

基础50.生成HTML查看原型

生成原型的快捷键为键。

或者，点击快捷功能中的生成图标，选择【生成HTML文件】进行生成。

还可以通过导航菜单【发布】-【生成HTML文件…】中进行生成。

（6-2）

生成时，需要选择保存HTML文件的文件夹。

查看设置与预览设置相同。

（图6-3）

基础51.生成部分原型页面

发布原型时，如果不需要将所有页面生成或发布，可以在生成HTML的设置中打开【页面】的设置，取消【生成所有页面】的勾选，则可以设置生成指定的页面。

注意，子级页面无法单独发布，勾选子级页面时会自动勾选父级页面。

如果需要单独发布子级页面，需要在页面管理面板中将子级页面的级别调整到一级页面。

（图6-4）

基础52.为原型添加标志

在生成HTML的设置中有【标志】的设置，可以为原型添加图片标识或文字标题。

原型发布后会显示在工具栏的页面面板中。

（图6-5）

基础53.发布原型到AxShare

发布完成后，将会自动生成一个网址。

可以通过在PC或手机浏览器中打开该网址查看原型。

（图6-7）

基础54.重新生成当前页面

修改某个页面无需将整个原型HTML文件都重新生成一遍，只需要在【发布】的选项列表中，选择【在HTML文件中重新生成当前页面】即可。

（图6-8）

基础55.移动设备设置

除了制作成标准原型尺寸，还需要在生成HTML文件配置中，进行【移动设备】的设置，让生成的HTML文件【包含视口标签】，这样才能够正常显示。

（图6-9）

基础字体设置

当原型使用一些特殊字体时，在没有安装该字体的设备上将无法正常显示。

Web字体可以较好地解决这个问题。

Web字体的使用包含两种方式。

方式一、链接“.CSS”文件（图6-10）

优点：

设置简单。

缺点：

需要网络以及在线CSS文件支持。

以FontAwesome字体为例。

在Web字体设置中，点击【】添加新的配置，勾选【链接到“.CSS”文件】选项，将该字体官方网站提供的“.CSS”文件地址填入超链接中即可。

这样只要浏览原型时有网络支持，即可正常显示字体。

方式二、@font-face（图6-11）

支持本地字体与在线字体

设置略有复杂

仍以FontAwesome字体为例。

新建Web字体配置后，选择【@font-face选项】并填写代码。

在线字体代码如下：

font-family:

FontAwesome;

本地字体代码如下：

src:

url（\’\’）format（\’truetype\’）;

注意:

使用本地字体需要将字体文件（.ttf）拷贝到生成的HTML文件夹中。

通过以上方式处理后，未安装该字体的设备中查看原型时即可正常显示字体。

注意：

在AxureRP8的元件库中，提供了FontAwesome图标元件库，该元件库可以直接使用，无需进行上述设置。

但是，官方提供的FontAwesome图标元件库与上述元件库有很大区别，官方元件库中的图标并不是文字，而是形状。

在之后的案例中，我们需要将一些图标字体放入文本编辑界面进行编辑，这是官方元件无法做到的。