技术资讯
网站tab导航的设计
2008-11-10 12:21: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的情况下，如何精简结构是一门学问，需要多从产品形态和用户需求方面考虑，不一定需要一味的追求结构的清晰和统一，造成不必要的冗余。
本文最主要的是提供设计思路，抛砖引玉，有兴趣大家一起关注和分享这个话题。
原文：http://uitony.com/?p=63
近期更新
- [2023-07-26 14:17:28] 为品牌赋能，海外官网品牌数字化
- [2023-05-06 10:32:26] 青岛网站建设公司,品牌网站定制,一站式网站服务——力图数字科技
- [2023-04-27 13:47:54] 品牌定制网站建设——从满足预期到走向超预期
- [2023-04-11 09:17:49] H5页面设计开发——移动端传播利器
- [2022-11-16 10:11:43] windows2012程序在哪
- [2022-04-14 11:01:47] 力图数字科技配套网站服务支持
- [2021-05-18 10:14:11] 青岛网站建设的流程
- [2021-04-29 10:14:38] 企业定制化官网建设项目
- [2021-03-05 10:34:45] 移动互联时代房地产行业的微信小程序解决方案
- [2021-01-22 17:29:38] 微信小程序有哪些优势？为什么要开发微信小程序？
- [2021-01-08 17:28:04] 网站建设最容易忽略的人性化设计
- [2020-12-16 16:55:32] 建设一个常规的公司网站建设成本大概是多少？
延伸阅读
- [2009-03-16 14:29:00] 瞎扯之Web导航
- [2009-01-19 08:43:00] 斜杠的作用与导航
- [2008-09-27 11:05:00] 网址导航的组织方法
- [2008-09-10 14:30:00] 动态导航设计
- [2009-04-09 08:28:00] 怎样的面包屑导航更能体现整站架构
- [2008-08-25 11:30:00] 网站目录（导航）设计问题
- [2012-09-07 13:45:45] 网页的面包屑导航
- [2014-11-18 09:43:39] 网站导航设计系统的分类及作用
- [2008-11-05 17:59:00] 导航设计浅析
- [2009-01-07 14:45:00] 关于导航的探讨
- [2014-10-08 21:24:15] 面包屑导航在网站优化上的作用
- [2009-01-20 09:07:00] 关于网站导航的压力测试
