Axure实战:咖啡订购APP，附高保真原型稿
csdh11 2025-01-12 12:40 28 浏览
编辑导语：本文作者根据一个咖啡订购APP的设计稿，制作了一个高保真的原型，并对功能进行分析，分享了交互的制作过程，一起来学习一下吧。
很久没有来更新了，最近休假，收集了一些移动端的APP设计稿，这款APP是UI8上看到的，从设计风格、配色、操作上，都比较符合我的口味，所以制作了一个高保真的原型，今天和大家一起交流一下制作过程。
01 原网站设计稿（Figma格式）
02 高保真原型（Axure9格式）
其实这个项目的原型，在制作过程中，UI部分的素材都可以从设计稿中获取到，交互功能没有太多，主要涉及几个点：
下面以注册登录的表单验证和大家分享一下。
03 功能分析
登录页的交互，包含以下几点：
- 输入框获取焦点状态的样式变化
- 输入的密码显示/隐藏效果
- 邮箱的格式验证，是否包含@作为判断标准，不包含则高亮显示
实现上面的效果，我们会用到以上几个元件。
- 输入密码的input
- 显示密码的input
- 显示/隐藏密码的按钮
- 验证交互的按钮
04 功能制作
原型的绘制就略过了，主要分享一下，交互的制作。
第一步：我们将默认的密码input命名为“pwd”，显示密码的input命名为“showpwd”，同时将“showpwd”设为隐藏状态，并且与“pwd”进行对齐。
第二步：将显示和隐藏按钮移动到合适的位置，并且将2个图标，命名为“显示密码按钮”和“隐藏密码按钮”，同时将“隐藏密码按钮”默认设置为隐藏。
第三步：为显示和隐藏按钮设置交互，点击“显示密码按钮”，添加单击的事件，为“showpwd”的input增加设置文本的动作，如果所示，作用是当点击“显示密码按钮”时，将用户输入的密码，在showpwd元件中显示。
同时在增加“显示/隐藏”的动作，将“showpwd”和“隐藏密码按钮”进行显示，同时将“显示密码按钮”设为隐藏。
第四步：设置邮箱的高亮效果，这里的高亮，是通过对元件的选中状态来实现的。首先，我们选中邮箱输入框，设置它的选中效果，边框设为红色，宽度为2。
第五步：设置按钮的交互，点击按钮的交互，是为了实现验证邮箱格式的，当用户输入的邮箱不包含@时，则激活选中的样式，达到高亮的效果。
选中按钮添加点击的事件，同时增加判断，用于验证。这里设置的是当email的输入框内容不包含@时，设置email的输入框为选中状态。
同时在设置一个包含@的判断，如果包含，则进入主界面。
完成以上的步骤，F5预览一下效果。
05 结尾
这里我将这个设计稿直接做成了高保真的原型，版本是Axure9版本的，有兴趣下载的，公众号输入“coffee”关键词获取下载地址。
感谢关注，我们将会不定期分享免费高保真原型，敬请期待。如果您觉得我们做的还不错，劳烦动动小手，分享给更多需要的人。谢谢！
本文由 @IMZQZ 原创发布于人人都是产品经理，未经许可，禁止转载
题图来自 Unsplash，基于 CC0 协议
相关推荐
- SpringBoot+LayUI后台管理系统开发脚手架
-
源码获取方式：关注，转发之后私信回复【源码】即可免费获取到！项目简介本项目本着避免重复造轮子的原则，建立一套快速开发JavaWEB项目（springboot-mini），能满足大部分后台管理系统基础开...
- Spring Boot+Vue全栈开发实战，中文版高清PDF资源
-
SpringBoot+Vue全栈开发实战，中文高清PDF资源，需要的可以私我：）SpringBoot致力于简化开发配置并为企业级开发提供一系列非业务性功能，而Vue则采用数据驱动视图的方式将程序...
- 2021年超详细的java学习路线总结—纯干货分享
-
本文整理了java开发的学习路线和相关的学习资源，非常适合零基础入门java的同学，希望大家在学习的时候，能够节省时间。纯干货，良心推荐！第一阶段：Java基础...
- 探秘Spring Cache:让Java应用飞起来的秘密武器
-
探秘SpringCache：让Java应用飞起来的秘密武器在当今快节奏的软件开发环境中，性能优化显得尤为重要。SpringCache作为Spring框架的一部分，为我们提供了强大的缓存管理能力，让...
- 3，从零开始搭建SSHM开发框架(集成Spring MVC)
-
目录本专题博客已共享在(这个可能会更新的稍微一些)https://code.csdn.net/yangwei19680827/maven_sshm_blog...
- Spring Boot中如何使用缓存?超简单
-
SpringBoot中的缓存可以减少从数据库重复获取数据或执行昂贵计算的需要，从而显著提高应用程序的性能。SpringBoot提供了与各种缓存提供程序的集成，您可以在应用程序中轻松配置和使用缓...
- 我敢保证，全网没有再比这更详细的Java知识点总结了，送你啊
-
接下来你看到的将是全网最详细的Java知识点总结，全文分为三大部分：Java基础、Java框架、Java+云数据小编将为大家仔细讲解每大部分里面的详细知识点，别眨眼，从小白到大佬、零基础到精通，你绝...
- 1，从零开始搭建SSHM开发框架(环境准备)
-
目录本专题博客已共享在https://code.csdn.net/yangwei19680827/maven_sshm_blog1，从零开始搭建SSHM开发框架（环境准备）...
- 做一个适合二次开发的低代码平台，把程序员从curd中解脱出来-1
-
干程序员也有好长时间了，大多数时间都是在做curd。现在想做一个通用的curd平台直接将我们解放出来；把核心放在业务处理中。用过代码生成器，在数据表设计好之后使用它就可以生成需要的controller...
- 设计一个高性能Java Web框架（java做网站的框架）
-
设计一个高性能JavaWeb框架在当今互联网高速发展的时代，构建高性能的JavaWeb框架对于提升用户体验至关重要。本文将从多个角度探讨如何设计这样一个框架，让我们一起进入这段充满挑战和乐趣的旅程...
- 【推荐】强&牛!一款开源免费的功能强大的代码生成器系统!
-
今天，给大家推荐一个代码生成器系统项目，这个项目目前收获了5.3KStar，个人觉得不错，值得拿出来和大家分享下。这是我目前见过最好的代码生成器系统项目。功能完整，代码结构清晰。...
- Java面试题及答案总结(2025版持续更新)
-
大家好，我是Java面试分享最近很多小伙伴在忙着找工作，给大家整理了一份非常全面的Java面试场景题及答案。...
- Java开发网站架构演变过程-从单体应用到微服务架构详解
-
Java开发网站架构演变过程，到目前为止，大致分为5个阶段，分别为单体架构、集群架构、分布式架构、SOA架构和微服务架构。下面玄武老师来给大家详细介绍下这5种架构模式的发展背景、各自优缺点以及涉及到的...
- 本地缓存GuavaCache(一)（guava本地缓存原理）
-
在并发量、吞吐量越来越大的情况下往往是离不开缓存的，使用缓存能减轻数据库的压力，临时存储数据。根据不同的场景选择不同的缓存，分布式缓存有Redis，Memcached、Tair、EVCache、Aer...
- 一周热门
- 最近发表
- 标签列表
-
- mydisktest_v298 (34)
- document.appendchild (35)
- 头像打包下载 (61)
- acmecadconverter_8.52绿色版 (39)
- word文档批量处理大师破解版 (36)
- server2016安装密钥 (33)
- mysql 昨天的日期 (37)
- parsevideo (33)
- 个人网站源码 (37)
- centos7.4下载 (33)
- mysql 查询今天的数据 (34)
- intouch2014r2sp1永久授权 (36)
- 先锋影音源资2019 (35)
- jdk1.8.0_191下载 (33)
- axure9注册码 (33)
- pts/1 (33)
- spire.pdf 破解版 (35)
- shiro jwt (35)
- sklearn中文手册pdf (35)
- itextsharp使用手册 (33)
- 凯立德2012夏季版懒人包 (34)
- 冒险岛代码查询器 (34)
- 128*128png图片 (34)
- jdk1.8.0_131下载 (34)
- dos 删除目录下所有子目录及文件 (36)