不管是Web端还是移动端，我们在使用时经常会看见弹窗类的消息，大多为提示类消息；弹窗对于体验感来说也工具栏是非常重要的，怎么才能设计出好的弹窗？本文详细介绍了B端产品中的弹窗设计，我们一起来看呵呵。
合成氨变换工段
我们常说的用户的认知与系统的反馈，加到这里的反馈大多数时候会用到弹窗组件，主要包括强提醒和弱提醒。
有时候一个复杂的场景需要拆分，我们便会对一个页面进行优化，型式把一些功能通过弹窗 形式来展示；例如：个人信息页面，包含很多分组，主界面是分组的集合，每个分组通过弹窗每位打开来维护；这样可以把复杂的表单简化，分段维护。 交互设计可以简单为把复杂转移给系统，把简单留给用户，让用户更多的感受便捷化、智能化。
类似的情况还有很多，下面我会从操作性和提示性两方面来聊聊B端产品中的弹窗。
操作性主要由弹窗主要包括是一些表单类、配置类界面，例如新增、导入、设置等。银行复点机
有些人可能说新增可以设计成标签页形式，作为独立的关键字存在，不过这里是讲到弹窗，所以暂不需要考虑这种情况；啰嗦一句，如果是页签形式，新增提交后，页面要消失，并且要把值为传给父级页面。
比较常见的是弹窗形式，新增提交后，弹窗消失，值传给父级并自动刷新刷新首页。
1. 简单场景
表单输入项不多，或者页面内容不多的情况，可以看成简单场景；一个页面只需要把一个
功能完成好，没有太多关联性的操作，例如输入内容不多的新增弹窗。
另外类似于批量查询、导入这类操作，弹窗中还需要再弹个弹窗去执行导入模板的操作，这种情况还是可以归于简单场景。
大理石测量平台小结：简单场景差不多就是表单内容不多、功能单一、业务简单的操作性弹窗。
2. 复杂场景
表单输入内容很多需要分组，或者有很多需要关联的操作，可以看成是复杂场景。
要么是一个主体弹出式，包含很多又弹开的弹窗。
如下图所示：
或者是就在一个主体弹窗内，通过分组、TAB、分步等来精细化复杂业务。
1）弹窗TAB采访麦克风
这里的TAB不是指页签，而是在弹窗内部用TAB进行分组。以前设计CRM系统时，新增会
员信息部分就采用的这种形式。
其实也不代表手段这种方式有多好，上才主要是核心技术上当时弹窗尺寸需要固定，写成公共样式，有的内容很多，有的内容很少，为了兼容多种情况，才考虑这种TAB分组。
如下图所示：
这里有个注意点，就是必填字段问题，由于字段信息都影藏到每个TAB标签中，不能一眼看到哪些字段是必填，以及必填未输入时如何指路，我以前是设计成小三角放在标题右顶部。
如下图所示：
当影藏的TAB标签中有必填字段未填或者其他校验信息提示时，可以采用红标方式来提醒用户，当用户切换到红标TAB时，即可查看弹窗无法提交即可的根本原因；问题全部解决后，红标才会消失，当前TAB问题则可以直接看到。线路保护
2）分组弹窗
在弹窗内将字段信息余下展开，但是其中一部分字段又属于同一类型的，这时可以采用分
组信息来划分；分组弹窗可以将字段信息条理化，便于用户输入信息，可以理解观念为提高了用户的认知能力。
字段重要信息可以全部顺排，也可以按数目横向排列，例如一排摆2个字段，需要根据整体界面内部结构来设计；另外还需要考虑下系统反馈时的展示方式，例如是放在重要信息框右侧、底部、浮层提示等。
如下图所示：
通风道
3）分步弹窗
在弹窗内部将字段重要信息按先后顺序分开，这种就叫分步弹窗，这种设计露一手要点，就是第二步操作的数据需要第一步来做支撑；如果不敲定第二步，无法直接从第一步到第三步。
例如我之前设计的命题系统，一般是要先有问答题，才能设计小题。
如下图所示：
可能有人会说，如果字段前后没有关联，是不是就不能用方案设计弹窗了，一般WEB端是
采用初赛方式，滑动端可以按照分步来；但是一般几乎不是必填的，用户可以后面有兴趣时除去再去补充。
例如注册一些APP后，需要选择一些初始设置，以及填写个人资料，不过都可以不填直接跳过。
为了让更好用户可以很好地使用产品，需要有产品有很好的反馈能力，本次主要说的就是系统的反馈了，也就是提示性弹窗——我们在对系统发出指令后，都借此机会系统能给我们正确的反馈，好知道自己做的对与不对，以及如何下使进行下会一步操作等等。
豫公网安备41160202000603
站长QQ:729038198
关于我们
投诉建议