大家好,我是Clippp。今天为大家带来的文章是「面包屑」导航。面包屑实用的地方在于可以让用户更快地访问上级页面,无需借助浏览器的返回按钮或顶级导航栏。
2020年的第34篇分享
相较于桌面端网页,今天移动端网页的尺寸都变得很小,面包屑导航需要怎样设计才能更好的满足手机端用户的需求呢?一起来看看这份研究体验吧~
面包屑导航不完整的原因
移动端和桌面端的测试都表明面包屑导航帮助用户了解所处的位置,为他们提供清晰的内容层级导向。在测试期间观察到的另一个问题是为了缩短面包屑路径,从导航中删除一些内容层级。
当面包屑导航路径不完整时,会增加用户做出错误决策的风险,因为他们不知道呈现的导航并不代表完整的站点结构。
避免面包屑路径过长的两种方法
许多站点由于层级太多导致无法在产品页面上显示完整的面包屑导航,经过测试有两种方法可以避免路径过长。避免过度分类过于细致或重复的分类会额外增加面包屑导航的长度。比如H&M的产品页将衣服的类别划分的过于繁琐,甚至在导航**现了重复的内容,超过50%的电商网站都存在过度分类的问题。取消显示主页和产品页的导航路径在移动端取消显示面包屑的主页和产品页是缩短导航路径的合理方法,因为在大多数网站中,我们点击网站logo就可以跳转到主页。产品页往往展示的内容比较多,取消显示可以显著缩短导航路径并减少页面顶部的混乱。例如在惠普的产品页中,主页和产品页的标题都出现在面包屑中,造成页面上的导航路径非常长。而American Eagle取消显示了主页和当前页,整个导航简洁明了,使用过程中也没有受到任何影响。如何实现长面包屑路径?
这种形式会将大量工作转移到用户身上,如果没有合理的交互引导,可能会导致用户忽略点击面包屑导航。
总结
实现长路径导航后,为了让面包屑导航易于识别,它的设计形式应该与页面上其他元素做出区分:- 导航周围要留有足够的空间;
默认情况下导航会有分隔符或者下划线。
后台回复:面包屑即可获取!
— TheEnd —
原文:baymard.com/blog/implementing-mobile-hierarchy-breadcrumb
作者:Edward Scott
译者:Clippp(文章翻译已获得作者的正式授权)
若大家希望及时看到更新,可以在阅读文章后点击“在看❤️”,或将Clip设计夹设为“星标⭐️”,来提高我们的相遇机率,感谢支持~以上就是关于面包屑导航还能怎么设计?试试这几个新思路sob什么意思全部的内容,关注我们,带您了解更多相关内容。
特别提示:本信息由相关用户自行提供,真实性未证实,仅供参考。请谨慎采用,风险自负。