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

相关课件

为了帮助各位同学,能快速理解和练习Axure案例,本专栏每篇教程都会提供RP格式课件下载(本篇只提供iPhone X手机外框素材)。

课件整包链接:
https://item.taobao.com/item.htm?id=631599964711

链接长期有效。

(默林如斯原创出品,未经许可,禁止转载,侵权必究)

《Axure 9 案例教程-基础篇》:以实战案例的角度,讲解Axure 9 的基础操作,帮助大家从案例中学习产品原型的设计思维,带你快速进入实战阶段!!适合Axure入门的同学!!点击了解课程简介>>

欢迎关注《产品经理知识与资源》专栏,这里专注原创Axure实战原型、Axure原型模板、Axure元件库、Axure图标库;2012年入行的原创实力保障!!点击前去关注>>

  • 2
    点赞
  • 14
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

默林工作室

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值