For investors
股价:
5.36 美元 %
认识达内从这里开始
认真做教育 专心促就业
掌握不同的导航设计样式能够让网页设计的作品展示更加丰满有条理，本文我们一起来了解一下，常见的
几种导航设计组件都有哪些样式吧。
导航菜单Menu
导航菜单可以说是一个网站的核心枢纽，用户可以通过它清楚地知道自己所处的位置，以及其他页面的跳转
指向。常见的导航菜单有顶导航和侧导航，顶导航能够提供全局性的指引，而侧导航则能够提供更多的层级来
满足复杂的网站架构。
考虑到B端后台一般都具有复杂的层级架构，所以推荐优先使用侧边导航。即使产品初期层级划分较简单，侧
导航也因为它的拓展性强成为不二的选择。而顶导航可以做为层级补充，在层级较多时添加。
需要注意的是，侧边导航一般分两级，至多三级，但是折叠隐藏一级即可。
标签页Tabs
标签页常用在内容区域的顶部，用以区分内容上有关联但属于不同类别的模块，比如订单列表的“进行中/已
完成/已关闭”。
如果无法判断模块之间在内容上是否有关联，那就在导航菜单Menu无法再进行分级时，再使用标签页Tabs在
内容区域进行下一层分级。
标签页Tabs中还有一种很特殊的形式是单选框Radio的按钮形式，类似于iOSHIG中的分段控件，一般用于比
标签页Tabs更次一级的分类。
下拉菜单Dropdown
下拉菜单用于将一些次要功能隐藏收纳起来，以保持页面整体的简洁。常见的就是头像昵称处展开的个人中
心，一般账号详情、设置、退出登录都会收纳在此。
此外，当页面中可操作内容过多时，也可以使用下拉菜单。比如列表中对每项内容的“编辑/删除“操作。
面包屑Breadcrumb
面包屑导航用于告知用户到达当前页面的路径，以及便于他们快速向上返回。常用在不新起页面的子级内容
中，比如查看列表中某一项的详情时，在详情页面的顶部会有一个面包屑导航以便于返回列表页。
分页Pagination
分页用于数据量较多时分解数据，常见于长列表的分隔。分页主要的作用就是可以提高列表加载的效率(一次
只加载一页的内容)。
除了常见的翻页器分页方式，还有从移动端衍生过来的滑动分页(花瓣也是这种分页方式)，不过这种分页形式
一般用于以图片为主的列表，不适用于一般的内容列表。当然，这种分页形式超出了导航的范畴，只是说到分
页顺带提一下～
需要注意的是，在设计列表页面的时候，很容易忽略分页Pagination。因为在移动端往往是没有这个组件的(
移动端一般是滑动翻页)，所以我们在做图时要格外重视。
以上就是本文为大家分享的关于页面导航设计的多种样式，希望对网页设计的小伙伴们有所帮助。
< 上一篇：为什么建议你学习编程要从web开始学起?
下一篇：2019年招聘排名前十的IT技能是哪些？ >
2019-06-26
免费试听课程
- 全部课程
- IT课程
- 设计课程
- 运营课程
4578
最新开班时间
- 北京
- 上海
- 广州
- 深圳
- 南京
- 成都
- 武汉
- 西安
- 青岛
- 天津
- 杭州
- 重庆
- 哈尔滨
- 济南
- 沈阳
- 合肥
- 郑州
- 长春
- 苏州
- 长沙
- 昆明
- 太原
- 无锡
- 石家庄
- 南宁
- 佛山
- 珠海
- 宁波
- 保定
- 呼和浩特
- 洛阳
- 烟台
- 运城
- 潍坊
- 开课名称
- 开班时间
- 抢座
- 咨询
- 开课名称
- 开班时间
- 抢座
- 咨询
-
- Java全链路开发
- 11月27日
- 火热抢座中
- 立即咨询
- 云计算全栈开发
- 11月27日
- 火热抢座中
- 立即咨询
-
- 网络安全工程师
- 11月27日
- 火热抢座中
- 立即咨询
- 人工智能工程师
- 11月27日
- 火热抢座中
- 立即咨询
-
- 数据分析与商业智能
- 11月27日
- 火热抢座中
- 立即咨询
- C++物联网工程师
- 11月27日
- 火热抢座中
- 立即咨询
-
- Web全栈开发
- 11月27日
- 火热抢座中
- 立即咨询
- 软件测试工程师
- 11月27日
- 火热抢座中
- 立即咨询
-
- AI大模型全栈工程师
- 11月27日
- 火热抢座中
- 立即咨询
- 鸿蒙原生应用开发
- 11月27日
- 火热抢座中
- 立即咨询
-
- 智能职场办公
- 11月27日
- 火热抢座中
- 立即咨询
- VFX商业视效设计
- 11月27日
- 火热抢座中
- 立即咨询
-
- AGI商业设计变现
- 11月27日
- 火热抢座中
- 立即咨询
- UID全链路设计
- 11月27日
- 火热抢座中
- 立即咨询
-
- 新媒体电商运营
- 11月27日
- 火热抢座中
- 立即咨询
-
- Java全链路开发
- 11月27日
- 火热抢座中
- 立即咨询
- 云计算全栈开发
- 11月27日
- 火热抢座中
- 立即咨询
-
- 网络安全工程师
- 11月27日
- 火热抢座中
- 立即咨询
- C++物联网工程师
- 11月27日
- 火热抢座中
- 立即咨询
-
- Web全栈开发
- 11月27日
- 火热抢座中
- 立即咨询
- 软件测试工程师
- 11月27日
- 火热抢座中
- 立即咨询
-
- AI大模型全栈工程师
- 11月27日
- 火热抢座中
- 立即咨询
- 鸿蒙原生应用开发
- 11月27日
- 火热抢座中
- 立即咨询
-
- 智能职场办公
- 11月27日
- 火热抢座中
- 立即咨询
- VFX商业视效设计
- 11月27日
- 火热抢座中
- 立即咨询
-
- AGI商业设计变现
- 11月27日
- 火热抢座中
- 立即咨询
- UID全链路设计
- 11月27日
- 火热抢座中
- 立即咨询
-
- 新媒体电商运营
- 11月27日
- 火热抢座中
- 立即咨询
-
- 云计算全栈开发
- 11月27日
- 火热抢座中
- 立即咨询
- 网络安全工程师
- 11月27日
- 火热抢座中
- 立即咨询
-
- C++物联网工程师
- 11月27日
- 火热抢座中
- 立即咨询
- Web全栈开发
- 11月27日
- 火热抢座中
- 立即咨询
-
- 软件测试工程师
- 11月27日
- 火热抢座中
- 立即咨询
- AI大模型全栈工程师
- 11月27日
- 火热抢座中
- 立即咨询
-
- 鸿蒙原生应用开发
- 11月27日
- 火热抢座中
- 立即咨询
- 智能职场办公
- 11月27日
- 火热抢座中
- 立即咨询
-
- VFX商业视效设计
- 11月27日
- 火热抢座中
- 立即咨询
- AGI商业设计变现
- 11月27日
- 火热抢座中
- 立即咨询
-
- UID全链路设计
- 11月27日
- 火热抢座中
- 立即咨询
- 新媒体电商运营
- 11月27日
- 火热抢座中
- 立即咨询
-
- Java全链路开发
- 11月27日
- 火热抢座中
- 立即咨询
- 网络安全工程师
- 11月27日
- 火热抢座中
- 立即咨询
-
- 数据分析与商业智能
- 11月27日
- 火热抢座中
- 立即咨询
- C++物联网工程师
- 11月27日
- 火热抢座中
- 立即咨询
-
- Web全栈开发
- 11月27日
- 火热抢座中
- 立即咨询
- 软件测试工程师
- 11月27日
- 火热抢座中
- 立即咨询
-
- AI大模型全栈工程师
- 11月27日
- 火热抢座中
- 立即咨询
- 鸿蒙原生应用开发
- 11月27日
- 火热抢座中
- 立即咨询
-
- 智能职场办公
- 11月27日
- 火热抢座中
- 立即咨询
- VFX商业视效设计
- 11月27日
- 火热抢座中
- 立即咨询
-
- AGI商业设计变现
- 11月27日
- 火热抢座中
- 立即咨询
- UID全链路设计
- 11月27日
- 火热抢座中
- 立即咨询
-
- 新媒体电商运营
- 11月27日
- 火热抢座中
- 立即咨询
-
- 云计算全栈开发
- 11月27日
- 火热抢座中
- 立即咨询
- 网络安全工程师
- 11月27日
- 火热抢座中
- 立即咨询
-
- C++物联网工程师
- 11月27日
- 火热抢座中
- 立即咨询
- Web全栈开发
- 11月27日
- 火热抢座中
- 立即咨询
-
- 软件测试工程师
- 11月27日
- 火热抢座中
- 立即咨询
- AI大模型全栈工程师
- 11月27日
- 火热抢座中
- 立即咨询
-
- 鸿蒙原生应用开发
- 11月27日
- 火热抢座中
- 立即咨询
- 智能职场办公
- 11月27日
- 火热抢座中
- 立即咨询
-
- VFX商业视效设计
- 11月27日
- 火热抢座中
- 立即咨询
- AGI商业设计变现
- 11月27日
- 火热抢座中
- 立即咨询
-
- UID全链路设计
- 11月27日
- 火热抢座中
- 立即咨询
- 新媒体电商运营
- 11月27日
- 火热抢座中
- 立即咨询
预约申请试听课
开设课程
开课城市
友情链接
Copyright © 2024 Tedu.cn All Rights Reserved 京ICP备08000853号-56 京公网安备 11010802029508号达内时代科技集团有限公司 版权所有
注：学员信息+企业信息均来自达内教育内部CRM系统真实统计，非宣传使用。
课程适用人群：成人
400-996-5531
lihm@tedu.cn
