网站设计:面包屑是作为辅助和补充的导航方式,它能让用户知道在网站或应用中所处的位置并能方便地回到原先的地点。很多网站建设公司在建站之初就采用了面包屑导航做为网站产品线的标准配置,现在被越来越多的行业网站所认可及采用。

  一、面包屑导航的基础:

  1.基于用户所在的层级位置。基于位置的面包屑用于告知用户在当前网站中所在的结构层级。用在具有多级导航中。

  3.基于用户的足迹。显示用户浏览的轨迹,面包屑之间没有明显的层级关系,只是展示用户从那个级别过来的。这种面包屑在一级导航方案不明确的网站适合,其他情况不建议采用。

  二、 面包屑的好处:

  1.面包屑作为用户寻找路径的一种辅助手段,能方便他们定位和导航。

  2.面包屑可以减少的用户返回上一级页面的所需的操作次数。

  3.临时性,动态性,占用屏幕空间小,干扰性小。

  4.降低网站访问者的总体跳出率。

  当用户从别处链接到网页,或者从搜索引擎查找到网页,则面包屑的存在能帮助用户快速了解当前的层级位置,并引导用户查看网站的其余部分,减少了看完直接跳走的用户数量。

  三、 面包屑的使用前提及设计规范1. 面包屑的使用前提:存在大量的分类目录、在一些引导性的流程操作或者软件安装进程中,面包屑也常被用来指示当前以及剩余的操作步骤、层次简单的页面中一般 不使用面包屑,但是当面包屑能显着帮助到浏览并提高他们定位能力时,也建议采用面包屑。

  2. 面包屑的设计规范:最常采用的面包屑的样式:横向的文字链接,由大于号>分开。这个符号也暗示了它们之间的层次关系。根据你的用户的认知及专业水平,在有必要的情况下,可以在面包屑父子级之间增加下划线以告诉用户这里是可以点击的。

  3.面包屑的位置。通常出现在页面的左上或者右上部分,而且主要是在导航下面或内容区的上面。

  4.面包屑大小。面包屑是一种辅助导航,在页面中不应该起支配作用。面包屑和主导航相比至少要比较小、或不太突出。这样的大小是最合适的了!

参见网址:http://www.chinaz.com/web/2014/1124/374939_2.shtml

转载于:https://www.cnblogs.com/yih342/p/4740263.html

网站设计中面包屑导航条的使用和设计相关推荐

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

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

  2. 什么是面包屑导航,它对SEO的影响有哪些?

    众所周知,面包屑导航设计思路来源于一则童话故事,在不小心迷失方向后,主人公利用沿途撒下的面包屑,顺利的找到回家的路,这就是面包屑导航的原型. 它几乎是所有优秀网站的重要组成部分,不仅可以让访客清晰的知 ...

  3. (翻译)面包屑导航的使用时机

      如果迷路了,首先想知道的是当前所在位置,以估算到目的地的距离,这就是购物中心提供带"你在这里"指示物的寻路地图的原因.   浏览网站时,用户也想知道当前所在位置,以计算后续操作 ...

  4. html怎么优化导航条,seo优化教程seo技巧:网站html面包屑导航栏代码

    对于seo优化的内容在很由心seo百家号中早就和大家共享资源了很多,也不知道大家重要关心的seo优化实例教程seo技巧是什么呢?今天很从惦记着了很久准备充分和大家共享资源一个网站导航以及网站html面 ...

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

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

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

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

  7. bootstrap中分页、面包屑导航、列表组、卡片、下拉菜单、折叠

    分页: 分页功能是当遇到数据很多时,如果都放到一个页面上,那么找起来很不方便,而且不利于性能.此时采用分页功能就能很好的优化用户体验,可是如果自己开发分页功能,那么就会影响开发效率,bootstrap ...

  8. 夺命雷公狗ThinkPHP项目之----企业网站25之网站前台面包屑导航URL的完善

    如果想取出面包屑导航的url那么就必须在model层里面进行多取一个了: <?phpnamespace Home\Model;use Think\Model;class CategoryMode ...

  9. 网站面包屑导航对SEO优化重要性

    面包屑导航对SEO优化重要性.面包屑导航对于SEO优化来说是非常重要的,不仅可以解决一些收录不理想的问题,还能在导航上布局需优化的关键词,面包屑导航还可以帮助搜索引擎抓取到网站更多页面.今天小编主要分 ...

  10. 后台——侧边和面包屑导航栏设计与实现方案

    一.功能描述 后台管理系统最重要的功能之一无疑是导航的设计,不管是侧边导航栏还是头部面包屑导航栏,导航与路由如何去匹配是开发人员需要去考虑的问题.点击侧边导航栏的某一项可以跳转到当前页面的路由,头部面 ...

最新文章

  1. AI设计的新启发 | 什么是用户体验中台?
  2. 简单理解kafka---入门
  3. android 自动挂断,[转]android 来电自动接听和自动挂断
  4. JavaScript(七)—— BOM 浏览器对象模型
  5. 最早将于Q3季度发布,小米12至尊版将搭载骁龙8 Plus
  6. java 父类构造函数_Java基础系列 - 子类继承父类,调用父类的构造函数
  7. Spring Security Oauth2 解析jwt
  8. 2021年的电商,要怎么做,才能赚钱呢?
  9. Spark提交任务参数详解
  10. numpy 中的nan和常用的统计方法
  11. 怎么批量重命名文件夹?
  12. 数据保护/磁盘列阵RAID保护 IP段103.103.188.xxx
  13. 第一章 SQL中使用的符号
  14. 企业做CMMI认证有什么用?
  15. python篇 深拷贝与浅拷贝
  16. java动态创建代理对象
  17. 优酷youku 1080P 视频下载方法
  18. 开源案例:Spring Boot + Vue 的音乐网站
  19. 国标BAL 13-3铝白铜棒 BAL 13-3性能
  20. 黄佳《零基础学机器学习》chap2笔记

热门文章

  1. fisco bcos DagTransferUser.java 源码解析阅读注释
  2. thinkphp5引入调用外部类
  3. mysql处理emoji表情_mysql支持emoji表情存取的解决方案
  4. 帆软报表多行多条数据写入表_超多种类的报表模板,填上数据就能用,全拿走!...
  5. mybatisplus自动填充时间出现的问题
  6. MySQL常用语句、连接MySQL格式:mysql-h主机地址-u用户名-p用户密 (详细篇 修改版)
  7. mysql 慢查询及深入调优
  8. 十八、JAVA基本数据类型的包装类
  9. 服务应用突然宕机了?别怕,Dubbo 帮你自动搞定服务隔离!
  10. JQuery 实现表格数据行上移与下移效果