Axure-RP-8交互原型设计案例教程第5章-应用样式课件

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