dhtmlxgantt的弹窗时间范围_UI进阶知识-信息提交类弹窗该如何设计？

原文作者：风筝KK

信息提交类弹窗大家应该都比较熟悉，和其他弹窗的区别在于他有输入、选择等操作，比如我们常见的输入验证码、留言回复、充值转账、任务设置等。

看上去设计都比较简单，但是当你验收时就会发现问题，为什么别人的弹窗体验如此顺畅，我们的操作如此繁琐。

常见的问题主要有：操作键盘挡住输入区域，导致交互不流畅；选择了不适合的控件，增加操作步骤。

左图弹窗下部分的输入框和提交按钮都已经被键盘遮挡了，针对这种情况我们当前的解决方案是让弹窗跟随键盘，不过信息过多时就不太适用了。

右图的地址采用滑动选择的控件，每次只能查看几个地址，当你的城市比较靠后时，就增加了操作成本。

那么采用什么样的设计方式才可以解决这些问题呢？这需要一开始设计时就选择适当的样式，我们可以从四个方面来考虑。

目录

1、当信息较少且重要时，采用联动弹窗

2、当信息较多时，考虑是否可设计为页面

3、当以上都不适合时，在考虑采用传统弹窗

4、选用适合的交互样式

一、当信息较少且重要时，采用联动弹窗

联动弹窗也就是弹窗和键盘相连，其优势是解决了传统弹窗对内容对遮挡的问题，多用于信息较少和以输入为主的重要场景中。如下图所示：

转转发布宝贝的页面中，设置价格时，将价格、原价、运费、包邮等信息集合到了联动弹窗中，这样我们只需操作一步即可完成，避免了常规弹窗中多次输入的情况。

TIM待办主要以信息为主，采用联动弹窗可以让用户聚焦在当前输入中，不被其他操作所干扰。

二、当信息较多时，考虑是否可设计为页面

当信息较多时，我们需要判断是否必须要用弹窗来设计，直接用页面设计会不会更好呢？那么判断的标准其实是由当前用户的目的来决定的。如下图所示：

映客登录界面采用弹窗的方式比较合适，因为用户当前的目的是看其他精彩的内容，采用弹窗对用户目的干扰较小。

转转的发布页面由于信息量大，同时用户当前的目的就是发布宝贝，因此采用页面进行设计比较适合。

三、当以上两种都不适合时，在考虑采用传统弹窗

传统弹窗也就是我们常见的弹窗在屏幕中央，其优势是空间大，适用范围广，有现成的组件库。但是为了有个顺畅的交互效果，我们优先考虑联动弹窗和页面设计的方式，如果其他两种情况都不适合我们在考虑采用传统的弹窗样式。

滴答清单新增任务中的日期设置就是用的传统弹窗样式，尽管弹窗信息很多，但是用户当前的目的是新增任务，如果用页面就会对用户目的造成干扰，因此采用弹窗的方式会更好。

四、选用适合的交互样式

当采用传统的弹窗样式时，为了解决我们提到的两个问题，我们就需要选择适合的交互样式了。比如上面滴答清单的弹窗中，还有时间等选择操作，这时候就不能用底部弹出的控件了，但我们可采用复合弹层的样式，避免遮挡和弹窗跳动的问题。如下图所示：

看到复合弹层的样式，大家是否会觉得该方式比较复杂，但是体验之后我发现操作特别顺畅。同时细心的伙伴你会发现该交互样式已越来越多的被使用。

微信转账输入密码页面就是采用的传统弹窗，在选择支付方式时也是采用了复合弹层的交互效果，我们只需要一步选择即可，相比底部互动的交互样式节省了很多时间。

五、画重点

本文主要和大家分享了确定信息提交类弹窗设计样式需要考虑的四个点。

1、当信息较少且重要时，采用联动弹窗进行设计，可以让用户专注在当前操作中，适合信息以输入为主的情况。

2、当信息较多时，根据用户目的，优先考虑是否设计为页面。

3、当以上两种都不适合时，在考虑采用传统弹窗。

4、当确定采用传统弹窗时，我们需要选用适合的交互样式，例如采用复合弹窗的形式，让操作更加顺畅。

---