绿色排版工具|热门专题|网站地图|移动官网
您的当前位置:网站首页 > 产品运营 > 正文

Protopie教程:邮箱验证特效

来源: 编辑: 时间:2019-11-18 15:19:43 阅读:

本篇教程将展示如何使用Protopir制作一个邮箱验证特效,enjoy~

Protopie教程:邮箱验证特效

一、最终效果

Protopie教程:邮箱验证特效

二、知识点

在本次教程中,我们用到了一个新的知识点:监听&条件。

监听:图层的属性值或者变量 发生变化时,就会触发相应的反应动作。

条件:当触发动作满足预设条件时,指定反应动作发生。‘条件’必需有触发动作的前提下,对该触发动作发生后,在哪种状态下执行哪些反应起到指示性的作用。

三、制作过程

首先来看一下,本次教程用到的元素:

Protopie教程:邮箱验证特效

下面我们开始一步步完成这个特效,首先我们按照下图所示,将元素按不同图层顺序排列,并且将元素整理排放完成。

Protopie教程:邮箱验证特效

排列完成后,我们进行最基本的一些设置:将通过 / 警告 / 绿色背景框 / 红色背景框 / 蓝色背景框这几个图层的透明度都设置成0,目的是为了只显示默认的表单等待输入效果。

完成设置后,我们开始进行交互设置:

选择“输入框”图层,为该图层创建“单击”的触发动作,并且在该动作下添加:“移动”、“文本”、“透明度”3个参数。

  • 移动:选择“email-lable”图层,将“移动至”坐标值设置为X:57 / Y:257
  • 文本:选择“email-lable”图层,将“字号”修改为14
  • 透明度:选择“蓝色背景框”图层,将“透明度”设置为100

Protopie教程:邮箱验证特效

以上三个参数的设置,为了实现,点击输入框后,Email字样上移,并且缩小字号,同时蓝色背景框显示以表示当前输入框为焦点状态。

下一步,我们来完成对输入框输入内容的判断,并且根据输入的值,显示不同的提示特效。这里我们就需要用到“监听”和“条件”2个新的知识点。

我们选择输入框,添加“条件”的参数,并且按下图进行设置。设置的意思:当输入框输入文本为bbc def.com时,触发指定特效。

Protopie教程:邮箱验证特效

条件规则创建完成后,我们来为该规则创建2个特效,“透明度”&“文本”。

  • 透明度:将“红色背景框”、“警告”2个图层的透明度设置成100;将“邮箱”图层设置为0
  • 文本:将“email-lable”图层,文本值修改为“Email format error”

Protopie教程:邮箱验证特效

以上几个参数的设置,为了实现,点击输入框后,输入“abc2def.com”时,出现红色警告框。

下一步,我们来实现,输入“abc@def.com”时,出现绿色提示框的特效,设置方法与警告框特效制作类似,我们这里只列出不同点:

  • 条件:在设置时,值填写abc@def.com
  • 透明度:将“绿色背景框”、“通过”2个图层的透明度设置成100;将“邮箱”图层设置为0
  • 文本:将“email-lable”图层,文本值修改为“Email has been verified”

Protopie教程:邮箱验证特效

以上几个参数的设置,为了实现,点击输入框后,输入“abc@def.com”时,出现绿色框。

为了更好的用户体验,我们还需要设置当输入框为空值时,显示蓝色框,隐藏红色和绿色框,具体设置方式使用“透明度”完成。可以直接在源文件中查看。

至此,我们完成了该教程的特效制作。

源文件下载

 

作者:ZQZ原型师,专注原型设计/交互设计

本文由 @ZQZ原型师 原创发布于人人都是产品经理,未经许可,禁止转载。

题图来自作者。

图文精选:

栏目分类
最新文章
热门文章
推荐文章

Copyright©2012-2019 小蚂蚁信息网版权所有 粤ICP备14061018号-1


郑重声明:本网站资源、信息来源于网络,完全免费共享,仅供学习和研究使用,版权和著作权归原作者所有,如有不愿意被转载的情况,请通知我们删除已转载的信息。

Top