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

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

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

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

b.多模态层检查

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

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

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

弹窗形式是否合适：当页面涉及到很多交互时，不建议直接使用弹窗（文章第四模块会讲到）

c.多模态层的设计

但在很多实际B端业务中，通过上面的方法也不可避免会遇到多模态层的情况。

这时你需要冷静面对而不是慌张，这里给大家讲解当你遇到需要多层模态展示时，需要注意的点：多模态层超过2层时最好只展示固定颜色在模态过多的情况，我们会给一个最大值，即当弹窗超过3层只展示固定颜色即可。

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

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

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

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

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

a.多形态的关闭

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

入口一：关闭按钮

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

入口二：取消按钮

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

入口三：点击模态层

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

入口四：Esc键

Esc键诞生于1960年，位于每一个电脑键盘的左上方，为英文单词escape的缩写。escape翻译成中文为逃脱， 逃跑，漏出， 泄漏之意。在很多设计师的认知层面中，Esc键退出似乎是一个可有可无的按键存在。

而在我们实际调研自己产品当中发现，经常习惯使用Esc键的用户占33.7%，。而这类快捷键上的优化恰恰能够提升用户使用的核心效率，在很多时候能够减轻使用者的操作成本。在B端产品中，调用键盘进行操作优化，是一个不可忽视的用户爽点。

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

b.固定位置出现

在关闭入口设计当中，无论是将入口设计在弹窗内或者是弹窗外，都需要在固定位置出现。固定位置的出现能够让用户养成良好的习惯，减少用户的思考成本。常见的弹窗关闭按钮基本都在右上角进行展示，因此不建议在位置上进行创新，会适得其反。

c.录入场景的特殊处理

在关闭入口设计中，常常会遇到这种情况，用户在弹窗中进行录入的场景下，误操作点到模态层后，用户辛苦录入的大段文字丢失。这类情况的出现，常常表示用户在弹窗的全流程场景中没有进行深入的思考。我总结了市面上对于录入弹窗这种特殊的处理方式，共有以下几点：

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

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

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

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

a.图标

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

b.弹窗标题

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

c.内容信息

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

d.按钮选择

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

e.选项操作在弹窗中，还有因为业务的不同，在弹窗中增加相应的选项操作，选项操作通常是一些常规控件，不宜进行特殊处理，

例如：“输入框、单选框、复选框等...”

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

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

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

a.对话弹窗

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

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