在做Web端项目的过程中,涉及到交互采用弹框还是新页面的时候,比较纠结,到底用哪一种更好;考虑到用户体验的话,就需要斟酌一番了,下文我针对自己的理解谈一下各自的使用场景。 弹出框 使得用户可停留在当前页面,页面内容不会被刷新,响应速度更快,用户体验较好,但是承载量有限,信息过多则需要新页面来展现。弹出框大概分为内容弹框、提示弹框、广告弹框等,我根据自己的理解分别说一下。 内容弹框1:网易邮箱 点击【举报】,显示如下弹窗,依然停留在当前页面,举报垃圾邮件的功能突出显示,多了一层遮罩。弹框内只有加入黑名单、移到垃圾邮件两个小的功能点; 使用场景:通常一些分支流程上的操作,内容不多,都可以使用弹框来处理; 实例参考:比如客户管理,标注客户级别,设置客户状态是否禁用,设置客户角色,设置客户标签等都可以使用弹框。 内容弹框2:组织架构管理 点击【添加部门】,显示如下弹框,输入部门名称即可添加部门; 使用场景:针对后台常用列表的新增、修改都是常用的操作,此类操作均可使用弹框,除非列表项目特别多,才考虑使用新页面; 实例参考:比如部门管理,新增部门,修改部门、添加部门人员,设置部门负责人等,都是针对部门列表的一系列操作。 提示弹框1 操作完成以后的提示,一般来说就是一句话描述,用来告知用户操作结果; 使用场景:针对后台常用列表的新增、修改、删除等,操作完毕,均可提示新增成功、保存成功、删除成功等; 实例参考:比如角色管理,新增角色、修改角色、删除角色,操作完毕以后,都要给用户一定的反馈,告知用户操作结果,此时就需要用到弹框,这时候弹框的作用主要是提示。 提示弹框2 Toast提示,相比于提示弹框1 更轻量级,大概3-5秒自动消失; 使用场景:一句话提示,并且不影响用户的重要流程判断,举个例子,如果是支付页面,提示用户支付成功,则需要采用提示弹框1的形式,用户关注的结果比较重要; 实例参考:比如邮件的移动到其他分组;或者说需要选择列表项才可以进行操作,用户没有选择;提交表单时发现某些输入项不符合要求等,都可以使用Toast提示。 广告弹框1:桌面弹框,居中或者右下角显示 使用场景:可用于推送消息、热点新闻、系统升级、不同终端连接通知等。 实例参考:比如QQ桌面右下角推送热点新闻,打开QQ时候默认弹出腾讯网迷你版,QQ升级版本的时候电脑屏幕中间弹出升级公告弹框;360手机助手连接到电脑端时候自动弹出弹框,提示用户进行下一步操作; 广告弹框2:活动广告 使用场景:一般用于电商类产品,活动期间采用弹框吸引用户眼球; 实例参考:比如京东、淘宝,周年庆或者年货节的时候,打开网站首页则会显示最新的优惠活动信息,以弹框形式展示 新页面:承载量很大,内容独立 使用新页面,也要注意是当前页刷新,还是新窗口打开页面。当前页刷新,就要善用浏览器自带返回按钮;新窗口打开页面适用于外链、或者不打断当前业务流程的情况。 新页面1:网易邮箱 点击【写信】, 显示如下页面,写邮件这个本身涵盖内容较多,而且与其他页面关联性不大,页面打开方式为当前页刷新,都是邮件相关操作,返回的话使用浏览器自带的返回按钮即可; 使用场景:独立的页面,独立的流程,采用新页面来展示 实例参考:比如课程教育,小学、初中、高中课程,每个都是相对独立的模块,就需要启用新页面展示数据;还有很多功能,下属子功能都是并列的关系,此时也需要新页面来展示。 新页面2:网易邮箱 查看邮箱详情, 显示如下页面,邮件详情与列表之前是有关联的,存在层级关系,但是邮件详情相对于每一封邮件都可当做独立的一块内容;页面打开方式同样为当前页刷新 使用场景:跟上个页面有层级关系,但是又相对独立,可采用新页面 实例参考:比如客户管理,我们要查看客户详情,那就点击客户名称的时候,跳转到客户详情。 新页面3:人人都是产品经理 点击【问答】,新窗口打开天天问页面 使用场景:与当前页关联性不是很大,类似外链的页面,都采用新窗口打开 实例参考:比如我们需要在系统中承接一个外链,链接到百度搜索,或者说新页面与当前页关联不大,为了不影响当前页的流程,也会采用新窗口打开页面的方法。 有句话说,小孩子的世界才分对错,大人的世界只分利弊,这些都是自己的亲身感受,不一定哪种方式就对或者错,只能说更好或者不是太好。 对于一款产品来说,核心功能才最重要,这些外在展现形式只是锦上添花,不可否认用户体验也很重要,好看的界面和好用的交互都是提升用户体验的好方法。做好产品就是需要涉足面广,对于自己熟悉的领域认知度深,希望跟大家一起探索好产品的未来。