编辑导语:下拉菜单的模式在设计中最为常见了,那你有没有依赖下拉菜单呢?本文作者从四个角度进行了全面的梳理与分析,帮助你详细了解下拉菜单的设计,做设计的同学感兴趣就来看看吧。
下拉菜单是在界面设计中很常用的组件,它以下拉的方式同时展示多个标签并帮助用户缩小选择范围,快速满足用户的选择需求,尤其是一些导航,设计师会很依赖下拉菜单的使用。
在UI设计中,虽然经常会使用到下拉菜单,但很多设计师对它并不是很了解,如果过度使用或滥用,也会对用户体验产生负面影响,所以,如何正确的使用下拉菜单就显得非常重要,设计师需要对它有一个更为全面的了解。
那么,如何区分下拉菜单设计的是否合理?到底有哪些利弊?什么场景下需要使用下拉菜单,笔者将从什么是下拉菜单开始,对下拉菜单的构成、类型、使用场景及注意事项进行一步步梳理总结,希望本篇文章对大家有一定的帮助。
一、基本介绍及结构梳理1. 什么是下拉菜单?
下拉菜单是选项的一种呈现方式,当用户点击某个触发图标/箭头时,会弹出一个项目列表,用户需从中选择一项或多项来满足自己的选择需求。
下拉菜单经常用在表单选项、筛选条件、导航等界面模块中,被触发后弹出的内容包括但不仅限于单选列表、多选列表、子选项、搜索等,内容较多时可能需要上下滚动,真实情况视选项的实际数量而定。
2. 下拉菜单的构成
下拉菜单看起来跟表单中的选项框几乎一致,但在真实的表单页面中,触发表单项后可能是下拉菜单,也可能是弹窗或页面跳转。同理,下拉菜单也会经常用在除表单之外的其他界面模块中,从表面上看跟表单一样,而实际的元素及交互效果则有很大的区别,但本文主要针对表单中的下拉菜单(非导航)作出介绍,有以下十个部分构成:
- 标签:告知用户该下拉菜单项需要选择什么内容;
- 容器:用于承载选择前的信息提示(占位符)及选择后的内容;
- 下拉箭头:提醒用户有可点击的延展项,点击后弹出下拉框,箭头垂直翻转,再次点击箭头或选择内容后复原。另外,部分产品使用到倒三角代替下拉箭头,其作用相同;
- 占位符:对标签进行描述或补充,减少用户出错的可能,选择内容后会直接替换占位符;
- 下拉框(容器):用于承载下拉选项的容器,点击下拉箭头后会弹出下拉框;
- 选项列表:供用户选择的内容;
- 分隔线:当列表中选项较多时,添加分隔线能更好的区分每个单独的选项(视情况而定);
- 已选中:弹出下拉菜单后,通常会用单选/复选框、主体色、加粗等样式提示用户默认选项或已选中的内容;
- 滚动条:下拉框的高度会有一个最大值,当选项列表高度超过下拉框的高度时,就会出现滚动条;
- 系统反馈:用户未操作必填内容就提交任务时,系统会给予提示。
3. 下拉菜单的几种状态
不管是出于系统问题还是用户的原因,下拉菜单能否操作或有什么限制,都应该给予用户及时的反馈。虽然存在多种交互状态且在视觉上都比较相似,但在设计时需要明显的区分开来,常见的状态有默认、悬停、聚焦、完成、禁用和错误提示,下面一起来看看设计师如何通过不同的视觉样式反馈给用户。
1)默认状态
即初始化状态,操作之前的样式,用户可从标签内容中获取该下拉菜单的主题内容,通过下拉箭头预示该内容的可操作性。对于部分选项较少下拉项,系统会默认选择一个与该用户最匹配的、或在目标用户群体中选择率最高的一项作为默认选项,以此减少用户的操作次数,降低任务流程的操作成本。