弹窗、抽屉、页面跳转区别 | 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设计师来说,需要做到逻辑顺畅、应用合理、体验统一,都会提升用户体验。随着流行趋势的不断进步,越来越多的交互模式也应运而生。

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

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

相关文章

Liquid Studio 2023.2 Crack

Liquid Studio 提供了用于XML和JSON开发 的高级工具包以及Web 服务测试、数据映射和数据转换工具。 开发环境包含一整套用于设计 XML 和 JSON 数据结构和模式的工具。这些工具提供编辑、验证和高级转换功能。对于新手或专家来说,直观的界面和全面的功能将帮助您节省…

Nginx全家桶配置详解

源码包安装NGINX A,搭建Web Server,任意HTML页面,其8080端口提供Web访问服务,截图成功访问http(s)://[Server1]:8080并且回显Web页面。保留Server1,但是不允许直接访问Server 1,再部署1套NGINX …

安卓10创建文件夹失败

最近在做拍照录像功能,已经有了文件读写权限,却发现在9.0手机上正常使用,但是在安卓12系统上根本没有创建文件夹。经过研究发现,创建名称为“DCIM”的文件夹可以,别的又都不行。而且是getExternalStorageDirectory和ge…

学习笔记|计数器|Keil软件中 0xFD问题|I/O口配置|STC32G单片机视频开发教程(冲哥)|第十二集:计数器的作用和意义

文章目录 1.计数器的用途2.计数器的配置官方例程开始Tips:编译时提示错误FILE DOES NOT EXIST: 3.计数器的应用本例完整代码:总结课后练习: 1.计数器的用途 直流有刷的电机,后面两个一正一负的电接上,电机就可以转 到底是转子个…

基于生成对抗网络(GAN)实现时尚图像生成功能--详细教程

介绍 本文将探讨生成对抗网络(GAN)及其时尚图像生成的卓越能力。GAN 彻底改变了生成建模领域,提供了一种通过对抗性学习创建新内容的创新方法。 在本指南中,我们将带您踏上一段迷人的旅程,从 GAN 的基本概念开始,逐步深入研究时尚图像生成的复杂性。通过实践项目和分步…

Mysql高级(进阶)SQL语句

目录 常用查询 按关键字排序 区间判断及查询不重复记录 对结果进行分组 限制结果条目 设置别名(alias —— as) 通配符 子查询 MySQL视图 NULL 值 连接查询 常用查询 (增、删、改、查) 对 MySQL 数据库的查询&#xf…

第16节——ref

一、概念 1、出现的原因 在react典型的数据流中,props传递是父子组件交互的唯一方式;通过传递一个新的props值来使子组件重新re-render,从而达到父子组件通信。当然,就像react官网所描述的一样,在react典型的数据流之外&#xf…

UNIX网络编程卷一 学习笔记 第三十一章 流

在大多数源自SVR 4的内核中,X/Open传输接口(X/Open Transport Interface,XTI,是独立于套接字API的另一个网络编程API)和网络协议通常就像终端IO系统那样也使用流系统(STREAMS system)实现。 我…

Nginx__基础入门篇

目录: Nginx的优势 HTTP协议详解 Nginx部署-Yum Nginx配置文件 Nginx编译参数 Nginx基本配置 Nginx日志Log Nginx WEB模块 Nginx 访问限制 Nginx 访问控制 Nginx的优势 Nginx (engine x) 是一个高性能的HTTP(解决C10k的问题)和反向代理服务器,也是一个IM…

剑指 Offer 17. 打印从1到最大的n位数

剑指 Offer 17. 打印从1到最大的n位数 dfs函数只输出n位数的情况&#xff0c;相比于让一个函数输出1到最大的n位数可以大大简化。 小技巧&#xff1a;控制循环开始的起点。 class Solution {List<Integer> res new ArrayList<>();public int[] printNumbers(in…

leetcode 205. 同构字符串

2023.9.6 本题维护两个映射表map&#xff0c;若发现无法对应则返回false。 代码如下&#xff1a; class Solution { public:bool isIsomorphic(string s, string t) {unordered_map<char,char> m1;unordered_map<char,char> m2;for(int i0; i<s.size(); i){//相…

ctfshow vip题目限免

源码泄露 右键查看源代码即可得到flag 前台JS绕过 解法一 URL前面加上view-source: 解法二 题目描述说禁用js&#xff0c;那就禁用就行 然后和前面一样右键查看就行 协议头信息泄露 提示抓包&#xff0c;那就抓包吧 抓包直接就在返回包获得flag了 robots后台泄露 robot…

java获取jenkins发布版本信息

一.需求&#xff1a; 系统cicd发布时首页需要展示jenkins发布的版本和优化内容 二.思路: 1.jenkins创建用户和秘钥 2.找到对应构建任务信息的api 3.RestTemplate发起http请求 三.实现&#xff1a; 1.创建用户和token 2.查找jenkins API 创建 Job POST http://localhost…

5G试题_1

1、 全息技术属于对5G三大类应用场景网络需求中的哪一种&#xff1f;&#xff08;A&#xff09; A. 增强移动宽带 B. 海量大连接 C. 低时延高可靠 D. 低时延大带宽 2、 在5G时代&#xff0c;不同领域的不同设备大量接入网络&#xff0c;其实引用传统的组网方式和服务提供形式也…

Linux查端口占用的几种方式

在Linux中&#xff0c;你可以使用以下几种方式来查看端口的占用情况。 一、使用netstat命令 #安装netstat yum -y install net-tools #检测端口占用 netstat -npl | grep 端口# 几种常规用法 netstat -ntlp //查看当前所有tcp端口 netstat -ntulp | grep 80 //查看所有80端…

layui引入百度地图

<script type"text/javascript" src"//api.map.baidu.com/api?typewebgl&v1.0&ak你的ak"></script> <script src"https://code.bdstatic.com/npm/jquery1.12.4/dist/jquery.min.js"></script> <script src&…

看涨期权计算例题(期权案例计算)

看涨期权又称认购期权&#xff0c;买进期权&#xff0c;买方期权&#xff0c;买权&#xff0c;延买期权&#xff0c;或“敲进”&#xff0c;是指期权的购买者拥有在期权合约有效期内按执行价格买进一定数量标的物的权利&#xff0c;下文为大家科普看涨期权计算例题&#xff08;…

RabbitMQ的RPM包安装和Python读写操作

下载地址 ## erlang 下载地址 https://packagecloud.io/rabbitmq/erlang?page6## rabbitmq 下载地址 https://packagecloud.io/rabbitmq/rabbitmq-server/packages/el/7/rabbitmq-server-3.8.29-1.el7.noarch.rpm?distro_version_id140 Rabbitmq的RPM包安装 ## 下载 wget -…

LLVM 与代码混淆技术

项目源码 什么是 LLVM LLVM 计划启动于2000年&#xff0c;开始由美国 UIUC 大学的 Chris Lattner 博士主持开展&#xff0c;后来 Apple 也加入其中。最初的目的是开发一套提供中间代码和编译基础设施的虚拟系统。 LLVM 命名最早源自于底层虚拟机&#xff08;Low Level Virtu…

ComfyUI 安装

背景&#xff1a; stable diffussion XL最先适配&#xff0c;专业性强的SD操作界面 安装步骤&#xff1a; git clone GitHub - comfyanonymous/ComfyUI: A powerful and modular stable diffusion GUI with a graph/nodes interface. 1、pip install torch torchvision torc…