导航标签是网站或应用程序中用于引导用户浏览内容的重要元素。当网站的分类不会常常改动时,在网站的LOGO和页头下方,水平放置一组固定的单行标签,是一种供给高层级的导航的办法.标签导航应该与整个页面宽度共同,分类的标题应该是可预知而且尽可能短,同时经过高亮当时选中的标签来坚持”文件夹的隐喻”

处理什么问题?

用户需求经过一个全站导航来定位内容和功能,同时需求清晰的暗示用户的当时位

什么时候用

有3-10个分类标题时

分类标题要相对较短同时(标题内的内容)可预知

分类的数量不会常常变化

页面的整体宽度取决于内容.另一个可选方案是左侧导航条

所有分类归于一个网站

你需求展示网站的尖端导航

你需求暗示在一组可选项中用户的当时挑选

(当用户点击时)你需求改动整个页面而不只是页面内容中的某一个末节

你需求一种操控尖端导航的方法

详细处理办法是什么

在网站的LOGO和页头下方水平放置一组标签栏

如果第一个标签是”主页”,那么应该指向网站的主页

整个标签区域都可点-而不仅仅是其中的文字

标签中的每一个页面都应该确保有标签导航条

当分类列表太长时,主张运用”更多”链接,或者考虑运用左侧导航条

坚持隐喻

被选中的标签应该突起在其他所有标签之前.没有选中的标签在视觉上应该位于后面,以此来加固用户的概念:是经过选中标签抵达这个页面

被选中标签及所抵达的页面应该有视觉上的联系,能够经过设计暗示,:比方颜色,边框,括号等等.挑选另一个标签后应该重绘整个页面,同时展示与新标签有关的新的信息.

永久不要用多行的标签,由于这样会导致选中的与未选中标签之间的困惑

当用户从一个标签跳转到另一个标签时,整个标签栏应该出现在相同的方位

为什么运用这个组件

标签能够确保情境.在很多信息中,它们具有视觉化表现用户的当时方位的效果

标签是基于现实生活的隐喻.”一组文件夹中的前面的”隐喻让选中状态更容易理解

标签供给了导航.它们具有导航网站的效果 

可拜访

答应用户经过Tab键经过合理的顺序来在定位标签

已定位的标签能够经过回车键来拜访

经过以下代替手段中的一种来标识选中的标签(和面板)(除了视觉标识)

在已激活的链接上参加值为”active”的title特点

给链接加上不行见的ALT特点,值为”active(激活)”

给表明已选中的Yahoo!图片参加值为”active”的ALT特点