AxureRP产品原型设计课件 第4章 元件的样式与母版

本章介绍：在AxureRP中，样式与母版是保证原型一致性和提高设计效率的关键工具，并为设计师提供了系统化的方法构建和管理高保真原型。本章对设置元件属性、创建和管理样式、认识母版、创建和编辑母版以及添加母版到页面进行系统讲解。通过对本章的学习，读者可以对AxureRP的元件样式与母版有一个全面的认识，并快速掌握常用元件样式、母版的使用技巧以及用AI工具制作App高保真原型的方法。第4章元件的样式与母版知识目标掌握AxureRP常用的元件属性熟悉母版能力目标具备设置AxureRP元件属性的能力具备创建和管理AxureRP样式的能力具备创建和编辑AxureRP母版的能力掌握添加母版到页面的方法和技巧掌握用AI工具制作App高保真原型的方法素质目标培养使用AxureRP元件样式与母版的良好习惯培养锐意进取、精益求精的工匠精神培养一定的设计创新能力和艺术审美能力4.1设置元件属性在“样式”面板中可以访问元件的不透明度、排版、填充、线段、阴影、圆角以及边距等属性。通过设置这些属性，用户可以自定义元件的外观样式。课堂案例——制作中式茶业官网茶叶详情页的高保真原型不透明度排版填充线段阴影圆角边距4.1.1课堂案例——制作中式茶业官网茶叶详情页的高保真原型使用“插入”按钮添加素材图片，使用“样式”面板设置元件属性。效果图4.1.2不透明度选中元件，拖曳“样式”面板中“不透明性”右侧的滑块或在文本框中输入数值，即可调整元件的不透明度。4.1.3排版在“样式”面板的“排版”选项组中，可以设置字体、字形、字号、颜色、行间距以及字间距等属性。4.1.3排版1．文字设置单击“Arial”，在弹出的“WEB安全字体”下拉列表中可以选择字体。4.1.3排版2．行间距在行间距（线段）文本框中输入数字即可设置行间距。3．字间距在“字间距”文本框中输入数字即可设置字间距。4．附加文本选项单击“附加文本选项”按钮，在弹出的面板中可以设置项目符号、粗体、斜体、下画线、删除线、基线和字母大小写。4.1.3排版5．文字阴影单击“文字阴影”按钮，在弹出的面板中勾选“阴影”复选框，即可为文本添加阴影。6．对齐单击“排版”选项组中的7个对齐按钮，即可实现文本的各种对齐效果。4.1.4填充在AxureRP中，可以使用“颜色”和“图片”两种方式进行填充。选中元件，单击“颜色”按钮，在弹出的拾色器面板中可以设置元件的填充颜色，可以选择“单色”“线性”“径向”3种不同的填充类型。选中元件，单击“图片”按钮，在弹出的图片面板中单击“选择”按钮，即可选择一张图片作为元件的背景图片。4.1.5线段在“样式”面板的“线段”选项组中，可以设置线段（边框）的颜色、线宽、类型、可见性以及箭头样式等属性。4.1.6阴影AxureRP允许为元件添加外部阴影和内部阴影，如图4-36所示。选中元件，单击“阴影”选项组中的“外部”按钮，在弹出的面板中勾选“阴影”复选框，即可添加外部阴影效果。内部阴影效果的设置与外部阴影效果大致相同。4.1.7圆角选中矩形元件、“图片”元件和按钮元件等元件，在“圆角”选项组的“半径”文本框中输入数字，即可添加圆角效果。单击“可见性”按钮，在弹出的面板中单击不同的矩形，即可设置4个边角的圆角效果是否可见。4.1.8边距在元件中输入文本时，AxureRP会默认添加2像素的边距。修改“样式”面板“边距”选项组中的数值，即可修改文本边距。4.2创建和管理样式一套产品原型由多个页面组成，每个页面又包含大量元件，逐个设置元件样式既费力又不便于修改。通过创建和管理页面样式与元件样式，能快速添加样式并便于修改。课堂案例——制作企业招聘H5关于我们页的高保真原型创建页面样式创建元件样式编辑元件样式格式刷4.2.1课堂案例——制作企业招聘H5关于我们页的高保真原型使用“管理元件样式”按钮创建元件样式，使用“插入”按钮插入素材。效果图4.2.2创建页面样式单击页面的空白处，再单击“样式”面板中的“管理页面样式”按钮，在弹出的“页面样式管理”对话框中，单击“添加”按钮并命名，即可创建一个新的页面样式。在对话框右侧可修改页面样式的页面排列、颜色、图片、图片对齐、重复和低保真度等属性。4.2.3创建元件样式将“元件库”面板中的元件拖曳至画布，单击“样式”面板中的“管理元件样式”按钮，弹出“元件样式管理”对话框，单击“添加”按钮并命名，即可创建一个新的元件样式。4.2.4编辑元件样式要修改元件样式，可以再次单击“管理元件样式”按钮，在“元件样式管理”对话框中进行编辑。添加：单击该按钮，将新建一个样式。复制：单击该按钮，将复制选中的样式。删除：单击该按钮，将删除选中的样式。上移/下移：单击这两个按钮，所选的样式将向上或向下移动一级。复制：单击该按钮，将复制当前的样式属性到内存中；选择另一个样式再次单击该按钮，复制的样式属性会替换当前的样式属性。4.2.5格式刷使用格式刷可以更便捷地复制和粘贴元件的样式属性。选中需要复制样式属性的元件，选择“编辑>格式刷”命令或按Ctrl+M组合键，即可打开“格式刷”对话框。单击“复制”按钮，选中需要粘贴样式属性的元件，单击“应用”按钮，即可粘贴元件样式属性。4.3认识母版母版是元件的集合，用于复用产品原型中重复出现的元素。对母版所做的更改将自动更新到项目中的每个母版实例上。通常创建为母版的元素包括网站的页眉和页脚等。4.3认识母版以及App的状态栏、导航栏（应用栏）、标签栏（底部应用栏）等，因为它们会重复出现在网站或App的每个页面中。4.4创建和编辑母版母版通常保存在“母版”面板中。通过“母版”面板可以完成添加母版、添加母版文件夹以及查找母版等操作。课堂案例——创建旅游出行App状态栏和指示器母版创建母版课堂案例——将中式茶业官网底部转换为母版编辑和转换母版搜索母版删除母版4.4.1课堂案例——创建旅游出行App状态栏和指示器母版使用“添加母版”按钮添加“母版”，使用“插入”按钮添加素材，使用“样式”面板调整元件和画布的外观样式。效果图4.4.2创建母版单击“母版”面板右上角的“添加母版”按钮并命名，即可创建一个母版。右击“母版”面板中的母版，在弹出的菜单中选择“添加”命令下拉列表中的命令，即可在当前母版上方、下方添加母版等。4.4.2创建母版击“母版”面板中的母版，在弹出的菜单中选择“添加”命令下拉列表中的命令，即可在当前母版上方、下方添加母版等。4.4.2创建母版右击“母版”面板中的母版，在弹出的菜单中选择“移动”命令下拉列表的命令，或直接拖曳母版，即可对母版进行上移、下移、降级或升级的操作。此外，还可以进行删除、剪切、复制、粘贴、重命名或重复等操作。4.4.2创建母版为了便于母版的管理，可以通过文件夹对母版进行分类。单击“母版”面板右上角的“添加文件夹”按钮，或右击“母版”面板中的母版，在弹出的菜单中选择“添加>文件夹”命令，即可在面板中新建一个文件夹。4.4.3课堂案例——将中式茶业官网底部转换为母版使用“转换为母版”命令将中式茶业官网底部转换为母版。效果图4.4.4编辑和转换母版双击“母版”面板中的母版，进入母版编辑界面，使用“元件库”面板中的各类元件即可编辑母版。母版编辑完成后，选择“文件>保存”命令，即可保存编辑后的母版。4.4.5搜索母版通过搜索，用户可以在众多母版中快速找到需要的母版。单击“母版”面板左上角的“搜索”按钮，顶部出现搜索文本框，输入要搜索的母版名称，即可看到相应的母版。4.4.6删除母版在“母版”面板中选中要删除的母版，按Delete键或右击，在弹出的菜单中选择“删除”命令，即可删除当前母版。4.5添加母版到页面要将母版添加到页面，在“母版”面板中选择母版，将其拖曳至画布即可。母版出现在画布上，被红色遮罩覆盖，选择“视图>遮罩”命令，即可切换母版遮罩。另外，还可以一次性将母版添加到多个页面，以及一次性从多个页面中移除母版。课堂案例——在旅游出行App引导页中添加母版拖放行为文本和图片重写使用情况报告4.5.1课堂案例——在旅游出行App引导页中添加母版通过“母版”面板完成在旅游出行App引导页中添加母版的操作。效果图4.5.2拖放行为更改母版“拖放行为”可以更改其添加到画布时的行为。右击“母版”面板中的母版，在弹出的菜单中选择“拖放行为”命令，即可选择“任意位置”、“固定位置”和“脱离母版”3种拖放行为。4.5.3文本和图像重写将母版添加到画布后，在“样式”面板的“重写”选项组中可更改母版实例中的文本和图片。4.5.4使用情况报告在“母版”面板中右击母版，在弹出的菜单中选择“使用情况”命令。在弹出的“母版使用情况报告”对话框中，可以快速查看母版添加到了哪些页面。4.6课堂练习——制作中式茶业官网关于品茗页的高保真原型使用“插入”按钮添加素材图片，使用“样式”面板设置元件属性。效果图4