Alice

做过web端界面的同学多数都会遇到下拉菜单这类组件,有些人也会将其称为选择器,那这个组件究竟应该叫什么呢?很多大厂的开源组件库都对其有自己的定义,我们做设计时应该怎么命名以及跟开发的同学沟通呢?

 

首先,在Ant Design 中,它将下拉菜单(Dropdown)与 选择器(Select)完全拆分开,如果单纯从视觉样式上来看,两者并没有较大差异,因此在日常的方案沟通中容易产生混淆。

而我总结了一下日常描述此组件时出现的不同名称,比如:选择器、下拉选择 、下拉菜单、下拉框、下拉选择器、选择框等等…

那到底应该叫什么?!!!!

图片

首先,为了研究名称的准确性,我查阅了“字典” World Wide Web Consortium (W3C)的cheatsheet文档,其中只存在有选择器 (Select) 这一名词,即选择器。而下拉菜单(Dropdown)是并没有存在的,结合对文档的细致研究,因此总结出使用 “选择器” 进行表达是一个较为规范的说法。

图片

而我们回过头来看,为什么 Ant Deisgn 会将同样的选择拆分为 下拉菜单与选择器呢?其实在实际功能上两者会有较大的不同点。

 

下拉菜单

主要是针对 操作 进行集合,主要的使用场景是在导航、工具菜单以及部分操作集合里。

导航:比如在GrowingIO的官网中,通过下拉菜单,他就可以将产品下面的子栏目导航统一放在下拉菜单中。

图片

工具菜单:比如在 MacOS的全局菜单中,都是将所有的操作放置在顶部的工具栏,通过使用下拉菜单进行呈现,比如 Figma 软件。

图片

操作集合:比如我们在表格的操作区域经常会使用下拉菜单将很多操作放到一起。

图片

 

选择器

主要是针对 选项 进行收折,他是必须包含两个部分,录入框以及下拉选项。使用场景是在表单的中可选项过多之后,会使用选择器将所有选项进行整合。比如我们选择客户的归属人,因为可选择的成员较多,因此通过选择器能够使所有选项进行集中展示。

图片

其次,两者的混淆,主要是对下拉选项的问题,其实一般对于下拉选项时,大家更通用的表述是下拉菜单,也会因此造成了两者之间的混淆。

 

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

作者:CE青年
图片

转载请注明:学UI网 » 下拉菜单?选择器?傻傻分不清楚!

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