恭喜你成为UI中国推荐设计师 (详情)
//百度统计 20220402 uicn

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

提交需求

赛事与广告咨询合作,请填写需求表单,我们会在第一时间与您联系!

0/20
0/200

设计大赛

  • 设计大赛
  • 发布广告
  • 发布招聘
  • 其它需求

提交完成
感谢您对UI中国的支持和信赖!
信息提交类弹窗该如何设计?
0.0°
2019-06-06 原创文章 经验/观点 举报 2801 59 35 2

 

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

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

微信公众号:设计早8点

更新:2019-06-06

收藏

59人已收藏

风筝KK

微信公众号:设计早8点

  • 39

    作品

  • 5366

    粉丝

  • 59

    关注

  • 以字段映射为例,带你了解B端页面该如何设计!
  • 【B端】字段映射如何设计?别被大厂方案禁锢了
  • 小团队有必要建立完善的设计体系吗?
  • 如何提升B端界面的精致度,做到这两点就够了!

    猜你喜欢

      2019-06-06 原创文章 经验/观点 举报 2801 59 35 2

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

      0.0°

      你确定要举报信息提交类弹窗该如何设计?

      如果查出恶意举报,十天内禁止提交任何举报申请。

      0/200

      上传证据: 超过10M的附件请使用网盘地址

      点击上传附件

      对谁可见:

      全部设计师
      • 全部设计师
      • 推荐设计师和认证设计师

      您确认要推荐?

      该作品发布时间:2019年06月06日

      评分

      完整度

      启发性

      勤奋性

      排版布局

      推荐心得

      建议20-200字以内

      0/200

      35
      59
      2

      账号或密码错误,请重新输入

      账号或密码错误,请重新输入

      登录

      手机号

      发送验证码 120s 验证码错误

      登录
      第三方账号登录