如果迷路了,首先想知道的是当前所在位置,以估算到目的地的距离,这就是购物中心提供带“你在这里”指示物的寻路地图的原因。

  浏览网站时,用户也想知道当前所在位置,以计算后续操作。设计人员应采用面包屑导航设计寻路地图,让用户在网站中也能看到带“你在这里”的指示物。

3层或更多

  所有网站都是分层组织内容,内容少的网站层级浅,而内容多的网站层级深。网站层级不少于3的话,应使用面包屑导航。

  仅有2个层级的网站不需要面包屑导航,用户只需从网站主页跳转到下一层级内容,没那么容易迷路。
  而网站内容达到3个层级,用户就有可能迷路,他们在主次层级之间反复跳转,很容易混淆所在位置。

网站主页是第1层级

  面包屑导航的起始点是网站主页,用户访问网站总是开始于主页,因此其为第1层级。用户能够以首页为基准点评估所处位置的层级深度,首先显示首页有助于用户识别网站层级。

  没必要用“主页”命名主页链接,可以使用主页图标或小号的网站标识,这使第1层级更明显,更容易定位,就像电梯里用星号和字母“G”标识建筑的地面层。

用箭头分隔层级,不要用斜线

  设计人员应在面包屑导航中用箭头分隔层级。箭头能指示方向,让导航看起来像是用户所浏览的页面路径。不要用斜线,它只有分隔作用。

面包屑导航的最末层级不用提供链接

  面包屑导航的最末层级是用户当前所在页面,确保导航中该层级的内容仅包含文本,不作为链接使用,否则用户点击时就会感到迷惑。他们会跳转到同一页面,搞不清楚发生了什么变化。用文本标识导航的最末层级,让用户清楚他们所在位置。

突出用户位置

  面包屑导航的最末层级使用文本,其应与之前层级的链接有所不同,让用户能一眼看出所在页面。具体办法是加粗文本,同时其颜色深于链接,或者不同于链接。

面包屑导航的优点

  网站内容不低于3个层级的话,面包屑导航就不是可选项,而是必选项。测试表明,使用面包屑导航只有好处,没有坏处。
  浏览网站时,用户想知道当前页面在网站中的位置,否则就会迷路,浪费时间。使用面包屑导航,有助于用户快速找到目标内容。

原文地址:https://uxmovement.com/navigation/when-you-should-use-a-breadcrumb-navigation/

(翻译)面包屑导航的使用时机相关推荐

  1. 面包屑导航:最佳做法和示例

    面包屑导航通常在设计和开发过程中被忽略. 有些人可能认为它是不必要的,而另一些人可能觉得它的价值太大了. 事实是,面包屑导航将显着提高网站的可用性. 面包屑为用户提供了另一种导航方法,使他们可以看到他 ...

  2. 面包屑导航:最佳实践和范例

    译文出处:http://www.cogu.cn/archives/65 本文翻译自:http://www.hongkiat.com/blog/breadcrumb-navigation-examine ...

  3. css面包屑导航_在CSS3中编写优美的面包屑导航菜单

    本文是我们的" HTML5 / CSS3教程系列"的一部分 -致力于帮助您成为更好的设计师和/或开发人员. 单击此处查看同一系列的更多文章. 导航菜单和链接可能是Web布局中最重要 ...

  4. 浅析面包屑导航对网站SEO优化有哪些作用?

    众所周知,每个优化人员都知道面包屑导航对于网站来说是不可或缺的一部分,面包屑导航就是像面包一样一层一层的导航结构.能够更好的帮助用户在栏目页可以返回网站首页或者点击进入下一层内容页面,提升用户体验好感 ...

  5. php递归面包屑,php可应用于面包屑导航的递归寻找家谱树实现方法

    本文实例讲述了php可应用于面包屑导航的递归寻找家谱树实现方法.分享给大家供大家参考.具体实现方法如下:<?phpecho " ";$area = array(array(& ...

  6. 权限组件(4):给动态菜单增加面包屑导航

    效果图: 一.在初始化权限的时候增加二级菜单的标题和url 这么做是为了在中间件中把二级菜单和具体权限的标题.url都储存起来 rbac/service/init_permission.py from ...

  7. 一行代码搞定WordPress面包屑导航breadcrumb

    有好几位网友在问WordPress面包屑导航breadcrumb怎么操作,网上有些教程是去function文件中定义,其实不用那么复杂,很简单一行代码就能搞定.下面随ytkah一起来看看.如果是单页, ...

  8. react实现汉堡_利用 React 高阶组件实现一个面包屑导航

    什么是 React 高阶组件 React 高阶组件就是以高阶函数的方式包裹需要修饰的 React 组件,并返回处理完成后的 React 组件.React 高阶组件在 React 生态中使用的非常频繁, ...

  9. Laravel Breadcrumbs 自动面包屑导航

    说明 laravel-breadcrumbs 可为你的 Laravel 项目快速定制拥有 Bootstrap 风格的面包屑导航. 本文章由 The EST Group 成员 @Kelvin 撰写, 首 ...

最新文章

  1. CIC滤波器的参数详细方法与应用
  2. Unity3D学习笔记(二) 一些常用的空间函数
  3. Ext2.2系列(50篇)
  4. MATLAB 结构型变量
  5. python elseif用法_python学习笔记(一)
  6. 深度学习的数学 (3)基础函数
  7. 码农小汪-Hibernate学习8-hibernate关联关系注解表示@OneToMany mappedBy @ManyToMany @JoinTable...
  8. remote addr 取到内网ip_内网穿透工具frp
  9. 被约谈后,丰巢道歉并让步了......
  10. 句句真研—每日长难句打卡Day21
  11. JavaScript-2.4 改进的Hello程序,使用div,---ShinePans
  12. win环境的radius服务器搭建
  13. 信鸽推送避免打开多个相同的activity
  14. 能解方程的计算机在线计算,解方程计算器在线计算
  15. R语言使用epiDisplay包的roc.from.table函数可视化临床诊断表格数据对应的ROC曲线并输出新的诊断表(diagnostic table)、输出灵敏度、1-特异度、AUC值等
  16. smartbi 安装教程
  17. ACE+TAO 通信中间件
  18. “云安全+云保护” 谜团技术解析
  19. iOS城市选择器-包含搜索功能
  20. C++学生类和成绩排序

热门文章

  1. 使用domtoimage插件生成图片模糊失真问题
  2. 【漫画】996 ?你以为我是铁打的
  3. 华为防火墙与二层交换机对接配置VLAN上网设置
  4. POI导出Excel:设置字体、颜色、行高自适应、列宽自适应、锁住单元格、合并单元格...
  5. svn: E200002: line 19: Option expected错误解决
  6. 最新的iPhone 各种机型尺寸信息列表(含iPhone 7/8、iPhoneX、iPhone XR、iPhone XS Max)
  7. 论文笔记:主干网络——AlexNet
  8. android 7.1 RIL 获取SIM卡号
  9. 如何查看服务器上的显卡和Python版本信息
  10. 阿里技术官都在读的10本Java实战书籍,Java开发进阶必备书单