UI组件 (题乌江亭 杜牧)

本文目录导航：

• UI组件——面包屑最佳实践
• 谷歌优化的 3 种核心类型的面包屑导航
• 面包屑导航怎么做

UI组件——面包屑最佳实践

面包屑在设计中充当导航元素，帮助用户了解当前位置并找到主页路径。

遵循最佳实践，确保预见不一致，构建直观面包屑路径。

面包屑源自格林兄弟童话，尽管故事中使用的是鹅卵石，但这一概念在设计中得到应用。

面包屑不是主要导航形式，只在适当情况下使用。

考虑使用层次结构显示面包屑，避免会话历史，只包含祖先页面的基本级别。

移动设备上，面包屑路径应保持简短。

每个面包屑链接应易于点击，路径间距足够，触摸目标区域至少为1cm X 1cm。

分隔线应模仿运动，遵循语言方向，左到右语言中箭头指向右侧，反之亦然。

对于过长标签，提供工具提示显示全名，或尽量缩短标签。

面包屑作为辅助导航，应避免过于显眼或使用高对比度颜色，遵守颜色对比度要求，使其对所有用户友好。

保持面包屑路径大小和显著性小于主导航。

左对齐面包屑以简化扫描，遵循最常见的布局模式。

如果用户从右向左阅读，应向右对齐。

面包屑的起点应为主页，始终使用主页作为路径起点，帮助用户回溯。

在页面包含其他导航指示时，面包屑路径应作为补充，避免与全局导航冲突。

面包屑导航旨在提供辅助，而非替代或复杂化主要导航系统。

谷歌优化的 3 种核心类型的面包屑导航

面包屑导航是一种帮助用户在网站中导航和理解位置的工具，它允许用户追踪从主页到当前页面的路径。

这种导航方式在优化网站体验和搜索引擎优化（SEO）方面起着重要作用。

以下是三种核心类型的面包屑导航，它们对提高用户体验和SEO效果至关重要。

1. **位置面包屑导航**

位置面包屑导航是最常见的类型，它显示用户在网站结构中的位置，通常以主页为起点。例如，对于暖通空调承包公司或零售店的网站，位置面包屑导航会显示如下路径：

这种导航方式对用户和爬虫都非常有用。

2. **路径面包屑导航**

随着动态、数据库驱动站点的兴起，路径面包屑导航越来越常见。

这类导航显示用户到达当前页面的实际路径，而非相对于主页的层次结构。

以亚马逊为例，它会展示用户在寻找行车记录仪时所采取的路径。

用户可能通过多种方式访问页面，产生大量不同的路径。

这需要导航系统能够适应各种可能的访问路径。

3. **属性或关键字面包屑导航**

这种导航类型使用描述页面的关键字和属性，而不使用页面标题或其他标识符。

它适用于电子商务网站，如Orvis在其产品页面上所采用的面包屑导航，显示产品在整体商店结构中的位置。

例如，在Orvis网站中，用户通过搜索“狗”找到特定产品时，面包屑导航显示该产品属于“狗”类别的一部分，即“狗床”区域。

需要注意的是，使用路径和属性面包屑导航可能会导致重复的导航路径，这在搜索引擎眼中可能被认为是内容“单薄”。

为了优化SEO，应优先考虑基于位置的面包屑导航。

面包屑导航怎么做

面包屑导航的制作方法

面包屑导航是一种网站导航设计，主要用于展示用户当前页面在网站结构中的位置，以及返回上一页面或主页面的路径。以下是制作面包屑导航的简单步骤：

一、确定导航结构

1. 分析网站架构，确定需要展示的页面层级。

2. 设计简洁明了的导航标签，如“首页”、“产品”、“关于我们”等。

二、编写代码实现

1. 在网站代码中添加面包屑导航的位置。

2. 通过编程逻辑判断当前页面，并生成相应的面包屑链接。

3. 确保链接能够正确指向相应的页面，并显示当前页面的层级位置。

三、设计样式

1. 选择与网站风格相匹配的面包屑导航样式。

2. 使用CSS进行样式设计，如字体、颜色、分隔符等。

3. 确保面包屑导航在屏幕不同大小和设备上都能良好显示。

四、测试与优化

1. 在不同浏览器和设备上测试面包屑导航的功能和显示效果。

2. 根据测试结果进行必要的调整和优化，确保面包屑导航的用户体验。

面包屑导航是网站设计中的重要组成部分，它能够帮助用户了解当前所在位置，并提供便捷的返回路径。

通过确定导航结构、编写代码实现、设计样式以及测试与优化等步骤，可以制作出一个实用且符合网站风格的面包屑导航。

这种导航设计能够提升用户的体验，并增加网站的易用性。