Alice

为什么线上许多产品中 (明道云、简道云、ONES…) 窗口下呼出下拉菜单后,滚动表单都没有跟随录入框吗?如下图,今天我们就来聊聊其中的缘由。

图片

图片

图片

我们先来看一看大家在评论区,都是如何讨论的~

图片

看到大家的回答,有的已经十分接近,但是实际的情况还是会有一些不同,我来带领大家一起讨论~

 

首先,在设计层面上,咱们最想要的结果是在弹窗中:下拉菜单与录入框进行实时的跟随,也就是类似下图:

图片

但是在开发层面,你会收到成本太高的结论。

因为影响上诉结果的原因就是在CSS当中有一个属性叫 Position(定位),下拉菜单也正是通过定位来进行位置的判断,从而实现下拉菜单与录入框跟随的状态

这里就不扯那些代码什么的,大多数设计师应该都看不懂,我就简单将问题用设计师的角度去理解,你可以将弹窗本身看作是一个画板,而录入框、下拉菜单都看作是其中的一个图层

如果需要实时定位来进行计算(也就是上面 AntDesign 所呈现的效果)就需要将它们都放在一个画板里面,在日常使用表单的情况下是肯定没有问题。

这时候大家应该忘了一个重要的条件因素:弹窗

当我们使用弹窗,整个展示范围必然会将缩小,因而在里面的“图层”也会受到“画板”的局限,不能完全展示,在实际的开发中,就会出现下拉菜单遮挡展示不全。

图片

当然遇到这种问题我们就需要找到解决办法,也就是最开始与大家讲到的 其他产品的做法:

将整个的下拉菜单单独看作是一个画板,虽然不会对选择录入框进行实时跟随,但是从整体来看,这种方式显然影响用户的使用体验更小,在权衡比较过后,就会采取第二种方案。

其实作为设计师,我们要做的不光是页面当中流程的体验,同样还需要去关注自己页面落地当中所遇到的许许多多的问题, Problem Solver 才是设计师的常态。

相信你在设计的过程中,也会遇到许许多多 与开发同学产生的矛盾~不如发出来,看看大家能不能帮你一起解决!

我是CE青年,一个 2 B 行业的 2B 设计师

 

原文链接:CE青年(公众号)

作者:CE青年

图片

转载请注明:学UI网 » 下拉菜单 “悬浮” 问题的解答

登录收藏
 
你可能喜欢的:
数据之美:地理空间数据可视化II数据之美:地理空间数据可视化II
如何高效地进行网页设计?重点关注这些要素如何高效地进行网页设计?重点关注这些要素
工作经验| B 端产品组件设计细节及经验分享(三)工作经验| B 端产品组件设计细节及经验分享(三)
酷家乐优秀设计频道改版酷家乐优秀设计频道改版
工作多年才发现,原来头像这么小的设计细节,也有这么多知识点工作多年才发现,原来头像这么小的设计细节,也有这么多知识点
好的单选框设计具备哪些特质?把握住这些知识点!好的单选框设计具备哪些特质?把握住这些知识点!
B端产品C端化,抱歉我想的太简单!B端产品C端化,抱歉我想的太简单!
测试了新手指引方案,总结下失败经验测试了新手指引方案,总结下失败经验
B端问答|信息密度与易读性B端问答|信息密度与易读性
B端设计指南 - 字体B端设计指南 – 字体