变量函数实战:高保真APP原型“发票页面”动态交互教程

news2025/5/13 18:43:48

变量函数是高保真交互原型设计中常见的高级交互功能,能够避免重复复制与手动修改页面元素和逻辑标注,让演示更有真实体验感。本文分享一个高保真APP交互原型页面的实操案例,结合原型设计工具中的变量函数与逻辑判断功能,手把手教你如何制作高保真动态交互原型,干货满满。

APP交互原型页面案例示例

一、了解变量函数与条件判断

通俗来说,变量就是会随着操作而改变的值,例如用户输入框填写的内容,可以是文字、数字、布尔值等;将变量与控件属性绑定后,就能在不同状态下展现不同效果。函数则是在变量基础上进行处理的工具,常见的有字符串操作、数值计算、数学运算、日期时间处理等;条件判断(逻辑判断)则用于在满足特定条件时触发不同的交互分支。

变量函数与条件判断典型的组合搭配示例:输入框绑定变量 → 触发校验条件 → 执行分支响应(成功跳转/错误提示)

函数表部分示例

二、APP原型页面高级交互实操

以下将以墨刀原型设计工具为例,使APP原型中常见的发票页面,实现具备输入框校验功能的企业发票抬头录入模块,利用变量函数和条件判断功能,实现格式校验与二次确认。

步骤1:明确格式与交互条件

内容限制:企业名称、税号、电话号码为必填内容,要满足以下格式要求:

  • 企业名称:不能为空
  • 税号:字符数15-20
  • 电话号码:11位数字

交互条件:

  • 任一格式不符显示错误提示浮层
  • 格式全部正确,点击保存按钮弹出二次确认弹窗,信息需一致。
输入框填写格式要求

步骤2:创建并绑定变量

为企业名称、税号、电话号码,以及二次确认信息页面的对应信息,分别创建字符串变量,绑定文本。

步骤3:设置交互事件

设置单击触发行为,条件判断分支:

(1)如果企业名称字符长度>0,且税号字符长度在15-20,且电话号码等于11位;

  • 显示遮罩与弹窗弹出
  • 弹窗信息的变量值:企业名称、税号、电话号码与填写一致

(2)否则(即任意一个输入框内容格式不符)

  • 显示错误提示浮层

最终预览效果如下:

三、高级交互功能其他场景应用

在高保真原型中,变量函数与逻辑判断无处不在,以APP原型为例,这里列举几个常见场景供参考:

1. 动态数值变化

  • 进度指示器:进度条自动更新/音量滑块联动变量,实时反馈
  • 自动计算器:购物车数量变更后,自动计算总价

2. 内容验证判断

  • 流程检测:注册/登录时多字段格式校验
  • 表单验证:表单必填项内容验证

3. 随机生成数据

  • 动态验证码生成、随机整数生成(6位随机数/4位随机数)

结语

变量函数与逻辑判断是制作高保真交互原型必不可少的高级交互功能。通过本文实操案例的教程,希望能够帮助到对高保真交互原型演示有需求的产品经理,快速掌握在原型中创建变量、绑定设置、条件判断、函数运算的全流程,打造更具真实感与交互性的产品原型。

注:本文提到的原型工具和操作步骤仅为当前版本示例分享,实际请以具体操作为准。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/2374862.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

Spring Boot 3 + Undertow 服务器优化配置

优化背景 当你的application需要支持瞬时高并发的时候,tomcat已经不在是最优的选择,我们可以改为Undertow,并对其进行优化。 Undertow 是一个轻量级的、高性能的Java Web 服务器,由JBoss 开发并开源。它是基于非阻塞(…

7系列 之 OSERDESE2

背景 《ug471_7Series_SelectIO.pdf》介绍了Xilinx 7 系列 SelectIO 的输入/输出特性及逻辑资源的相关内容。 第 1 章《SelectIO Resources》介绍了输出驱动器和输入接收器的电气特性,并通过大量实例解析了各类标准接口的实现。 第 2 章《SelectIO Logic Resource…

vue3+flask+sqlite前后端项目实战

基础环境安装 pycharm 下载地址: https://www.jetbrains.com/zh-cn/pycharm/download/?sectionwindows vscode 下载地址 https://code.visualstudio.com/docs/?dvwin64user python 下载地址 https://www.python.org/downloads/windows/ Node.js(含npm…

Java 线程的堆栈跟踪信息

Java 线程的堆栈跟踪信息,展示了线程的当前状态和执行位置。以下是详细解释: 线程基本信息 "Thread-0" #16 prio5 os_prio0 cpu0.00ms elapsed16.29s tid0x00000243105a4130 nid0x5384 waiting on condition [0x0000007687ffe000]线程名称…

【计算机视觉】OpenCV实战项目:Long-Exposure:基于深度学习的长时间曝光合成技术

Long-Exposure:基于深度学习的长时间曝光合成技术 项目概述与技术背景项目核心功能技术原理 环境配置与安装硬件要求建议详细安装步骤可选组件安装 实战应用指南1. 基础使用:视频转长曝光2. 高级模式:自定义光轨合成3. 批量处理模式 技术实现…

传输层协议UDP和TCP

传输层协议UDP和TCP 1、UDP2、TCP2.1、TCP协议段格式2.2、确认应答(ACK)机制2.3、超时重传机制2.4、连接管理机制2.5、理解CLOSE_WAIT状态2.6、理解TIME_WAIT状态2.7、流量控制2.8、滑动窗口2.9、拥塞控制2.10、延迟应答2.11、捎带应答2.12、面向字节流2.13、粘包问题2.14、TCP…

浅谈大语言模型原理

1.反向传播算法 背景 反向传播算法是当前深度学习的核心技术。 神经网络 x是输入,o是输出,w是需要训练的参数(w有初始值)三层全连接的神经网络:输入层、隐藏层、输出层 激活函数 f ( x ) 1 1 x − 1 f(x)\frac…

Clickhouse 迁移到 Doris 的最佳实践

一、引言 在将数据从 Clickhouse 迁移到 Apache Doris / SelectDB Cloud 的过程中,涉及表结构迁移、查询语句迁移以及数据迁移等多个关键环节。每个环节都有其复杂性和需要注意的细节,本文将详细介绍这些内容及对应的最佳实践方法。 二、表结构迁移 &…

WebSocket的原理及QT示例

一.WebSocket 介绍 1.概述 WebSocket 是一种在单个 TCP 连接上进行全双工通讯的协议,它在 2011 年被 IETF 定为标准 RFC 6455,并由 RFC7936 补充规范。与传统的 HTTP 协议不同,WebSocket 允许服务器和客户端之间进行实时、双向的数据传输&a…

vue3:十二、图形看板- echart图表-柱状图、饼图

一、效果 如图展示增加了饼图和柱状图,并且优化了浏览器窗口大小更改,图表随着改变 二、 饼图 1、新建组件文件 新增组件EchartsExaminePie.vue,用于存储审核饼图的图表 2、写入组件信息 (1)视图层 写入一个div,写入变量chart和图表宽高 <template><div ref…

2025年best好用的3dsmax插件和脚本

copitor 可以从一个3dsmax场景里将物体直接复制到另一个场景中 Move to surface 这个插件可以将一些物体放到一个平面上 instancer 实体器&#xff0c;举例&#xff1a;场景中有若干独立的光源&#xff0c;不是实体对象&#xff0c;我们可以使用instancer将他变成实体。 paste …

HAProxy + Keepalived + Nginx 高可用负载均衡系统

1. 项目背景 在现代Web应用中&#xff0c;高可用性和负载均衡是两个至关重要的需求。本项目旨在通过HAProxy实现流量分发&#xff0c;通过Keepalived实现高可用性&#xff0c;通过Nginx提供后端服务。该架构能够确保在单点故障的情况下&#xff0c;系统仍然能够正常运行&#…

5.12 note

Leetcode 图 邻接矩阵的dfs遍历 class Solution { private: vector<vector<int>> paths; vector<int> path; void dfs(vector<vector<int>>& graph, int node) { // 到n - 1结点了保存 if (node graph.size() - 1)…

跨时钟域(CDC,clock domain crossing)信号处理

参考视频&#xff1a; 数字IC&#xff0c;FPGA秋招【单bit信号的CDC跨时钟域处理手撕代码合集】_哔哩哔哩_bilibili 一、亚稳态 原因是&#xff1a;建立时间和保持时间没有保持住。然后在下图的红框里面&#xff0c;产生亚稳态。因为电路反馈机制&#xff0c;最后大概率会恢复…

OBS studio 减少音频中的杂音(噪音)

1. 在混音器中关闭除 麦克风 之外的所有的音频输入设备 2.在滤镜中增加“噪声抑制”和“噪声门限”

智能手表 MCU 任务调度图

智能手表 MCU 任务调度图 处理器平台&#xff1a;ARM Cortex-M33 系统架构&#xff1a;事件驱动 多任务 RTOS RTOS&#xff1a;FreeRTOS&#xff08;或同类实时内核&#xff09; 一、任务调度概览 任务名称优先级周期性功能描述App_MainTask中否主循环调度器&#xff0c;系统…

S7-1500——零基础入门2、PLC的硬件架构

PLC的硬件架构 一,西门子PLC概述二,CPU介绍三,数字量模块介绍四,模拟量模块介绍五,其他模块介绍一,西门子PLC概述 本节主要内容 西门子PLC硬件架构,主要内容包括PLC概述、组成、功能及S7-1500 demo的组成与安装演示。 介绍了PLC的定义、功能、应用场合,以及与继电器控…

【PmHub后端篇】Skywalking:性能监控与分布式追踪的利器

在微服务架构日益普及的当下&#xff0c;对系统的性能监控和分布式追踪显得尤为重要。本文将详细介绍在 PmHub 项目中&#xff0c;如何使用 Skywalking 实现对系统的性能监控和分布式追踪&#xff0c;以及在这过程中的一些关键技术点和实践经验。 1 分布式链路追踪概述 在微服…

利用“Flower”实现联邦机器学习的实战指南

一个很尴尬的现状就是我们用于训练 AI 模型的数据快要用完了。所以我们在大量的使用合成数据&#xff01; 据估计&#xff0c;目前公开可用的高质量训练标记大约有 40 万亿到 90 万亿个&#xff0c;其中流行的 FineWeb 数据集包含 15 万亿个标记&#xff0c;仅限于英语。 作为…

【RabbitMQ】应用问题、仲裁队列(Raft算法)和HAProxy负载均衡

&#x1f525;个人主页&#xff1a; 中草药 &#x1f525;专栏&#xff1a;【中间件】企业级中间件剖析 一、幂等性保障 什么是幂等性&#xff1f; 幂等性是指对一个系统进行重复调用&#xff08;相同参数&#xff09;&#xff0c;无论同一操作执行多少次&#xff0c;这些请求…