您现在的位置: 首页 > 网站导航收录 > 百科知识百科知识

浏览器每次都新开一个网页(B端设计指南-弹窗)

用户,操作,模态浏览器每次都新开一个网页(B端设计指南-弹窗)

发布时间：2019-02-08加入收藏来源：互联网点击：

弹窗是最常使用的组件之一，但是在与人交流时，还是会觉得大家存在很多误区，如何使用弹窗，想带给大家一些全新的思考

我知道B 端对于大家而言是一个枯燥的话题，也听过很多粉丝的建议，去融入更多控件背后有趣的故事，是B端设计指南的第四篇文章，如果没看过之前的文章，欢迎结合进行阅读，会有更多收获。

这篇文章是我自己在工作中受到各种摧残、无数次开会讨论总结而来，如果你现在深处B端行业，强烈建议大家一定要看完。

收到很多同学关于弹窗的疑问，因为在B端的设计过程中，会接触到很多信息展示方面的疑惑，他们咨询的维度各不相同，但是大致分为以下几类：

由于B端产品的复杂多样，我们今天所要讨论的不单单局限于弹窗这一种控件的设计，而是一个“泛弹窗”的话题，透过弹窗去分析理解其他类型信息展示的业务逻辑。

从宏观上讲，目前B端设计中信息展示的控件可以分为三类：弹窗、抽屉、新建页。

在这三种展示形式中，我们需要明白它们四类分别是什么、有哪些、在什么场景中使用、以及在优缺点和适应的不同业务，这样可以更好的为我们设计服务。

弹窗是一种中断用户当前操作并对其进行补充、或者对当前操作进行强制反馈的交互形式。一般需要用户进行强交互[1]。

它可以告知用户关键的信息，需要用户去做决定。弹窗越来越广泛地被应用于软件、网页、以及移动设备中。它可以保留用户当前进程的情况下，指引用户完成一个特定的操作 。

[1] 强交互：是指想要完成用户正常流程时必须先完成当前交互的操作后才继续正常流程

首先咱们老规矩，先普及一个知识点，什么是模态？

模态（modal）：是杰夫·拉斯金在自己书中《Humane Interface》 (Page 42)的定义：人机界面对于跟定的动作(gesture)是模态的(modal) ，如果界面的当前状态不在 用户的注意之处；依赖于系统的状态，界面对动作会从几种不同的响应执行中选择一种执行。

通俗一点讲是用来表示使用相同行为具有两种以上不同状态的操作。当系统在这些状态之间切换时，操作的动作相同但操作的结果却又产生皆然不同的意义。

最典型模态的例子便是键盘中 Caps Lock键，当按下 Caps Lock键后输入的a-z由小写字母变为大写；虽然用户还是按下相同的字母，却显示两种不同意义的字母类型。

同类型的例子还有数字键盘锁（Num Lock）、滚动锁(Scroll Lock)。

根据时间进行不断演化，我们B端设计师工作中碰到的模态类型大多数都属于模态层。

模态层：使用半透明黑色在页面中进行整体覆盖。主要是在弹窗的底层，衬托弹窗，使弹窗不会被忽视掉，想要继续使用就必须先与弹窗进行交互

优势：通过全局的半透明黑色能够让用户更加聚焦，集中精力去处理好当前事情，能够通过透明度展示背景，让用户了解到自己并没有离开当前页面

劣势：打扰用户，感到强烈的中断的感受

在弹窗的交互形式上，它主要分为模态弹窗与非模态弹窗两种形式：

模态弹窗：是位于浏览器的主页面核心区域，需要用户对它做出相应交互，模态才会消失。而弹窗会因为自身的吸引程度、停留时间、信息量承载多少被划分为多种弹窗类型进行区分，常见的弹窗分别为：对话弹窗、内嵌表单弹窗、分步表单弹窗、文件选择弹窗、复杂信息展示。

非模态弹窗：与模态完全相反，它更加温和，不会打扰到用户的正常使用。通常这类弹窗只会在屏幕上短暂停留，几秒就会消失，也因此用户感受不到他的存在。

它的缺点也非常明显，展示时间较短，不适合展示重要信息、不能承载大量文案，常见的类型有：通知提醒、全局提示、警告提示、气泡卡片、文字提示。

弹窗虽然在2010年被《时代》周刊评选为50大最糟糕的发明之一，但是弹窗最开始的出现，其实是为了简化用户页面、节约用户浏览器页签。因为早期网页设计中，常常需要保留当前页但又需要进行跳转的页面，比如登录页，但用户每次使用时都需要跳转到一个新页面中，而登录最后都是需要回到之前的页面中，在未使用弹窗之前，往往需要新开很多页面，而且用户的使用不会聚焦。

在淘宝的早期，遭受ebay的围追堵截，声称要致淘宝于死地，18个月内结束这场战争！

2004年，淘宝网刚成立一年，像大多数创业网站一样，活得很艰辛。

当时中国互联网流量主要集中在三大门户，新浪、网易、搜狐，ebay与三大门户签订了排他性协议，三大门户不能和其他电商网站合作。ebay又陆续与其他有大型网站签订排他性协议。有点像现在的京东、淘宝二选一，于是被逼无奈的淘宝开始向中小网站发力，采取流氓弹窗的形式，在各个网站进行刷脸操作，让大家不断熟悉。

2005年，北京网络行业协会在收集网民对“流氓软件”投诉的排名中，淘宝位居第二2006年，淘宝当时的总经理——孙彤宇，他表示当年使用流氓弹窗是不得已而为之。

而采取这种方式的淘宝，经由几年的努力，从2003年的ebay份额80%，到2004年淘宝份额41%，ebay份额53%。

在互联网早期，广告弹窗确实帮助很多产品起势，到如今虽说十分烦人但也是每个公司盈利的重要手段之一。

因此弹窗也在中国的互联网行业中，留下浓墨重彩的一笔

现如今弹窗已经是一个可怕的存在，在PC端应用中，广告弹窗无时无刻都在不停的打扰用户，无论是360的自身全家桶套件、又或者是每一个网页中不断弹出广告，总是强制打断用户的工作流程获取用户的注意力。人们也逐渐形成巴甫洛夫条件反射[2]，一看到弹窗就会想快速找到关闭按钮。

用户经过十多年的互联网产品的“培养”，使广告弹窗变得五花八门，人们应对弹窗，也有了自己的一套方法，相信每一个人都有被弹窗恶心的时候。

而弹窗作为人人唾弃的设计形式，却在B端产品中拥有独特的一面，看完文章希望你能理解B端产品的弹窗。

[2]巴甫洛夫条件反射：是指一个刺激和另一个带有奖赏或惩罚的无条件刺激多次联结，可使个体学会在单独呈现该一刺激时，也能引发类似无条件反应的条件反应。

以最简单的弹窗为例，我们来对整个弹窗部分进行拆解，弹窗在宏观上来看一般包含模态层、关闭入口以及弹窗主体

模态层通常是一个半透明的黑色，将整个页面进行遮盖，使得用户在使用弹窗或其他控件时会更加专注。同时采用半透明的设计，能通过半透明的模态层让用户了解到自己并没有跳出当前页面，不必慌张。在一个看似简单的模态层中，需要进行三方面的思考

a.颜色深度的思考

颜色能给用户传达出许多信息，模态层上也是一样，在制定相应的规范开始前，我们需要思考自身产品的定位，这样在整个产品的颜色规范层面能够做的到统一。模态层颜色较浅，这样能尽可能减少用户的跳出感，让产品更加亲民，贴切；模态层颜色较深，这样会让用户更加专注当前弹窗页面，让产品更加专业。

 1/4    1 2 3 4 下一页 尾页