起航学习网

- 让每个人都能学到最前沿新知识、新技能!
起航学习网
当前位置: 起航学习网 > 短期培训 > 设计培训 > 扫一扫是微信独有的功能吗

扫一扫是微信独有的功能吗

时间:2019-03-12 13:10:08来源:我爱设计网 作者:IT培训网 已有: 名学员访问该课程

  快捷搜索:扫一扫(5)


机构名称:IT培训网 联系手机:13783581536 在线客服:起航学习网客服 在 线 QQ:起航学习网客服 网站域名:http://www.cnitedu.cn

前言:目前,微信在国内社交软件发展中取得了很大的成功,微信聊天、微信红包以及刷微信朋友圈等也成了人们日常生活的一部分,同时随着微信不断地更新迭代,其功能与应用也越来越完善。

扫一扫,不仅仅是微信的功能,其他软件也是有的,比如支付宝、浏览器、各大app软件,都是有这个功能的,那么对于微信安卓版的原型设计扫一扫又是如何的呢?

原文标题:微信Android客户端的原型设计——“扫一扫”功能!

作者:数艺社

微信在社交软件发展中取得了很大成功,微信聊天、微信红包以及刷微信朋友圈等成为了人们日常生活的一部分,同时随着微信不断地更新迭代,其功能与应用也越来越完善。

一、概述

目前,微信在国内社交软件发展中取得了很大的成功,微信聊天、微信红包以及刷微信朋友圈等也成了人们日常生活的一部分,同时随着微信不断地更新迭代,其功能与应用也越来越完善。

扫一扫是微信独有的功能吗_www.epx365.cn

首先,我们先针对微信Android客户端原型设计中的公共元件的制作进行一系列的讲解,因为它们在后续设计的各个模块中会被多次应用。

微信Andrid客户端原型设计中需要涉及的4大功能模块包括“微信”“通讯录”“发现”和“我”,其中最主要的设计模块在于微信首页的设计,而其他具体要实现的主要功能点如下面表格所示。

扫一扫是微信独有的功能吗_www.epx365.cn

二、准备工作

在开始练习之前,我们先对本章涉及的常用操作做下说明,后面的步骤讲解中将不再赘述。

(一)截图功能的应用

不管是在日常练习还是在实际应用中,截图功能的使用情况会非常多,而截图获取的图片主要用来参考颜色和布局,或者是方便采用截图中的某个图标。

针对截图功能的使用,操作步骤如下:

1. 打开要截取的图片,或者当前屏幕显示的是其他某个软件的界面,如我们从手机微信客户端截图后传到电脑上的图片,如图所示。

扫一扫是微信独有的功能吗_www.epx365.cn

2. 打开截图排列中的第2张图片,我们的目的是想使用图片中下方输入框左边和右边的几个图标,这里我们可以使用第三方系统自带的截图功能,如QQ桌面客户端的截图功能(快捷键Ctrl+Alt+A)进行截图,并选取需要的图标部分,如图所示。

扫一扫是微信独有的功能吗_www.epx365.cn

3.单击“完成”选项后,截出的图片即存储在系统剪切板中,然后在Axure的设计区域里直接按快捷键Ctrl+V粘贴到指定位置即可,如图所示。

扫一扫是微信独有的功能吗_www.epx365.cn

(二)吸管工具的应用

针对“吸管工具” 的运用,如我们想设计矩形区域的背景色与截图图标背景色一致,可使用“吸管工具” 吸取图标周边的颜色作为背景色,避免通过肉眼观察设置颜色所带来的不准确性,如图所示。

扫一扫是微信独有的功能吗_www.epx365.cn

移动“吸管工具” 到图标周边的灰色区域,单击吸取所需要的颜色,即可设置背景矩形的颜色和图标背景颜色一致。

(三)客户端截图准备

为了能获取微信客户端界面上各个部分的颜色和图标等资源,请先在手机上打开微信Android客户端,然后对需要的界面进行截图,再将手机上保存的截图发到电脑上,后面在设计的过程中可通过“吸管工具” 吸取截图中的颜色,或者截取截图中的图标等资源。

下图所示的是根据需要截取的一些图片效果。例如,当我们在新建按钮元件的时候,只要打开带有绿色按钮的截图,就可以参考并吸取绿色按钮中的背景颜色。

扫一扫是微信独有的功能吗_www.epx365.cn

三、设计公共元件库——设置“扫一扫”功能

在开始微信Android客户端的原型设计之前,我们先设计一个公共的元件库,这些元件在微信Android客户端原型设计中会被多次使用。

为了统一原型的大小,默认微信Android手机客户端的分辨率大小为480×800,且后面的相关元件大小设计也参考此大小。

(一)视频教程

扫一扫是微信独有的功能吗_www.epx365.cn

(二)新建元件库

从元件库的菜单中选择“创建元件库...”选项,在弹出的文件保存对话框中,输入元件库的名字“微信Android元件库”,如图所示。

扫一扫是微信独有的功能吗_www.epx365.cn

此时系统会重新打开一个Axure实例,启动一个新的工作环境,并默认建立一个新的元件即“新元件1”,当前元件库也会默认加载这个新的元件库,如图所示。

扫一扫是微信独有的功能吗_www.epx365.cn

(三)设置“扫一扫”功能

1.技术掌握:形状相减操作、循环处理、移动、显示和隐藏事件。

2.思路指导:二维码扫描是一个循环显示的动画,因此需要考虑如何实现循环效果,常用的方法是通过在不同的状态间来回切换来实现,如隐藏/显示和选中/取消选中,并且要在一开始就要触发其中的一个状态,然后在另外一个状态中改变为相反的状态,从而达到循环的目的。

3.实例目标:通过循环方式实现微信二维码动态扫描效果。完成后的效果如图所示。

扫一扫是微信独有的功能吗_www.epx365.cn

4.实例步骤

(1)新建元件

单击Widget Library Pages右边的添加元件图标,新增一个元件,并重新命名为“扫一扫”,如图所示。

扫一扫是微信独有的功能吗_www.epx365.cn

(2)界面布局

① 复制12.3小节里“实例:制作标题栏”内容中制作好的标题栏,修改文字内容为“二维码/条码”,然后添加一个无边框灰色矩形作为背景,设置矩形大小为480×740。再添加一个无边框矩形,设置矩形大小为480×100,设置矩形背景颜色为黑色,作为下方菜单栏,设置透明度为60,底部与背景矩形对齐,如图所示。

扫一扫是微信独有的功能吗_www.epx365.cn

② 添加一个大小为250×200的矩形放在背景中间,用背景和它做“减法”,以抠除掉中间区域,选中背景和这个矩形框,选择“去除”操作,使其中间出现镂空的效果,如图所示。

扫一扫是微信独有的功能吗_www.epx365.cn

③ 设置背景为黑色半透明效果,如图所示。

扫一扫是微信独有的功能吗_www.epx365.cn

④ 添加4个文本标签,设置标签字体颜色为白色,字号为20,然后放在下方菜单栏上,并呈水平平均分布样式进行排列。为了简洁,这里不设置图标,只设置4个标签的交互样式,且设置选中文字的样式为绿色,如图所示。

扫一扫是微信独有的功能吗_www.epx365.cn

⑤ 选中4个标签,单击鼠标右键设置选项组名称为scan_menus,保证在单击设置选中时只会有一个始终保持选中状态,如图所示。

扫一扫是微信独有的功能吗_www.epx365.cn

⑥ 使用Photoshop制作一个透明的二维码扫描框,设置框体大小为250×200,如果不会使用Photoshop,直接选择一个矩形框代替即可,并将它命名为frame,如图所示。

扫一扫是微信独有的功能吗_www.epx365.cn

⑦ 添加一条水平线作模拟扫描时上下移动的线,设置宽度为230,线宽为最粗样式,设置线条颜色为渐变色,中间为绿色,左右两边为绿色但透明度设置为0,渐变角度为0,并命名为scan_line,如图所示。

扫一扫是微信独有的功能吗_www.epx365.cn

⑧ 选中扫描框frame和扫描线scan_line, 并单击鼠标右键转换为动态面板,同时命名为scaner,如图所示。

扫一扫是微信独有的功能吗_www.epx365.cn

(3)事件处理

① 添加控制元件事件

该事件为一个循环上下移动的动画效果,循环的处理方法是使用元件的显示与隐藏事件来进行控制,在显示后隐藏,隐藏后再显示,如此循环往复。

在扫描框动态面板scaner里添加一个热区元件,并命名为control,用来处理事件逻辑,设置热区大小为50×50(由于不可见,大小也可随意设置)。

② 添加热区元件control的隐藏与显示事件

虽然热区元件control本身并不可见,但也可以处理它的隐藏与显示事件,这里分别添加热区元件control隐藏与显示事件,如图所示。

扫一扫是微信独有的功能吗_www.epx365.cn

a 在隐藏事件里,移动扫描线到最上方(9,0)位置。

b 开始移动扫描线到下方(9,190)位置,配合线性动画,时长为2秒,即2000ms。

c 动画结束后,显示热区control。

d 触发热区元件control的显示事件,这时再次移动扫描线到最上方(9,0)位置。

e 开始移动扫描线到下方(9,190)位置,配合线性动画,时长2秒,即2000ms。

f 等待2秒后动画执行完成。

g 动画结束后,隐藏热区元件control,这时会触发隐藏事件,会返回到第1步,即开始循环。

③ 添加动态面板scaner的载入事件

在载入时先隐藏热区元件control,用来触发热区元件control的隐藏事件,如图所示。

扫一扫是微信独有的功能吗_www.epx365.cn

④ 添加下方菜单栏中几个标签的单击事件

单击菜单标签后,设置当前标签为选中状态,这样菜单标签会显示为绿色样式,如图所示。

扫一扫是微信独有的功能吗_www.epx365.cn

⑤ 将这个事件复制到其他3个标签上,完成设置。

(4)按快捷键F5预览

预览时,扫描线会呈现上下循环移动的显示效果。

(四)“扫一扫”功能的应用

1.界面布局

(1)新添加一个页面,并命名为扫一扫,如图所示。

扫一扫是微信独有的功能吗_www.epx365.cn

(2)从公共元件库中拖动“扫一扫”到页面上,放在(0,0)位置,如图所示。

扫一扫是微信独有的功能吗_www.epx365.cn

2.事件处理

用鼠标单击首页下拉菜单“扫一扫”后,打开“扫一扫”页面,如图所示。

扫一扫是微信独有的功能吗_www.epx365.cn

(1)当前窗口打开“扫一扫”页面。

(2)隐藏弹出菜单。

四、大咖推荐

01 MICU设计创始人——王铎

也许有人说Axure只是产品经理必备的工具,但作为一名全方位的设计师还是有必要学习一下的。一名优秀的设计师不仅仅是注重视觉上的表现,还需要对产品原型制作有所了解,而这本书的作者不仅讲到了软件的使用,还非常用心地将软件操作结合到了案例之中,让读者能更好地将软件运用到实际项目中,这对于希望轻松并系统学习原型的人来说无疑是最有效的一种帮助。也希望读到此书的朋友或设计师,能更多地理解产品原型的重要性,做出更优秀的设计。

02 优设交互讲师——刘昱

在互联网时代背景下,越来越多的专业人士都投身到互联网这个大行业当中。无论你是产品经理还是设计师,这本书都能让你告别为了画原型满世界找教程的尴尬,以当下流行的设计为案例,让原型无限接近实际场景。如果你从未接触过Axure也没有关系,本书也能让你从零开始画出高水准的原型,助力你在团队中快速成长,如鱼得水。

03 Axure中文社区——尹广磊

学习是有门槛的,哪怕它再简单也总有些妙手的技巧。教学是有难度的,让人刚好理解并感受到它的乐趣是很难把握的。在重重的困难之下,依然有人愿意这样系统、细致地讲解一些Axure的应用技巧,着实是原型设计者的福利,希望每位读者都好好把握这样的机会。

04 独立App开发者——江文帆

作为一个独立开发者,开发的所有App都是一个从0到1的创造过程,而Axure RP8正是一个绝佳的起点,它能将我脑海里的想法快速变成可见的原型,极大地提高了软件开发效率。这本书的特点是以丰富的商业项目为案例,由浅入深地将如何利用Axure进行原型设计的每一处细节娓娓道来。这些商业项目的一切交互形式都经过了长时间的打磨,通过对这些项目的“临摹”,无论是对于交互设计师还是初学者来说都是一种极好的学习方式。

05 北京思特奇信息技术股份有限公司技术培训主管——刘来

与传明相识已久,得知他在编写有关Axure原型设计的书之后,个人并不感到意外和突然。在这几年的工作生涯中,我亲眼见证他从一名需求分析新手,变成产品原型设计专家。凭借着系统的理论知识和丰富的实战经验,目前公司里系统化的Axure培训课件都出自他手,他总是能把枯燥的内容用形象的案例清晰地讲解出来,也很懂得如何教学才能让学者更易懂,并明白设计的深义,此书值得一看。

06  《动静之美—Sketch移动UI与交互动效设计详解》作者,交互设计师——黄方闻

Axure是目前行业内普及度很高的原型设计软件,不止是产品经理和交互设计师,程序员、UI设计师、测试和运营等人员也应该对该软件有所了解。本书不仅详细深入地介绍Axure的使用方法,更搭配了大量的实例进行讲解,是希望系统和深入学习Axure的人士的不二之选。

07  交互设计师——李煜佳

工欲善其事,必先利其器。Axure是当前交互设计师必不可少的设计工具之一。交互设计的过程总避免不了改稿,所以学好Axure有助于提高我们的设计效率。书中以网站与App常见的设计场景,解析Axure的使用技巧,并让初学者养成良好的画稿习惯。

五、新书推荐

扫一扫是微信独有的功能吗_www.epx365.cn

扫一扫是微信独有的功能吗_www.epx365.cn

六、序与导读

扫一扫是微信独有的功能吗_www.epx365.cn

扫一扫是微信独有的功能吗_www.epx365.cn

扫一扫是微信独有的功能吗_www.epx365.cn

来源地址:http://www.epx365.cn/peixun/ui/201947203.html

来源标题:扫一扫是微信独有的功能吗


你也许会喜欢如下的文章?

机构名称:IT培训网 联系手机:13783581536 在线客服:起航学习网客服 在 线 QQ:起航学习网客服 网站域名:http://www.cnitedu.cn

(责任编辑:IT培训网)
顶一下
(0)
0%
踩一下
(0)
0%
------分隔线----------------------------
------分隔线----------------------------
发表评论
请自觉遵守互联网相关的政策法规,严禁发布色情、暴力、反动的言论。
评价:
表情:
用户名: 验证码:点击我更换图片