|
|
Hello！欢迎来到Axure 9 实战案例教程专栏。点击了解课程简介>>axure原型素材https://www.axure9.comAxure模板网为产品经理提供各种软件开发Axure RP产品原型模板下载，Axure组件及素材免费下载,为产品经理提高设计效率，保持产品一致性。
不知道从何时开始，在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
为了帮助各位同学，能快速理解和练习Axure案例，本专栏每篇教程都会提供RP格式课件下载（本篇只提供iPhone X手机外框素材）。
课件整包链接：
https://item.taobao.com/item.htm?id=631599964711
链接长期有效。
（默林如斯原创出品，未经许可，禁止转载，侵权必究）
《Axure 9 案例教程-基础篇》：以实战案例的角度，讲解Axure 9 的基础操作，帮助大家从案例中学习产品原型的设计思维，带你快速进入实战阶段！！适合Axure入门的同学！！点击了解课程简介>>
欢迎关注《产品经理知识与资源》专栏，这里专注原创Axure实战原型、Axure原型模板、Axure元件库、Axure图标库；2012年入行的原创实力保障！！点击前去关注>> |
|
发表于 2024-3-1 21:42:02
