UE设计中面包屑：11个针对台式机和移动设备的设计准则

通过包含反映您网站信息层次结构的面包屑来支持寻路。在移动设备上，请避免使用太小的面包屑或将其包裹在多行上。

面包屑是支持寻路的重要导航元素-使用户知道他们在网站层次结构中的当前位置。面包屑是表示当前页面及其“祖先”（父页面，祖父母页面等）的链接的列表，通常一路返回网站首页。自1995年以来，NN / g就一直建议使用面包屑，因为它们为用户提供了许多好处，而用户界面却几乎没有成本。

面包屑在页面顶部通常以全局导航的下方表示为链接的轨迹。主页（或层次结构的根节点）是第一个链接，这些链接通常用符号“>”或“ /”分隔。我们建议使用“>”字符，尽管两者之间没有功能上的差异，并且两者都可以接受。

REI面包屑路径显示了站点的层次结构

REI.com：痕迹  （1）  显示在页面顶部的典型位置，即全局导航栏的下方。线索显示了当前页面在站点层次结构中的位置。痕迹路径中的每个项目都是指向祖先页面的链接；“>”字符分隔面包屑。在此示例中，面包屑跟踪中省略了主页和当前页面，不建议这样做。

如果用户从首页浏览完该页面的所有祖先页面后到达较深的页面，则他们将对站点在信息层次结构中的位置有相当清楚的了解。但是，当他们跳过其中一些级别时（例如，因为他们是通过单击外部链接（例如搜索引擎结果）到达网站的），面包屑将其定向，并帮助他们找到通往其他页面（可能更相关）的方式。

较深的页面通常在相对狭窄的特定主题上显示内容，但是面包屑轨迹可以将用户引导到当前页面的父节点和祖父母节点中的更一般的内容。

在桌面上使用面包屑的准则

1、面包屑不应替换部分中的全局导航栏或本地导航。

面包屑旨在补充其他导航组件，例如延伸到每个页面顶部的全局导航栏或经常在左侧找到的局部导航栏。面包屑增加了但不替代那些主要的导航形式。

包含下拉菜单的异常面包屑

Travelsouthdakota.com显示一条面包屑路径，该路径也可用作部分导航。代替传统的痕迹路径（这是：主页/探索/行程/文化沉浸），痕迹路径包括第1层项目（探索）和父页面（行程）。父页面的链接是一个  下拉菜单，其中包含当前页面的兄弟姐妹（下图）。更好的设计将具有用于本地导航的单独的UI，以使用户能够浏览站点当前部分的横向页面。

2、面包屑应显示站点层次结构中的当前位置，而不是会话历史记录。

面包屑不打算显示的网站上的会话（期间经过页历史一拉浏览器的原生后退按钮）; 它们旨在显示网站的层次结构。我们已经注意到了很多年，但是仍然需要重复。试图显示用户访问过的页面的列表，顺序将变得冗长而混乱，并且重复很多次，并且不会给直接从外部链接访问深层页面的用户带来任何好处，这是面包屑的关键用途之一。

3、对于多层次站点，面包屑应在站点的多层次结构中显示一条路径。

面包屑对多层次站点（其中一页有多个父级）造成固有的张力。在这种情况下，我们不建议在多层次结构中显示两个或更多反映不同路径的面包屑路径，因为它们会使用户感到困惑并在页面顶部占用大量空间。

如果页面有多个不同的父级，请在网站层次结构中标识该页面的规范路径，并在面包屑路径中显示该路径。不要尝试个性化面包屑跟踪，以使其反映网站层次结构中每个用户的个人路径，因为您最终将向搜索引擎发送混合信号。而且，您仍然需要在层次结构中指定一条路径作为来自外部链接的那些访问者的主要路径。

4、将当前页面作为面包屑跟踪中的最后一项包括在内。

5、在面包屑路径中，与当前页面相对应的面包屑不应是链接。

您永远不应该有什么都不做的链接。最后一个面包屑（表示当前页面）不应是链接。为避免混淆用户，最好在视觉上区分当前页面和先前链接的面包屑项，最好使用带下划线的文本或蓝色文本。

面包屑，链接项和未链接项之间没有视觉区别

在英国红十字会网站上，链接的面包屑与紧急情况下的志愿者 项目（正确地不是链接）之间没有视觉上的区别  。

6、面包屑应仅包含网站页面，而不应包含IA中的逻辑类别。

痕迹路径中的每个节点都应该是到祖先页面的链接（如上所述，与当前页面相对应的链接是一个重要的例外）。如果全局导航中的某些子类别标签没有专用的单独页面，则不要在面包屑跟踪中包括这些子类别。

“单击并单击”功能是用户了解面包屑的关键部分，因此所有项目（当前页面除外）都应代表用户可以去的地方。

不包含导航中逻辑类别的面包屑，这些逻辑类别不是自己的独立页面

Newegg.com：全球导航megamenu（顶部）的子类别没有自己的页面，例如，  Commercial Networking  （1）。在“有线网络”页面（底部）上，痕迹  （2）  不包括“ 商业网络” ，因为该子类别没有关联的页面。

7、对于仅具有1或2级深度的平坦层次结构的站点，或结构呈线性的站点，面包屑不是必需的（或无用的）。

对于具有仅1或2个类别级别的层次结构的网站，不需要面包屑作为寻路设备。在这种情况下，请考虑清楚指出页面所在的顶级部分或类别。

具有不需要面包屑的平坦层次结构的网站

麻省理工学院的主要网站具有统一的层次结构，每个部分只有一页。尽管它在页面顶部具有面包屑，但此面包屑不是必需的。在主导航中，页面的位置突出显示。

线性导航站点，无需面包屑

NPR设有一个有关颜色历史的微型站点，该站点被设计为线性体验，用户可以按顺序依次浏览每个页面。该站点的结构是非分层的，因此没有必要（或没有价值）包含面包屑路径。

8、面包屑路径应从首页链接开始。

就像我们的全球导航指南一样，仍然需要链接到首页（标记为Home）。但是，请注意，不建议在全局导航和面包屑路径中都复制Home链接-两者之一都可以。

面包屑，在导航和面包屑中均包含主页链接

俄勒冈州政府网站上有一个面包屑痕迹，但省略了指向主页的链接。但是，在这种情况下，这是可以接受的，因为该站点还在全局导航中包含一个“主页”链接-不必复制该主页链接，但确实需要在两个地方之一中显示它。

在移动设备上使用面包屑的准则

不幸的是，在移动设备上，使用面包屑的成本很快就会使收益不堪重负。

9、不要使用包裹到多行的面包屑。

在移动网站上，面包屑可以快速包装成多行，并在已经拥挤的移动显示器上吞噬宝贵的空间。多行面包屑路径无法很好地说明链条的结构（尤其是某些项目占据了自己的行，而另一些项目可能在一行中有两个或更多链接）

太大的移动网站上的面包屑将页面标题推到首屏之下

REI.com的移动网站使用所以对于导航条，它推动产品的名称很多房地产  折以下，甚至大的移动设备上（在这种情况下，iPhone X）。

10、不要使用太小或太拥挤的面包屑。

一些站点试图使面包屑通过使链接更小或更接近而占用更少的屏幕空间。不幸的是，该解决方案在触摸屏上不起作用：点击目标至少需要1 cm X 1 cm。

11、考虑缩短面包屑路径，使其仅包含最后一个级别。

在某些页面上，指向某个级别的单个面包屑可能是支持主要用户目标所必需的。例如，在一个电子商务网站上，如果用户登陆产品详细信息页面（例如，通过Google搜索），则她可能希望查看同一类别中的其他产品选项以进行比较，因此将面包屑链接到层次结构中的父级可以支持此常见任务。该解决方案避免了漫长而拥挤的面包屑痕迹，而这会吞噬宝贵的移动房地产。

请注意，此建议与准则8冲突，只能在移动设备上进行。在桌面上（有更多空间），始终显示完整记录。

移动式面包屑与台式机面包屑相比，移动式面包屑仅显示层次结构中的最后一层

Bestbuy.com：移动网站（顶部）显示了一条截断的面包屑轨迹  （1），允许访问直接父类别。桌面站点（底部）显示了完整的痕迹  （2）。移动设备上的这种折衷支持某种寻路，但避免占用宝贵的空间。

摘要

面包屑是导航的辅助形式，可帮助用户访问层次结构中附近的内容。当用户通过外部链接到达网站而不是从首页开始时，它们特别有用。确保面包屑路径中的所有项目都是链接，并且随着您逐步进入站点，每个节点都变得更加具体。在移动设备上，面包屑可能会占用太多空间或难以挖掘。如果用户的任务允许，请考虑缩短面包屑路径。