前言
Hello!欢迎来到Axure 9 实战案例教程专栏。点击了解课程简介>>
不知道从何时开始,在APP原型设计中,产品经理们都喜欢套一个仿真手机框,别说整体看起来确实高逼格很多。
本篇我们就来给大家讲解一下,如何运用母版绘制高逼格(bao zhen)的APP原型,藉此一起来学习母版里更多的功能。
第一步:创建母版绘制仿真手机框
事前我们需要明确一点,目前一般常用的(IOS端)APP原型的尺寸为375×812,这是基于在当下全面屏时代,以iPhone X的分辨率(1125×2436)为参考的,375×812正好是1125×2436的三分之一,俗称一倍图。
下面正式开始教程讲解,首先在左侧的母版栏中,添加一个母版,再拖入一个矩形2(无边框F2F2F2色)到母版中,设置其大小为375×812。
接着拖入我们准备好的iPhone X 手机外框图片(必须是PNG格式透明图片);然后修改手机外框的大小,使其内侧边对齐矩形,即内侧大小为375×812。
再接着沿着第一个矩形的左右两侧,对手机外框进行切割图片;再沿外框的顶端和底端的最内侧水平线进行切割图片,删除中间多余的空白透明图片(对手机外框进行切割,是为了不遮挡其他元件的交互);然后并合好手机外框,再全选所有元件,设置其位置为2,6(即第一个矩形的位置正好是30,30,这样更便于绘制原型)。
第二步:给手机外框添加底部横线
首先拖入一个矩形到母版中(用作底部横线),设置其边框为0,大小为134×5,填充颜色为#00000,再设置其圆角为3;然后拖动底部横线,使其居中对齐背景矩形,距离背景矩形底边为8像素(即距离顶边为764);然后删除第一个矩形,再选中手机外框和底部横线,设为组合。
第三步:运用母版绘制高保真原型
首先在母版上点击右键,选择拖放行为-固定位置;然后开始创建页面,再将母版拖入页面中,母版就会自动插入到固定的位置。
或者在母版上点击右键,选择添加到页面中…,在弹出窗口中点击全选,再点击确定,即可将母版插入到所有不含该母版的页面;然后就可以开始绘制原型了。
结语
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年入行的原创实力保障!!点击前去关注>>