弹出并点击弹框关闭 自定义toast_关于别名配置使用弹框交互应用的思考

温馨提示

如果你喜欢本文,请帮助我将这篇文章分享到朋友圈,喜欢我的文章,可以关注我,我们一起交流。

本文:2052字 | 估计阅读:6分钟

我在思考功能实现需求的时候,会斟酌和判断使用什么样的功能和交互样式供用户使用,功能路径既可以完成需求闭环,又满足用户习惯,设计的功能和交互方便用户操作使用。

前阵子我接到这样一个需求:就是需要提供一个给标准名配置别名的入口。

比如我的姓名是赵大奕,我的别名是叮叮、禾暮、三三等等,当前的逻辑是业务系统中会将我的姓名和别名统统展示给业务方,但是我的别名如果有100个的时候,业务方需要选择就不会那么方便了。他们希望现在只在他们的业务系统中看到我的姓名和我叫“叮叮”的别名,但是以后可能会希望在他们的业务系统中看到我的姓名和我叫“叮叮”、“禾暮”的别名。

别名的配置需求,我们可以将配置的入口做在列表页的操作功能中,一点开就是一个弹框,用弹框支持别名的配置。也可以做成用户触发后新开一个网页,用户在详情页中对别名进行重新配置保存。

在我们判断是否可以使用弹框作为交互方式时,需要我们对弹框有一定理解,清楚明白在什么时候使用弹框。最后根据需求判断是否选用弹框作为交互功能。下面我们就来认识认识弹框。

弹框的定义

弹框是一个因点击而触发产生的信息承载框,是人机通过信息交互的常见方式,它在原有页面的最上层出现,不会使页面发生跳转,主要为了聚焦用户的注意力,让用户关注框中所承载的信息内容。适合展示较为简单的内容,多用于消息提示、确认消息或提交用户填写和修改的简单内容。

通过弹框的定义,我们对于网页中再熟悉不过的弹框有了更深一点的了解,那我们就一起思考下定义中所说的弹框适合出没的场景吧。

弹框的使用场景

1.当修改简单的信息内容时,可以使用弹框。

有人会说,那我修改一个信息内容时新开一个网页去修改也可以满足修改的需求呀。弹框和网页有啥区别呢?

弹框和网页最大的区别是:弹框和新网页内容显示区域显示的大小不同:弹框显示区域较小,新网页显示区域为整个页面。

在操作体验上弹框相对新网页会更便捷,当弹框被触发后,弹框的出现不会让页面发生跳转,是在页面最上层展示一个信息承载框。

信息承载框的内容和原有的页面中的信息有层级关系,能让用户直接聚焦需要修改的部分是哪里。

在一个新的页面在修改简单的内容时,弹框比网页更快。但弹框相对应的是显示区域较小,弹框的承载空间内容较少,弹框的承载能力有限,修改的信息数量和承载的内容量是也是受限的。

那么文中开头我接到的配置别名需求,最后可以判断出来最后使用了弹框的交互。下图为这个需求的弹框样式:

714dc82e7623fd649aa7f60b9023f611.png

别名的配置的流程为:当点击配置别名时,弹出的弹框展示当前展示的别名,如果用户不再需要某一个别名展示出来,就点击已选中的别名进行取消勾选的操作,再勾选本次需要展示的别名,点击保存,就完成了别名的重新配置的流程了。

有的名字,它的别名有十几条,也有的名字别名有几十条,这时我们会使用弹框展示,因为弹框装的下这些别名。试想,如果一个名字,它有几万条别名,这时我们会不会使用用弹框?

答案是:不会。

原因是别名数量太多,内容量大,弹框承载不下。这时我们会使用新开网页承载这些内容,因为新网页承载的空间是最大的。

使用弹框也方便用户二次确认弹框背后主页面的信息内容,不因为来回切换页面而造成时间上的浪费。

2.用户录入并提交简单的信息内容,可以使用弹框进行交互:

信息简单开一个新页面的时间会比直接弹出弹框让用户录入信息的时间长,使用弹框进行交互是因为它更加便捷。

打颗栗子:

产品中有一个环节的流程是为用户指定的邮箱传一份资料。在产品中当用户触发了这个服务功能,就会出现一个入口引导用户填写接收资料的邮箱地址。这个流程中使用弹框交互,触发了这个服务功能,页面就会弹出让用户输入信息的弹框,如下图所示:

3f5fd5cfb7c0bbc0bc5764342d9e093b.png

相比页面的跳转和等待,弹框更加轻便简单,用户填写完,点击确定后业务流程就完成了。

3.消息提示时可以使用弹框:

消息提示:

消息提示是给予用户的强提示,当用户在操作重要的内容或有风险的内容时会使用弹框给予用户提示,引起用户注意,让用户进行判断。

76eef2e4ed6354b58185f60c2fe276dd.png

弹框的出现会中断用户继续操作的行为,让用户注意力聚焦到弹框中的文字内容。所以在希望用户引起注意的节点时,会使用弹框来达到提醒的目标。

比如我们在付款前、录入信息未保存点击退出按钮时,都会出现一个消息提示弹框。

它们的出现都是为了提醒我们如果继续操作行为会有什么样的结果。弹框设置按钮的原因是因为,我们点击按钮也是要花费时间的,点击按钮的过程,也是为了给我们留出一定的缓冲考虑的时间。

98f73bec662c509ae24cfaca97ba8b84.png

现在我们也可以很容易的总结出弹框的优缺点,优点是相比于网页,弹框具有便捷性,用户体验会更好。弹框的缺点是相比于网页,弹框显示区域具有局限性,承载数据量有限。

总结

是否使用弹框作为交互,是产品经理根据业务需求,结合当下场景思考判断的,设计后产品经理可以做一个原型交互,把自己当成用户小白,重新打开原型图,自己给自己提需求,走完一遍交互流程,来验证弹框是否适用,是否满足需求和场景。

· END ·

e76582db4246bd272c5061c40473cbae.pngbc350b7deac9334e18b715a5f84ef70d.png

扫码加好友 · 一起交流

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

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

相关文章

POJ 1189 钉子和小球

题目链接&#xff1a;http://poj.org/problem?id1189 dp 可以知道一共有2^n条路径&#xff0c;则设顶点有2^n个球&#xff0c;若当前为*则向左右的球各有一半&#xff1b;若为.&#xff0c;则球全部掉入正下方。 1 #include<iostream>2 #include<cstring>3 #inclu…

MySQL学习笔记(总结)

一、MySQL课程内容 对应视频教程&#xff1a;千锋教育JavaWeb基础入门到实战教程&#xff0c;javaSE基础进阶java web快速入门教程完整版_哔哩哔哩_bilibili 1.1 数据库介绍 数据库概念术语介绍 1.2 MySQL数据库 下载、安装、配置、卸载MySQL客户端工具的安装及使用 1.3 …

按群计数10以内_【乐玩乐学】有趣的计数活动

_有趣的计数活动写给爸爸妈妈的话&#xff1a;时间、日期、体重、地址世界上到处都是各种各样的数字。有了数字我们的交流才变得更加通畅。但是在这些方便的数字出现之前&#xff0c;生活在很久很久以前的人们是怎么数数、怎么表示数量的呢&#xff1f;他们用的就是手、脚等身体…

移动端弹出层加遮罩后禁止滑动

//实现滚动条无法滚动 var mofunction(e){e.preventDefault();};/***禁止滑动***/ function stop(){document.body.style.overflowhidden; document.addEventListener("touchmove",mo,false);//禁止页面滑动 }/***取消滑动限制***/ function move(){document.…

数据结构学习笔记总结(部分内容后续会更新)

第一章 绪论 1.1 数据结构的研究内容 1.2 基本概念和术语 1.2.1 数据、数据元素、数据项和数据对象 1.数据 数据&#xff1a;是能够输入计算机且能被计算机处理的各种符号的集合 信息的载体是对客观事物符号化的表示能够被计算机识别、存储和加工 包括&#xff1a; 数值型的…

php链式调用(链式操作)

2017年6月28日 10:41:19 星期三 情景: 在多次处理数组的时候, 要自定义好多个临时变量, 起名字特别麻烦 于是, 就想到利用PHP的 1.魔法方法__call 2.不定参数, 参数自动解包的特性 写了一个简单的链式操作类: 调用举例: 1 $arr [2 [id > 1, name >111],3 [id &g…

git 怎么拉去分支代码_Git使用技巧1——代码写错分支了怎么办?

工欲善其事&#xff0c;必先利其器。前言Git的本质git是一个版本控制工具&#xff0c;一切以版本控制为中心&#xff0c;版本即每一次commit&#xff0c;其实分支是指向commit的&#xff0c;HEAD也是指向某一次提交的&#xff0c;HEAD其实指向的就是当前分支的最近一次commit&a…

一、MySQL基础

MySQL基础 今日目标&#xff1a; 完成MySQL的安装及登陆基本操作能通过SQL对数据库进行CRUD能通过SQL对表进行CRUD能通过SQL对数据进行CRUD 1&#xff0c;数据库相关概念 以前我们做系统&#xff0c;数据持久化的存储采用的是文件存储。存储到文件中可以达到系统关闭数据不会…

struts2值栈,OGNL表达式,interceptor

struts2获取servlet api 第一种获取方式   获得原生request   HttpServletRequest request ServletActionContext.getRequest();   获得原生response   HttpServletResponse response ServletActionContext.getResponse();第二种获取方式   实现ServletRequestAwar…

如何给ppt编辑页码_拒绝千篇一律:Word插入“侧边”页码,让文档别具一格!...

微信扫码观看全套Excel、Word、PPT视频之前&#xff0c;有为大家介绍过插入页码的技法&#xff0c;你还记吗&#xff1f;(点击此处&#xff0c;阅读文章)我们已知道Word插入页码的方法&#xff0c;而且我们也很会用了。但是&#xff0c;如果要插入下图所示的侧边页码&#xff0…

二、MySQL高级

mysql高级 今日目标 掌握约束的使用 掌握表关系及建表原则 重点掌握多表查询操作 掌握事务操作 1&#xff0c;约束 上面表中可以看到表中数据存在一些问题&#xff1a; id 列一般是用标示数据的唯一性的&#xff0c;而上述表中的id为1的有三条数据&#xff0c;并且 马花疼…

设计模式之 里氏替换原则

里氏替换原则(Liskov Substitution Principle, LSP)&#xff1a;所有引用父类的地方必须能使用其子类的对象。 简单来说就是 子类拥有父类所拥有的一切&#xff0c;并可以在此基础上进而扩展其他的属性和方法。转载于:https://www.cnblogs.com/blazeZzz/p/9260874.html

sql数据库去重语法_Mysql数据库中查询重复数据和去重数据 , 删除重复数据的sql及分析...

Mysql数据库中查询重复数据和去重数据 , 删除重复数据的sql及分析发布时间&#xff1a;2018-06-17 13:22,浏览次数&#xff1a;858, 标签&#xff1a;Mysqlsql数据库中有重复数据时,用到哪些sql语句?这里有若干数据,并掺杂了重复数据1. 查看过滤重复后的数据思路, group by 分…

Maven基础(总结)——入门学习

Maven基础 一、Maven概述 1.Maven是专门用于管理和构建Java项目的工具&#xff0c;它的主要功能有&#xff1a; 提供了一套标准化的项目结构提供了一套标准化的构建流程&#xff08;编译&#xff0c;测试&#xff0c;打包&#xff0c;发布……&#xff09;提供了一套依赖管理…

c#重写了窗体的OnKeyDown事件,但是不执行

设置下窗体的KeyPreview属性值为True即可 总结&#xff1a;遇到类似这样的问题&#xff0c;比如其他窗体运行没问题&#xff0c;就新建的窗体有问题。应该检查下窗体的属性。 转载于:https://www.cnblogs.com/codeDevotee/p/7093333.html

python答疑的作用_不学Python之集中答疑(5)

Python不用学&#xff0c;用用你就会。本辑答疑针对Python自然学习法二阶第二单元课程&#xff1a;Q&#xff1a;什么是字典&#xff1f;A&#xff1a;字典也是Python里面的一种多元素数据的存放方式。对于多个元素需要存放在一个变量名下的数据&#xff0c;Python里面常见的有…

MyBatis学习笔记(超详细总结)

MyBatis学习笔记 一、MyBatis概述 1.什么是MyBatis? MyBatis 是一款优秀的持久层框架&#xff0c;用于简化 JDBC 开发 MyBatis 本是 Apache 的一个开源项目iBatis, 2010年这个项目由apache software foundation 迁移到了google code&#xff0c;并且改名为yBatis 。2013年11…

Docker 搭建java+tomcat

1.  准备java和tomcat的软件包 jdk-7u79-linux-x64.tar.gz apache-tomcat-7.0.57.tar.gz 2.  编辑Dockerfile 文件 vim Dockerfile 1 FROM centos  #基本镜像 2 ADD ./jdk-7u79-linux-x64.tar.gz /root  #将jdk拷贝到镜像的 /root 下 3 ADD ./apache-tomcat-7.0.57.ta…

python发邮件主机找不到_Python 使用QQ邮箱发邮件

QQ邮箱太恶心了。经常改验证方式阿福最近的脚本不能用了&#xff0c;研究了一上午。终于研究出来了。def sendmail(data):content data[content]msg MIMEText(content,_subtypeplain,_charsetutf8)msg[Subject] data[Subject]msg[From] data[From]msg[To] ;.join(data[mail…

创建并发布npm包

1.npm官网创建npm账户 npm网站地址&#xff1a;https://www.npmjs.com/ npm网站注册地址&#xff1a;https://www.npmjs.com/signup 2.命令行工具登录npm npm login 验证登录是否成功 npm who am i 3.创建npm库 npm init 按照提示输入相应内容&#xff1a; 以下为package.json内…