编辑导语：本文作者根据一个咖啡订购APP的设计稿，制作了一个高保真的原型，并对功能进行分析，分享了交互的制作过程，一起来学习一下吧。
很久没有来更新了，最近休假，收集了一些移动端的APP设计稿，这款APP是UI8上看到的，从设计风格、配色、操作上，都比较符合我的口味，所以制作了一个高保真的原型，今天和大家一起交流一下制作过程。
其实这个项目的原型，在制作过程中，UI部分的素材都可以从设计稿中获取到，交互功能没有太多，主要涉及几个点：
下面以注册登录的表单验证和大家分享一下。
登录页的交互，包含以下几点：
实现上面的效果，我们会用到以上几个元件。
原型的绘制就略过了，主要分享一下，交互的制作。
第一步：我们将默认的密码input命名为“pwd”，显示密码的input命名为“showpwd”，同时将“showpwd”设为隐藏状态，并且与“pwd”进行对齐。
第二步：将显示和隐藏按钮移动到合适的位置，并且将2个图标，命名为“显示密码按钮”和“隐藏密码按钮”，同时将“隐藏密码按钮”默认设置为隐藏。
第三步：为显示和隐藏按钮设置交互，点击“显示密码按钮”，添加单击的事件，为“showpwd”的input增加设置文本的动作，如果所示，作用是当点击“显示密码按钮”时，将用户输入的密码，在showpwd元件中显示。
同时在增加“显示/隐藏”的动作，将“showpwd”和“隐藏密码按钮”进行显示，同时将“显示密码按钮”设为隐藏。
第四步：设置邮箱的高亮效果，这里的高亮，是通过对元件的选中状态来实现的。首先，我们选中邮箱输入框，设置它的选中效果，边框设为红色，宽度为2。
第五步：设置按钮的交互，点击按钮的交互，是为了实现验证邮箱格式的，当用户输入的邮箱不包含@时，则激活选中的样式，达到高亮的效果。
选中按钮添加点击的事件，同时增加判断，用于验证。这里设置的是当email的输入框内容不包含@时，设置email的输入框为选中状态。
同时在设置一个包含@的判断，如果包含，则进入主界面。
完成以上的步骤，F5预览一下效果。
本文由 @IMZQZ 原创发布于人人都是产品经理，未经许可，禁止转载
题图来自 Unsplash，基于 CC0 协议
此内容由惯性聚合(RSS阅读器)自动聚合整理，仅供阅读参考。 原文来自 — 版权归原作者所有。