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年入行的原创实力保障！！点击前去关注>>