1、第5章 应用样式A x u r e R P 8 交 互 原 型设 计 案 例 教 程在Axure RP 中，打开元件样式编辑器有3 种方法。1.使用【元件样式编辑器】命令执行【项目】【元件样式编辑器】命令会打开【元件样式编辑器】对话框，默认状态下，Axure RP 提供了6 个标题元件样式和一个文本段落样式，如图5-1 所示。Axure RP 8 交互原型设计案例教程第第5 5章章应用样式应用样式5.1 5.1 元件样式元件样式5.1.1 打开元件样式编辑器Axure RP 8 交互原型设计案例教程第第5 5章章应用样式应用样式5.1 5.1 元件样式元件样式5.1.1 打开元件样式编辑器图
2、5-1【元件样式编辑器】对话框2.使用样式工具栏的按钮在样式工具栏中单击左侧的【管理元件样式】按钮，也可以打开【元件样式编辑器】对话框，如图5-2 所示。3.使用【样式】子面板还可以在页面上选择一个元件，然后单击【样式】子面板中的【管理元件样式】按钮打开【元件样式编辑器】对话框。Axure RP 8 交互原型设计案例教程第第5 5章章应用样式应用样式5.1 5.1 元件样式元件样式5.1.1 打开元件样式编辑器图 5-2 工具栏的【管理元件样式】按钮打开【元件样式编辑器】对话框之后，可以新建、复制、删除和移动元件样式。1.新建元件样式2.重命名元件样式3.复制元件样式4.删除元件样式5.移动元
3、件样式的顺序Axure RP 8 交互原型设计案例教程第第5 5章章应用样式应用样式5.1 5.1 元件样式元件样式5.1.2 元件样式的基本操作有两种方法可以应用元件样式。（1）通过【样式工具栏】在页面中选择元件后，单击【样式工具栏】左侧的元件样式列表按钮，从弹出的样式列表中选择要应用的元件样式。（2）通过【样式】子面板选择页面中的元件后，在程序界面右侧的【检视】【样式】子面板中也可以找到元件样式列表按钮。Axure RP 8 交互原型设计案例教程第第5 5章章应用样式应用样式5.1 5.1 元件样式元件样式5.1.3 应用元件样式对当前的元件重新设置样式参数时，在【样式】子面板中的样式列表
4、按钮处会自动显示“升级”字样的链接设置，如图5-3 所示。Axure RP 8 交互原型设计案例教程第第5 5章章应用样式应用样式5.1 5.1 元件样式元件样式5.1.4 更新元件样式图 5-3 出现“升级”链接【页面】面板是Axure RP 中专门用于管理页面的地方。默认状态下，Axure RP 启动后会在【页面】面板中自动创建包含一个主页和三个子页的文件。执行【视图】【面板】【页面】命令可以控制【页面】面板的显示和隐藏。在【页面】面板中，可以添加、删除和移动页面以及存放页面的文件夹，下面就来学习【页面】面板是如何管理页面的。Axure RP 8 交互原型设计案例教程第第5 5章章应用样式
5、应用样式5.2 5.2 页面样式页面样式5.2.1【页面】面板的基本操作1.添加页面/文件夹有两种方法可以添加页面/文件夹：单击【添加页面】按钮/【添加文件夹】按钮或者右击页面，在弹出的快捷菜单中，执行【添加】中的相应子菜单命令。通过右击页面弹出的快捷菜单中，“页面之前”是指添加的页面在当前页面的前面，使用该命令添加的页面与原页面是一个级别的，如图5-4 所示。Axure RP 8 交互原型设计案例教程第第5 5章章应用样式应用样式5.2 5.2 页面样式页面样式5.2.1【页面】面板的基本操作图 5-4 页面之前添加新页面同样道理，使用“页面之后”（【Ctrl+Return】）添加的页面就是
6、在当前页之后，所添加的页面与原页面也是一个级别的。如果执行【添加】【子页面】命令，则创建的页面将成为当前页的一个子页面，如图5-5 所示。Axure RP 8 交互原型设计案例教程第第5 5章章应用样式应用样式5.2 5.2 页面样式页面样式5.2.1【页面】面板的基本操作图 5-5 创建子页面2.删除页面/文件夹可按【Delete】键或右击鼠标，从弹出的快捷菜单中执行【删除】命令来删除选择的页面或文件夹。3.移动页面/文件夹有两种方法可以移动页面/文件夹：使用鼠标直接拖动或右击页面/文件夹，从弹出的快捷菜单中执行相应的移动页面/文件夹命令，如图5-6 所示。Axure RP 8 交互原型设计
7、案例教程第第5 5章章应用样式应用样式5.2 5.2 页面样式页面样式5.2.1【页面】面板的基本操作Axure RP 8 交互原型设计案例教程第第5 5章章应用样式应用样式5.2 5.2 页面样式页面样式5.2.1【页面】面板的基本操作图 5-6 使用按钮移动4.重命名页面/文件夹5.复制页面/文件夹6.查找页面/文件夹7.关闭和打开页面8.切换页面Axure RP 8 交互原型设计案例教程第第5 5章章应用样式应用样式5.2 5.2 页面样式页面样式5.2.1【页面】面板的基本操作页面格式化就是设置页面的相关属性，设置页面属性是在【检视】面板中进行的。默认状态下，如果不选择页面上的任何元件
8、，则【检视】面板标题栏上将出现“页面”字样，此时【样式】子面板中显示页面的样式参数，如图5-7 所示。Axure RP 8 交互原型设计案例教程第第5 5章章应用样式应用样式5.2 5.2 页面样式页面样式5.2.2 页面格式化图 5-7 页面样式参数如果选择了页面上的一个或多个元件，则【检视】面板标题栏上将出现元件的名称，此时，可以单击【检视】面板标题栏右侧的【页面】按钮，在页面样式和元件样式之间切换，如图5-8 所示。Axure RP 8 交互原型设计案例教程第第5 5章章应用样式应用样式5.2 5.2 页面样式页面样式5.2.2 页面格式化图 5-8 切换页面样式和元件样式1.页面对齐页
9、面对齐是指控制页面中的元件在浏览器窗口中的位置，包含左对齐和水平居中对齐两种。【左对齐】是在浏览器中，页面中的所有元件作为一个整体靠左对齐，这也是Axure RP 默认的页面对齐方式，如图5-9 所示。Axure RP 8 交互原型设计案例教程第第5 5章章应用样式应用样式5.2 5.2 页面样式页面样式5.2.2 页面格式化图 5-9 页面左对齐【水平居中】是在浏览器中，页面中的所有元件作为一个整体居中对齐，如图5-10 所示。Axure RP 8 交互原型设计案例教程第第5 5章章应用样式应用样式5.2 5.2 页面样式页面样式5.2.2 页面格式化图 5-10 页面居中对齐2.背景色通过
10、该参数可以给浏览的页面添加一种颜色作为背景，但不能给页面添加渐变色作为背景色，这一点与图形元件的填充色不同。单击背景参数栏右侧的按钮，可以打开背景颜色设置列表。给页面指定一种背景色后，会在Axure RP 的页面中直接显示出来。Axure RP 8 交互原型设计案例教程第第5 5章章应用样式应用样式5.2 5.2 页面样式页面样式5.2.2 页面格式化3.背景图片通过该参数可以给页面指定图片作为其背景，单击背景图片参数栏右侧的【导入】按钮可弹出导入图片对话框，在该对话框的文件类型下拉列表中列出了可供导入的图片格式，主要包括GIF、JPG、PNG、BMP、SVG 等。如果要清除作为页面背景的图片
11、，可以单击背景图片参数栏右侧的【清空】按钮，如图5-11 所示。在背景图片参数栏中，还可以设置背景图片在页面中的对齐方式，包括水平方向左、中、右对齐和垂直方向上、中、下对齐，如图5-12 所示。Axure RP 8 交互原型设计案例教程第第5 5章章应用样式应用样式5.2 5.2 页面样式页面样式5.2.2 页面格式化Axure RP 8 交互原型设计案例教程第第5 5章章应用样式应用样式5.2 5.2 页面样式页面样式5.2.2 页面格式化图 5-11 清空背景图片按钮图 5-12 背景图片的对齐方式4.草图/页面效果设置该参数栏的草图参数，可让页面上的图形元件变成手绘线条的效果。还可以在草
12、图/页面效果参数栏中设置背景图片重复的方式，包括不重复、重复、水平重复、垂直重复、填充和适应等选项，各种选项的效果如图5-13 所示。Axure RP 8 交互原型设计案例教程第第5 5章章应用样式应用样式5.2 5.2 页面样式页面样式5.2.2 页面格式化Axure RP 8 交互原型设计案例教程第第5 5章章应用样式应用样式5.2 5.2 页面样式页面样式5.2.2 页面格式化图 5-13 背景图像重复的方式示例图如果想在预览页面时显示灰色，可以单击页面【样式】子面板中的【灰度】按钮，如果要显示原来的颜色，则可以单击【原色】按钮。默认状态下，页面中显示的文字字体是通过样式工具栏中的字体设
13、置的，如果要统一指定显示在页面上字体，则可以在“草图/页面效果”参数栏中指定统一使用的字体，如图5-14 所示。Axure RP 8 交互原型设计案例教程第第5 5章章应用样式应用样式5.2 5.2 页面样式页面样式5.2.2 页面格式化图 5-14 指定页面统一显示的字体对于图形元件，还可以对其边框添加加粗效果，只要单击“草图/页面效果”参数栏底部的增加线宽按钮即可，如图5-15 所示。Axure RP 8 交互原型设计案例教程第第5 5章章应用样式应用样式5.2 5.2 页面样式页面样式5.2.2 页面格式化图 5-15 增加线宽按钮1.使用【项目】菜单命令执行【项目】【页面样式编辑器】命令。2.使用页面的【样式】子面板在【样式】子面板中，单击【管理页面样式】按钮。Axure RP 8 交互原型设计案例教程第第5 5章章应用样式应用样式5.2 5.2 页面样式页面样式5.2.3 创建和应用页面样式本章总结本章总结通过本章的学习，读者应熟练掌握元件样式和页面样式的创建以及使用方法。在本章中，还学习了【页面】面板的使用方法，包括新建、删除、复制页面的基本操作。THANKSA x u r e R P 8 交 互 原 型 设 计 案 例 教 程
