Axure-RP-8-交互原型设计案例教程第5章.pptx

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