互联网产品开发（AIGC版）课件 5.4 原型设计进阶技巧.pptxVIP

PRODUCT

互联网产品原型设计

主讲人：

时间：2026-1-23

5-4原型设计进阶技巧

01

02

母版的创建

母版的拖放行为

03

母版的应用

01

母版的创建

原型设计进阶技巧

母版核心作用

母版的创建

减少重复制作，大幅降低设计工作量

在原型设计中常遇重复的页面元素（如导航栏、页脚），使用Axure母版功能可实现“一次设计，处处引用”。

避免重复劳动

无需在每个页面重复绘制相同的导航条或菜单，解决传统复制粘贴带来的维护难题。

提升设计效率

修改母版即可同步更新所有引用的页面，极大地缩短了迭代修改的时间成本。

新建母版步骤1

母版的创建

切换面板区域

在Axure界面左下角找到并点击“母版”选项卡，进入母版管理视图。

执行添加操作

点击面板工具栏中的“添加母版”按钮（+号图标），创建一个新的空白母版。

规范命名管理

双击新建的母版名称，将其重命名为“导航条”，以便后续识别调用。

图示：添加母版操作

制作导航母版内容

母版的创建

01

拖入矩形元件

在Axure的元件库面板中找到“矩形”元件，将其拖拽至母版编辑工作区的中心位置。

02

复制并排列

复制该矩形两次，并将这三个矩形横向排列对齐，保持间距一致，构建导航条的基本骨架。

03

命名与赋值

分别双击这三个矩形元件，依次输入文字内容：“首页”、“新闻中心”、“社会责任”。

AxureRP-MasterView:Navigation

首页

新闻中心

社会责任

创建页面与母版批量引用

母版的创建

1 创建独立展示页面

在页面面板中分别创建“首页”、“新闻中心”、“社会责任”三个独立页面，作为母版引用的载体。

2 母版批量引用

右键点击导航条母版选择“添加到页面中”，在弹窗中勾选所有目标页面，实现一次性批量部署。

母版应用效果与移除操作

母版的创建

查看应用效果

双击“首页”页面进入编辑区，即可直观看到导航条母版已成功同步应用。母版内容的任何修改都会自动更新到所有引用页面，实现高效复用。

移除母版关联

若需解除关联，在母版面板中右键点击目标母版，选择“从页面中移除”选项。在弹出的对话框中勾选目标页面，即可快速切断母版引用。

母版第二种创建方法

母版的创建

方法二：元件直接转换

无需重新创建，直接利用现有设计成果。将页面中已完成布局和样式的元件组合，一键升级为可复用的母版，大幅提升设计效率。

1

选中目标元件

在画布中选择一个或多个需要复用的元件

2

右键上下文菜单

点击鼠标右键唤出操作菜单

3

转换为母版

选择功能项并命名完成母版创建

制作页面导航条-案例

母版的创建

拖入元件

在首页画布中拖入3个矩形元件，作为导航菜单的基础背景。

命名设置

将三个矩形分别命名为“首页”、“新闻中心”、“社会责任”。

检查列表

观察左侧概要面板，确认元件层级正确，导航条初具雏形。

AxureRP9-首页导航制作

元件转母版操作

母版的创建

图5-55将元件转换为母版

1

选中目标元件

在画布中框选或按住Shift键，依次选中已制作好的“首页”、“新闻中心”、“社会责任”三个矩形元件。

右键转换母版

保持选中状态，点击鼠标右键唤出菜单，在列表中找到并选择“转换为母版”选项。

命名并保存

系统弹出创建对话框后，输入母版名称“导航菜单”，点击确定即可完成从元件到母版的转换。

元件转母版注意事项

母版的创建

坐标默认归零机制

元件被转换为母版后，其内部元件的坐标属性(X,Y)将默认重置为(0,0)。这意味着母版内容将以母版容器的左上角为原点进行对齐。

实例位置独立性

在具体页面中移动母版实例，仅改变该实例在当前页面的显示位置，绝不会改变母版源文件本身的内部结构或位置设定。

防止布局错位

设计时需特别留意坐标变化带来的视觉差异。建议在转换前确认好元件间的相对位置关系，避免因坐标重置导致整体布局出现意外错位。

AxureRP-Properties

02

母版的拖放行为

原型设计进阶技巧

母版3种拖放行为

母版的拖放行为

任意位置

Anywhere

母版可在引用页面中自由拖动与定位，且内容修改后会同步更新至所有页面，适用于通用型组件。

锁定位置

LocktoMasterLocation

固定在引用页面的底层，位置坐标与母版内保持绝对一致，非常适合制作背景图或固定导航条。

从母版脱离

BreakAway

切断页面实例与母版的关联，转换为普通元件独立编辑，适用于需要基于模板进行个性化修改的场景。

02

母版的应用

原型设计进阶技巧

模板应用实操案例

母版的应用

海澜集团官网原型制作

结合所学母版知识，使用Axure制作官网原型。重点在于将重复出现的导航栏与底部版权信息转换为母版，体验“一次修改，全局同步”的高效设计流程。

导航菜单母版化

统一管