加入收藏 | 设为首页 | 会员中心 | 我要投稿 PHP编程网 - 湛江站长网 (https://www.0759zz.com/)- 科技、建站、经验、云计算、5G、大数据,站长网!
当前位置: 首页 > 建站 > 正文

你在网站里不会迷路,要感谢这个导航设计

发布时间:2016-12-26 13:38:54 所属栏目:建站 来源:爱范儿
导读:副标题#e# A 君注:现在网络世界缤纷多彩,大家的注意力也更加短,如何让用户更久地留在你的网页里?「面包屑导航栏」就是其中一个关键。AppSo(微信号 appsolution)这篇文章,分享网页设计「面包屑导航栏」的 3 个 W,让你给用户提供更好的网页体验。 面包屑

在设计时要仔细考虑目标尺寸和内边距。面包屑导航各级文字间应该留有足够空间,否则用户可能会觉得不好用。同时,面包屑导航不能在页面中起支配作用,因此其不能比主导航菜单更显著。

5. 不要让其成为设计焦点

不要使用花哨的字体或绚丽的颜色,因为这样会喧宾夺主,毕竟面包屑导航其主要目的不在于此。

当确定面包屑导航的大小和风格时,经验法则是要保证用户进入页面后的第一关注点不是面包屑导航。

下图中的面包屑导航设计不算太差,但有点花哨,可能会分散用户注意力,使其无法注意主导航和页面主要内容。

Dribbble3

图片来源:Dribbble

Google 的面包屑导航一点也不花哨,但用户能轻松地使用和定位。

google

6. 手机设备上不要使用面包屑导航

若你在手机设备上需要通过面包屑导航,也许你会发现会出现故障。就手机上使用面包屑导航和相应运行环境而言,其可能的原因在于网站的过度复杂(网站层次结构太深)。为解决这个问题,应该先思考如何简化,然后你就不需要面包屑导航了。

结束语

面包屑导航能帮助用户更便捷地浏览整个网站,但前提是网站内容和整体结构构建合理。它是少数的能提高适用性和用户舒适度的几个简单功能之一。就设计而言,其在页面中只占据一行的位置,但带来的贡献却足够大。

谢谢!

作者 | Nick Babich软件工程师,关注 UI 和 UX。译者 | Jorri

本文译自 Breadcrumbs For Web Sites: What, When and How,已获原作者授权翻译。

本文由让手机更好用的 AppSo 出品,微信号 appsolution。

注:相关网站建设技巧阅读请移步到建站教程频道。

(编辑:PHP编程网 - 湛江站长网)

【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容!