信息提交类弹窗的设计技巧 UI教程

本文探讨了信息提交类弹窗设计中常见的问题及解决方案,提出从联动弹窗、页面设计、传统弹窗及其交互样式四个方面考虑,以优化用户体验。重点关注如何避免键盘遮挡输入、选择适合的控件,以及选择合适的交互样式,如复合弹层。
摘要由CSDN通过智能技术生成

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

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

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

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

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

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

  • 1
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值