Axure 9 实战案例，母版的应用 3，用母版绘制高逼格APP原型

前言

Hello！欢迎来到Axure 9 实战案例教程专栏。点击了解课程简介>>

不知道从何时开始，在APP原型设计中，产品经理们都喜欢套一个仿真手机框，别说整体看起来确实高逼格很多。

高保真原型效果

本篇我们就来给大家讲解一下，如何运用母版绘制高逼格（bao zhen）的APP原型，藉此一起来学习母版里更多的功能。

第一步：创建母版绘制仿真手机框

事前我们需要明确一点，目前一般常用的（IOS端）APP原型的尺寸为375×812，这是基于在当下全面屏时代，以iPhone X的分辨率（1125×2436）为参考的，375×812正好是1125×2436的三分之一，俗称一倍图。

下面正式开始教程讲解，首先在左侧的母版栏中，添加一个母版，再拖入一个矩形2（无边框F2F2F2色）到母版中，设置其大小为375×812。

添加一个母版

拖入一个矩形2，设置其大小为375×812

接着拖入我们准备好的iPhone X 手机外框图片（必须是PNG格式透明图片）；然后修改手机外框的大小，使其内侧边对齐矩形，即内侧大小为375×812。

拖入iPhone X 手机外框图片到母版中

修改手机外框的大小，使其内侧对齐矩形（即大小为375×812）

再接着沿着第一个矩形的左右两侧，对手机外框进行切割图片；再沿外框的顶端和底端的最内侧水平线进行切割图片，删除中间多余的空白透明图片（对手机外框进行切割，是为了不遮挡其他元件的交互）；然后并合好手机外框，再全选所有元件，设置其位置为2,6（即第一个矩形的位置正好是30,30，这样更便于绘制原型)。

按图中的切割线，对手机外框进行切割图片，并删除中间多余的图片

并合手机外框，再全选所有元件，设置位置为2,6（即矩形位置为30,30）

第二步：给手机外框添加底部横线

首先拖入一个矩形到母版中（用作底部横线），设置其边框为0，大小为134×5，填充颜色为#00000，再设置其圆角为3；然后拖动底部横线，使其居中对齐背景矩形，距离背景矩形底边为8像素（即距离顶边为764）；然后删除第一个矩形，再选中手机外框和底部横线，设为组合。

拖入矩形，设置其边框为0，大小为134×5，填充颜色为#00000

设置矩形的圆角为3

拖动底部横线，使其居中对齐背景矩形，距离底边为8像素

删除第一个矩形，再选中手机外框和底部横线，设为组合

第三步：运用母版绘制高保真原型

首先在母版上点击右键，选择拖放行为-固定位置；然后开始创建页面，再将母版拖入页面中，母版就会自动插入到固定的位置。

在母版上点击右键-拖放行为-固定位置

开始创建页面，将母版拖入页面中，母版就会自动插入到固定位置

或者在母版上点击右键，选择添加到页面中…，在弹出窗口中点击全选，再点击确定，即可将母版插入到所有不含该母版的页面；然后就可以开始绘制原型了。

在母版上点击右键-添加到页面中…

点击全选，然后确定，即可将母版插入到所有页面

结语

OK了，通过前面三个步骤，就可以运用母版绘制出高逼格（bao zhen）的APP原型了；此外，关于第二步，在Axure中缩小图片会有锯齿，要想图片更保真些，可以在确定图片的大小后，用PS或其他图片编辑工具来修改图片的尺寸，之后再导入到Axure中。

在线预览

效果图在线预览：https://u.pmdaniu.com/L8A5p