弹窗、抽屉、页面跳转区别 | web交互入门
当用户点击或触发浏览页面的某个操作,有很多web交互方式,可以大致分为弹窗、抽屉、跳转新页面三种web交互方式。虽然这三种web交互方式看起来没什么不同,但实际上弹窗、抽屉、跳转新页面对交互体验有蛮大的影响。
这需要UI\UX设计师针对不同的使用场景合理使用三种web交互方式,让用户有统一的交互体验。三种web交互方式都有各自的优势和劣势,下面Pixso设计师整理了三种web交互方式的适用项目和适用场景,希望对你有所启发。
1. 弹窗
1.1 定义
弹窗是一种模态对话框,用于提醒或解决某个任务。
1.2 表现形式
一般是在蒙版上置顶一个窗口,窗口中有一个主体及关闭按钮。
1.3 优劣势
-
优势:在当前页面上的衍生操作,之前内容不会丢失,用户可以完成弹窗后继续之前的操作。
-
劣势:弹窗页面一般较小,承载信息量较少,只适合简单指令。
1.4 适用场景
-
简单内容的展示,没有过多的复杂操作,例如外卖应用的修改配送地址。
-
需要连续性处理信息的场景,例如批量修改信息。
-
辅助说明,对当前页面内容的快速扩充,例如放大查看缩略图。
1.5 总结
弹窗多处理内容较少,相对独立的页面,在不丢失信息焦点的情况下,可以快速返回上级,适合处理一次性的操作内容。值得注意的是,一般弹窗上不可再增加弹窗,在弹出弹窗后,背景页面不可继续操作,确认和关闭按钮明确,避免打开弹窗无法关闭的情况。
例如在Pixso资源库中,就有当下十分流行的超大弹窗的设计,可以自适应页面宽高,在不丢失当前页面内容的情况下,呈现更多的信息量。
设计系统组件
2. 抽屉
2.1 定义
从屏幕边缘划出的浮层面板。
2.2 表现形式
当父级导航无法给出更加详细的指令时,可以呼出抽屉面板,展示详细指令。
2.3 优劣势
-
优势:在不离开当前页面的前提下完成操作,对当前的操作无影响,可以随时呼出也可以对视隐藏,页面视觉干净清爽,不杂乱。
-
劣势:如遇到长时间呼出的抽屉,会导致信息集中一侧,视觉焦点过于边缘。需要做好提示,不然容易被用户忽略或遗漏。
2.4 适用场景
-
适用于简洁的页面,将更多操作和内容隐藏起来,当用户有需要的时候可以随时呼出。
-
没有复杂操作情况下,展示信息量较多的内容,例如新增用户的信息处理。
-
在不丢失信息焦点的前提下,连续性的处理信息,例如批量修改信息。
-
在页面预览附加内容,例如活动详情、游戏规则等信息。
2.5 总结
抽屉是一种深入当前操作的交互模式,对于逻辑较复杂的页面,可以化繁为简,让页面看着更加简洁,配上明确的指引,可以提升用户体验。也可以利用抽屉做批量化处理,提升操作效率。
例如今年流行的抽屉式侧边栏,默认侧边栏效果只显示图标,触碰后显示对应内容。
侧边栏/导航
诸如此类的样式在Pixso资源库里还有很多,点开上图就可以看到,也可以选择直接在Pixso里编辑。Pixso是一款集合了策划、原型、设计、交互、代码、交付为一体的协作设计工具。可以轻松绘制原型、一体化解决UI/UX协作,还可以节约大量重复工作时间、满足UX设计师高保真交互需求,在需求调研协作、低代码交付等方面也十分出色,同时还兼容主流文件格式。最重要的是Pixso是一款全中文的软件,学习成本低、上手快,是搭建网站、UI设计的福音。
3. 页面跳转
3.1 定义
页面跳转是指当用户操作后,刷新当前页面,展示新页面内容。
3.2 表现形式
页面跳转的方式有直接跳转、左右跳转和上下跳转,这需要UI/UX设计师针对不同的页面内容,设计出如何用户心理预期的过渡形式。
3.3 优缺势
-
优势:不影响用户的视觉注意力,更加顺畅的衔接到下个页面,体验感保持一致。
-
劣势:跳转页面之后,无法保留之前的内容。
3.4 适用场景
-
页面内容没有关联性,相对独立的内容,例如外部链接。
-
当前页面内容过多,单个页面无法独立展示,需要跳转至其他页面继续展示,例如tab页切换。
-
偏流程性的功能页面,前后操作存在关联和影响,例如下单—支付。
-
用户具有明确目的性的操作,当前页有利于锁定用户注意力,例如APP中的我的主页。
3.5 总结
页面跳转是一种非常常见的交互模式,实现难度和维护成本都很低,应用范围很广。需要注意的是不要过度使用页面跳转,在页面逻辑流畅的情况下适当使用跳转即可。还有就是在新页面中保留返回上级页面的按钮,让用户可以浏览完新页面后可以回到之前的页面。
弹窗、抽屉、页面跳转都是很常见的交互模式,日常使用中应用的也较多,对于UI/UX设计师来说,需要做到逻辑顺畅、应用合理、体验统一,都会提升用户体验。随着流行趋势的不断进步,越来越多的交互模式也应运而生。
相关文章:

弹窗、抽屉、页面跳转区别 | web交互入门
当用户点击或触发浏览页面的某个操作,有很多web交互方式,可以大致分为弹窗、抽屉、跳转新页面三种web交互方式。虽然这三种web交互方式看起来没什么不同,但实际上弹窗、抽屉、跳转新页面对交互体验有蛮大的影响。 这需要UI\UX设计师针对不同…...

说说Flink运行模式
分析&回答 1.开发者模式 在idea中运行Flink程序的方式就是开发模式。 2.local-cluster模式 Flink中的Local-cluster(本地集群)模式,单节点运行,主要用于测试, 学习。 3.Standalone模式 独立集群模式,由Flink自身提供计算资源。 4.Yarn模式 把Fl…...

视频汇聚/视频云存储/视频监控管理平台EasyCVR新增首次登录强制修改密码
安防视频监控/视频集中存储/云存储/磁盘阵列EasyCVR平台可拓展性强、视频能力灵活、部署轻快,可支持的主流标准协议有国标GB28181、RTSP/Onvif、RTMP等,以及支持厂家私有协议与SDK接入,包括海康Ehome、海大宇等设备的SDK等。视频汇聚平台既具…...

C语言控制语句——分支语句
条件语句用来根据不同的条件来执行不同的语句,C语言中常用的条件语句包括if语句和switch语句。 if 语句 语法格式: if (条件) {条件成立时,要做的事…… }案例需求: 定义一个整数变量记录年龄判断是否满 18 岁 (>…...
音视频 fmpeg命令裁剪和合并视频
一、生成测试文件 找三个不同的视频每个视频截取10秒内容 ffmpeg -i 沙海02.mp4 -ss 00:05:00 -t 10 -codec copy 1.mp4 ffmpeg -i 复仇者联盟3.mp4 -ss 00:05:00 -t 10 -codec copy 2.mp4 ffmpeg -i 红海行动.mp4 -ss 00:05:00 -t 10 -codec copy 3.mp4如果音视频格式不统一…...

机器学习基础17-基于波士顿房价(Boston House Price)数据集训练模型的整个过程讲解
机器学习是一项经验技能,实践是掌握机器学习、提高利用机器学习 解决问题的能力的有效方法之一。那么如何通过机器学习来解决问题呢? 本节将通过一个实例来一步一步地介绍一个回归问题。 本章主要介绍以下内容: 如何端到端地完成一个回归问题…...

哈希的应用——布隆过滤器
✅<1>主页::我的代码爱吃辣 📃<2>知识讲解:数据结构——位图 ☂️<3>开发环境:Visual Studio 2022 💬<4>前言:布隆过滤器是由布隆(Burton Howard Bloom&…...

LNMT的多机部署和双机热备
目录 一、环境 二、配置tomcat 三、配置nfs共享 四、配置nginx 1、两台都需要折磨配置 2、在http下面插入这两条信息 五、配置keepalived 1、安装 2、重新启动一下keepalived查看IP 六、验证双机热备 1、查看调度器备的IP,ip漂移说明keepalived生效 2、访…...

软件测试/测试开发丨Pytest和Allure报告 学习笔记
点此获取更多相关资料 本文为霍格沃兹测试开发学社学员学习笔记分享 原文链接:https://ceshiren.com/t/topic/26755 Pytest 命名规则 类型规则文件test_开头 或者 _test 结尾类Test 开头方法/函数test_开头注意:测试类中不可以添加__init__构造函数 注…...

十七、命令模式
一、什么是命令模式 命令(Command)模式的定义:将一个请求封装为一个对象,使发出请求的责任和执行请求的责任分割开。这样两者之间通过命令对象进行沟通,这样方便将命令对象进行储存、传递、调用、增加与管理。 命令…...
服务器安装 anaconda 及 conda: command not found [解决方案]
[解决方案] conda: command not found Anaconda3 安装conda: command not found Anaconda3 安装 由于连接的服务器,无法直接在anaconda官网上下载安装文件,所以使用如下方法: wget https://repo.anaconda.com/archive/Anaconda3-2023.03-Li…...

自动驾驶和辅助驾驶系统的概念性架构(二)
摘要: 本篇为第二部分主要介绍底层计算单元、示例工作负载 前言 本文档参考自动驾驶计算联盟(Autonomous Vehicle Computing Consortium)关于自动驾驶和辅助驾驶计算系统的概念系统架构。该架构旨在与SAE L1-L5级别的自动驾驶保持一致。本文主要介绍包括功能模块图…...

【c++】VC编译出的版本,发布版本如何使用
目录 使用release类型进行发布 应用程序无法正常启动 0xc000007b 版本对应 vcruntime140d 应用版本 参考文章 使用release类型进行发布 应用程序无法正常启动 0xc000007b "应用程序无法正常启动 0xc000007b" 错误通常是一个 Windows 应用程序错误…...

自然语言处理(五):子词嵌入(fastText模型)
子词嵌入 在英语中,“helps”“helped”和“helping”等单词都是同一个词“help”的变形形式。“dog”和“dogs”之间的关系与“cat”和“cats”之间的关系相同,“boy”和“boyfriend”之间的关系与“girl”和“girlfriend”之间的关系相同。在法语和西…...

Zabbix“专家坐诊”第202期问答汇总
问题一 Q:请问一下 zabbix 里面怎么能创建出和sh文件有关联的监控项? A: 1.使用 Zabbix Agent 主动模式:如果你在目标主机上安装了 Zabbix Agent,并且想要监控与 sh 文件相关的指标,可以创建一个自定义的…...

【c语言】输出n行按如下规律排列的数
题述:输出n行按如下规律排列的数 输入: 4(应该指的是n) 输出: 思路: 利用下标的规律求解,考察数组下标的灵活应用,我们可以看出数从1开始是斜着往下放的,那么我们如何利用两层for循环求解这道题ÿ…...

023 - STM32学习笔记 - 扩展外部SDRAM(二) - 扩展外部SDRAM实验
023- STM32学习笔记 - 扩展外部SDRAM(一) - 扩展外部SDRAM实验 本节内容中要配置的引脚很多,如果你用的开发板跟我的不一样,请详细参照STM32规格书中说明对相关GPIO引脚进行配置。 先提前对本届内容的变成步骤进行总结如下&…...
机器学习 | Python实现XGBoost极限梯度提升树模型答疑
机器学习 | MATLAB实现XGBoost极限梯度提升树模型答疑 目录 机器学习 | MATLAB实现XGBoost极限梯度提升树模型答疑问题系列问题回答问题系列 关于XGBoost有几个问题想请教一下。1.XGBoost的API有哪些种调用方法?2.参数如何调? 问题回答 XGBoost的API有2种调用方法,一种是我们…...

关于使用远程工具连接mysql数据库时,提示:Public Key Retrieval is not allowed
我在使用DBeaver工具连接 数据库时,提示:Public Key Retrieval is not allowed, 我在前一天还是可以连接的,但是今天突然无法连接了, 但是最后捣鼓了一下又可以了。 具体方法:首先先把mysql服务停了&#x…...
leetcode做题笔记117. 填充每个节点的下一个右侧节点指针 II
给定一个二叉树: struct Node {int val;Node *left;Node *right;Node *next; } 填充它的每个 next 指针,让这个指针指向其下一个右侧节点。如果找不到下一个右侧节点,则将 next 指针设置为 NULL 。 初始状态下,所有 next 指针都…...

JavaSec-RCE
简介 RCE(Remote Code Execution),可以分为:命令注入(Command Injection)、代码注入(Code Injection) 代码注入 1.漏洞场景:Groovy代码注入 Groovy是一种基于JVM的动态语言,语法简洁,支持闭包、动态类型和Java互操作性,…...
云计算——弹性云计算器(ECS)
弹性云服务器:ECS 概述 云计算重构了ICT系统,云计算平台厂商推出使得厂家能够主要关注应用管理而非平台管理的云平台,包含如下主要概念。 ECS(Elastic Cloud Server):即弹性云服务器,是云计算…...

【力扣数据库知识手册笔记】索引
索引 索引的优缺点 优点1. 通过创建唯一性索引,可以保证数据库表中每一行数据的唯一性。2. 可以加快数据的检索速度(创建索引的主要原因)。3. 可以加速表和表之间的连接,实现数据的参考完整性。4. 可以在查询过程中,…...
《Playwright:微软的自动化测试工具详解》
Playwright 简介:声明内容来自网络,将内容拼接整理出来的文档 Playwright 是微软开发的自动化测试工具,支持 Chrome、Firefox、Safari 等主流浏览器,提供多语言 API(Python、JavaScript、Java、.NET)。它的特点包括&a…...

江苏艾立泰跨国资源接力:废料变黄金的绿色供应链革命
在华东塑料包装行业面临限塑令深度调整的背景下,江苏艾立泰以一场跨国资源接力的创新实践,重新定义了绿色供应链的边界。 跨国回收网络:废料变黄金的全球棋局 艾立泰在欧洲、东南亚建立再生塑料回收点,将海外废弃包装箱通过标准…...
sqlserver 根据指定字符 解析拼接字符串
DECLARE LotNo NVARCHAR(50)A,B,C DECLARE xml XML ( SELECT <x> REPLACE(LotNo, ,, </x><x>) </x> ) DECLARE ErrorCode NVARCHAR(50) -- 提取 XML 中的值 SELECT value x.value(., VARCHAR(MAX))…...
[Java恶补day16] 238.除自身以外数组的乘积
给你一个整数数组 nums,返回 数组 answer ,其中 answer[i] 等于 nums 中除 nums[i] 之外其余各元素的乘积 。 题目数据 保证 数组 nums之中任意元素的全部前缀元素和后缀的乘积都在 32 位 整数范围内。 请 不要使用除法,且在 O(n) 时间复杂度…...
浅谈不同二分算法的查找情况
二分算法原理比较简单,但是实际的算法模板却有很多,这一切都源于二分查找问题中的复杂情况和二分算法的边界处理,以下是博主对一些二分算法查找的情况分析。 需要说明的是,以下二分算法都是基于有序序列为升序有序的情况…...

全志A40i android7.1 调试信息打印串口由uart0改为uart3
一,概述 1. 目的 将调试信息打印串口由uart0改为uart3。 2. 版本信息 Uboot版本:2014.07; Kernel版本:Linux-3.10; 二,Uboot 1. sys_config.fex改动 使能uart3(TX:PH00 RX:PH01),并让boo…...

初学 pytest 记录
安装 pip install pytest用例可以是函数也可以是类中的方法 def test_func():print()class TestAdd: # def __init__(self): 在 pytest 中不可以使用__init__方法 # self.cc 12345 pytest.mark.api def test_str(self):res add(1, 2)assert res 12def test_int(self):r…...