最新公告
  • 欢迎您光临UISHOW素材网,本站秉承服务宗旨 履行“站长”责任,销售只是起点 服务永无止境!立即加入我们
  • 网站设计:面包屑设计

    What? 什么是面包屑

      面包屑是作为辅助和补充的导航方式(secondary navigation scheme),它能让用户知道在网站或应用中所处的位置并能方便地回到原先的地点。 最常见的面包屑的样式是:横向的文字链接,由大于号“>”分开,这个符号也暗示了它们的层级关系。

    【 面包屑的分类】

      1.基于用户所在的层级位置。(Location-based)

      基于位置的面包屑用于告知用户在当前网站中所在的结构层级。用在具有多级导航(通常具有2级以上导航)的网站中。

    网站设计:面包屑设计插图

    2.基于产品的属性。(Attribute-based)

      这种类型的面包屑常出现在具有大量类别产品和服务的网站中,如电子商务网站,网上教学服务等。

    网站设计:面包屑设计插图(1)

    3.基于用户的足迹。(Path-based)

      显示用户浏览的轨迹,面包屑之间没有明显的层级关系。

     

    Why? 为什么使用面包屑(面包屑的好处)

      1.面包屑作为用户寻找路径的一种辅助手段,能方便他们定位和导航。

      2.面包屑可以减少的用户返回上一级页面的所需的操作次数。

      3.临时性,动态性,占用屏幕空间小,干扰性小。

      4.降低网站访问者的总体跳出率。(当用户从别处链接到网页,或者从搜索引擎查找到网页,则面包屑的存在能帮助用户快速了解当前的层级位置,并引导用户查看网站的其余部分。减少了看完直接跳走的用户数量。)

     

    When? 何时使用面包屑

      1. 存在大量的分级内容的网站中。

      大型的电子商务网站是典型的例子,里面有大量的产品分别归属于不同的大类别及细分类别。

    网站设计:面包屑设计插图(2)

    2. 在一些引导性的网络应用或者软件安装进程中,面包屑也常被用来指示当前以及剩余的操作步骤。类似于进程条的变种。

      3. 层次简单的页面中一般不使用面包屑,但是当面包屑能显著帮助到浏览并提高他们定位能力时,也建议采用面包屑。

      相册浏览就是一个典型的例子,结构层次并不复杂,但用户在特定几个页面之间跳转的频率会比较高(如相册首页,相片缩略图页,相片浏览页等),所以面包屑的存在对提高此处的浏览效率是很有帮助的。

    网站设计:面包屑设计插图(3)

    注意点:面包屑不能替代有效的主导航,它是一个辅助功能;一个允许用户定位他们在哪里的辅助导航方案。

     

    How? 如何设计面包屑

    【面包屑连接符的主要样式】

    网站设计:面包屑设计插图(4)

    1. 本站所有资源来源于用户上传和网络,因此不包含技术服务请大家谅解!如有侵权请邮件联系客服!147733780@qq.com
    2. 本站不保证所提供下载的资源的准确性、安全性和完整性,资源仅供下载学习之用!如有链接无法下载、失效或广告,请联系客服处理,有奖励!
    3. 您必须在下载后的24个小时之内,从您的电脑中彻底删除上述内容资源!如用于商业或者非法用途,与本站无关,一切后果请用户自负!
    4. 如果您也有好的资源或教程,您可以投稿发布,成功分享后有站币奖励和额外收入! 


    UISHOW网 » 网站设计:面包屑设计

    发表评论

    • 2545会员总数(位)
    • 3102资源总数(个)
    • 0本周发布(个)
    • 0 今日发布(个)
    • 206稳定运行(天)

    UISHOW.CN一个高级设计师素材资源平台

    开通SVIP 了解详情