一看就懂，助你全面了解下拉菜单编辑导语：下拉菜单的模式在设计中最为常见了，那你有没有依赖下拉菜单呢？本文作者从四个角度进行了全面的梳理与分析，帮助你详细了解下拉菜单的设计，做设计的同学感兴趣就来看看吧。下拉菜单经常用在表单选项、筛选条件、导
一看就懂，助你全面了解下拉菜单
编辑导语：下拉菜单的模式在设计中最为常见了，那你有没有依赖下拉菜单呢？本文作者从四个角度进行了全面的梳理与分析，帮助你详细了解下拉菜单的设计，做设计的同学感兴趣就来看看吧。
下拉菜单经常用在表单选项、筛选条件、导航等界面模块中，被触发后弹出的内容包括但不仅限于单选列表、多选列表、子选项、搜索等，内容较多时可能需要上下滚动，真实情况视选项的实际数量而定。
2. 下拉菜单的构成
下拉菜单看起来跟表单中的选项框几乎一致，但在真实的表单页面中，触发表单项后可能是下拉菜单，也可能是弹窗或页面跳转。同理，下拉菜单也会经常用在除表单之外的其他界面模块中，从表面上看跟表单一样，而实际的元素及交互效果则有很大的区别，但本文主要针对表单中的下拉菜单（非导航）作出介绍，有以下十个部分构成：
标签：告知用户该下拉菜单项需要选择什么内容；容器：用于承载选择前的信息提示（占位符）及选择后的内容；下拉箭头：提醒用户有可点击的延展项，点击后弹出下拉框，箭头垂直翻转，再次点击箭头或选择内容后复原。另外，部分产品使用到倒三角代替下拉箭头，其作用相同；占位符：对标签进行描述或补充，减少用户出错的可能，选择内容后会直接替换占位符；下拉框（容器）：用于承载下拉选项的容器，点击下拉箭头后会弹出下拉框；选项列表：供用户选择的内容；分隔线：当列表中选项较多时，添加分隔线能更好的区分每个单独的选项（视情况而定）；已选中：弹出下拉菜单后，通常会用单选/复选框、主体色、加粗等样式提示用户默认选项或已选中的内容；滚动条：下拉框的高度会有一个最大值，当选项列表高度超过下拉框的高度时，就会出现滚动条；系统反馈：用户未操作必填内容就提交任务时，系统会给予提示。
3. 下拉菜单的几种状态
不管是出于系统问题还是用户的原因，下拉菜单能否操作或有什么限制，都应该给予用户及时的反馈。虽然存在多种交互状态且在视觉上都比较相似，但在设计时需要明显的区分开来，常见的状态有默认、悬停、聚焦、完成、禁用和错误提示，下面一起来看看设计师如何通过不同的视觉样式反馈给用户。
1）默认状态
即初始化状态，操作之前的样式，用户可从标签内容中获取该下拉菜单的主题内容，通过下拉箭头预示该内容的可操作性。对于部分选项较少下拉项，系统会默认选择一个与该用户最匹配的、或在目标用户群体中选择率最高的一项作为默认选项，以此减少用户的操作次数，降低任务流程的操作成本。
3）聚焦状态
聚焦状态是指用户正在与之发生交互，点击后，展开选项列表的同时，容器通过投影、边框加粗或主色调来提醒用户当前正处在操作中，下拉箭头会进行垂直翻转（向上）。在很多其他模块组件中，展开/收起也是源于箭头上下方向的提示。
4）完成状态
用户完成选择后，容器中填充被选中的选项并替换占位符，对于非必填的下拉菜单项，后面出现一键清除图标“?”，其他元素与初始化状态相同。
2. 由便捷性决定
能让用户选择的就不要让用户去输入。比如用户在选择退款原因时，常见的原因就那么几种，使用下拉菜单的样式呈现，比码字的操作效率会高出很多，即便用户有自定义需求，增加一个「其他」选项完全可以满足。
2. 命令菜单类型
命令菜单主要用于计算机桌面软件及应用程序的顶部，点击后会展开很多选项按钮以供用户进行下一步操作，部分较为复杂的功能选项会伴随着二级（子菜单）选项列表，方便用户对软件、应用更好的控制。
4）多选/复选
即用户在同一表单项中选择多个选项，虽然这种设计方式操作起来比较复杂，但在内容较多、空间资源不是很充足的管理系统、B端设计中还是很实用的。例如用户权限配置、带有二级/三级联动的机构或地址选择，多选相比平铺更节省空间，且这类用户很多都是经过培训、相对专业的群体。
6. 减少操作
这里有一个很经典的例子就是日期组件，对于年、月、日的选择，分别使用3个下拉菜单看似也能接受，但真的很复杂，且每次前面内容的变化都对后面的数值起着决定性的作用。将三组内容进行合并且让用户自定义，就方便很多，能减少部分多余的操作。
7. 精简的选项描述
一句话能说清楚的就不要用两句话，文字越多、理解成本就越高。在空间有限的下拉区域，选项要尽可能简短，直击核心内容。
9. 不可用选项置灰
当某个选项被系统禁用或用户未达到选择条件时，尽量不要将这些选项隐藏，避免用户从一开始就误认为是内容的残缺或系统本身就不具备某些选项，为后续埋下弊端。
将已存在但不可选择的内容置灰显示，不仅能保持内容的完整性、提醒用户后续可选，还能在某些特殊场景让用户主动激活可选条件，提升用户对产品的使用深度。另外，如果空间资源足够，在附近提示不可选的原因能确保用户使用更顺畅（鼠标悬停在不可选内容，临时提示就是一种不错的方式）。
五、总结
正确的使用下拉菜单既可以保持界面的美观度，还能通过合理的利用空间资源、提高用户选择效率，但切勿滥用、乱用。
关于下拉菜单的使用方法及技巧远不止于此，只要我们在设计前考虑清楚何时用、怎么用、如何更好的使用，再加上后续持续不断的优化、查漏补缺，才能发挥下拉菜单的最大价值。
#专栏作家#
大漠飞鹰；公众号：能量眼球，人人都是产品经理专栏作家。致力于产品需求的驱动、产品体验的挖掘，利用设计的手段为受众用户带来更好的体验，即好看、好用。
本文原创发布于人人都是产品经理，未经许可，禁止转载。
题图来自Unsplash，基于 CC0 协议。
如若转载，请注明出处：https://www.shpfj.com/34450.html
相关推荐
-
小s代言的减肥产品（明星减肥产品推荐）
被称为“塑身女神”的小S曝光减肥食谱，网友称瘦成这样还要减？最近不仅大S开始参加综艺，连小S也开始参加一些综艺了，在《奇遇人生》的第一期，许多人都被节目里的小S疯狂圈粉，因为是真人秀节目，完全把最真实的自己暴露在了大众面前，勇敢又开朗的她让许多人都对她有了一个全新的认识，现在的她虽然已经是个妈妈了，但是她却依旧被称为“塑身女神”，在节目上她的身材可以看出来也是很不错，一点都没有走样。
-
三角肌前束（斜方肌前束）
三角肌前、中、后束锻炼动作大全三角肌前束：(1)直臂前平举：是锻炼锻炼三角肌前束的基本动作，一般采用站姿容易发力和保持平衡，当然也有斜躺靠椅的前平举，器材可以选用杠铃和哑铃。(6)阿诺德推举：因阿诺德.施瓦辛格而得名，这个练习兼有推举和侧平举两个练习的作用，可同时刺激三角肌前束、中束。(2)单臂哑铃侧平举：可以对三角肌一侧孤立的刺激更有效，而且单手侧平举可以应付
-
上海y 瑜伽（上海yoga体验）
瑜伽体验课程，团购优惠太给力了，就在Y瑜伽只要身材管理得当，许多男生都会羡慕我在高考期间也能保持身材。这归功于普拉提瑜伽的帮助。Y瑜伽位于远洋晟庭19楼，是一个非常不错的选择。您好！最近他们推出了抖音团购课程，只要9块9就能享受一节体验课，还能体验两节私教课程，价格只有198元。这家瑜伽馆的老师非常专业，即使是团购课程也会认真指导。新学员和私教课的学生
-
亚裔帅哥（亚洲型男）
型男丨看完了这三位中日韩的40几型男，我才知道亚裔大叔也能帅出天际对于40几的男人来说，长得帅的叫“大叔”，长得不帅的只能是“师傅”了，这是网上的一个段子。对比欧美白人或者黑人，其实亚洲地区，黄皮肤的帅气大叔也是不少的，单单就国内，我们熟知的就有王德顺、张双利这样的“爷爷辈”型男。而今天叶子从中日韩三国中列举出三位40几岁的优质型男“大叔
-
郑多燕（减肥塑形郑多燕）
收藏|哪些运动更适合减肥？多燕瘦创始人郑多燕减肥操了解下假如有一天你胖成200多斤，你会怎么减呢？韩国国家级电视台SBS就发起过一个类似的实验挑战——让教练带200多斤的超重者们减肥。意想不到的是，这个项目没有教练敢来挑战。因为学员超重膝关节十分脆弱、减肥过程不能借助药物、健
-
俯卧撑练胸肌（胸肌训练方法）
怎么通过俯卧撑练出胸肌？遵循3个阶段，练出饱满胸肌#通过俯卧撑如何快速练成胸肌#众所周知，徒手健身是比较灵活的锻炼方式，而俯卧撑是大家都熟悉的锻炼上肢的复合动作，所需场地比较小，在家就能开启锻炼。不要小看俯卧撑这个动作，你可能无法一次性完成30个以上，女生也很难连续完成5个以上。坚持俯卧撑可以收获多个好处，比如：1
-
白小姐四肖选一期期中（白小姐四肖选一期中）
大乐透19054期：上期前区杀号全准，本期绝杀20-30区间(白小姐)体彩大乐透第2019053期奖号：01111926351112，其中前区出现2个小尾奖号：0111，有2个中尾奖号：2635，开出1个大尾奖号：19。上期小尾奖号有2个,小尾奖号开出个数
-
皮拉提斯（改善体态的训练法）
运动纪录：空中皮拉提斯，有效锻炼局部身材进入皮拉提斯的阶段后说真的并不简单，空中皮拉提斯是比较进阶的空中课程而且着重于核心肌力的训练很多学员都是上过的，所以驾轻就熟但我跟好几位同学是第一次虽然有几个难度比较高的动作跟不上，不过Vincent老师真的是相当用心的
-
跑800米的技巧（800米赛跑技巧）
800米长跑训练方法中长跑的跑步技巧有哪些？800米长跑训练方法提高800米最快的方法是跑1000米或1500米，除此之外要多训练肺活量（压扛铃），和腿部力量（深蹲跳），上肢力量也很重要（最后200，尤其是冲刺的时候感受会很深），还有就是摆臂练习，手臂角度在90到120之间。辅助练习：变速跑练习，100米快接100米慢交替进行，距离为10
-
瑜伽垫tpe（环保瑜伽垫）
tpe、pvc、eva傻傻分不清开扒瑜伽垫该如何选每个瑜伽爱好者连瑜伽之前必须买一个东西，瑜伽垫，有没有？每个瑜伽人心中都有一片瑜伽垫，一个合适的瑜伽垫定会让练习瑜伽成为一种绝伦的享受，然而要想找到一款真正适合自己的瑜伽垫却也不容易。目前市面上瑜伽垫的种类有五种：