首页 >> 平面设计 >>设计知识 >> 万字干货!超全面的B端设计指南:弹窗篇
详细内容

万字干货!超全面的B端设计指南:弹窗篇

时间:2020-07-29        阅读

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

万字干货!超全面的B端设计指南:弹窗篇

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

从宏观上讲,目前B端设计中信息展示的控件可以分为三类:弹窗、抽屉、新建页。在这三种展示形式中,我们需要明白它们四类分别是什么、有哪些、在什么场景中使用、以及在优缺点和适应的不同业务,这样可以更好的为我们设计服务。

万字干货!超全面的B端设计指南:弹窗篇

什么是弹窗

1. 弹窗的定义:

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

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

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

万字干货!超全面的B端设计指南:弹窗篇

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

模态(modal):

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

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

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

万字干货!超全面的B端设计指南:弹窗篇

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

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

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

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

劣势:打扰用户,感到强烈的中断的感受

2. 弹窗的分类:

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

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

非模态弹窗:与模态完全相反,它更加温和,不会打扰到用户的正常使用。通常这类弹窗只会在屏幕上短暂停留,几秒就会消失,也因此用户感受不到他的存在。它的缺点也非常明显,展示时间较短,不适合展示重要信息、不能承载大量文案,常见的类型有:通知提醒、全局提示、警告提示、气泡卡片、文字提示。

万字干货!超全面的B端设计指南:弹窗篇

3. 弹窗的来源:

弹窗虽然在2010年被《时代》周刊评选为50大最糟糕的发明之一,但是弹窗最开始的出现,其实是为了简化用户页面、节约用户浏览器页签。

因为早期网页设计中,常常需要保留当前页但又需要进行跳转的页面,比如登录页,但用户每次使用时都需要跳转到一个新页面中,而登录最后都是需要回到之前的页面中,在未使用弹窗之前,往往需要新开很多页面,而且用户的使用不会聚焦。

万字干货!超全面的B端设计指南:弹窗篇

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

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

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

万字干货!超全面的B端设计指南:弹窗篇

2005年,北京网络行业协会在收集网民对「流氓软件」投诉的排名中,淘宝位居第二

2006年,淘宝当时的总经理——孙彤宇,他表示当年使用流氓弹窗是不得已而为之。

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

在互联网早期,广告弹窗确实帮助很多产品起势,到如今虽说十分烦人但也是每个公司盈利的重要手段之一。因此弹窗也在中国的互联网行业中,留下浓墨重彩的一笔

4. 弹窗的现状:

现如今弹窗已经是一个可怕的存在,在PC端应用中,广告弹窗无时无刻都在不停的打扰用户,无论是360的自身全家桶套件、又或者是每一个网页中不断弹出广告,总是强制打断用户的工作流程获取用户的注意力。人们也逐渐形成巴甫洛夫条件反射[2],一看到弹窗就会想快速找到关闭按钮。用户经过十多年的互联网产品的「培养」,使广告弹窗变得五花八门,人们应对弹窗,也有了自己的一套方法,相信每一个人都有被弹窗恶心的时候。而弹窗作为人人唾弃的设计形式,却在B端产品中拥有独特的一面,看完文章希望你能理解B端产品的弹窗。

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

弹窗的拆解

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

万字干货!超全面的B端设计指南:弹窗篇

1. 模态层(Modal)

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

在一个看似简单的模态层中,需要进行三方面的思考

颜色深度的思考

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

万字干货!超全面的B端设计指南:弹窗篇

多模态层检查

因为文章开头解释过模态的特殊性,所以在正常情况下模态的状态只允许出现一层,即模态层的唯一。如果需要出现多个模态层时,就需要进行深入考虑流程、设计形式是否合理。这里建议从以下几个方面进行思考。

  • 流程优化:在使用多模态层前后的过程中,流程是否足够精简清晰,能否通过优化,将流程变得更加合理,减少不必要的多模态层的使用。

  • 内容量展示优化:当内容量较少时,可以采取下拉菜单进行设计上的优化,这样可以解决多模态层进行叠加的问题

  • 弹窗形式是否合适:当页面涉及到很多交互时,不建议直接使用弹窗(文章第四模块会讲到)

多模态层的设计

但在很多实际B端业务中,通过上面的方法也不可避免会遇到多模态层的情况。这时你需要冷静面对而不是慌张,这里给大家讲解当你遇到需要多层模态展示时,需要注意的点:

多模态层超过2层时最好只展示固定颜色

在模态过多的情况,我们会给一个最大值,即当弹窗超过3层只展示固定颜色即可

例如:在纷享销客的产品中,因为是一个aPaaS产品,就会有很多开放用户进行配置的逻辑,考虑到方便用户进行编辑,会存在用户进行来回跳转的情况,因此就会存在不停进行来回跳转,形成多模态层的状况

万字干货!超全面的B端设计指南:弹窗篇

模态位置错层,让用户知道现在处在第几层

在多模态叠加的过程中,用户很容易不清楚自己所在时那一层当中,导致视觉层级混乱。

这通常的处理办法就是将多个模态层叠加的状态进行错层,这样能够让用户知道自己所在的层级,帮助用户了解逻辑关系

万字干货!超全面的B端设计指南:弹窗篇

2. 关闭入口(Close)

关闭入口作为用户退出的重要途径,主要是为了方便用户进行快速的退出。而在关闭入口的设计中,需要注意以下几点:

多形态的关闭

一个体验良好的弹窗需要提供多个关闭入口,让用户进行退出。一方面弹窗是打断用户正常流程的操作,而为了不让用户感到反感需要提出多个入口;另一方面用户更能够通过多个入口的设计,快速返回到正常操作流程,降低用户不必要的流失。我一共总结有四种入口途径,方便大家在设计时对照查看是否做到。

万字干货!超全面的B端设计指南:弹窗篇

入口一:关闭按钮

关闭按钮是最为常规的操作,主要是每一个用户对于它都足够的熟悉。因此建议不需要改变关闭按钮的位置,一般会有在弹窗内与弹窗外两种形式可供大家进行选择。

入口二:取消按钮

取消按钮一般和确定按钮成对出现,取消按钮的出现主要是为了辅佐确定按钮,当用户看到确定并想要反悔时,能够给他提供给他相应的回退机制。

入口三:点击模态层

用户可以点击模态层,进行取消。因为用户点击模态层,默认是想要回到模态层下方的界面中,这个入口就显得尤为必要。通常点击模态窗是用户最方便的退出方式,能够使用户快速退出。

入口四:Esc键

Esc键诞生于1960年,位于每一个电脑键盘的左上方,为英文单词escape的缩写。

escape翻译成中文为逃脱, 逃跑,漏出, 泄漏之意。在很多设计师的认知层面中,Esc键退出似乎是一个可有可无的按键存在。

而在我们实际调研自己产品当中发现,经常习惯使用Esc键的用户占33.7%,。而这类快捷键上的优化恰恰能够提升用户使用的核心效率,在很多时候能够减轻使用者的操作成本。

在B端产品中,调用键盘进行操作优化,是一个不可忽视的用户爽点。

例如:我们使用聊天软件,在用户输入完成后总是习惯点击Enter进行提交、使用PageUp 以及 PageDown用来替代鼠标进行列表页翻页、空格用来对页面进行整体一屏滚动,这些都是调用键盘进行快捷操作,提升效率

固定位置出现

在关闭入口设计当中,无论是将入口设计在弹窗内或者是弹窗外,都需要在固定位置出现。

固定位置的出现能够让用户养成良好的习惯,减少用户的思考成本。常见的弹窗关闭按钮基本都在右上角进行展示,因此不建议在位置上进行创新,会适得其反。

录入场景的特殊处理

在关闭入口设计中,常常会遇到这种情况,用户在弹窗中进行录入的场景下,误操作点到模态层后,用户辛苦录入的大段文字丢失。

这类情况的出现,常常表示用户在弹窗的全流程场景中没有进行深入的思考。我总结了市面上对于录入弹窗这种特殊的处理方式,共有以下几点:

  • 对于大型文本的录入过程中,如果使用弹窗,建议采取草稿箱进行自动保存、或者放弃弹窗使用新建页面进行展示。例如:常见的知乎就是通过弹窗+自动保存进行实现

  • 对于普通文本的录入过程中,如果使用弹 窗,建议采取点击关闭进行提示

  • 弹窗中有用户下拉菜单进行选择的,可采取前端记住用户选项,当用户发生误操作时,可重新呼出弹窗即可

万字干货!超全面的B端设计指南:弹窗篇

3. 弹窗主体(Mian)

在弹窗的主体中,会因为弹窗的类型不同会有所加减,但无外乎就是我总结的一下五类

万字干货!超全面的B端设计指南:弹窗篇

图标

在弹窗中,图标的使用主要是为了更直观表达弹窗的具体状态。例如:「放置警告图标代表用户需要谨慎操作、放置成功图标代表用户已经完成操作。」

弹窗标题

使用简短的语言告诉用户功能,如果是对话弹窗,一般是疑问句,例如:「是否删除列表?」;若是其他具有特定功能的弹窗,一般为动词短语,例如:「删除客户、查看详情」,一般不可删除。

内容信息

在对话弹窗中,主要是对使用弹窗后产生的结果进行具体描述,讲出你操作可能造成的结果以及一些说明,例如:「删除客户后,你可以在公海找到该客户」;而如果是非对话框弹窗,则一般不需要内容信息。

按钮选择

按钮选择主要是对弹窗交互进行的结果,一般是相对立的两个操作进行出现,例如:「确定/取消、保存/删除等…」
如果你对按钮有疑惑,建议看我上一篇文章的总结。

选项操作

在弹窗中,还有因为业务的不同,在弹窗中增加相应的选项操作,选项操作通常是一些常规控件,不宜进行特殊处理,例如:「输入框、单选框、复选框等…」

弹窗会根据主体的不同,分为不同的弹窗类型,通过上面素材进行组合,形成下面不同类型的弹窗,下面为大家讲讲弹窗的类型

弹窗的类型

第一节讲到,在弹窗的类型中,主要分为两类:模态弹窗和非模态弹窗

1. 模态弹窗:

万字干货!超全面的B端设计指南:弹窗篇

在实际项目中,我们把模态弹窗进行拆分,分为五小类:「对话弹窗、内嵌表单弹窗、分步弹窗、文件选择、复杂信息展示。」

对话弹窗

对话弹窗是我们日常使用中最为频繁的弹窗形式,对话弹窗最初用于很重要或者有风险的操作,这时会弹出一个对话形式的弹窗给用户,需要用户根据提示来进行判断。随着B端产品的不断发展,对话框已经演变成用户注册、提交、信息修改、编辑、形式各样的操作承载体。

万字干货!超全面的B端设计指南:弹窗篇

内嵌表单弹窗

内嵌表单弹窗作为弹窗最为重要的组成部分,在B端产品的日常使用中几乎存在的方方面面

因其里面经常会添加各种选项操作,例如:「ckeckbox、radio、下拉菜单等等」,通过弹窗去完成形式各样的操作
内嵌表单的好处是能够通过小面积的弹窗完成对数据的编辑修改,方便快捷进行增删改的处理。

万字干货!超全面的B端设计指南:弹窗篇

分步弹窗

分步弹窗是分步表单的衍生品,因为在实际项目中,发现大型的分步表单难以满足现阶段对于小型内容展示的需求,因此分步弹窗便诞生。

分步弹窗的主要特点是页脚上会有下一步、上一步两个选项供用户进行选择,同时用户点击下一步后,就会在左上角提示用户可以进行返回。

分步弹窗能实现具有先后条件且内容较少的需求,在工作中主要是新手引导或者有前后关系录入的弹窗会用到。例如:「简道云的新手引导、XXXX步骤注册」都可以采取分步弹窗的形式。

万字干货!超全面的B端设计指南:弹窗篇

附件选择弹窗

附件上传弹窗是用户文件上传的重要途径,在Human Interface Guidelines中,明确指出分为Window Anatomy、Column Views,而在B端产品中,现都采取拖动文件上传,相对而言更简便。

万字干货!超全面的B端设计指南:弹窗篇

复杂信息弹窗

复杂信息弹窗是一些大型B端项目经常遇到的问题。在遇到多信息需要进行展示与交互时,通常很难给出很好的解决办法。因此复杂信息展示弹窗也就诞生。我们团队对其的定义主要是弹窗面积足够大,同时在弹窗内部存在很多交互,与新建页抽屉等情况类似。

例如:Trello、Teambition的任务弹框虽然信息较多,但好处是能快速切换到不同的任务,增加效率。

万字干货!超全面的B端设计指南:弹窗篇

2. 非模态弹窗

万字干货!超全面的B端设计指南:弹窗篇

通知提(Notification)

通常在页面右上角,显示通知提醒信息,给用户进行重度的打扰。经常用于产品系统主动推送以及消息提醒。

例如:在我们自家产品中,通知提醒框用户对用户审批信息进行展示,同时可让用户进行跳转查看,方便用户进行快速使用。

万字干货!超全面的B端设计指南:弹窗篇

全局提示(Message)

全局提示是希望不中断用户正常操作的前提下,显示一条简短的消息。这条消息通常都是轻量的一般在短时间就会自动消失,并不会干扰到用户。全局提示一般在整个页面居中的位置,会展示3-5秒钟或者用户进行点击后就会消失。

例如:在我们产品的详情页当中会有列表快捷编辑功能,当用户每进行一次编辑操作,都会给用户进行全局提示,操作成功

万字干货!超全面的B端设计指南:弹窗篇

警告提示 (Alert)

提醒用户需要立即处理的错误,提示