您现在的位置: 首页 > 网站导航收录 > 百科知识百科知识
浏览器每次都新开一个网页(B端设计指南-弹窗)
用户,操作,模态浏览器每次都新开一个网页(B端设计指南-弹窗)
发布时间：2019-02-08加入收藏来源：互联网点击：
b.内嵌表单弹窗
内嵌表单弹窗作为弹窗最为重要的组成部分，在B端产品的日常使用中几乎存在的方方面面
因其里面经常会添加各种选项操作，例如：“ckeckbox、radio、下拉菜单等等“，通过弹窗去完成形式各样的操作内嵌表单的好处是能够通过小面积的弹窗完成对数据的编辑修改，方便快捷进行增删改的处理。
c.分步弹窗
分步弹窗是分步表单的衍生品，因为在实际项目中，发现大型的分步表单难以满足现阶段对于小型内容展示的需求，因此分步弹窗便诞生。
分步弹窗的主要特点是页脚上会有下一步、上一步两个选项供用户进行选择，同时用户点击下一步后，就会在左上角提示用户可以进行返回。
分步弹窗能实现具有先后条件且内容较少的需求，在工作中主要是新手引导或者有前后关系录入的弹窗会用到。例如：“简道云的新手引导、步骤注册”都可以采取分步弹窗的形式。
d.附件选择弹窗
附件上传弹窗是用户文件上传的重要途径，在Human Interface Guidelines中，明确指出分为Window Anatomy、Column Views，而在B端产品中，现都采取拖动文件上传，相对而言更简便。
d.附件选择弹窗
附件上传弹窗是用户文件上传的重要途径，在Human Interface Guidelines中，明确指出分为Window Anatomy、Column Views，而在B端产品中，现都采取拖动文件上传，相对而言更简便。
a.通知提示（Notification）
通常在页面右上角，显示通知提醒信息，给用户进行重度的打扰。经常用于产品系统主动推送以及消息提醒。例如：在我们自家产品中，通知提醒框用户对用户审批信息进行展示，同时可让用户进行跳转查看，方便用户进行快速使用。
b.全局提示（Message）
全局提示是希望不中断用户正常操作的前提下，显示一条简短的消息。这条消息通常都是轻量的一般在短时间就会自动消失，并不会干扰到用户。全局提示一般在整个页面居中的位置，会展示3-5秒钟或者用户进行点击后就会消失。例如：在我们产品的详情页当中会有列表快捷编辑功能，当用户每进行一次编辑操作，都会给用户进行全局提示，操作成功。
c.警告提示 (Alert)
提醒用户需要立即处理的错误，提示方式与全局提示类似，但是与全局提示不同的是，警告提示为常驻展示，需要用户进行手动关闭，但并不会打断用户操作。同时在设计形式上，也需要与全局提示有所区别，建议采取背景颜色进行对比。
d.气泡卡片（Popover/Popup）
气泡卡片是对当前元素进行相关操作或相应描述，可以收纳到卡片中，根据用户的操作行为进行展示。通常可以通过点击、鼠标Hover进行触发，气泡卡片与Tooltip 的区别是，用户可以对浮层上的元素进行操作，因此它可以承载更复杂的内容，比如链接或按钮等。
e.文字提示（Tooltip）
Tooltip是简洁版的气泡卡片，一般提示文字为主。最开始在浏览器默认的形式中，就有Tooltip的身影，而随后随着对设计的不断要求，逐渐演化，便形成了气泡卡片的形式。
重要提示优先级按量级从重到轻排序：通知提醒框 > 警告提示 > 全局提示 > 气泡卡片 > 文字提示
因为在弹窗中，有一些虽然不是弹窗的形式，但是做的是弹窗的活，例如：“抽屉、新建页”在讲到弹窗就必须要将抽屉和新建页一起讨论，相信肯定会有很多质疑的声音将他们放在特殊弹窗里。但是我身边有很多人问过我关于弹窗、抽屉、新建页的相关问题，因此在文章内将抽屉归纳为一个特殊的弹窗形式。
a.抽屉
抽屉适合与主页面有着强连贯性的页面进行展示。它与弹窗都有着相类似甚至相同的API，只是在展示形式上存在较大差异。抽屉演化出来的形式有很多，比如：iOS的Human Interface Guidelines 中的Sheets [3]，MaterialDesign 中的BackDrop [4]，抽屉涉及的范围广，因此用户对于此类交互的理解以及操作成本都相应减小。
[3]sheets：视图弹窗，在iOS 13新增了一种操作视图，操作的视图會被縮小，同時淡化置于新跳出视图的下方，新版的视图有助于用户明确信息的层级，便于用户找回此前被暂停的任务。
[4]BackDrop：一个Backdrop出现在应用程序中的所有其他界面底部, 显示相关信息内容和可操作的内容。
b.新建页
新建页基本就是万精油，无论页面内容量是多少、页面间是否连贯、以及使用频率怎样，都可以采取新建页，但是新建页往往也不是最优的解决办法。在新建页中又分为：覆盖当前窗口以及新窗口跳转两种形式，在场景上可以根据两者差异进行选择，究其本质，就是a标签href属性与target属性上的差异。
页面内容量决定呈现形式
不知道大家阅读了这么久，有没有发现一个问题，在这篇文章中，我不断强调内容量。因为无论是弹窗、抽屉、新建页，究其本身就是一个内容载体，因此选择如何使用，很大程度上取决你的内容量的多少。
内容量：通常包含了你页面当中文字、图片、视频、表格、以及各种复杂的交互。如果你觉得页面已经密密麻麻，在弹窗中根本无法呈现，这时候你就需要考虑弹窗是否合适～而弹窗、抽屉、新建页，如何抉择，它们承载内容的量也存在一个大小关系
新建页 > 抽屉 > 弹窗
但是不能从一个纬度去思考页面内容量的多少，内容的宽度以及深度都是需要去分析，通常：内容的深度较深最好采取抽屉、内容宽度较宽则弹窗形式更为合理、而新建页合适宽度与深度同时较大的产品中。
也就是弹窗只能承载较小内容、抽屉其次、新建页最优，但是在实际工作中往往并没有这么简单，在本节最后，举了几个实例进行简单分析～
页面连贯性直接决定用户的使用体验
当浏览器新开一个标签进行展示时，页面的连贯性是最弱的，因为用户需要进行困难的操作返回到之前页面，并让用户感到十分懵逼，同时你也可以理解新开页面是较为独立的，不会受到前页面的干扰，而要决定页面连贯性的核心，还是以自身业务出发
从三个不同交互形式上看，页面连贯性明显抽屉小于弹窗小于新建页
例如：使用纷享逍客在客户列表页与详情页之间连贯性就很强，因为用户需要详情与列表之间来回看进行对比，也因此纷享逍客将抽屉模态层都给去除，更方便自身业务。
页面切换成本决定用户使用效率
当一个二级页面使用频率过高时，就证明用户需要在A与B页面之间进行来回切换，这时候考虑页面反复出现是否流畅，是否有切换成本的产生，而B端产品效率至上的原则，便需要思考用户怎样切换成本更低。
页面切换成本越来越受到重视，从最近iOS13更新的几点以及微信、知乎app更新上可以发现在IOS12到IOS13中，一个较大更新便是新版视图弹窗在以前的视图弹窗中，用户经常忘了此前他们进行的操作任务，而iOS13能够让用户更加明确，减少了页面间的切换成本。
上一篇：好玩的苹果手机游戏推荐(还在玩绝地求生？来试试苹果商店排行前3的游戏)
下一篇：返回列表
相关链接 |
||
| 网友回复（共有 0 条回复） |