《软件产品设计》课件全套 第1-9章 关于软件产品设计-团队合作、发布与输出

第一章

关于软件产品设计CONTENTS目录01

1.1什么是软件产品设计02

1.2什么是原型设计03

1.3原型设计的作用和步骤04

1.4了解一下产品经理1.1什么是软件产品设计01软件设计核心概述

软件产品设计本质软件产品设计本质是融合用户需求、业务目标和技术可行性，打造满足特定用户需求且具商业价值的软件应用。

用户体验与交互设计用户体验设计：了解用户行为、期望和痛点，设计直观易用的交互界面和操作流程。交互设计：确定用户与软件互动方式，提高操作效率和准确性。

视觉与信息架构设计视觉设计含色彩、字体、图标等，营造视觉效果提升美感与品牌形象；信息架构设计组织信息呈现，提高软件可导航性。设计实现与生命周期设计综合性与目标软件产品设计是涵盖多阶段的综合性过程，依据用户需求制定开发方案，目标是为开发团队提供清晰准确的方向与目标。设计要素与生命周期设计要素含用户研究、信息架构等；软件生命周期分需求、设计等阶段，需求阶段最重要。设计综合要求

设计综合要求涵盖用户体验、交互、视觉及信息架构，需跨学科知识，融合心理学、人机工学与编程，目标易用、高效、吸引人。1.2什么是原型设计02信息系统生命周期模型概述

定义描述和规划信息系统从产生到消亡整个过程的框架。

作用帮助理解建设、运行和维护环节，有效管理控制项目实施。

典型模型包括瀑布模型、V模型、螺旋模型、迭代模型、原型化模型、敏捷方法等。

选择重要性选择合适模型对项目成功至关重要，需据具体需求和环境选择。瀑布模型

定义线性划分软件开发过程为一系列顺序执行阶段的经典模型。

阶段通常包括需求分析、系统设计、实现与单元测试、集成与系统测试、运行与维护。

优点流程清晰易理解使用，有明确文档输出，强调早期规划和需求分析。

缺点需求不明确或变更频繁时可能延期或超支，缺乏灵活性，易有“官僚主义”现象。V模型

定义将软件开发生命周期与软件测试活动紧密关联的模型。

阶段步骤经过需求分析、概要设计、详细设计、软件编码、单元测试、集成测试、系统测试和验收测试。

优点阶段性、顺序性和依赖性，测试策略全面，质量有保证，开发与测试结合。

缺点需求变更应对不足，测试滞后，文档要求高。螺旋模型定义演化软件开发过程模型，分多个迭代周期，结合多种方法，适合大型复杂高风险项目。阶段每个迭代周期包括需求定义、风险分析、工程实现和评审四个主要阶段。优点设计灵活，成本可控，质量保证，客户满意。缺点风险分析要求高，迭代次数多可能增加成本和时间，适用于内部开发。适用项目适合需求不明确、风险较高、开发周期较长的大型复杂软件项目。原型化模型

产生背景为弥补瀑布模型不足而产生，目的是减少开发风险。

定义强调在项目早期通过快速迭代和原型开发来不断完善优化信息系统的开发方法。

产品原型作用将原初设计、需求转化为现实产品，呈现给用户验证外观及合理性。

原型设计目的为产品经理提供呈现说明产品的方式，帮助快速低成本修改调整原型。

特点快速迭代、直观展示、增强用户参与度、降低风险。

优点可及早提供有用产品、发现问题纠正错误、减少技术应用风险、提高生产率、增强灵活性。原型化模型缺点时间和成本消耗，对设计开发环境要求较高，测试难度增加。适用项目适用于需求不明确、变化频繁或具有较大不确定性的信息系统项目。分类分为抛弃型原型和进化型原型。抛弃型原型临时性模型，用于验证用户需求等，指导后续开发工作。进化型原型通过不断迭代反馈逐步完善扩展，可能发展成为最终系统。实际应用可与其他开发方法结合，如在敏捷开发中验证用户故事和迭代计划。需求分析需求分析深入沟通用户与利益相关者，收集需求信息，明确产品功能范围及优先级。业务目标理解业务目标，调整产品方向，确保功能设计与目标一致。概念设计

概念设计确定产品架构、功能模块与信息流程，利用流程图、思维导图辅助思路梳理。界面设计

界面设计参考优秀案例，选用适宜布局、色彩与字体，打造美观易用界面。

设计思路借鉴成功设计，融合创新元素，确保界面既美观又实用。交互设计

交互设计确定用户界面交互方式，如点击、滑动、拖拽效果，使用AxureRP制作原型，模拟真实体验。原型测试

原型测试邀请用户与利益相关者测试原型，收集反馈，优化调整。文档整理及时整理需求、设计文档及测试报告，为开发维护提供参考。1.3原型设计的作用和步骤03在开发初期的重要作用

明确需求开发初期，原型设计可助团队理解用户需求，将抽象需求转化为可视化界面，发现模糊点与不一致之处，促进有效沟通，确保产品满足用户需求。

降低风险原型设计能在大量开发前发现潜在问题和风险，通过测试发现用户理解困难、操作流程不合理，及时调整以避免后期重大变更和成本增加。

提高沟通效率原型作为可视化工具，助团队成员理解产品设计意图，让开发人员直观了解界面布局和交互流程以准确开发，测试人员提前制定测试计划确保产品质量。

加速决策过程原型帮助利益相关者快速决策产品方向和功能，展示设计方案，便于团队比较选择，加快开发进度。1.3.2实施步骤明确需求设计原型首先要明确需求，包括产品目标、页面功能、模块目标等，进而进行模块规划、关系构建与素材准备。绘制产品信息框架图产品信息框架图如书的大纲或目录，例微信有微信、通讯录、发现、我四个底导模块及子模块。1.3.2实施步骤：产品流程图

增删改查窗口设置验证产品功能是否提供增删改查处理窗口，不提供需说明原因。

功能相关性查验增加新功能时，需考虑对原有同类型功能的影响，以及流程中其他功能可能产生的变更与影响，因此要进行相关性查验。

操作结果反馈设计操作需考虑成功或失败情况并给用户相应反馈，失败时要提供合理解释及正确操作引导。

异常情况检验演唱会抢票时，购买时间在点击确认一刹那被抢空，同一时间两件事冲突，即异常情况。1.3.2实施步骤：原型绘制

原型绘制要求原型绘制需清晰明了、主次分明，用黑白灰配色，通过字体大小粗细体现主次并配适当说明。

墨刀工具特点墨刀上手快，适合画APP，提供标准控件和图标，可实现简单跳转。

Axure工具特点Axure是绘制原型的元老，功能大而全，绘制web等复杂页面游刃有余，用得越久越方便。1.4了解一下产品经理041.4了解一下产品经理

产品经理职责把握市场趋势，制定产品战略，管理设计、开发与运营，协调跨部门合作，确保项目质量和进度。

技能需求需数据分析能力，理解用户需求，有效沟通技巧，项目管理经验，以及持续关注行业动态。产品经理在团队中扮演的角色领导者产品经理是产品团队的领导者，负责制定产品的战略方向和目标，带领团队实现产品的成功。协调者产品经理需要协调不同部门之间的工作，如开发、设计、测试、市场等，确保各个环节的顺利进行。用户代言人产品经理是用户的代言人，要深入了解用户需求，将用户的声音传达给团队，确保产品能够满足用户的期望。产品经理的岗位职责市场调研了解市场趋势、竞争对手情况，收集用户需求，为产品的定位和发展提供依据。产品规划制定产品的战略规划和roadmap，确定产品的功能范围和优先级。需求管理收集、整理和分析用户需求，将需求转化为产品功能和特性。项目管理负责产品开发项目的管理，确保项目按时交付，质量符合要求。团队协作与开发、设计、测试、市场等部门密切合作，推动产品的开发和推广。数据分析通过数据分析，了解用户行为和产品性能，为产品的优化和改进提供依据。THEEND谢谢第二部分

AxureRP9软件安装与页面介绍CONTENTS目录01

软件的下载与安装02

熟悉AxureRP9的工作页面03

使用AxureRP9的帮助资源04

知识补充：AxureRP9vs.Axure8核心功能比对软件的下载与安装01下载途径

下载途径访问官网/download获取，选择AxureRP9版本下载。安装步骤安装步骤运行程序，同意协议，选非系统盘安装，完成后点“Finish”。汉化与启动

汉化与启动复制汉化包至安装目录，双击桌面图标或从开始菜单启动软件。

授权首次启动输入授权码，享有30天试用期。安装注意事项

系统要求需Windows1064位以上，配备解压工具。

关键步骤选非C盘安装，先汉化/激活再启动。

注意事项关杀毒软件防误杀，首启慢正常。熟悉AxureRP9的工作页面02工作界面构成

工作页面由11个主要部分构成：菜单栏、工具栏（基本/样式）、多个功能面板及工作区核心功能区详解

核心功能区菜单栏含文件、编辑等8项，工具栏支持新建、打开等基础操作，及选择、绘图、排列等高级功能。

文件操作提供新建、打开、保存文档的基本功能。

编辑操作支持复制、剪切、粘贴、撤销和重做，便于内容调整。

绘图与选择包含选择模式、连接、钢笔等工具，辅助图形创作与修改。核心功能面板

核心功能面板包括页面、元件库、母版、样式/检视及概要面板，实现项目管理、元件复用和样式设置。

页面面板功能管理项目页面，支持增删查操作，便于项目整体控制。

元件库面板作用存储与调用设计素材，提供内置及自定义元件库，丰富设计元素。

母版面板特点统一管理可复用母版元件，提高多页面设计效率。核心区域与自定义

核心区域标签页管理多页面，右上角按钮操作，工作区为核心画布。

自定义工作界面视图菜单控制工具栏与功能面板显示，重置视图恢复默认布局。使用AxureRP9的帮助资源03使用帮助菜单提升技能内置帮助菜单引导至官方视频教程，适合初学者，可提交意见或软件错误。主要帮助渠道提供在线培训教学，支持用户提交问题或建议至官方。知识补充：AxureRP9vs.Axure8核心功能比对04界面与体验升级界面风格提供明暗双模式，风格简洁清新。布局自定义功能区自由拖动，支持负坐标，Ctrl+9返原点。交互功能优化

交互面板整合“交互”面板替代“属性”，布局清晰，编辑动态面板/中继器半透明覆盖，无需切换窗口。编辑方式改进主要在面板内交互设置，可选图标开启传统编辑器，提升编辑效率。元件与页面管理增强

元件库管理双击导入.rplib，批量图片转图标，提升效率。

页面尺寸预设多设备默认尺寸，支持自定义，适应性强。样式编辑功能强化

文字排版支持上下标，大小写切换，加粗斜体等，间距自定义，精确调整行字距。

边框自定义矩形边框宽度数值自定义，提升样式编辑灵活性。THEEND谢谢第三章

认识站点地图CONTENTS目录01

3.1使用欢迎页面02

3.2新建和设置Axure文件03

3.3认识站点地图04

3.4辅助线和表格的使用05

3.5设置遮罩06

3.6设置自适应视图3.1使用欢迎页面01AxureRP9启动与文件管理

AxureRP9启动界面显示“欢迎使用”页，提供新建、打开文件选项，列最近操作文件，含学习资源链接。

AxureRP9学习资源提供联系资料，引导快速掌握，论坛、博客、公众号多渠道支持。3.2新建和设置Axure文件023.2新建和设置Axure文件进行软件产品原型设计的时候，首先需要创建一个新的文件，创建新文件过程中需要进行纸张大小的设置3.2.1纸张尺寸与设置

纸张尺寸选择用户可选预设尺寸，或自定义宽高，单位英寸毫米，方向竖横。

页边距与默认设置指定上下左右页边距，可设默认尺寸，含像素尺寸选项。3.2.2文件存储

文件存储操作执行“文件>保存”，在“另存为”对话框中输入文件名，选择类型，点击“保存”完成操作。3.2.3文件的另外存储

另存为功能用于创建文件副本，执行“文件>另存为”命令，弹出对话框进行保存。

操作目的获得文件副本，便于管理和版本控制，避免覆盖原文件。3.2.4启动和恢复自动备份启动自动备份勾选“启用备份”,设置“备份间隔”时间,启动自动备份功能。恢复自动备份执行“从备份中恢复”命令,选择备份日期,点击“恢复”按钮完成操作。3.3认识站点地图033.3.1什么是站点地图：站点地图概述

站点地图基本定义与作用站点地图是树状结构，主页为根节点，可查看产品模块、栏目、功能单元，方便页面操作，是产品原型设计第一步，能帮助了解产品架构和功能模块。站点地图组成结构站点地图由功能条（页面操作按钮）和树状结构页面（Windows目录结构形式，含父子、兄弟页面关系）组成。3.3.1什么是站点地图：功能条操作说明

创建同级页面与文件夹功能条可实现为所选节点页面创建同级页面；也可创建同级文件夹，用于管理页面并放置相关文件。

页面位置调整功能实现同等级页面中，将所选的页面上移一个位置。实现同等级页面中，将所选的页面下移一个位置。

页面层级调整功能页面层级降级：所选页面降级为其上方页面的子页面；页面层级升级：所选页面升级为父页面的同等级页面。

页面删除与检索功能删除所选页面及其子页面，有子页面会提示，确认后删除；可右键删除当前页面，能检索站点地图页面。3.3.2站点地图的功能站点地图功能管理页面，规划原型设计，快速查找，拓展同级页面，创建文件夹分类，清晰展现设计结构。具体应用搜索页面，同级页面创建，文件夹管理，适用于功能模块设计，提升原型设计效率。站点地图的页面管理

站点地图的页面管理通过功能条或右键操作，实现页面添加、删除、重命名、调整层级和顺序。

页面重命名方式支持双击、右键菜单和使用F2快捷键进行页面重命名。3.3.4页面管理页面创建AxureRP9自动创建4页，含1主页3二级页，可重命名，便于管理。页面添加通过“页面”面板的“添加页面”按钮，轻松扩展项目，增加页面数量。3.3.4页面管理

添加和删除页面同类型页面放一个文件夹，单击“添加文件夹”按钮添加文件夹；选页面右键“添加”可在特定位置添加页面或文件夹；选页面按Delete键或右键“删除”可删除页面。

移动页面改变页面顺序或级别：在“页面”面板选页面右键“移动”选命令；或左键拖动改变层次。

查找页面AxureRP9提供“查找”功能，单击“页面”面板右上角按钮，顶部出现文本框，输入名称查找页面，再次单击取消搜索恢复默认。

页面属性“属性”选项下可设置页面交互效果，含触发事件并添加用例执行动作，默认事件有“页面载入时”“窗口尺寸改变时”“窗口滚动时”，“更多事件”列表有更多选项。3.3.4页面管理：页面说明

页面说明功能“检视：页面”面板中间的按钮是页面说明，可添加注释以便其他制作人了解当前页面内容。说明内容格式设置在页面说明下方文本框输入说明内容，单击右侧图标弹出格式化文本参数，可设置字体、加粗、斜体、下划线、文本颜色和项目符号等。多说明添加方法添加多个说明：单击图标，在弹出的“说明字段设置”中“自定义页面字段”文字，在对话框中添加新说明。多说明确认与输入添加完成后，单击“确定”按钮。用户可以输入多个页面说明，如图3-19所示。3.3.4页面管理页面样式页面排列可选择居左或居中；可设定页面尺寸；默认可管理排列、颜色、图片；填充可设背景颜色和图片，图片需导入。3.4辅助线和表格的使用04辅助线的使用

辅助线类型与操作辅助线类型：全局、页面、打印、对齐辅助线。编辑操作：锁定、创建、删除全部、设置辅助线。

新建页面与创建辅助线执行“文件>新建”新建页面。执行“视图>标尺·网格·辅助线>创建辅助线”或右键对应选项，可在“预设”选“960Grid：12Column”设置。

全局辅助线设置勾选“创建为全局辅助线”选项，可以使辅助线出现在所有的页面中，供团队的所有成员使用。

对齐辅助线功能用户可通过“视图>标尺·网格·辅助线>对齐辅助线”命令或右键对应选项激活功能，激活后移动对象会自动对齐辅助线。3.4.2使用网格

显示网格默认页面不显示网格。可执行“视图>标尺·网格·辅助线>显示网格”命令或右键选择该选项显示，效果如图3-25所示。

设置网格参数用户可通过“视图>标尺·网格·辅助线>网格设置”命令或右键对应选项，在弹出的“偏好设置”对话框中设置网格各项参数。

网格对齐功能用户可通过“视图>标尺·网格·辅助线>网格对齐”命令或右键菜单激活该功能，激活后移动对象会自动对齐网格。3.5设置遮罩05取消Axure遮罩效果方法

AxureRP9特殊元件热区、母版、动态面板、中继器和文本链接，提供丰富交互设计。

隐藏元件显示默认半透明黄色遮罩，影响操作可关闭，提升设计效率。3.6设置自适应视图06自适应视图作用自适应视图作用适应多样移动终端，如手机、平板，统一页面设计，兼容不同屏幕尺寸，提升用户体验。自适应视图设置

打开自适应视图对话框在“检视：页面”面板勾选“启用”复选框，单击“管理自适应视图”按钮，或单击工作区左上角该按钮，弹出“自适应视图”对话框。添加新视图及参数设置单击“+”添加新视图，右侧可设参数：预设、名称、条件、宽、高、继承于（默认继承基本视图）。视图应用与预览视图应用通过自适应视图添加不同页面设置，如手机纵<=320，调整宽高，预览效果。预览功能点击工具栏预览按钮，在浏览器中切换页面设置，检查各视图显示效果。THEEND谢谢第四章

元件的创建与使用CONTENTS目录01

4.1了解“元件”面板02

4.2基本元件03

4.3表单元件04

4.4菜单与表格元件05

4.5标记元件06

4.6流程图元件和图标元件4.1了解“元件”面板01元件面板了解

元件面板位置AxureRP9的元件放在“元件”面板，该面板位于软件窗口左侧。

元件类型划分“元件”面板按种类分为基本、表单、菜单和表格、标记元件四种类型。

下拉菜单选项面板顶部下拉菜单默认有Default、Flow流程图、Icons、iOS8UIKit四种选项。

选项查看设置选择“选择全部”可同时查看使用四种选项，选“流程图”则只显示该类元件。元件添加到页面-为元件命名

元件添加到页面将元件拖至页面，通过“样式”面板指定唯一名称，支持英中文，便于查找与交互设计。

为元件命名确保元件名称在文件内唯一，利于后续设计，参考图4-4。元件添加到页面-缩放元件

元件添加到页面通过拖动四周控制点，实现元件缩放，也可在工具栏精确修改坐标尺寸。

缩放元件利用X(水平)、Y(垂直)、W(宽度)、H(高度)，精准调整元件大小位置。元件添加到页面-旋转元件

旋转元件操作按Ctrl键拖动控制锚点，实现任意角度旋转，或在“样式”面板“位置和尺寸”选项中精确设置。

元件旋转精确度通过“样式”面板下的“位置和尺寸”选项，可进行精确的旋转角度设置，确保元件旋转准确性。元件添加到页面-设置颜色和不透明度元件添加将元件拖至页面，顶部栏设填充、线段色及不透明度。页面设置图4-7展示用户调整颜色与透明度的界面选项。元件添加到页面-设置线段宽度和类型除了设置元件的颜色外，还可以在选项栏上设置拖入元件的线段宽度和类型，如图4-8所示4.2基本元件024.2基本元件

基本元件构成形状、图片、占位符、文本、线段及热区构成原型基础模块。基本元件-矩形基本元件-矩形AxureRP9提供矩形1、2、3，差异在边框与填充，适应不同设计需求。基本元件-图片

插入图片AxureRP9支持插入图片：选择“图片”元件拖入页面，双击元件，在弹出的“打开”对话框中选图并单击“打开”按钮。

图片基础操作拖动图片左上角黄色三角形可实现遮罩及圆角效果，可直接在图片输入文字，右键选“编辑文本”可修改文本。

图片裁剪操作Axure中用裁剪工具裁剪图片：选钢笔工具更多按钮中的“裁剪”，拖动边框调整，双击完成；右上角菜单可裁剪、复制、剪切、取消。基本元件-占位符基本元件占位符用于预留页面位置，待定内容时使用，可拖入页面，如图4-14。占位符功能无实际意义，仅作临时占位，待内容确定后替换。基本元件-按钮

基本元件-按钮Axure提供按钮、主要按钮、链接按钮，双击可修改文字，按需选择，拖放至页面。基本元件-文本文本类型划分Axure中文本分标题和文本。标题含一级、二级、三级标题；文本含文本标签（短文本）和文本段落（长文本）。文本框调整操作拖动标题或文本四周控制点，内部文本自动调整位置。文本框宽度宽于内容时，双击控制点可快速使文本框大小与文本一致。文本样式设置选择文本框可设填充和线段颜色；双击文本可设颜色、字体、字型、字号及加粗、斜体、下划线、阴影等特殊效果。基本元件-水平线和垂直线

水平线应用分割功能区，美化页面布局，调整颜色、宽度和类型。

垂直线使用同水平线功能，增强页面设计感，可选箭头样式。基本元件-热区

基本元件-热区热区为隐形可点击面板，从元件库拖至页面，实现单图多链接，如图4-22。基本元件-内联框架基本元件-内联框架在AxureRP9中，内联框架可加载任何HTTP开头的URL内容，如图片、网站或Flash，通过“链接属性”对话框设置内部或外部页面链接。4.3表单元件03表单元件-文本框

文本框功能接受单行文本输入，样式可自定义，支持不同类型设置，实现多样化功能。

文本框设置通过“检视”面板调整字体样式，于“交互”面板详细配置属性，增强用户体验。表单元件-多行文本框多行文本框能够接受用户多行文本的输入。选择“多行文本框”元件，将其拖入到页面中，如图4-26所示表单元件-下拉列表框

表单元件使用下拉列表框用于显示列表选项，供用户选择，不可输入。拖放至页面，编辑列表选项，设置默认显示。

编辑列表选项双击元件，添加或批量输入文本内容，勾选设为默认显示，确认后选项即现。表单元件-列表框列表框功能

展示多选项，允许用户多选，操作类似下拉列表。列表框使用

拖至页面，双击编辑选项，可勾选允许多选。表单元件-复选框

复选框功能允许多选，选中以对号示，再点可取消。

复选框操作拖至页面，检视面板设属性，图4-29示选中态。

文本对齐选项下两选择，左或右对齐，图4-30示。表单元件-单选按钮

表单元件单选按钮允单一选择，需命名组实现互斥，图4-31示拖放与设置。

单选按钮效果多按钮同组名，实现单选，样式面板指定，确保互斥选择。4.4菜单与表格元件04菜单与表格—树状菜单

树状菜单创建拖曳“树”元件至页面，双击编辑菜单内容，右键添加或删除节点，实现菜单动态管理。

树状菜单操作通过菜单前三角形收起或展开，右键选择“添加”扩展菜单，选中后右键“删除节点”移除选项。菜单与表格—树状菜单

添加子节点选中菜单下新增菜单，拓展树结构。

上方添加节点当前菜单上新增，调整层级关系。

下方添加节点当前菜单后新增，完善目录顺序。

编辑图标导入图标定制，增强视觉识别。菜单与表格—树状菜单树状菜单操作选中“树”元件，右键编辑树属性，弹出对话框进行设置。菜单与表格—表格

菜单与表格—表格使用“表格”元件展示数据，可自定义填充色与边框，调整行、列样式，图4-36示例。菜单与表格—表格用户如果想增加列或者行，可以在表格元件上单击鼠标右键，在弹出的快捷菜单中选择对应的命令即可

选择操作一键选行或列，快速编辑，提升效率。

插入操作上下左右自由扩展，灵活调整表格结构。

删除操作精准移除行或列，保持表格整洁有序。菜单与表格—制作水平菜单

水平菜单制作选用“水平菜单”元件，拖至页面，双击改文字，右键“编辑菜单填充”设大小，选应用范围。菜单与表格—制作水平菜单水平菜单制作设置填充10px，调整菜单颜色，右键添加/删除菜单项，双击单元格可编辑文字，支持多级子菜单创建。菜单操作指南通过右键菜单快速添加、删除菜单项及子菜单，双击单元格轻松编辑文本，实现菜单个性化定制。菜单与表格—垂直菜单垂直菜单使用选择“垂直菜单”元件，拖入页面，方法同“水平菜单”，轻松实现垂直菜单效果。4.5标记元件05标记元件—页面快照

页面快照功能介绍页面快照可捕捉引用页面或主页面图像，可配置显示整个或部分页面，可先建交互页面快照，通过拖入“页面快照”元件使用。

引用页面设置方法双击元件，即可弹出“引用页面”对话框。在该对话框中可以选择引用的页面或母版，如图4-39所示。

快照参数与尺寸调整“属性”面板可查看快照参数，取消“适应比例”以实际尺寸显示，双击元件拖动查看，滚动鼠标缩放，可拖动调整快照尺寸。标记元件—水平箭头和垂直箭头

标记元件水平箭头和垂直箭头用于产品原型标注，可调整颜色、粗细和样式，方向灵活设置，增强设计表现力。4.6流程图元件和图标元件06流程图与图标元件应用技巧

流程图设计使用"流程图"元件,优化页面布局,提升设计效率。

图标应用引入"图标"元件,提供多样选择,增强视觉效果,参考图4-43和4-44。THEEND谢谢第五章

概要面板与母板的使用CONTENTS目录01

5.1概要面板02

5.2新建母版03

5.3使用母版5.1概要面板01元件管理器优化操作体验元件管理使用“元件管理器”解决叠加遮盖问题，概要面板显示所有元件，选中任一方，另一方同步响应。排序筛选点击“排序与筛选”按钮，自定义显示内容，点击“查找”快速定位目标元件，提升操作效率。5.2新建母版025.2新建母版

新建母版定义重复元素为母版，如头部、底部，便于多页面复用，提升设计效率，类似PPT母版功能。

母版应用登录页、搜索条等常用组件，统一风格，确保页面设计一致性，简化编辑流程。新建母版

新建母版点击“添加母版”按钮，命名新母版，如图5-2。

母版管理设计多母版，用文件夹分类管理，便于统一控制。创建母版文件夹

01创建母版文件夹点击“添加文件夹”按钮，新建文件夹，母版自动归类，支持拖曳调整位置。

02编辑母版文件右键选择“添加”或“移动”，灵活管理母版文件，操作直观便捷。编辑和转换母版

01编辑母版双击母版文件，进入编辑状态，页面标签显示母版名，使用元件创建页面。

02转换母版在编辑状态下，利用元件调整布局和内容，完成后再命名保存为新母版。转换为母版转换为母版操作选中页面内容，右键选择“转换为母版”，指定名称和拖放行为，点击“继续”完成转换。转换为母版流程通过快捷菜单启动，命名并设定拖放规则，确认后实现页面到母版的转换。删除母版

删除母版操作选中目标母版，使用Delete键或右键菜单中的“删除”选项，即可完成删除。5.3使用母版035.3使用母版

母版应用方法通过拖曳母版文件至页面，实现快速应用，提供编辑状态下直接放置功能。

母版拖放选项AxureRP9支持“任意位置”、“固定位置”、“脱离母版”三种拖放行为，增强布局灵活性。固定位置

固定位置母版元素坐标自动继承，位置固定不可改，修改母版即时同步至实例。

母版修改更改母版设计，所有实例实时更新，保持一致性。脱离母版

脱离母版拖入页面后自动独立，可再编辑，修改母版无影响。固定位置脱离默认锁定，解除后右键“脱离母版”，自由移动。添加到页面中通过右键命令添加母版母版文件上右键，选“添加到页面中”，弹出对话框，顶部选添加母版的页面，可同时选多个页面页面选择按钮功能对话框左侧4个按钮助快速选页面、应用母版，分别是全选（选所有页面）、不选（取消所有选择）、选中子项（选所有子页面）、取消选中子项（取消所有子页面选择）。母版位置与层级设置选择“锁定为母版中的位置”可添加母版到指定位置，或通过坐标指定新位置；勾选“置于底层”可将当前母版添加到页面底层。从页面中移除

移除母版操作在“母版”面板选中目标，右键“从页面中移除”，确认页面后完成操作。操作示意图参考图5-15，展示移除母版的详细步骤和界面提示。母版使用情况母版使用情况AxureRP9中，通过“母版”面板选中母版，右键“使用情况”，显示所有应用该母版的文件及页面，便捷定位修改。THEEND谢谢第六章

元件的交互与动态面板CONTENTS目录01

6.1元件的交互02

6.2设置面板状态03

6.3交互样式设置04

6.4动态面板6.1元件的交互01交互事件的类型

交互事件类型元件事件由用户操作触发，如点击、悬停；页面事件涉及整体状态，如加载、滚动、尺寸改变。具体交互事件示例

Axure交互事件示例点击事件：点击元素触发，用于按钮点击、链接跳转；鼠标悬停事件：悬停元素触发，用于显示信息、下拉菜单；输入事件：输入内容触发，用于用户输入、表单验证。

页面与窗口相关事件页面加载事件：页面加载完成后触发，用于初始状态、数据加载。滚动事件：页面滚动时触发，用于滚动动画、悬浮效果。窗口尺寸改变事件：窗口大小改变时触发，用于响应式设计，调整布局和元素大小。交互事件的设置与管理

交互事件设置通过Axure“交互”面板，选元素，定义动作，预设交互，用户操作触发。

设计流程选择目标元素，进入“动作”选项卡，设定交互事件，实现动态响应。交互事件的作用与意义交互事件作用提升原型真实感，模拟用户交互，增强可用性，助团队理解评估设计。设计丰富性创造生动直观交互，展示理念功能，提升演示效果。交互事件的作用与意义：6.1.1交互事件—页面交互

查看与新建交互事件在“交互”面板可查看默认交互事件，单击“新建交互”按钮，下拉菜单可看到更多交互事件。交互事件的作用与意义：6.1.1交互事件—页面交互交互事件设置步骤

交互事件作用通过选中元件，设置“载入时”事件，执行预设动作，实现页面动态交互，如图6-2展示流程。交互编辑功能“交互编辑”对话框含“添加事件”、“添加动作”、“配置动作”和“组织动作”四模块，全面控制交互细节，确保效果精准。交互事件的作用与意义：6.1.1交互事件—页面交互

完成动画交互效果选择动画效果，在“时间”文本框设置动画持续长度，单击“确定”按钮，完成滚动到元件的交互效果。交互事件的作用与意义

元件交互事件选中元件，在“交互”面板单击“新建交互”按钮并点选动作；在弹出的“事件”下拉菜单添加交互事件；单击“打开连接”选项，在对话框输入或选择链接的页面、URL或文件路径。6.2设置面板状态026.2设置面板状态

设置面板状态通过"交互"面板的"单击时"选项，选择"动态面板"，实现面板状态切换，参见图6-4。

元件使用主要运用"动态面板"元件，从"元件库"拖至页面，双击设定交互，确保状态转换流畅。设置文本

设置文本拖入"矩形1"元件，鼠标移入时，设置文本为"此处显示正文内容"。设置图片

设置图片通过元件交互，鼠标移入时更换图片，多状态分别指定不同图片，实现动态展示效果。

图片调整拖入图片元件，调整大小位置，利用交互面板预设动作，增强用户视觉体验。设置选中

设置选中状态三种状态:选中、取消、切换，配合事件使用，设置元件状态。

设置列表选中项单击列表元件，指定选项选中，实现交互功能。启用/禁用启用/禁用用户可手动设置元件启用或禁用，亦可条件触发，配合动作使用，灵活控制元件状态。移动

移动动作应用使用"移动"动作,元件可按设定路径移动;选择目标,设参数,动画效果提升交互感,边界限制确保稳定。

创建页面效果结合"矩形2"与"主要按钮",双击"属性"下"鼠标单击时",添加移动动作,经设置达预期视觉。旋转旋转效果配置动作设置角度、方向、锚点，调整偏移，实现元件旋转，可动画化事件。设置尺寸

设置尺寸指定新尺寸，编辑宽高，选择锚点影响动画效果，选动画形式，设时间持续。

动画配置通过动画下拉列表选择形式，时间文本框设定持续时长，锚点决定中心点和效果。置于顶层/底层置于顶层/底层满足条件时，通过下拉菜单或交互编辑器，可将对象置顶或置底，实现元素层级调整。设置不透明度设置不透明度满足条件时，为元件设定不同不透明度效果，通过双击事件，于交互编辑器中选择设置，调整不透明度、动画与时长。获取焦点获取焦点在"交互"面板下,为"文本框"元件添加"获取焦点时"触发的"获取焦点"动作,勾选"文本框"和"选择文本"以自动选中文本。6.3交互样式设置036.3交互样式设置

交互样式设置用户拖放元件，选中后在“交互”面板点击“鼠标悬停”，弹出“设置交互样式”对话框进行配置。交互样式—填充

填充颜色选择用户通过“填充颜色”下拉列表选色，可更改元件色彩，支持单色、线性、径向填充。

渐变颜色调整滑块调节渐变色范围，单击添加新色，拖动调整角度，实现多角度填充，滑动“不透明度”改变透明效果。交互样式—阴影

阴影样式设置AxureRP9提供外部和内部两种阴影样式，点击“内部阴影”按钮弹出对话框，勾选“阴影”复选框可给元件增加投影效果。交互样式—阴影：边框选项设置

边框选项展开与基础设置单击“边框”三角形展开选项，可设置元件线宽、颜色、类型、位置和箭头样式，线宽用数值设置，有9种线段类型。交互样式—阴影：边框选项设置线段位置与箭头样式设置

边框选项设置通过"线段位置"可选择性显示元件四边边框，调整后元件外观变化显著。箭头样式添加创建线性元件或用"钢笔""链接"工具绘图，可通过"箭头样式"下拉列表为两端添加箭头。交互元件样式—圆角半径交互元件样式—圆角半径选择矩形、图片或按钮元件，设置圆角半径值，实现圆角效果，自定义边角类型，观察不同设置下的元件效果变化。交互元件样式—不透明度用户可以通过修改“不透明”的数值，获得不同透明度的元件效果交互元件字体样式

交互元件字体样式Axure支持自定义字体、字号、字型，可加粗、斜体、下画线，调整文本颜色及阴影效果，操作直观便捷。字体样式—行间距当使用文本段落时，可以通过设置行间距控制字体显示的效果，如图6-15所示字体样式—项目符号单击该选项后面的“项目符号”按钮，会为段落文本添加项目符号标志字体样式—对齐01字体样式可设置左、居中、右对齐，及顶、中、底垂直对齐。02文本段落调整对齐方式，增强版面布局灵活性，优化阅读体验。字体样式—边距

字体样式默认字体样式清晰易读，支持自定义选择，增强文档美观与专业度。

边距设置元件默认2px边距，可独立调整上下左右边距，优化布局灵活性。6.4动态面板04动态面板元件简介

动态面板元件AxureRP强大元件，实现多样动态效果，多种状态的超级元件，图6-16展示拖入页面过程。动态面板状态管理

动态面板操作双击元件，管理不同状态，添加、复制或删除。

面板功能指定名称，高效控制，图6-17展示操作界面。动态面板使用流程

动态面板的重要性动态面板是Axure重要元件，可完成大部分网页交互效果，创建需拖入元件、命名并添加修改面板。

面板状态的编辑单击“编辑全部状态”按钮，打开3个状态页和1个index页，编辑状态页后保存，返回index页添加交互，动态面板含若干页面。

交互效果的实现在“交互”面板添加交互实现丰富页面效果，保存文件后单击“预览”按钮进行原型预览。THEEND谢谢第七章

变量、表达式与函数的应用CONTENTS目录01

7.1使用变量02

7.2使用表达式03

7.3使用函数7.1使用变量017.1.1全局变量

设置变量值操作在“用例编辑”对话框中单击“设置变量值”动作选项，勾选“OnLoadVariableto”复选框，在下拉列表中选择设置全局变量值。

全局变量值类型9种全局变量值：值、变量值、变量值长度、元件文字、焦点元件文字、元件文字长度、被选项、选中状态、面板状态。

全局变量管理用户可通过“添加全局变量”创建变量，能重命名、调整顺序及删除选中变量。7.1.2局部变量

01局部变量创建编辑值/文本页插入，列表选择，"设置变量值"动作添加，"编辑文本"对话框下部。

02局部变量作用事务内赋值，函数运算变量，不在外部页面逻辑显现。7.1.2局部变量

设置条件用户可为动作设置条件以控制启动，方法是单击“启用情形”按钮，弹出“情形编辑”对话框添加条件。

条件逻辑设置全部：必须同时满足所有条件编辑器中的条件，用例才有可能发生。任何：只要满足所有条件编辑器中任何一个条件，用例就会发生。

条件判断值值为自定义变量值，可据变量值、变量值长度、元件文字、焦点元件文字、元件文字长度、被选项进行逻辑判断。7.1.2局部变量：设置条件-用来进行逻辑判断的值

面板与指针功能面板状态：判断动态面板状态以执行用例。指针：获取鼠标位置，实现拖曳功能，根据拖曳位置判断操作。元件与视图设置元件范围：为元件事件添加条件事件指定范围。自适应视图：根据元件所在面板判断。确定变量或元件名称：依据前面选择方式确定，可添加新变量。7.1.2局部变量：设置条件-用来进行逻辑判断的值逻辑判断与操作

逻辑判断运算符可选等于、大小、小于等，含“包含”、“不包含”判断，用于值间比较。选择被比较的值方式同“进行逻辑判断的值”，如对比两变量，需选定二者的名称。输入框使用若“被比较的值”为“值”，则需在此输入具体数值以作比较。逻辑描述框功能AxureRP自动生成描述，基于用户输入，辅助判断条件逻辑正确性。7.1.2局部变量：设置条件-用来进行逻辑判断的值

功能键与操作键：输入值时使用常规函数（获取日期、截断字符串、预设参数），使用少；键：新增条件；键：删除条件。7.2使用表达式027.2使用表达式

Axure表达式功能动态控制页面元素行为和效果，增强交互性。

表达式应用编写表达式调整元素状态，实现动态展示，提升设计灵活性。Axure表达式的定义与功能

Axure表达式定义计算、控制展示交互工具，动态调整页面元素，实现数据动态展示。Axure表达式功能支持元素大小、位置、状态动态控制，与动态数据交互，语法近似编程语言。Axure表达式的语法与元素变量与常量Axure有内置变量如Target、MouseX、MouseY，用户可自定义变量；常量值在程序执行中不可改变，可表固定值。运算符Axure表达式支持数学运算符和逻辑运算符，类型主要有算术、关系、赋值、逻辑运算符，用于数学运算和逻辑判断。表达式格式与函数表达式格式如a+b、a>b、a+b&&=c等。Axure内置丰富函数库，如Math函数库含数学运算函数，可处理复杂逻辑和数据。Axure表达式的应用

动态文本生成根据用户输入或系统状态，动态生成文本，如实时计算并显示购物车金额。

动态数据绑定页面元素与数据源绑定，实现实时数据更新与展示，提升用户体验。

复杂逻辑判断通过编写复杂表达式，实现深度逻辑判断与业务规则，增强应用灵活性。使用Axure表达式的注意事项

语法正确性注意变量、函数名及运算符使用，确保语法无误。

变量作用域了解变量作用域，保证在适当上下文使用。

性能优化考虑表达式对性能影响，避免复杂表达式和过多动态更新。示例

购物车总金额计算使用Axure表达式，定义price和quantity变量，页面元素文本设为[[price*quantity]]，自动更新总金额。

动态显示机制当商品单价或数量变化，Axure自动重新计算总金额并即时更新页面显示，无需刷新。7.3使用函数03使用函数

Axure函数简介Axure函数是AxureRP中编写表达式、控制元素行为及实现复杂交互的重要组成部分。

函数类型与用途涵盖数学、字符串、时间、元件等多种类型，各有特定用途和参数，可让原型制作更迅速、灵活、逼真。

函数添加步骤在“用例编辑”对话框添加“设置变量值”动作，勾选“OnLoadVariableto”复选框，单击“fx”按钮，再单击“插入变量或函数”选项即可查看。7.3.1常见函数：中继器/数据集

01中继器函数Repeater获取父中继器，visibleItemCount统计可见项，itemCount与dataCount分别计算过滤和总项数。

02中继器页面信息pageCount记录总页数，pageIndex显示当前页码，辅助分页操作优化。7.3.2元件函数函数名称及说明x：部件X坐标；y：部件X坐标；This：当前部件；width：部件宽度；height：部件高度；scrollX：动态面板X轴滚动距离(px)；scrollY：动态面板Y轴滚动距离(px)；text：部件文本值；name：部件名称；top：部件顶部Y坐标；left：部件左侧X坐标；right：部件右侧X坐标；bottom：部件底部Y坐标。7.3.2元件函数：使用元件函数步骤

插入并命名图片新建Axure文档，插入图片命名“大图”，复制调整大小。导入另一图片，分别命名“小图1”“小图2”。

创建边框元件使用矩形元件，创建一个如图所示的边框，并将其命名为“红框”。7.3.2元件函数：使用元件函数步骤小图1交互设置

使用元件函数步骤选择“小图1”，设置鼠标移入交互，选择“设置图片”动作，目标为“大图”，导入首图，添加“移动”动作至图片，使用X轴元件函数确保对齐，调整Y轴函数完成设置。

具体操作细节点击“新建交互”，在“设置图片”后，通过“选择”导入图片，利用“移动”动作和X轴函数使图片移动3单位，确保与边框对齐，最后设置Y轴函数，完成元件函数应用。7.3.2元件函数：使用元件函数步骤小图2交互设置按照相同的方法，为“小图2”在“交互”面板添加交互事件，如图7-10所示。7.3.3页面函数PageName函数获取当前页面名称，用于界面元素定位。部件X坐标函数获取部件的X坐标，辅助页面布局调整。7.3.4窗口函数

窗口尺寸Window.width和Window.height获取浏览器打开原型页面的当前宽度和高度。

滚动距离Window.scrollX和Window.scrollY分别记录页面水平和垂直滚动的距离。7.3.5鼠标指针函数

常用鼠标指针函数说明Cursor.x：鼠标X坐标；Cursor.y：鼠标Y坐标；DragX：本次拖动X距离；DragY：本次拖动Y距离；TotalDragX：总拖动X距离；TotalDragY：总拖动Y距离。7.3.5鼠标指针函数：基础元件创建与隐藏设置插入基础元素新建Axure文档，插入并调整“图片”元件命名为“原图片”，拖入“动态面板”命名为“放大图片”，编辑State1指定背景图片并设为隐藏。创建显示区域返回Page1页，拖入动态面板命名“大图显示区”，双击State1导入图片命名“放大图片”，返回后勾选“隐藏”按钮隐藏该元件。设置交互事件创建与图片大小一致的热区并命名，分别为“鼠标移入时”“鼠标移出时”事件添加“显示/隐藏”动作并设置参数。7.3.5鼠标指针函数

鼠标移动时边界与动作设置选择“鼠标移动时”事件，选“移动”动作，为mask动态面板添加左、右、上、下边界并设函数，再设“到达”及指针函数。

大图显示控制参数配置插入“移动”动作，勾选“放大图片”元件，选“到达”，设X、Y值控制大图显示，添加“显示/隐藏”事件隐藏相关元件。7.3.6数字函数(Number)

指数与定点计数法函数toExponential：转换为指数计数法；toFixed：转换为指定位数小数点字符串；toPrecision：格式化为指定长度。

基础算术运算符+：加，返回和；-：减，返回差；*：乘，返回乘积；/：除，返回商；%：余，返回余数。

数学计算与几何函数abs(x)返回x绝对值；acos(x)、asin(x)、atan(x)返回反余弦、反正弦、反正切值；atan2(y,x)返回X轴到(X,Y)角度；cos(x)、sin(x)、tan(x)返回余弦、正弦、正切值。

数值处理与运算函数ceil(x)上舍入，floor(x)下舍入，exp(x)e指数，log(x)自然对数，max(x,y)最大值，min(x,y)最小值，pow(x,y)X的Y次幂，random()0到1随机数，sqrt(x)平方根。7.3.7字符串函数基础长度与字符函数length返回字符串字符长度；charAt(index)返回指定位置字符，index从0开始；charCodeAt(index)返回指定位置字符Unicode编码，index从0开始；concat(‘string’)连接多个字符串。7.3.7字符串函数：查找与替换函数indexOf方法说明

indexOf('searchValue')：返回指定字符串在原字符串中首次出现的位置，值为0~字符串长度-1，searchValue为查找的指定字符串。lastIndexOf方法说明

lastIndexOf('searchValue')返回指定字符串在原字符串中最后一次出现的位置，范围0~字符串长度-1，searchValue为查找的指定字符串。replace方法说明

replace('searchvalue','newvalue')将字符串中被替换字符串替换为替换成的字符串，searchvalue是被替换字符串，newvalue是替换成的字符串。7.3.7字符串函数：截取与分割函数slice函数功能slice(str,end)提取字符串的片段，并返回被提取的部分split函数功能split('separator',limit)将字符串按规则分割成字符串组，元素以“,”分隔，separator为分隔字符串，limit为数组最大长度。substr函数功能substr(start,length)是字符串截取函数，从start位置提取length长度字符串，从第一个字符截取时start为0。substring函数功能substring(from,to)是字符串截取函数，截取从from位置到to位置的子字符串，从第一个字符截取时from等于0。7.3.7字符串函数

转换与修整函数toLowerCase()转换字符串全部字符为小写；toUpperCase()转换全部字符为大写；trim删除字符串首尾空格；toString()转换为字符串并返回。7.3.8日期函数：日期函数列表基础日期时间获取

日期函数列表Now获取系统当前日期时间，GenDate获原型生成日期，getDate()取1-31表每月日，getDay()取0-6表周几，getDayOfWeek()返回英文星期，getFullYear()取四位年份，getHours()取0-23小时，getMilliseconds()取毫秒，getMinutes()取0-59分，getMonth()取月份，getMonthName()返回月全名，getSeconds()取0-59秒，getTime()算1970至今毫秒，getTimezoneOffset()本地与GMT时差分钟。7.3.8日期函数：日期函数列表UTC时间相关方法

日期函数列表包括getUTCDate(),getUTCDay(),getUTCFullYear(),getUTCHours(),getUTCMilliseconds(),getUTCMinutes(),getUTCMonth(),getUTCSeconds(),覆盖日期的天、周、年、时、毫秒、分、月、秒的获取，均基于世界标准时间。7.3.8日期函数：日期函数列表日期时间转换处理

日期函数列表包括parse、toDateString、toISOString、toJSON、toLocaleDateString、toLocaleTimeString、toLocaleString、toTimeString、toUTCString、UTC、valueOf，用于处理日期格式化、转换及计算。

函数功能概述parse将日期字符串转为毫秒数；to*系列函数将日期对象转换为不同格式的字符串；UTC创建指定世界标准时间对象；valueOf返回日期对象原始值。7.3.8日期函数：日期函数列表日期时间增减操作

addYears(years)将Date对象增加指定年数，返回新Date对象。

addMonths(months)将Date对象增加指定月数，返回新Date对象。

addDays(days)将Date对象增加指定天数，返回新Date对象。7.3.8日期函数：日期函数列表

addHours(hours)将Date对象增加指定小时数，返回新Date对象。

addMinutes(minutes)将Date对象增加指定分钟数，返回新Date对象。

addSeconds(seconds)将Date对象增加指定秒数，返回新Date对象。

addMilliseconds(ms)将Date对象增加指定毫秒数，返回新Date对象。7.3.8日期函数：使用日期函数步骤

准备基础元件新建Axure文档，拖入“二级标题”元件修改文本，命名为日期和时间，转换为动态面板并命名为“动态时间”，复制State1状态。7.3.8日期函数：使用日期函数步骤设置交互事件

使用日期函数点击“交互”面板“载入时”事件，设“设置面板状态”动作为“下一项”，启用循环，间隔1000ms；于“状态改变时”事件设“设置文本”，插入日期函数，配置两“日期”选项，重复此步设定两“时间”选项。交互面板设置完成上述设置后，交互面板显示更新后的事件与动作配置，确保所有功能正确无误。7.3.8日期函数：使用日期函数步骤

预览页面效果单击“确定”按钮，页面效果如图所示。单击工具栏上的“预览”按钮，页面预览效果如图7-26所示。THEEND谢谢第八章

中继器的使用CONTENTS目录01

8.1中继器的组成02

8.2中继器的使用03

8.3数据集的操作04

8.4项目列表操作8.1中继器的组成01中继器的组成基本概念Axure中继器是创建重复数据集合或列表的功能强大组件，可模拟动态数据和展示重复内容。使用步骤使用时需先定义数据源和模板，再设置交互事件和条件，实现动态操作和响应。数据填充与面板中继器元件由数据集中文本、图片或页面链接等数据项填充，双击可进入中继器面板编辑设置。默认显示设置默认显示数量与“检视：中继器”面板数据行一致，默认元件为一列3行。数据集

01数据集位置位于“检视：中继器”面板底部，可添加行、列，管理内容。02数据集内容包含文本、图片、页面引用，右键菜单操作导入、引用。项目交互

项目交互功能用于数据集数据传递至原型元件显示或执行动作，支持载入、每项加载、尺寸调整触发，常用“每项加载时”显示数据集信息。

常用触发事件“每项加载时”事件，用于将数据集中的书籍等数据直接显示在模板元件上，实现数据动态展示效果。交互样式设置

交互样式设置调整中继器排版、布局、分页，支持垂直、水平布局，自定义每页项目数。

中继器布局默认垂直布局，可切换至水平，启用网格排布设定每排项目数。

分页显示设置勾选分页显示，设置每页项目数及起始页码，实现自定义分页效果。8.2中继器的使用02中继器的使用中继器的使用将中继器拖入页面，双击编辑，用图片和文本标签制作页面，命名元件，返回后在样式面板输入参数并导入图片。使用中继器属性对象编组与填充设置全部内容选中，组合对象（Ctrl+G）并命名“表格”，设置交互样式“选中”填充颜色为#3389FF。选项组与事件配置在“设置选项组名称”文本框中设置选项组名，双击“鼠标单击时”事件，选择“选中”动作，勾选中继器组并设置参数。中继器选项设置返回Page1页，点击“交互”面板下“（中继器名称）”右边图标，取消“隔离列表项之间的选项组”选项。页面预览操作单击工具栏上的“预览”按钮或者按下“.”键预览页面，预览效果。8.3数据集的操作03中继器基础操作

中继器操作添加、标记、取消标记、更新和删除行，管理数据集内容。

具体功能通过简单命令，灵活控制中继器数据集行的状态和操作。使用中继器实现自增步骤

拖入基础元件使用中继器实现自增新建Axure文档，拖入默认按钮并修改文字，拖入中继器修改宽度、删除数据集至1行，返回Page1命名中继器为“data”。

设置按钮交互选择按钮元件，在“交互”面板新建交互，选“单击时”事件，添加“添加行”动作，勾选“data”复选框，单击“添加行”按钮，在对话框中单击“fx”按钮，再添加局部变量并设置参数。

完成设置与预览单击“插入变量和函数”插入变量，多次单击“确定”按钮，单击“预览”按钮预览效果。8.4项目列表操作048.4.1使用中继器中继器设置页面载入时，设置每页显示4项，实现分页效果。预览效果单击“确定”，预览页面，确认分页功能正常。8.4.2使用中继器设置排序

按钮设置调整按钮大小、位置，设置文字，触发“鼠标单击时”事件，添加按价格升序排序动作。

预览效果确认设置后，返回index页面，通过预览按钮查看动态排序效果。8.4.3使用中继器添加分页

中继器分页功能通过“按钮”元件设置分页导航，首页按钮跳转至“商品展示”页，实现“上一页”、“下一页”、“尾页”的翻页功能。

页面跳转配置配置“单击时”事件，选择“设置当前显示页面”动作，针对不同按钮选择“Last”、“Previous”、“Next”实现分页。8.4.4使用中继器添加翻页

创建文本标签使用“文本标签”元件创建文本内容，创建名称为“page”的文本标签，再次创建名称为“all”的文本标签。设置中继器事件选择中继器元件，单击“载入时”事件，选“设置文本”动作，勾选“page”，设文本为“富文本”，单击“编辑文本”，在对话框底部选“添加局部变量”。插入变量与函数单击“插入变量或函数”，选“pageIndex”函数，设显示文本样式，确定。勾选“all”，同法添加文本。预览原型效果单击工具栏上的“预览”按钮，预览原型产品的效果如图8-31所示。THEEND谢谢第九章

团队合作、发布与输出CONTENTS目录01

9.1团队合作02

9.2TortoiseSVN客户端应用03

9.3使用团队项目04

9.4使用AxureShare05

9.5发布与输出06

综合练习9.1团队合作01软件下载与安装

VisualSVNServer简介VisualSVNServer是集成SVN服务端工具，含mmc管理工具，需先安装，提供32位和64位版本，下载地址及TortoiseSVN客户端和中文语言包可下载。软件下载与安装：VisualSVNServer安装启动安装程序下载完成后双击VisualSVNServ