网页中为你指路的面包屑到底应当怎么使用--转载

本文探讨了面包屑在网站设计中的应用,分析了其在不同结构网站中的适用性,介绍了基于位置、路径和属性的三种类型,并提供了设计面包屑导航的最佳实践。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

https://www.uisdc.com/breadcrumbs-for-websites-design
什么时候使用面包屑?

是否要在网站中使用面包屑,主要取决于网站的结构。看看你的网站地图或者整体的结构图,分析使用面包屑能否提高用户在网站内部不同类别、目录下导航是否方便:

·当你的网站内拥有分类明晰、组织明确的多层次线性结构的时候,你应当使用面包屑。比如一个拥有种类繁多产品的电子商务网站,面包屑就相当有用。
·当网站不具备逻辑清晰的层次结构的时候,就不要使用面包屑。

面包屑的类型
面包屑是基于网站的逻辑结构而存在的导航组件,它可以基于位置、路径来展示,也可以基于属性而存在。

基于位置的面包屑

基于位置的面包屑设计通常都能很好的反映网站的结构特征。它们直接将网站的层次结构展现在访客面前,其中包含多个层级(级别通常超过2层)。这种层级展示性的面包屑对于从外部来源(比如搜索引擎)进入网站的用户而言,具有明显的指引性作用。

基于路径的面包屑
通常也被称为“历史足迹”,它展现出来的并非是网站结构,而是访客抵达特定页面的完整路径。这种面包屑路径并非是静态的,而是动态生成的。基于路径的面包屑有时候会对用户有所帮助,但是有的时候还是会让用户感到迷惑——有的用户浏览网站的时候浏览路径过于天马行空,这种基于路径的面包屑会帮助他们记录,无需翻看历史,也不无需使用浏览器的返回按钮来返回特定位置。另外,这种基于路径的面包屑对于一次就抵达特定位置的用户而言毫无用处。

基于属性的面包屑
这类基于属性的面包屑常见于电子商务类网站,产品常常基于类别和属性而组织到不同的子目录中,基于属性的分类让用户更容易理解产品和产品之间的关系,提供了更多不同的浏览路径。

就像 TM Lewin 的这个页面,面包屑展现出的是特定页面对应产品,而产品是按照某个属性来组织的:

层级还是历史?

根据实际经验,绝大多数的情况下,面包屑还是适合展现层级机构而非浏览历史。因此,基于位置和属性的面包屑应用更加广泛,基于路径的面包屑相对少见的多。

面包屑导航最佳实践

当你开始设计面包屑导航的时候,应当谨记下面的事情:

1、不要使用面包屑来替代网页主要的导航系统
面包屑只是一个辅助导航系统,它无法替代主要的导航系统。请记住,它是仅仅是为了用户方便的次要选项,用来抵达其他层级的快速定位链接系统。

2、不要将当前页链接加到面包屑中
面包屑的最后一个层级是当前的页面,而这一项在面包屑中是不应该加上链接的,因为它只起到展示定位的作用,没有任何意义。

3、使用分隔符
在面包屑中,用来分隔不同层级最常见的是大于符号(>),常见的使用方法是“父类别 > 子类别”。当然,分隔符的使用并不拘泥于这一种,有使用箭头(→)的,还有使用书名号(»)的,也有使用斜杠(//)的。使用哪种分隔符通常取决于整体风格和设计师的喜好。

4、选择合适的尺寸和间距
在设计的时候应当仔细考虑尺寸和间隔大小,不同的面包屑层级之间应当有足够的间距,确保用户能够识别。当然你也不希望面包屑占据页面太多的空间,如果面包屑比顶部导航还要大,看起来就非常尴尬了。

5、不要让它成为视觉焦点
面包屑本身是一个辅助导航,如果使用过于花哨的字体和醒目的色彩,会使得它显得喧宾夺主,过于抓人眼球。它不应该是浏览过程中用户的视觉焦点。下面的面包屑设计并不差,但是它太过于醒目,甚至比顶部导航还能引起用户注意力。

Google 的面包屑设计并不抢眼,但是用户依然能够很好的使用它。

6、不要在移动端页面上使用面包屑
如果你觉得自己的移动端页面上要使用面包屑的话,那就意味着你的移动端网页设计出现问题了:可能是网站太复杂(嵌套层级过深),而这样一来,就不符合移动端的使用场景了。为了解决问题,你应当试图简化整个体系,确保面包屑不会出现在手机上。

结语
面包屑让用户可更加便捷地浏览整个网站,回溯到上级页面,寻找相关的产品,它对于整个网站结构是有意义的。它的功能并不复杂,增加易用性是它的主要作用,所以千万不要将面包屑复杂化。

### 如何在 Pure-Admin 中实现混合菜单并添面包屑导航 Pure-Admin 是一款基于 Vue 3 和 Element Plus 的现代化管理后台框架,支持多种设备适配,并提供了丰富的功能模块[^4]。为了实现在混合菜单中添面包 crumbs 导航的功能,可以按照以下方法操作。 #### 菜单与面包屑的基础原理 在 Vue Router 中,`<router-view>` 组件负责渲染当前匹配到的视图组件,而 `meta` 字段则允许开发者自定义额外的信息传递给路由对象。通过设置 `meta.title` 或其他字段,可以在面包屑导航中动态显示路径名称[^5]。 以下是具体实现方式: --- #### 修改路由配置文件 在路由配置中为每个子路由增 `meta` 属性,用于存储面包屑所需的标题和其他元数据信息。 ```javascript const routes = [ { path: '/', component: () => import('@/layout/Index.vue'), redirect: '/dashboard', children: [ { path: 'dashboard', component: () => import('@/views/dashboard/index.vue'), name: 'Dashboard', meta: { title: '仪表盘', icon: 'icon-dashboard' } }, { path: 'settings', component: () => import('@/views/settings/index.vue'), name: 'Settings', meta: { title: '设置中心', icon: 'icon-settings' } } ] } ]; ``` 上述代码片段展示了如何利用 `meta` 对象来保存每条路由对应的标题和图标信息。 --- #### 创建 BreadCrumb 组件 创建一个新的 Vue 组件命名为 `Breadcrumb.vue` ,此组件会读取当前激活的路由链表并通过计算属性生成相应的面包屑列表项。 ```vue <template> <el-breadcrumb separator="/"> <transition-group name="breadcrumb"> <el-breadcrumb-item v-for="(item, index) in levelList" :key="index">{{ item.meta.title }}</el-breadcrumb-item> </transition-group> </el-breadcrumb> </template> <script lang="ts"> import { defineComponent, ref, watchEffect } from 'vue'; import { useRoute } from 'vue-router'; export default defineComponent({ setup() { const route = useRoute(); let levelList = ref([]); function getBreadcrumb() { let matched = route.matched.filter(item => item.meta && item.meta.title); levelList.value = matched; } watchEffect(() => { getBreadcrumb(); }); return { levelList }; } }); </script> ``` 该脚本部分实现了监听路由变化事件,并自动更新面包屑展示的内容。 --- #### 将 Breadcrumb 插入页面布局 最后一步是在全局布局文件(通常是 `Layout.vue` 文件)里引入刚才制作好的 `Breadcrumb.vue` 并放置于合适的位置上。 ```html <!-- layout/Layout.vue --> <div class="app-container"> <!-- 头部区域 --> <header>...</header> <!-- 主体内容区 --> <main> <!-- 面包屑位置 --> <Breadcrumb /> <!-- 动态载的具体页面 --> <div class="content-wrapper"> <router-view /> </div> </main> <!-- 底部版权说明等 --> <footer>...</footer> </div> ``` 这样就完成了整个流程的设计与编码工作。 --- ### 总结 以上就是在 Pure-Admin 框架下完成混合菜单的同时面包屑导航的方法介绍。主要涉及到了对现有路由系统的扩展以及新增独立的小型功能性组件两大部分的工作内容][^[^45]。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值