您的意见是我们 UI 中国进步的动力!
点击立即反馈按钮,发表您的意见!
立即反馈
QQ群反馈
您也可以加入UI中国官方反馈群进行反馈!
群号:302892100
备注:反馈问题后@管理员能让我们及时了解您的意见

信息提交类弹窗该如何设计?

原创文章 分类: 经验/观点 版权:
568 10 3 0
2019-06-06
3.3

 

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

Image title



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

 

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

Image title


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

 

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

 

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


目录

 

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

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

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

4、选用适合的交互样式



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


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

Image title



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

 

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



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


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

Image title



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

 

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



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


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

Image title



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



四、选用适合的交互样式


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


 Image title

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

Image title



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


 

五、画重点


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

 

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

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

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

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



原文链接:http://h5ip.cn/haiyanshe

微信公众号:海盐社

风筝KK

微信公众号:海盐社

2895粉丝/52关注

人气明星老马识途首页达人砖家收藏家lv.2
助力产品设计,你应该了解“需求的等级”设计没亮点,试试这样!

风筝KK

风筝KK

微信公众号:海盐社

人气明星老马识途首页达人砖家收藏家lv.2

扫描二维码
去手机端查看海报

风筝KK

TA已经获得11枚勋章啦

  • 成就勋章

    • 特别勋章

    • 身份勋章

  • 已拥有

  • 作品

    创造者才是真正的享受者。

  • 经验

    经验是一所好学校,可它的学生却经常旷课。

  • 活跃

    大神都是从围观群众开始的

  • 拓展

    作品、经验、活跃还不能满足你?

京ICP备14007358号-1 / 京公网安备11010802014104号 / Powered by 2008-2019 UI.CN