网站tab导航的设计
作者：Tony- 来源：得设计 发布时间：2008-11-10 12:36:00
之前有写过一篇浏览器的tab设计，这回说说网站的tab设计。
一说到tab很自然地就想到了导航、信息架构。随着网站信息结构的复杂化，选择tab似乎是性价比最高、结构传递最明确的导航方式。这也是其中面包屑导航方式衰弱的重要原因。
如果你想用tab的方式构架你的网站，搞明白下面几个问题，或许对你怎么设计会有帮助。
用tab解决什么问题？
在设计tab之前，先要搞清楚为什么用tab，每个tab下的信息到底是什么，信息之间的关系是：
信息结构一共有多少层？
tab跟大标题之间的关系（大标题的作用大多是给用户定位）
并列关系
过滤关系
是否互为同类项？
包含与被包含？
……
如上图，tab1和tab2下面的信息互相之间的关系？每个tab下信息和大标题之间的关系？只有搞清楚关系和需求，才有办法进行下一步设计。
tab结构
看下面几张图，相信应该能够感受到结构的区别了。
上图都是选中tab4的效果，但结构方式却不一样。虽然这个例子很简单，但我们在实际操作的时候，往往会比这复杂很多，比如：
tab下面需要嵌套tab，如digg的设计。或者tab和面包屑的结合方式，（如原来junchen介绍过的）等等，很多问题往往因为多层的信息结构，在tab的运用上面，需要灵活变通。（在研究结构的时候，需要完全抛开交互和视觉样式来分析）
tab的交互方式
选中的tab是否可以再操作？如果是，如何告诉用户？点击tab的时候，刷新不刷新页面？
tab的视觉样式
tab长得什么样子，会很直接地影响用户对导航的认知，举三个比较常见的例子：
当然，视觉样式肯定很难穷举出来，有需求的参考一下这里。
几点提示
1 tab的个数，最好遵循 7±2原则。尤其是非主导航区域。
2 在没有把需求和结构搞明白之前，切勿拘泥于tab的样式设计。
3 在多级tab的情况下，如何精简结构是一门学问，需要多从产品形态和用户需求方面考虑，不一定需要一味的追求结构的清晰和统一，造成不必要的冗余。
0
投稿猜你喜欢
- 注:所有文字,除注明网站类型外,其他均针对企业站点.请随时注意留言,若修改则会在首页提示文字里标注.若牵扯到业务方面的问题,我可能不会做过多
要向数据库中添加超级链接，要经过两个步骤，一是在表中定义字段类型为“超级链接”，一是向此字段中添加数据。要在表中定义字段类型为“超级链接”，- 代码如下:<％ FunctIon DownloadFIle(StrFIle) StrFIlename=StrFIle Response
- 在Oracle数据库中，DBA可以通过观测一定的表或视图来了解当前空间的使用状况，进而作出可能的调整决定。 一.表空间的自由空间 通过对表空
- 今天看到的这篇文章， 让我对Chrome能够带来的影响，有了点新想法。Update: 发现我在跟别人讨论时，比直接写作文说得清楚一些，对这个
- 数据库在时回加for xml auto调用方法 SqlCommand SqlComm=
- 为什么要用flash呢？动画流畅，视觉效果好缓存能力强那使用flash有什么问题呢？需要Flash播放器在M$的补丁打遍天下之前IE有那神奇
- 错误类型： Microsoft JET Database Engine (0x80004005) 不能使用 ''；文件已在使
- 我们在设计网站的时候，有的时候需要根据页面元素的属性来制作不同的样式，比如，对于不同的链接类型，显示不同的链接图标。CSS的选择器是个很有用
- 1.如何将Query String传送到另一个ASP文件去？Response.Redirect("second.asp?
- JavaScript中indexOf函数方法是返回 String 对象内第一次出现子字符串的字符位置。使用方法：strObj.indexOf
- 用户体验已经是一个老生常谈的话题了。我非常赞同某位达人所说的，用户体验设计应该贯穿于产品从萌芽到出生的整个过程，产品原型、视觉设计、前端开发
- 1、问题现象：有个网站是通过session验证的，前端时间访问正常，但近期后台session老是失效很快，根本没法操作，我设置timeout
- 昨天我的电影网站在生成内容静态页面的时候出了问题,提示下标越界,以前从来没有遇到过的,所以根本不知道是什么东西,于是就到处在网上找答案,但是
- 曾经为看别人写的杂乱代码而头痛吗?曾经为看BWindow代码而烦恼吗?曾经为减小JS体积和JS的可读性之间的矛盾而左右徘徊吗?最好的办法是有
- asp之家注：那么为什么要使用分页呢？当记录不多的时候，如10个或20个，我们可以也没必要使用分页来显示数据，但是数据是在不断增加的，当到了
- 搞前端应该对语义化并不陌生，每天都在说语义化，可什么是语义化，语义化究竟能给我们带来什么好处？参加web标准交流会的时候我向各位同学提出了我
- 作者：Roland Smart原文链接：http://www.adaptivepath.com/ideas/newsletter/archi
- 上次在“给网页添加打印按钮”一文中，有一段代码是“复制本文链接到剪贴板”js脚本，很可惜只能在IE中使用。这次在“淘宝网在线充值中心 - 荆
- 用6N±1法求素数任何一个自然数，总可以表示成为如下的形式之一：6N，6N+1，6N+2，6N+3，6N+4，6N+5 (N=0，1，2，…
