axure原型商城(axure手机app原型模板)

编辑导语：根据某咖啡点餐APP的设计稿，作者制作了一个高保真的原型，并对其功能进行了分析，分享了交互制作过程。让我们一起来学习吧。
好久没更新了。最近休假，收集了一些手机APP设计稿。这个APP是在UI8上看到的，无论是设计风格、配色还是操作都挺符合我的口味，所以做了一个高保真的原型。今天就和大家分享一下制作过程。
1份网站设计初稿(Figma格式)
02高保真原型(Axure9格式)其实这个项目的原型，在制作过程中，UI部分的素材可以从设计稿中获取，交互功能不多，主要涉及几点：
下面通过报名表和大家分享一下。
03功能分析登录页面的交互，包括以下几点：
获取输入框焦点状态的样式变化。显示/隐藏输入密码的效果。验证邮箱的格式。以是否含有@作为判断标准。如果没有，就会高亮显示，达到上面的效果。我们将使用上述组件。
输入验证交互的输入密码输入显示密码按钮显示/隐藏密码按钮
04功能原型图略过，主要是分享，互动制作。
步骤1:我们将默认的密码输入命名为“pwd ”,将显示密码的输入命名为“showpwd”。同时，我们将“showpwd”设置为隐藏状态，并与“pwd”对齐。
第二步：将显示和隐藏按钮移动到适当的位置，将两个图标命名为“显示密码按钮”和“隐藏密码按钮”，并将“隐藏密码按钮”设置为默认隐藏。
第三步：为显示和隐藏按钮设置交互，点击“显示密码按钮”，添加被点击的事件，为“showpwd”的输入添加设置文本的动作。如果显示，功能是当点击“显示密码按钮”时，在showpwd的组件中显示用户输入的密码。
同时增加了“显示/隐藏”的动作，显示“showpwd”和“隐藏密码按钮”，而“显示密码按钮”设置为隐藏。
第四步：设置邮箱的高亮效果。这里的突出显示是通过组件的选定状态实现的。首先，我们选择邮箱输入框并设置其选择效果。边框设置为红色，宽度为2。
第五步：设置按钮交互，点击按钮交互，验证邮件格式。当用户输入的电子邮件不包含@时，所选样式将被激活以实现高亮效果。
选择按钮添加被点击的事件，同时添加判断进行验证。这里的设置是当电子邮件的输入框不包含@时，将电子邮件的输入框设置为选中状态。
同时设置一个包含@的判断，如果是，进入主界面。
完成以上步骤后，F5预览效果。
05年底我直接把这个设计稿做成高保真的原型，版本是Axure9版本。如果有兴趣下载，微信官方账号输入关键词“咖啡”即可获得下载地址。
感谢您的关注。我们会不定期分享免费的高保真原型机，敬请关注。如果你觉得我们做得很好，请分享给更多有需要的人。谢谢你
本文由@IMZQZ原创发布。每个人都是产品经理。未经许可，禁止复制。
来自Unsplash的图像，基于CC0协议。