我们正在设计一个网站，并遇到了一些 UI 挑战，这些挑战可以通过选项卡式界面巧妙地解决。 用户将与网站的不同元素进行交互（有一些基本的查看/编辑/复制/粘贴功能可用），并且一次仅在一个选项卡中显示一个对象可以大大简化事情。
当然，我们对选项卡式界面完全满意，但是新手用户呢？ 我在网上搜索了指导，但没有找到任何明确的信息。 您是否有向新手用户展示选项卡式界面的经验？他们是否遇到过麻烦？ 或者，我们是否已经达到了每个人都对选项卡感到满意并且我们可以毫无保留地使用它们的程度？
可用性很重要——对于这个项目来说比大多数项目更重要。 如果天真的用户对选项卡式界面感到困惑，那么它就不起作用，我们必须找到另一种方法。
We are designing a web site and have run into some UI challenges that would be neatly solved with a tabbed interface. Users will interact with different elements of the site (there are some basic view/edit/copy/paste functions available) and having only one object in one tab visible at a time simplifies things quite a bit.
We are, of course, completely comfortable with tabbed interfaces but what about novice users? I've searched the web for guidance and I haven't found anything definitive. Do you have experience presenting a tabbed interface to novice users and did they have trouble with it? Or, have we reached the point where everyone is comfortable with tabs and we can use them without reservation?
Usability is important-- more so for this project than most. If naive users are confused by a tabbed interface it just won't work and we'll have to find another way.
发布评论
评论（11）
Steve Krug 在他的优秀著作《Don't Make Me Think》(Sensible.com) 中讨论了这些好处使用选项卡式界面的要点：
他继续描述了 Amazon.com 所展示的成功选项卡的关键：
显然，他在书中提供了每个项目符号的详细信息（我不会在这里抄袭他）。 如果您想为新手和专家提供创建网站的指南，那么这本书绝对值得一看。
In his excellent book "Don't Make Me Think" (Sensible.com), Steve Krug discusses the benefits of using a tabbed interface:
He goes on to describe the keys to successful tabs as demonstrated by Amazon.com:
Obviously, he provides details to each of these bullet items in the book (I won't plagerize him here). The book is definitely worth a look if you want guidelines for creating web sites for novices and experts alike.
选项卡已经变得很常见，只要您正确实现它们，我就不会担心使用它们。 确保活动选项卡在视觉上与其他选项卡不同。
另外，尝试使用渐进增强来创建选项卡，以便在禁用 JavaScript 的情况下内容仍然存在。 有两种主要方法可以做到这一点：
阿贾克斯。 选项卡本身应该是
链接到 AJAX
获取。
页面，但使用 JavaScript 隐藏它。
当您循环浏览选项卡时，
他们是从隐藏的地方填充的
页面的部分内容。
您可能会发现有用的设计资源是YUI 设计模式库及其关于选项卡。
Tabs are becoming common place enough that I wouldn't worry about using them, as long as you implement them correctly. Make sure that you make the active tab visually distinct from the other tabs.
Also, try to create the tabs using progressive enhancement so that the content is still there with JavaScript disabled. There are two main ways of doing this:
AJAX. The tabs themselves should be
links to the content that the AJAX
fetches.
page, but hide it using JavaScript.
When you cycle through the tabs,
they are populated from the hidden
parts of the page.
A design resource you might find helpful is the YUI Design Pattern Library and their section on tabs.
我认为只要选项卡是可见的，用户就可以理解。 我见过一些网站，它们显示了一个带有类似于选项卡的链接的垂直条，但用户无法立即看到它，并且发现这非常令人困惑。
I think as long as the tabs are visible as such it's understandable by the user. I have seen websites where they present a vertical bar with links that act like tabs but it's not immediately visible to the user and found that very confusing.
我不得不不同意那些支持标签的观点。 在我们对一个相当高流量的网站（当时超过 100 万独立用户）进行的设计测试中，我们发现没有使用选项卡。 选项卡清晰标记，位于主要内容区域的右侧。 根据这一经验，我建议要么寻找替代方案，要么按照 staticscan 建议运行可用性测试来找出哪些方案有效。
I would have to disagree with those are in favor of tabs. In a design test we did for a fairly high-traffic website (over 1mil uniques at the time), we found that tabs have not been used. Tabs were clearly marked, located to the right of the main content area. Based on that experience I would suggest either finding an alternative or, as staticscan suggested run usability tests to figure out which ones work.
不要认为您可以先验地决定什么可用、什么不可用。 进行可用性测试
“只需要五个用户就可以发现 80% 的高级可用性问题” Jakob Nielsen
Google 可用性测试并开始学习。 这并不难。
Don't think you can decide a-priori what is usable and what isn't. Do usability testing
"It takes only five users to uncover 80 percent of high-level usability problems" Jakob Nielsen
Google usability testing and start learning. It's not hard.
我倾向于同意lothar和ricebowl的观点——现在人们似乎对它非常熟悉。 对于任何 GUI 元素来说，最重要的是清晰度 - 用户必须本能地知道当他们按下某些东西时会发生什么（他们知道单击不活动的选项卡将使其处于活动状态）； 在导航中 - 必须非常清楚他们当前所在的选项卡。 正如洛萨所说，如果用户不能立即看到它，就会非常混乱。 如果你解决了这些问题，那就没问题了。
I tend to agree with lothar and ricebowl - people seem pretty familiar with it these days. The most important thing with any GUI element is clarity - the user must innately know what will happen when they press something (they know that clicking an inactive tab will make it active); and in navigation - it must be very clear exactly which tab they are currently on. As lothar said, if it's not immediately visible to the user, it's very confusing. If you address those issues, then it should be fine.
只是想注意 SmashingMagazine 有一篇新文章展示选项卡：标签展示
Just wanted to note SmashingMagazine has a new article showcasing tabs: Showcase of Tabs
我认为人们已经习惯了标签的比喻（来自活页夹或卡片索引等）。 尤其是那些长时间使用网络的人。 我认为，如果 IE 采用了一个比喻，就意味着人们对这个比喻很熟悉。
所以，不，我建议他们不要混淆并建议你去做。 也许只是发布关于选项卡使用的欢迎/首次介绍（或此类介绍的显着“帮助”链接）。
I think people are used to the metaphor (from binders, or card-indexes and so forth) of tabs. Especially those that use the web for any length of time. I think that, if IE's adopted a metaphor, it implies a common familiarity with that metaphor.
So, no, I'd suggest that they're not confusing and suggest that you go for it. Just, maybe, post a welcome/first-time introduction (or a prominent 'help' link to such an intro) to the use of the tabs.
我曾经是一个 Intranet 应用程序的开发人员，该应用程序使用选项卡式界面，由 HTML 生成并由 JavaScript 控制。 这早于 IE7 和 Firefox。 事实上，这对于一般网站来说也有点新奇。
幸运的是，以前的开发人员发现，如果你让它看起来像一个对话框 - 即使使用灰色背景，那么人们通常会理解这个隐喻。 我们还在初始页面加载中加载了所有选项卡的所有内容，并在选项卡式结构的外部设置了“保存/取消”按钮。 因此，大多数人立即明白他们可以在选项卡之间移动（我们使用 JavaScript 来隐藏和显示 DIV），并且“保存”将保存对所有选项卡的更改。
如果你想偏离这样一个明显的比喻，那么你需要做一些可用性研究。
I've been a developer for an intranet app that used a tabbed interface, generated with HTML and controlled by JavaScript. This was way before IE7 and Firefox. In fact, it was a bit of a novelty on websites in general, too.
Fortunately, a previous developer had discovered that if you made it look like a dialog box - even down to using a grey background, then people usually understood the metaphor. We also loaded all the content for all the tabs in the initial page-load, and had the Save/Cancel buttons outside the tabbed structure. Because of this, most people immediately understood that they could move between tabs (we used JavaScript to hide and show the DIVs) and a Save would save changes to all of them.
If you want to deviate from such an obvious metaphor, then you need to do some usability studies.
一个良好实现的 Tab 界面不应该让用户感到困惑。
根据其他人所说，使用选项卡或任何其他导航界面时要考虑的最重要的事情之一是使其当前在导航方案中的位置显而易见。
另一个重要的一点是不要破坏浏览器！ 许多 AJAX 或 javascript 实现都会破坏后退按钮。 这对某些人来说是一个小烦恼，而对其他人来说则是一个主要的不便。 请务必在这里考虑您的目标受众。
就我个人而言，我更喜欢老式的方法，即不预加载所有选项卡，而是将每个选项卡作为自己的页面，并使用模板方法来管理导航界面（无论是选项卡式界面还是其他界面）。 这会维护浏览器历史记录，无论有没有 javascipt，都可以正常工作。
A well implemented Tab interface should not confuse users.
In line with what others have said one of the most ipmortant things to consider with Tabs, or any other navigation interface is for it to be obvious where they currently are in the navigation scheme.
Another important point is not to break the browser! Many AJAX or javascript implemtations break the back button. This is a minor annoyance to some and a major inconvieniece to others. Make sure to consider your target audience here.
Personaly I prefer the oldschool method of not preloading all of the tabs but having each tab as its own page and using a templating methodology to manage the navigation interface, be it tabbled or otherwise. This maintains the browser history and works fine with or without javascipt.
选项卡等只是工具。 我们决定如何布局和使用它们决定了它们的有效性。
我要记住的是：
1）保持靠近。我们最常使用的东西应该尽可能放在前面或靠近顶部，并根据如何使用来埋掉其余的东西。它们经常被使用/调整。
2) 对于妈妈来说足够容易使用。如果没有以清晰和逻辑的方式布局，所有界面都会令人困惑。
3) 组织它的使用方式，而不是您认为它有意义的方式。*我经常使用选项卡来分解流程中的步骤，或分解基本/高级选项等区域。 我根据相似性或用法对它们进行分组，具体取决于哪种效果更好
4) 保留少量 无论哪种方式，我都会尽量保持在 7-10 范围顶部以下，因为人脑很难跳过 7- 10 位数字，所以我假设信息也是如此。 垂直手风琴可能也是您想要研究的东西。
我之前也曾在选项卡中嵌入过选项卡。 效果很好，但大多数时候只有一层深。
Tabs, etc are just tools. How we decide to lay them out and use them is what determines their effectiveness.
What I try to keep in mind is:
1) Keep it close. The things we use the most should be on the front or up close to the top as much as possible and bury the rest based on how often they are used/adjusted.
2) Easy enough for Mom to use. All interfaces are confusing if they are not laid out in a clear and logical manner.
3) Organize how it's used, not how you think it makes sense.* I often use tabs to break up steps in a process, or to break up areas such as basic / advanced options. I group them based on similarity or usage depending on what works better
4) Keep them few Either way I try to stay below the 7-10 range tops as the human brain has a hard time jumping beyond 7-10 digits, so I assume the same for pieces of information. Vertical Accordians might be something you want to look into as well.
I have also embedded tabs within tabs before. Works well but only one layer deep most of the time.