B 端设计指南:选择录入(2)导语:在整个「数据录入场景」中,上篇我们讲到了单选框、多选框、开关。通过较为浅显易懂的方式与大家讲清楚了其中的利弊以及一些逻辑上的使用方法,但是在实际工作中,所遇到的问题远不止文章当中那么简单,工作中遇到那么多复杂的选择器我应该如何设计?这一篇中我们主要会针对下拉选择、日期时间选择 的基础内容进行相应的解析,通过拆解实际工作当中的需求,去了解其背后设计的逻辑。 咱们还是老规矩,先科普一个知识点,下拉菜单与选择器之间的区别: 首先,在 Ant Design 中,它将下拉菜单(Dropdown)与 选择器(Select)完全拆分开,假如单纯从视觉样式上来看,两者并没有较大差异,因此在日常的方案沟通中容易产生混淆。 而我总结了一下日常描述此组件时出现的不同名称,比如:选择器、下拉选择 、下拉菜单、下拉框、下拉选择器、选择框等等 那到底应该叫什么?!!!! 首先,为了讨论名称的准确性,我查阅了“字典” World Wide Web Consortium (W3C)的 cheatsheet 文档,其中只存在有选择器 (Select) 这一名词,即选择器;而下拉菜单(Dropdown)是并没有存在的,结合对文档的细致讨论,因此总结出使用 “选择器” 进行表达是一个较为法律规范的说法。 而我们回过头来看,为什么 Ant Deisgn 会将同样的选择拆分为 下拉菜单与选择器呢?其实在实际功能上两者会有较大的不同点。 下拉菜单: 在 Ant Design 的解释中,其描述主要是针对 操作 进行集合,主要的使用场景是在导航、工具菜单以及部分操作集合里;但在前端的实际使用中,Dropdown 主要被作为一个下拉容器的入口,他可以在里面放任意的内容,一张图片、一句话、甚至一个视频,都可以在下拉菜单中进行展示。 导航:比如在G rowingIO 的官网中,通过下拉菜单,他就可以将产品导航进行分组,并且统一放置在一起。 假设我们这时候使用 Select 进行展示的话,它的下拉菜单应该是长这样~(当然,这里肯定不会出现 Select 因为它缺少录入框,这里只是作为举例进行假设)。 工具菜单:比如在 MacOS 的全局菜单中,左侧工具菜单都是将所有的操作放置榆次,在 Figma 的软件那种,通过将顶部的工具栏,通过使用下拉菜单进行呈现。 操作集合:比如我们在表格的操作区域常常会使用下拉菜单将很多操作放到一起。 选择器: 主要是针对 选项 进行收折,他是必须包含两个部分,录入框以及下拉选项。使...