顶部导航条(Top Navigation Bar)

  这个可能是最简单也最常用的组件了,所以内容也不多……。

  用户为了完成任务需要找到必须的内容和功能。顶部导航条在水平的紧凑的空间内提供给用户已分类内容的访问入口。


  解决什么问题?

  用户为了完成任务需要找到必要的内容和功能。

  什么时候用?

  2-12个分类

  分类的标题相对较短并且可预测

  分类数量基本不会变

  为一个web产品展示顶级导航时

  配合标签来展示二级导航

  如果页面宽度很重要,用它来替代左侧导航条

  通过控制导航条的状态来跟踪和展示用户当前位置很困难,成本很大时,用它来替代标签。

  分类都属于一个产品时

  具体解决办法是什么?

  1、在一个水平的横条上显示一系列单行的链接,如果有网站头部,则放到头部之下。

  2、可以通过与”标签”一起使用,在导航条中同时显示一级和二级导航

  3、如果只使用顶部导航条,最好第一个链接是”首页(Home)”。应该指向网站的首页

  但是如果顶部导航条是用在一组标签下,那么标签的第一个应该是”首页”并且具有同样的功能

  4、在导航条中用留白和”管道符” “|”(或者是垂直居中的”点”,或者是简单的视觉元素)来分隔每一个分类

  5、顶部导航条中链接的所有页面本身也一定要显示在顶部导航条

  6、当顶部导航条数量过多时,建议使用”更多。.”的链接,或者考虑使用左侧导航条

  7、与标签一起使用来显示高层级的内容

  8、跟左侧导航条一起使用来显示二级或三级内容

  关注内容的划分范围(符合用户的心智模型)比关注页面的展示更重要。因为最常见的错误是将一系列没意义的内容归在一类。

  1、尽可能降低分类之间的交集

  2、让分类之间的界限尽可能的清晰(例如,很容易猜到想要的东西是否在一个分类中)

  3、避免过于宽泛或者过于特殊的分类名字。

  为什么使用这个组件?

  顶部导航条提供给用户一种很方便,简洁分类展示方式,让用户访问品类繁多的有组织的内容。

  原文地址: http://developer.yahoo.com/ypatterns/navigation/bar/topnav.html

  文章来源:pd4.me/blog/ 转载请注明出处链接。

时间: 2024-08-03 00:55:41

顶部导航条(Top Navigation Bar)的相关文章

网站顶部导航条必须要提供的内容和功能

网页制作Webjx文章简介:网页顶部导航条能解决什么问题? 顶部导航条提供给用户一种很方便,简洁分类展示方式,让用户访问品类繁多的有组织的内容,用户为了完成任务需要找到必要的内容和功能. 这个可能是最简单也最常用的组件了,所以内容也不多--. 原文地址: http://developer.yahoo.com/ypatterns/navigation/bar/topnav.html 解决什么问题? 用户为了完成任务需要找到必要的内容和功能. 什么时候用? 2-12个分类的时候 分类的标题相对较短并

创建按钮(Buttons)和导航条(Navigation Bars)

按钮|创建 创建按钮(Buttons)和导航条(Navigation Bars)(下) 刚才我们创建了一个按钮,接下来我们就可以利用这个按钮方便的创建导航条了.在Fireworks中你可以利用同一个按钮反复衍生出一系列类似的按钮来组成导航条,而无需重复创建多个类似的按钮,大大减少了工作量,这就是Fireworks神奇的地方!!!现在我们就去看看是怎么做的吧. 打开Library面版,将Home按钮拖到画板中,重复这个动作几次,使画板中有多个Home按钮,在这里我一共放了4个相同的按钮. 将这些按

jquery scrollTop方法根据滚动像素显示隐藏顶部导航条_jquery

本文使用jquery的scrollTop方法监视页面垂直滚动像素,并根据像素隐藏或者显示顶部的导航条. 效果预览网址:http://www.keleyi.com/keleyi/phtml/scrolloversee.htm scrollTop的介绍: 语法 $(selector).scrollTop(offset) 参数 offset 描述 可选.规定相对滚动条顶部的偏移,以像素计. 定义和用法 scrollTop() 方法返回或设置匹配元素的滚动条的垂直位置. scroll top offse

创建按钮(Buttons)和导航条(Navigation Bars)(上)

按钮|创建 创建按钮(Buttons)和导航条(Navigation Bars)(上) 按钮是网页中应用极多的元素,众多的按钮就形成了导航条,导航条的作用就是要让浏览者清楚知道当前所处的位置,并且通过导航条可以方便的将浏览者带到其他的地方而不会迷失.因此按钮表现有以下几中状态: Up:默认状态,即通常的状态,这时的鼠标是不在按钮范围之内的. Over:鼠标滑过按钮时的状态. Down:按钮被点击后的状态,通常它是出现在目标网页中的. Over While Down:鼠标滑过处于Down状态下按钮

谷歌改进Gmail和搜索产品中的顶部导航条

中介交易 http://www.aliyun.com/zixun/aggregation/6858.html">SEO诊断 淘宝客 云主机 技术大厅 [赛迪网讯]2月18日消息,经过了至少一年半的测试,谷歌终于发布了改进后的顶部导航条,该产品在谷歌的大多数产品中都存在.新的导航条更多的是感官上的改进.然而比工具条本身更重要的是它与传言中的,即将发布的社交网络"layer"相连接,谷歌正致力于将所有产品集成在layer中. 虽然该导航条的发布不算重大事件,但大多数用户已经

谷歌终于发布了改进后的顶部导航条

经过了至少一年半的测试,谷歌终于发布了改进后的顶部导航条,该产品在谷歌的大多数产品中都存在.新的导航条更多的是感官上的改进.然而比工具条本身更重要的是它与传言中的,即将发布的社交网络"layer"相连接,谷歌正致力于将所有产品集成在layer中.虽然该导航条的发布不算重大事件,但大多数用户已经在谷歌的产品中体验到了该导航条,例如网络搜索,Gmail等.不可否认的是,新导航条与旧产品相比更加完善,它看起来更像是菜单按钮.另一个改进是使用设置按钮取代了一些连接,它允许用户访问其账户设置以及

android顶部导航条

今天给大家介绍在Android中实现顶部导航菜单左右滑动效果的二种解决方案. 第一种解决方案:  在以前的一篇博文中我使用android-support-v4.jar实现了左右滑动指引效果,有兴趣的朋友可以查看:http://www.cnblogs.com/hanyonglu/archive/2012/04/07/2435589.html  那么今天第一个示例我仍然使android-support-v4.jar来实现菜单左右滑动效果,关于这个包的信息,不再详述,大家可以查看官方文档. 实现原理是

经过了至少一年半的测试,谷歌终于发布了改进后的顶部导航条

该产品在谷歌的大多数产品中都存在.新的导航条更多的是感官上的改进.然而比工具条本身更重要的是它与传言中的,即将发布的社交网络"layer"相连接,谷歌正致力于将所有产品集成在layer中.虽然该导航条的发布不算重大事件,但大多数用户已经在谷歌的产品中体验到了该导航条,例如网络搜索,Gmail等.不可否认的是,新导航条与旧产品相比更加完善,它看起来更像是菜单按钮.另一个改进是使用设置按钮取代了一些连接,它允许用户访问其账户设置以及配置选项.另外,邮件地址已经被账户名称取代.同步登录账户之

去除WordPress登陆后顶部出现的导航条

WordPress用户登录后顶部导航条 Admin Bar,如下图:     如果想移掉这个功能的话只需要在主题目录的"functions.php"中加入  代码如下 复制代码 <?php add_filter( 'show_admin_bar', '__return_false' ); ?>