綠色排版工具|熱門專題|網站地圖|移動官網
您的當前位置:網站首頁 > 產品運營 > 正文

Protopie教程:郵箱驗證特效

來源: 編輯: 時間:2019-11-18 15:19:43 閱讀:

本篇教程將展示如何使用Protopir制作一個郵箱驗證特效,enjoy~

Protopie教程:郵箱驗證特效

一、最終效果

Protopie教程:郵箱驗證特效

二、知識點

在本次教程中,我們用到了一個新的知識點:監聽&條件。

監聽:圖層的屬性值或者變量 發生變化時,就會觸發相應的反應動作。

條件:當觸發動作滿足預設條件時,指定反應動作發生?!畻l件’必需有觸發動作的前提下,對該觸發動作發生后,在哪種狀態下執行哪些反應起到指示性的作用。

三、制作過程

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

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”時,出現紅色警告框。

下一步,我們來實現,輸入“[email protected]”時,出現綠色提示框的特效,設置方法與警告框特效制作類似,我們這里只列出不同點:

  • 條件:在設置時,值填寫[email protected]
  • 透明度:將“綠色背景框”、“通過”2個圖層的透明度設置成100;將“郵箱”圖層設置為0
  • 文本:將“email-lable”圖層,文本值修改為“Email has been verified”

Protopie教程:郵箱驗證特效

以上幾個參數的設置,為了實現,點擊輸入框后,輸入“[email protected]”時,出現綠色框。

為了更好的用戶體驗,我們還需要設置當輸入框為空值時,顯示藍色框,隱藏紅色和綠色框,具體設置方式使用“透明度”完成??梢灾苯釉谠次募胁榭?。

至此,我們完成了該教程的特效制作。

源文件下載

 

作者:ZQZ原型師,專注原型設計/交互設計

本文由 @ZQZ原型師 原創發布于人人都是產品經理,未經許可,禁止轉載。

題圖來自作者。

圖文精選:

欄目分類
最新文章
熱門文章
推薦文章

Copyright?2012-2019 小螞蟻信息網版權所有 粵ICP備14061018號


鄭重聲明:本網站資源、信息來源于網絡,完全免費共享,僅供學習和研究使用,版權和著作權歸原作者所有,如有不愿意被轉載的情況,請通知我們刪除已轉載的信息。

Top 捕鱼游戏技巧大全