网页弹窗怎么设计 第1篇
但在很多实际B端业务中，通过上面的方法也不可避免会遇到多模态层的情况。这时你需要冷静面对而不是慌张，这里给大家讲解当你遇到需要多层模态展示时，需要注意的点：
模态位置错层，让用户知道现在处在第几层。
在多模态叠加的过程中，用户很容易不清楚自己所在时那一层当中，导致视觉层级混乱。
这通常的处理办法就是将多个模态层叠加的状态进行错层，这样能够让用户知道自己所在的层级，帮助用户了解逻辑关系
2.关闭入口（Close）
关闭入口作为用户退出的重要途径，主要是为了方便用户进行快速的退出。而在关闭入口的设计中，需要注意以下几点：
网页弹窗怎么设计 第2篇
在弹窗中，还有因为业务的不同，在弹窗中增加相应的选项操作，选项操作通常是一些常规控件，不宜进行特殊处理，例如：“输入框、单选框、复选框等…”
弹窗会根据主体的不同，分为不同的弹窗类型，通过上面素材进行组合，形成下面不同类型的弹窗，下面为大家讲讲弹窗的类型：
三、弹窗的类型
第一节讲到，在弹窗的类型中，主要分为两类：模态弹窗和非模态弹窗：
1. 模态弹窗
在实际项目中，我们把模态弹窗进行拆分，分为五小类：“对话弹窗、内嵌表单弹窗、分步弹窗、文件选择、复杂信息展示。”
网页弹窗怎么设计 第3篇
弹窗宽度会根据内容量，进行宽度的调整，我总结目前常见的弹窗尺寸共有四种，分别为：small、medium、large、x-large，四种弹窗的使用场景也会不同：
其实这是一个很久远的话题，因为在我刚开始学设计时踩过弹窗同时出现两个滚动出现的坑，导致现在都还记忆犹新，大家的弹窗出现模态层时，一定要将背景滚动条进行锁定，不然两个滚动条的出现，会导致十分混乱。
弹窗在B端场景中，起到了很关键的作用，大家可以透过弹窗的思考方式去思考关于整个B端控件层面的信息展现问题。写作真的很不容易，觉得不错点个赞、按一个好看，不需要大家的赞赏，你的关注，就是对我的最大鼓励。
对了，最后说一句，大家一直都在问我有没有交流群，今天创建了一个，大家可以扫描文章底部的二维码，备注加群，便可将你拉进群内～
我是CE青年，一个2 B行业的2B设计师～
参考链接：
B端设计：导航菜单的设计5步法
B端设计指南：“按钮”究竟应该如何设计？
网页弹窗怎么设计 第4篇
在关闭入口设计中，常常会遇到这种情况，用户在弹窗中进行录入的场景下，误操作点到模态层后，用户辛苦录入的大段文字丢失。
这类情况的出现，常常表示用户在弹窗的全流程场景中没有进行深入的思考。我总结了市面上对于录入弹窗这种特殊的处理方式，共有以下几点：
3. 弹窗主体（Mian）
在弹窗的主体中，会因为弹窗的类型不同会有所加减，但无外乎就是我总结的一下五类：
网页弹窗怎么设计 第5篇
如上图所示，从左到右分别属于宫格模式动作面板，列表模式动态面板，宫格模式常见于图表形式表现，宫格模式的弹窗最常见的场景使用就是分享模块，它的作用就是为了减少用户不必要的记忆负担。
弹窗高度较低，可以展现出更多的内容以及功能，方便协助用户的记忆以及使用。选项较多时，可以分组，一行为一组，可在屏幕右边缘露出图表，暗示可以横向滑动查看更多选项。
而列表式常见于用文字的形式去表现选项。选项较少可使用，底部设置取消按钮。
网页弹窗怎么设计 第6篇
Tooltip是简洁版的气泡卡片，一般提示文字为主。最开始在浏览器默认的形式中，就有Tooltip的身影，而随后随着对设计的不断要求，逐渐演化，便形成了气泡卡片的形式。
重要提示优先级，按量级从重到轻排序：通知提醒框 > 警告提示 > 全局提示> 气泡卡片>文字提示。
3. 特殊类型弹窗
因为在弹窗中，有一些虽然不是弹窗的形式，但是做的是弹窗的活，例如：“抽屉、新建页”
在讲到弹窗就必须要将抽屉和新建页一起讨论，相信肯定会有很多质疑的声音将他们放在特殊弹窗里。但是我身边有很多人问过我关于弹窗、抽屉、新建页的相关问题，因此在文章内将抽屉归纳为一个特殊的弹窗形式。
网页弹窗怎么设计 第7篇
抽屉适合与主页面有着强连贯性的页面进行展示。它与弹窗都有着相类似甚至相同的API，只是在展示形式上存在较大差异。
抽屉演化出来的形式有很多，比如：iOS的Human Interface Guidelines 中的Sheets [3]，MaterialDesign 中的BackDrop [4]，抽屉涉及的范围广，因此用户对于此类交互的理解以及操作成本都相应减小。
[3]sheets：视图弹窗，在iOS 13新增了一种操作视图，操作的视图會被縮小，同時淡化置于新跳出视图的下方，新版的视图有助于用户明确信息的层级，便于用户找回此前被暂停的任务。
[4]BackDrop：一个Backdrop出现在应用程序中的所有其他界面底部, 显示相关信息内容和可操作的内容。
网页弹窗怎么设计 第8篇
理想情况下操作按钮只有2个，当存在3个按钮时，按钮的摆放规则可以根据自己平台的特性决定，并没有通行的规则（但一般会将破坏性按钮放在主操作按钮的对侧）。
C端有个不成文的规矩，取消在左，行动在右，若行动为不可撤回操作则需标红警示，c端在超过2个按钮后就可以考虑使用actionsheet替代弹窗了。
五、弹窗的设计体验角度
好的弹窗应做到减少干扰，注重极简，视觉一致性，突出信息主要传递内容，使用户在一定的时间上能一目了然。
其次需要注意的是弹出的频率一定不要太过于频繁，如果太过于频繁，就会使用户感觉很厌烦。在做产品的时候一定不要让用户去思考，让客户去思考做选择的产品不是好产品。
六、总结
本文讲述了在哪些场景下弹窗如何使用，以及我们在设计弹窗的时候需要注意哪些细节，考虑综合结合自身的情况下选择最合适用户的弹窗。
题图来自 Unsplash，基于 CC0 协议。
网页弹窗怎么设计 第9篇
Hubspot与Zoho都是国外两款非常出名的CRM，如果在做CRM领域的同学没有体验过的一定要试试。
首先，因为Hubspot、Zoho是属于国外产品传入中国，因此在使用习惯上，更偏向于专注去做一件事，比如Hubspot上，在其客户详情页能够直接进行添加日程、拨打电话、发送邮件等几十项操作，并且一切围绕着Marketing、Sales展开。
因此使得页面需要更加专注，需要看到更加全量的信息，再次国外Saas用户也是对完整流程的操作更加青睐（一个操作只干一件事），而国内喜欢快捷融合（喜欢有很多快捷操作），因此造成Hubspot与Zoho都采取新建页的形式查看数据（有机会一定与大家聊聊国内外B端产品的差异）。
不过非常推荐大家体验hubspot，细节满满～
网页弹窗怎么设计 第10篇
我相信很多人对浮层弹窗并不陌生，最常见的支付宝微信右上角有一个+号，里面会放置部分常用功能，它的设计方式给浮层容器加上投影，避免与底部信息混淆，浮层底部设置蒙层。
这种一般都出现在按钮右边，此种弹窗也可出现在任何位置，按钮数可多可少。
2. 非模态弹窗
什么是非模态弹窗？
用户可回应，一段时间之后可自动消失，是一种轻量级的反馈机制，最常见的就是提示框和底部弹窗。
网页弹窗怎么设计 第11篇
与模态完全相反，它更加温和，不会打扰到用户的正常使用。通常这类弹窗只会在屏幕上短暂停留，几秒就会消失，也因此用户感受不到他的存在。
它的缺点也非常明显，展示时间较短，不适合展示重要信息、不能承载大量文案；常见的类型有：通知提醒、全局提示、警告提示、气泡卡片、文字提示。
3. 弹窗的来源
弹窗虽然在2010年被《时代》周刊评选为50大最糟糕的发明之一，但是弹窗最开始的出现，其实是为了简化用户页面、节约用户浏览器页签。
因为早期网页设计中，常常需要保留当前页但又需要进行跳转的页面，比如登录页；但用户每次使用时都需要跳转到一个新页面中，而登录最后都是需要回到之前的页面中，在未使用弹窗之前，往往需要新开很多页面，而且用户的使用不会聚焦。
在淘宝的早期，遭受ebay的围追堵截，声称要致淘宝于死地，18个月内结束这场战争！
2004年，淘宝网刚成立一年，像大多数创业网站一样，活得很艰辛。
当时中国互联网流量主要集中在三大门户，新浪、网易、搜狐，ebay与三大门户签订了排他性协议，三大门户不能和其他电商网站合作，ebay又陆续与其他有大型网站签订排他性协议。
有点像现在的京东、淘宝二选一，于是被逼无奈的淘宝开始向中小网站发力，采取流氓弹窗的形式，在各个网站进行刷脸操作，让大家不断熟悉。
2005年，北京网络行业协会在收集网民对“流氓软件”投诉的排名中，淘宝位居第二；2006年，淘宝当时的总经理——孙彤宇，他表示当年使用流氓弹窗是不得已而为之。
而采取这种方式的淘宝，经由几年的努力，从2003年的ebay份额80%，到2004年淘宝份额41%，ebay份额53%。
在互联网早期，广告弹窗确实帮助很多产品起势，到如今虽说十分烦人但也是每个公司盈利的重要手段之一。因此弹窗也在中国的互联网行业中，留下浓墨重彩的一笔。
4. 弹窗的现状
现如今弹窗已经是一个可怕的存在，在PC端应用中，广告弹窗无时无刻都在不停的打扰用户，无论是360的自身全家桶套件、又或者是每一个网页中不断弹出广告，总是强制打断用户的工作流程获取用户的注意力。
人们也逐渐形成巴甫洛夫条件反射[2]，一看到弹窗就会想快速找到关闭按钮。
用户经过十多年的互联网产品的“培养”，使广告弹窗变得五花八门，人们应对弹窗，也有了自己的一套方法，相信每一个人都有被弹窗恶心的时候。
而弹窗作为人人唾弃的设计形式，却在B端产品中拥有独特的一面，看完文章希望你能理解B端产品的弹窗。
[2]巴甫洛夫条件反射：是指一个刺激和另一个带有奖赏或惩罚的无条件刺激多次联结，可使个体学会在单独呈现该一刺激时，也能引发类似无条件反应的条件反应。
二、弹窗的拆解
以最简单的弹窗为例，我们来对整个弹窗部分进行拆解，弹窗在宏观上来看一般包含模态层、关闭入口以及弹窗主体
1. 模态层（Modal）
模态层通常是一个半透明的黑色，将整个页面进行遮盖，使得用户在使用弹窗或其他控件时会更加专注。同时采用半透明的设计，能通过半透明的模态层让用户了解到自己并没有跳出当前页面，不必慌张。
在一个看似简单的模态层中，需要进行三方面的思考
网页弹窗怎么设计 第12篇
分步弹窗是分步表单的衍生品，因为在实际项目中，发现大型的分步表单难以满足现阶段对于小型内容展示的需求，因此分步弹窗便诞生。
分步弹窗能实现具有先后条件且内容较少的需求，在工作中主要是新手引导或者有前后关系录入的弹窗会用到，例如：“简道云的新手引导、XXXX步骤注册”都可以采取分步弹窗的形式。
网页弹窗怎么设计 第13篇
我们以最小屏幕尺寸：768px来定义，一般浏览器输入框+菜单栏的高度为80px，底部系统工具栏高度为40px，768px-80px-40px=约648px。
对于页面中自适应的情况所以上需留出固定安全举例，所以弹窗的高度必须小于600px。
网页弹窗怎么设计 第14篇
新建页基本就是万精油，无论页面内容量是多少、页面间是否连贯、以及使用频率怎样，都可以采取新建页，但是新建页往往也不是最优的解决办法。
在新建页中又分为：覆盖当前窗口以及新窗口跳转两种形式，在场景上可以根据两者差异进行选择，究其本质，就是a标签href属性与target属性上的差异。
四、如何选择弹窗、抽屉、新建页
在我们日常设计中，常常抉择于：弹窗、抽屉、新建页之间，总觉得使用某一种交互形式会更好，但是却说不出其中的原因，犹豫究竟应该使用那种展现形式，这就需要我们通过具体的要素方法进行相应的分析。
常常看见设计师麻木的进行简单的拖拽组件，并没有进行深入思考，也根本不会通过页面的分析方法，去了解事物的本质，今天告诉大家这三种要素能够帮助你进行交互分析：
1. 页面内容量
页面内容量决定呈现形式。
不知道大家阅读了这么久，有没有发现一个问题，在这篇文章中，我不断强调内容量。因为无论是弹窗、抽屉、新建页，究其本身就是一个内容载体，因此选择如何使用，很大程度上取决你的内容量的多少。
内容量：通常包含了你页面当中文字、图片、视频、表格、以及各种复杂的交互。如果你觉得页面已经密密麻麻，在弹窗中根本无法呈现，这时候你就需要考虑弹窗是否合适～
而弹窗、抽屉、新建页，如何抉择，它们承载内容的量也存在一个大小关系：新建页>抽屉>弹窗。
但是不能从一个纬度去思考页面内容量的多少，内容的宽度以及深度都是需要去分析。通常，内容的深度较深最好采取抽屉、内容宽度较宽则弹窗形式更为合理、而新建页合适宽度与深度同时较大的产品中。
也就是弹窗只能承载较小内容、抽屉其次、新建页最优，但是在实际工作中往往并没有这么简单，在本节最后，举了几个实例进行简单分析。
2. 页面连贯性
页面连贯性直接决定用户的使用体验。
当浏览器新开一个标签进行展示时，页面的连贯性是最弱的，因为用户需要进行困难的操作返回到之前页面，并让用户感到十分懵逼，同时你也可以理解新开页面是较为独立的，不会受到前页面的干扰，而要决定页面连贯性的核心，还是以自身业务出发。
从三个不同交互形式上看，页面连贯性明显抽屉小于弹窗小于新建页。
例如：使用纷享逍客在客户列表页与详情页之间连贯性就很强，因为用户需要详情与列表之间来回看进行对比，也因此纷享逍客将抽屉模态层都给去除，更方便自身业务。
3. 页面切换成本
页面切换成本决定用户使用效率。
当一个二级页面使用频率过高时，就证明用户需要在A与B页面之间进行来回切换，这时候考虑页面反复出现是否流畅，是否有切换成本的产生，而B端产品效率至上的原则，便需要思考用户怎样切换成本更低。
页面切换成本越来越受到重视，从最近iOS13更新的几点以及微信、知乎app更新上可以发现。
在IOS12到IOS13中，一个较大更新便是新版视图弹窗。
在以前的视图弹窗中，用户经常忘了此前他们进行的操作任务，而iOS13能够让用户更加明确，减少了页面间的切换成本；在微信与知乎中，因为用户需要经常切换，之前用户难以在几个页面来回跳转。
而浮窗的出现，刚好能够解决这一问题，减少了页面间的切换成本。
想用B端几个典型产品的几个案例来解释弹窗、抽屉与新建页。
网页弹窗怎么设计 第15篇
如上图所示屏幕弹出“已取消收藏”和“微信支付”我们常常在生活中会关注某个博主或某个物品，这时屏幕中间就会提示关注成功或者收藏成功，一般这种属于轻量级提示，无交互，一般显示1~2秒内自动消失。
它不能手动消失，出现的位置可在顶部/中间/底部，它弹出一个小信息，作为提醒或消息反馈来用，一般用来显示操作效果，或者应用状态的改变。
考虑到它显示的时间比较短，占用区域不大，一般不适合承载更多的文字和信息。