网站建设
当前位置:主页 > 建站资讯 > 网站建设 >
其他如何设计面包屑导航? 尝试这些新想法
发布日期:2021-04-06 阅读次数: 字体大小:

大家好,我的名字是clippp。 我今天带给您的文章是“面包屑”导航。 面包屑的有用之处在于,它使用户可以更快地访问更高级别的页面,而不必诉诸于浏览器的“后退”按钮或顶级导航栏。
2021年第34份额
面包屑被用作辅助和补充导航方法,它使用户可以知道他们在网站或应用程序中的位置,并允许用户快速访问所需的路径。
与台式机网页相比,如今移动网页的尺寸已经很小。 如何设计面包屑导航以更好地满足移动用户的需求? 让我们看一下这种研究经验?

其他如何设计面包屑导航? 尝试这些新想法


不完整的面包屑导航的原因
将完整的面包屑路径放在移动界面中是一定的挑战,但应避免使用一种情况是 不提供任何面包屑导航。 例如,www.www.jianzhanlong.com的产品页面上没有面包屑,移动和台式机站点应免于这种情况。

其他如何设计面包屑导航? 尝试这些新想法


移动和台式机测试均表明,面包屑导航可帮助用户了解其所在位置,并为其提供清晰的内容层次结构。 在测试过程中观察到的另一个问题是缩短了面包屑路径并从导航中删除了某些内容级别。

其他如何设计面包屑导航? 尝试这些新想法


当痕迹导航路径不完整时,这将增加用户做出错误决定的风险,因为他们不知道所呈现的导航并不代表完整的站点结构。

其他如何设计面包屑导航? 尝试这些新想法


避免面包屑路径过长的两种方法
由于级别过多,许多站点无法在产品页面上显示完整的面包屑导航。 经过测试后,有两种方法可以避免路径过长。
避免过度分类
过于详细或重复的分类将增加面包屑导航的长度。 例如,H&M的产品页面过于繁琐地划分服装类别,甚至导航中也会出现重复的内容。 超过50%的电子商务网站存在过度分类的问题。

其他如何设计面包屑导航? 尝试这些新想法


取消主页和产品页面的导航路径
取消在移动终端上显示面包屑主页和产品页面是缩短导航路径的合理方法,因为在大多数网站中,我们单击 网站徽标。 您可以跳到主页。 产品页面通常会显示更多内容,取消显示会大大缩短导航路径并减少页面顶部的混乱。
例如,在HP的产品页面中,主页和产品页面的标
题出现在面包屑中,从而导致页面上的导航路径很长。

其他如何设计面包屑导航? 尝试这些新想法


美国之鹰取消了主页和当前页面的显示,整个导航简洁明了,在使用过程中没有受到任何影响。

其他如何设计面包屑导航? 尝试这些新想法


如何实现长面包屑路径?
考虑到移动接口的尺寸较小,如果经过必要的调整和删除后面包屑路径仍然很长,该怎么办? 有什么方法可以实现长途导航的显示?
左右滑动
面包屑导航被设计为水平滑动形式,这不仅节省了空间,而且还允许用户访问完整的导航结构。
请务必注意,如果您支持滑动,请确保用户对这种交互方法非常清楚。 例如,在hayneedle页面中,面包屑导航未完全显示,但显示了一半以引导用户滑动。

其他如何设计面包屑导航? 尝试这些新想法


两行显示
对于层次结构较浅的站点,将面包屑导航分为两行也是一种可行的选择。 但是必须谨慎使用此方法,以确保各种面包屑元素的大小和间距足够大。

其他如何设计面包屑导航? 尝试这些新想法


如果面包屑的尺寸太小,则会增加用户误操作的风险。 此外,将面包屑分成两行将增加页面顶部的压力,这将导致混乱并增加被忽略的可能性。
省略中间阶段
在面包屑导航中使用省略号代替中间菜单可以有效地节省屏幕空间。 在rei页面中,使用省略号替换左侧图片中的中间层,单击(右侧图片)后将显示隐藏的层。

其他如何设计面包屑导航? 尝试这些新想法


此表单会将大量工作转移给用户。 如果没有合理的交互式指导,则可能导致用户忽略单击面包屑导航。
摘要
实施长路径导航后,为了使面包屑式导航易于识别,其设计形式应与页面上的其他元素区分开:
导航周围应留有足够的空间; [
默认情况下,导航将带有分隔符或带下划线。
最后,为方便起见,我帮助您组织了50多个出色的面包屑导航箱。[呵呵]后台回复:! 获得
的面包屑-结束-
原文:www.jianzhanlong.com/blog/implementing-mobile-hierarchy-breadcrumb
作者:Edward Scott
翻译:clippp( 该文章的翻译已获得作者的正式授权)

标签:Mobile分隔符BreadcrumbClippp省略号REI页面hierarchyHayneedle页面