前言
Hello!欢迎来到Axure 9 实战案例教程专栏。点击了解课程简介>>
本次课程我们继续来学习一下,基本元件的应用。上两篇教程我们讲到了图表这种常见的设计,本篇将带给大家另一种常见的设计,就是手机扫码界面。
这里我们找来腾讯TIM的扫码界面,用作蓝本进行绘图;大家可以看到,扫码界面主要组成包括:遮罩层(半透明)、扫码窗口(全透明/镂空)、扫描线、扫码框、提示语。
下面就来给大家具体讲解一下,如何绘制手机扫码的遮罩与窗口效果。
第一步:绘制扫码窗口
为了节省时间,我们事先把半透明遮罩层绘制好了,即大小为375×812像素的50%透明的黑色矩形(375×812为APP原型设计的常用尺寸)。
首先拖入一个矩形,设置其大小为255×255,拖动矩形至水平对齐遮罩层,垂直位于遮罩层的偏上部;然后选中矩形与遮罩层,点击右键,在弹出菜单中选择变换形状_去除(这里是利用变换形状的功能,来绘制特殊形状的元件),扫码窗口就绘制好了。
第二步:绘制提示语
首先拖入一个文本标签,设置它的字体、大小,修改其字体颜色为白色,再输入文字“将二维码放入框内即可扫描”;然后拖动文本标签至扫码窗口下方,水平对齐遮罩层,距离扫码窗口30像素(这是为扫码框预留位置)。
第三步:绘制扫码框
首先拖入一个水平线,设置其边框为3,线段颜色为蓝色;然后在水平线上点击右键,在弹出菜单中选择变换形状_编辑点,给水平线添加一个边界点;再然后拖动左端边界点,使水平线成直角状,设置直角的大小为20×20。
接着选中直角,按住Ctrl+鼠标左键,拖拉复制多3份,分别点击右键,在弹出菜单中选择变换形状_水平翻转(或垂直翻转),将4个直角翻转成开口指向中心;然后逐个拖动直角,到扫码窗口的四个角;再然后选中四个直角,点击右键,在弹出菜单中选择变换形状_结合,扫码框就绘制好了。
第四步:绘制扫描线
首先拖入一个水平线,设置其长度为225、线宽为2;然后设置线段颜色为线性,设置4个颜色点,两端颜色点设为白色全透明;再然后点击翻转,使线段颜色成水平渐变。
接着设置水平线的外部阴影,勾选阴影,设置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年入行的原创实力保障!!点击前去关注>>