Axure 9 实战案例,基本元件的应用 4,善用变换形状绘制APP扫码页

前言

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

本次课程我们继续来学习一下,基本元件的应用。上两篇教程我们讲到了图表这种常见的设计,本篇将带给大家另一种常见的设计,就是手机扫码界面。

这里我们找来腾讯TIM的扫码界面,用作蓝本进行绘图;大家可以看到,扫码界面主要组成包括:遮罩层(半透明)、扫码窗口(全透明/镂空)、扫描线、扫码框、提示语。

在这里插入图片描述

TIM app的扫码界面

下面就来给大家具体讲解一下,如何绘制手机扫码的遮罩与窗口效果。

第一步:绘制扫码窗口

为了节省时间,我们事先把半透明遮罩层绘制好了,即大小为375×812像素的50%透明的黑色矩形(375×812为APP原型设计的常用尺寸)。

在这里插入图片描述

375×812的半透明遮罩层

首先拖入一个矩形,设置其大小为255×255,拖动矩形至水平对齐遮罩层,垂直位于遮罩层的偏上部;然后选中矩形与遮罩层,点击右键,在弹出菜单中选择变换形状_去除(这里是利用变换形状的功能,来绘制特殊形状的元件),扫码窗口就绘制好了。

在这里插入图片描述

拖入矩形,选中矩形与遮罩层,右键选择变换形状_去除

在这里插入图片描述

绘制好的镂空扫码窗口

第二步:绘制提示语

首先拖入一个文本标签,设置它的字体、大小,修改其字体颜色为白色,再输入文字“将二维码放入框内即可扫描”;然后拖动文本标签至扫码窗口下方,水平对齐遮罩层,距离扫码窗口30像素(这是为扫码框预留位置)。

在这里插入图片描述

拖入文本标签,修改文本,并拖至扫码窗口下方

第三步:绘制扫码框

首先拖入一个水平线,设置其边框为3,线段颜色为蓝色;然后在水平线上点击右键,在弹出菜单中选择变换形状_编辑点,给水平线添加一个边界点;再然后拖动左端边界点,使水平线成直角状,设置直角的大小为20×20。

在这里插入图片描述

拖入水平线,右键选择变换形状_编辑点

在这里插入图片描述

添加边界点,拖成直角,并设置为20×20

接着选中直角,按住Ctrl+鼠标左键,拖拉复制多3份,分别点击右键,在弹出菜单中选择变换形状_水平翻转(或垂直翻转),将4个直角翻转成开口指向中心;然后逐个拖动直角,到扫码窗口的四个角;再然后选中四个直角,点击右键,在弹出菜单中选择变换形状_结合,扫码框就绘制好了。

在这里插入图片描述

将直角复制多3份

在这里插入图片描述

将直角翻转成开口指向中心

在这里插入图片描述

将直角拖到扫码窗口四角,选中4个直角右键选择变换形状_结合

第四步:绘制扫描线

首先拖入一个水平线,设置其长度为225、线宽为2;然后设置线段颜色为线性,设置4个颜色点,两端颜色点设为白色全透明;再然后点击翻转,使线段颜色成水平渐变。

在这里插入图片描述

拖入水平线(225x2),设置颜色为线性水平渐变

接着设置水平线的外部阴影,勾选阴影,设置X=0、Y=2,颜色为蓝色,一条扫描线就绘制好了,然后将其拖到扫码窗口中。

在这里插入图片描述

设置水平线的阴影

结语

OK了,一个遮罩层镂空的APP扫码界面就绘制完成了,感谢大家的阅读。

在这里插入图片描述

完成效果图

在线预览

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

相关课件

为了帮助各位同学,能快速理解和练习Axure案例,本专栏每篇教程都会提供RP格式课件下载。

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

链接长期有效。

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

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

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

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

打赏作者

默林工作室

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

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

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

打赏作者

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

抵扣说明:

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

余额充值