当前位置:首页 > 实用技巧 >

下拉式导航栏的原理是什么(简述响应式导航栏的制作过程)

来源:原点资讯(www.yd166.com)时间:2023-12-06 13:45:51作者:YD166手机阅读>>

编辑导语:下拉菜单的模式在设计中最为常见了,那你有没有依赖下拉菜单呢?本文作者从四个角度进行了全面的梳理与分析,帮助你详细了解下拉菜单的设计,做设计的同学感兴趣就来看看吧。

下拉式导航栏的原理是什么,简述响应式导航栏的制作过程(1)

下拉菜单是在界面设计中很常用的组件,它以下拉的方式同时展示多个标签并帮助用户缩小选择范围,快速满足用户的选择需求,尤其是一些导航,设计师会很依赖下拉菜单的使用。

在UI设计中,虽然经常会使用到下拉菜单,但很多设计师对它并不是很了解,如果过度使用或滥用,也会对用户体验产生负面影响,所以,如何正确的使用下拉菜单就显得非常重要,设计师需要对它有一个更为全面的了解。

那么,如何区分下拉菜单设计的是否合理?到底有哪些利弊?什么场景下需要使用下拉菜单,笔者将从什么是下拉菜单开始,对下拉菜单的构成、类型、使用场景及注意事项进行一步步梳理总结,希望本篇文章对大家有一定的帮助。

一、基本介绍及结构梳理

1. 什么是下拉菜单?

下拉菜单是选项的一种呈现方式,当用户点击某个触发图标/箭头时,会弹出一个项目列表,用户需从中选择一项或多项来满足自己的选择需求。

下拉式导航栏的原理是什么,简述响应式导航栏的制作过程(2)

下拉菜单经常用在表单选项、筛选条件、导航等界面模块中,被触发后弹出的内容包括但不仅限于单选列表、多选列表、子选项、搜索等,内容较多时可能需要上下滚动,真实情况视选项的实际数量而定。

2. 下拉菜单的构成

下拉菜单看起来跟表单中的选项框几乎一致,但在真实的表单页面中,触发表单项后可能是下拉菜单,也可能是弹窗或页面跳转。同理,下拉菜单也会经常用在除表单之外的其他界面模块中,从表面上看跟表单一样,而实际的元素及交互效果则有很大的区别,但本文主要针对表单中的下拉菜单(非导航)作出介绍,有以下十个部分构成:

下拉式导航栏的原理是什么,简述响应式导航栏的制作过程(3)

  1. 标签:告知用户该下拉菜单项需要选择什么内容;
  2. 容器:用于承载选择前的信息提示(占位符)及选择后的内容;
  3. 下拉箭头:提醒用户有可点击的延展项,点击后弹出下拉框,箭头垂直翻转,再次点击箭头或选择内容后复原。另外,部分产品使用到倒三角代替下拉箭头,其作用相同;
  4. 占位符:对标签进行描述或补充,减少用户出错的可能,选择内容后会直接替换占位符;
  5. 下拉框(容器):用于承载下拉选项的容器,点击下拉箭头后会弹出下拉框;
  6. 选项列表:供用户选择的内容;
  7. 分隔线:当列表中选项较多时,添加分隔线能更好的区分每个单独的选项(视情况而定);
  8. 已选中:弹出下拉菜单后,通常会用单选/复选框、主体色、加粗等样式提示用户默认选项或已选中的内容;
  9. 滚动条:下拉框的高度会有一个最大值,当选项列表高度超过下拉框的高度时,就会出现滚动条;
  10. 系统反馈:用户未操作必填内容就提交任务时,系统会给予提示。

3. 下拉菜单的几种状态

不管是出于系统问题还是用户的原因,下拉菜单能否操作或有什么限制,都应该给予用户及时的反馈。虽然存在多种交互状态且在视觉上都比较相似,但在设计时需要明显的区分开来,常见的状态有默认、悬停、聚焦、完成、禁用和错误提示,下面一起来看看设计师如何通过不同的视觉样式反馈给用户。

1)默认状态

即初始化状态,操作之前的样式,用户可从标签内容中获取该下拉菜单的主题内容,通过下拉箭头预示该内容的可操作性。对于部分选项较少下拉项,系统会默认选择一个与该用户最匹配的、或在目标用户群体中选择率最高的一项作为默认选项,以此减少用户的操作次数,降低任务流程的操作成本。

下拉式导航栏的原理是什么,简述响应式导航栏的制作过程(4)

栏目热文

导航图具有模块菜单的功能(嵌入式导航怎么升级地图)

导航图具有模块菜单的功能(嵌入式导航怎么升级地图)

系统登录巧帮手三易通七彩店家乐美萍易售乐银豹总结基本上通过账号及密码就可以登录,比较方便,巧帮手还增加了账号保存功能 方...

2023-12-06 14:22:20查看全文 >>

常用视图基本操作有哪几种(基本视图主要有哪几种视图)

常用视图基本操作有哪几种(基本视图主要有哪几种视图)

Word里常用的视图有哪些?文档视图详解教程word文档菜单,选中视图菜单:该菜单下方功能区,有视图和沉浸式2个模块。如...

2023-12-06 13:54:26查看全文 >>

四种视图模式图解(五种视图名称及特点)

四种视图模式图解(五种视图名称及特点)

Excel 共有4种不同的视图模式,分别为普通视图、分页预览视图、全屏显示视图和页面布局视图。不同的视图模式有不同的显示...

2023-12-06 14:26:22查看全文 >>

布局空间导航器支持哪种视图(导航哪种视图直观)

布局空间导航器支持哪种视图(导航哪种视图直观)

3D布局设计EPLAN Pro Panel用于选择性从 EPLAN 项目、EPLAN 部件管理或 EPLAN Data ...

2023-12-06 13:43:32查看全文 >>

五种视图模式特点(四种视图模式及作用)

五种视图模式特点(四种视图模式及作用)

Word软件一共有5种视图模式,每种模式都能给用户带来不同的排版要求,下面就跟随小编一起来认识一下吧!!第一步:打开WP...

2023-12-06 13:55:52查看全文 >>

视图中的导航窗格在哪(视图里导航窗格没显示目录)

视图中的导航窗格在哪(视图里导航窗格没显示目录)

本文包括有关在Microsoft Word 2019、2016和Office 365中使用导航窗格移动页面以及复制和粘贴...

2023-12-06 13:46:19查看全文 >>

视图选项卡有哪些命令(视图选项卡分为哪几种)

视图选项卡有哪些命令(视图选项卡分为哪几种)

8.视图选项卡Word2016版本中有个选项卡叫做【视图】选项卡,这个选项卡可以灵活调整页面的各种形式,还可以新建窗口,...

2023-12-06 14:00:22查看全文 >>

比亚迪e2保险丝盒图解(比亚迪e2保险盒图解)

比亚迪e2保险丝盒图解(比亚迪e2保险盒图解)

比亚迪E2 LED大灯常见故障的检修方法。作为网约车市场的主流车型,比亚迪E2的保有量较大,因此其大灯故障也较为常见。本...

2023-12-06 14:29:13查看全文 >>

比亚迪仪表保险盒图解(比亚迪保险丝位置图)

比亚迪仪表保险盒图解(比亚迪保险丝位置图)

2018款比亚迪唐前脸剧2018款比亚迪唐车尾剧照2018款比亚迪唐仪表工作台2018款比亚迪唐铭牌在右侧B柱上2018...

2023-12-06 14:13:50查看全文 >>

比亚迪g6右反光镜电机一直转(比亚迪g6防盗灯一直闪仪表没反应)

比亚迪g6右反光镜电机一直转(比亚迪g6防盗灯一直闪仪表没反应)

本文为汽车之家原创文章,作者王宛霖,转载请注明,欢迎大家转发至朋友圈。比亚迪,作为中国汽车比较强势的品牌之一,想说爱你,...

2023-12-06 13:52:30查看全文 >>

文档排行