在线咨询
QQ咨询
服务热线

020-85201717

13725302004

业务微信

微信开发

TOP

网站设计中面包屑导航的设计及使用

发布时间:2020-04-08 浏览:

        作为一种辅助导航系统,面包屑能够帮助用户清晰的定位到自己所在网站的位置。这个词源自于童话中跟着面包屑回到自己家的孩子,而网页中的面包屑也是帮助用户找到自己位置的UI控件。面包屑导航小巧,方便,常见,且简单。可是即便是这样的UI控件,在设计上同样是有讲究的,今天我们就来聊一聊网页设计中的面包屑设计!


        是否要在网站中使用面包屑,主要取决于网站的结构。看看你的网站地图或者整体的结构图,分析使用面包屑能否提高用户在网站内部不同类别、目录下导航是否方便:


  当网站内拥有分类明晰、组织明确的多层次线性结构的时候,你应当使用面包屑。比如一个拥有种类繁多产品的电子商务网站,面包屑就相当有用。当网站不具备逻辑清晰的层次结构的时候,就不要使用面包屑。


  当设计面包屑导航的时候,应当谨记下面的事情:


        1、不要使用面包屑来替代网页主要的导航系统


  面包屑只是一个辅助导航系统,它无法替代主要的导航系统。请记住,它是仅仅是为了用户方便的次要选项,用来抵达其他层级的快速定位链接系统。


        2、不要将当前页链接加到面包屑中


  面包屑的更后一个层级是当前的页面,而这一项在面包屑中是不应该加上链接的,因为它只起到展示定位的作用,没有任何意义。


  3、使用分隔符


  在面包屑中,用来分隔不同层级更常见的是大于符号(>),常见的使用方法是“父类别>子类别”。当然,分隔符的使用并不拘泥于这一种,有使用箭头(→)的,还有使用书名号(»)的,也有使用斜杠(//)的。使用哪种分隔符通常取决于整体风格和设计师的喜好。


  4、选择合适的尺寸和间距


  在设计的时候应当仔细考虑尺寸和间隔大小,不同的面包屑层级之间应当有足够的间距,确保用户能够识别。当然你也不希望面包屑占据页面太多的空间,如果面包屑比顶部导航还要大,看起来就非常尴尬了。


  5、不要让它成为视觉焦点


  面包屑本身是一个辅助导航,如果使用过于花哨的字体和醒目的色彩,会使得它显得喧宾夺主,过于抓人眼球。它不应该是浏览过程中用户的视觉焦点。下面的面包屑设计并不差,但是它太过于醒目,甚至比顶部导航还能引起用户注意力。


  6、不要在移动端页面上使用面包屑

  如果你觉得自己的移动端页面上要使用面包屑的话,那就意味着你的移动端网页设计出现问题了:可能是网站太复杂(嵌套层级过深),而这样一来,就不符合移动端的使用场景了。为了解决问题,你应当试图简化整个体系,确保面包屑不会出现在手机上。


        广州腾虎网络科技有限公司开发团队——致力于互联网技术服务、开发及应用,为企事业单位提供一站式、完善的整合网络品牌服务。从网络品牌的策划、创建、品牌推广,发展到品牌维护和管理,对网络资源进行分析、诊断、整合,为提升品牌价值提供策略、创意、设计、顾问服务,并专注于对网络品牌、网络策划、设计视觉等方面的探索和研究,保证了策划、开发、设计、方案实施、研究等完善的专业化运作,根据客户具体情况制定系列专业和规范的客户服务和保障体系,为企业提供周到、放心的一站式服务。