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

网页制作Webjx文章简介:网页顶部导航条能解决什么问题?

顶部导航条提供给用户一种很方便,简洁分类展示方式,让用户访问品类繁多的有组织的内容,用户为了完成任务需要找到必要的内容和功能.

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

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

解决什么问题?

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

什么时候用?

  • 2-12个分类的时候
  • 分类的标题相对较短并且可预测的时候
  • 分类数量基本不会变的时候
  • 为一个web产品展示顶级导航时
  • 配合标签来展示二级导航
  • 如果页面宽度很重要,用它来替代左侧导航条
  • 通过控制导航条的状态来跟踪和展示用户当前位置很困难,成本很大时,用它来替代标签.
  • 分类都属于一个产品时

具体解决办法是什么?

  1. 在一个水平的横条上显示一系列单行的链接,如果有网站头部,则放到头部之下.
  2. 可以通过与”标签”一起使用,在导航条中同时显示一级和二级导航
  3. 如果只使用顶部导航条,最好第一个链接是”首页(Home)”.应该指向网站的首页
    • 但是如果顶部导航条是用在一组标签下,那么标签的第一个应该是”首页”并且具有同样的功能
  4. 在导航条中用留白和”管道符” “”(或者是垂直居中的”点”,或者是简单的视觉元素)来分隔每一个分类
  5. 顶部导航条中链接的所有页面本身也一定要显示在顶部导航条
  6. 当顶部导航条数量过多时,建议使用”更多..”的链接,或者考虑使用左侧导航条
  7. 与标签一起使用来显示高级别的内容
  8. 跟左侧导航条一起使用来显示二级或三级内容

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

  1. 尽可能降低分类之间的交集
  2. 让分类之间的界限尽可能的清晰(例如,很容易猜到想要的东西是否在一个分类中)
  3. 避免过于宽泛或者过于特殊的分类名字.

为什么使用这个组件?

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

时间: 2024-08-01 13:15:11

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

顶部导航条(Top Navigation Bar)

这个可能是最简单也最常用的组件了,所以内容也不多--. 用户为了完成任务需要找到必须的内容和功能.顶部导航条在水平的紧凑的空间内提供给用户已分类内容的访问入口. 解决什么问题? 用户为了完成任务需要找到必要的内容和功能. 什么时候用? 2-12个分类 分类的标题相对较短并且可预测 分类数量基本不会变 为一个web产品展示顶级导航时 配合标签来展示二级导航 如果页面宽度很重要,用它来替代左侧导航条 通过控制导航条的状态来跟踪和展示用户当前位置很困难,成本很大时,用它来替代标签. 分类都属于一个产品

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

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

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

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

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

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

Photoshop制作游戏网站顶部导航菜单

本文将教你用Photoshop绘制一个超酷的游戏网站的顶部导航菜单,大家看下面的具体制作步骤: 最终效果如下: 首先我们准备一张素材图片: 创建一新文档,然后当作背景来使用 新建立涂层,绘制一个填充色为#050505大小为1000 x 18 px矩形.然后再建一新涂层,绘制1 px 线条,填充seiko为#0D0D0D. 添加游戏名字.

android顶部导航条

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

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

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

网站的窗户是导航 常见的导航条的规划

中介交易 http://www.aliyun.com/zixun/aggregation/6858.html">SEO诊断 淘宝客 云主机 技术大厅 常常听说seo的八字真言"内容为王,外链为皇"字虽然短,但是,真要做起来有种无从下手的感觉,那么我们不如先从网站的内链下手,下面我们就讲解一下常见的内链优化中十分重要的导航条的优化. 网站导航条是内部链接规划中最为重要的一环,对于用户而言,网站的导航条能够使用户快速的找到,其想找的内容,告诉用户,他目前所处的网站位置,这大

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

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