Tab页签 - UCD大社区

让人又爱又恨的标签们

tina — 2010-05-10 21:26:30

标签的出现解决了页面上导航难以排布的难题，让页面信息整理更加容易。标签的形式来源于人们的生活，在书中夹上一些做好标记的纸条并露出书边，下次再寻找书里的内容就非常方便了。

网页中的标签是为了更加清晰的整理网页导航区域，对每个不同的页面进行信息整理并归类为一种最完整易懂的分类名，以此作为页面的标签。这样的形式在如今的网页设计中得到了广泛的应用。如果我们需要列出的标签只有几个时，可以用非常漂亮的样子做出来，而且会很容易看懂。

可是当摆在我们面前的是一长串，比如二十几个标签的时候，我们该怎么办呢？以往的做法是将所有标签列出，并排列成多行，这样的方式虽然解决了标签的排布问题，但却给使用的用户带来了极大的困惑，并且这样的排布在形式上也不再像标签的形式了。另外，这样的排布想要类似标签的形式时免不了需要滚动显示标签，将当前项滚动至下方距离标签内容最近的位置。这样就会产生每个标签在使用时位置不固定的问题，用户会有一定的疑惑：上次明明在这里的啊？奇怪，难道我记忆力出问题了？

这个是我一个朋友在设计页面时遇到的问题，在与之进行设计讨论的时候遇到了很多的问题。在这里我将讨论中的思路简单的说一说吧。

由于显示器显示的页面宽度有限，目前虽然宽屏幕、大分辨率的显示器已经出现，但是还并不算非常普及。我们在设计网页时需要考虑更多的适应性，让更多的用户在使用时不会出现问题，还是需要考虑较小分辨率的显示器情况。鉴于这些限制性因素，那么我们究竟该如何来排布这么多的标签呢？

1. 分好的标签之间一般是并列关系，内容最好是互相不交叉的，并且是互相平等的关系。如果我们罗列出的许多个标签之间有从属关系，我们需要考虑将其重新进行分类划分。将标签进行分组，把完全平铺的标签换为几组标签。

2. 用任务标签直接显示分组情况。比如Windows系统中，浏览器在开启多个网页窗口时，在任务栏位置以同一个浏览器程序的形式显示，共同表示开启的多个窗口标签页。这样的显示就大量节省了任务栏宽度。

3. 将标签从重要标签向次要标签进行排布，按照所设计的页面进行排列，将多余出来的标签归入“更多”标签中，这样虽然在界面上隐藏了一部分标签，但是却让界面显得更加清爽整齐。并且，根据这样的排列后的标签，会突出网页想要人们注意到的重点界面，集中来访用户的关注度。次要标签中的内容让那些愿意在网页中长时间浏览和寻找的用户进行探索，这些相对次要的内容不是网页设计的重点，因此相对而言也不会有非常多的用户使用起来不方便。

4. 如果标签很难划分重要不重要，可以将所有的标签列出来，并加以滚动条或者左右箭头的形式，让用户可以在众多标签页中横向滚动浏览。为了让人们使用起来更加方便，需要又一个地方可以以下拉菜单或其他形式显示所有标签，方便用户快速选择。另外，在平铺标签的时候，不能无休止的缩短标签的长度，要以标签的辨识度为首要。不能够无休止的缩短标签，以至于用户无法知晓每个标签的内容。如图是有这个问题的典型–Google Chrome浏览器：

5. 当横向位置不够放置多个标签时，可以改为向垂直方向设计。垂直方向用户可以较方便的滚动鼠标来浏览，即使标签有比较多个也能更容易的排列。此外，垂直方向上每个标签的高度都是容纳一个字的高度，因此较短的位置可以显示较多的标签。横向设计的标签由于每个标签都会有几个字的长度，从而会占据更多的横向空间。

最后回到我和朋友讨论的话题上，本来如果只是单纯的是二十个标签我会建议他设计成垂直标签，但是根据项目的特殊性，他搭建的页面左侧还有一个不可或缺的树状结构，因此，经过再多的思考，考虑到这些标签在不同的用户面前会呈现不同的一些标签，但有部分是会常用到的，因此最终建议他考虑使用“3”，即权衡出几个相对常用和重要的标签，然后将排列不下的标签们放到更多标签里面，这样能够将过多的标签稍作缓和。

在设计标签时可能会遇到各种各样的问题，根据不同的情境采用不同的设计方式，灵活的运用设计技巧就可以制作高可用性的网页。在每次的问题处理时多做不同的尝试，会容易产生很多优秀的设计模式，积累这些设计模式在今后的应用中就会更快捷。

相关话题：Tab页签源地址：http://tina.reeze.cn/2010/05/10/labels/

说说tab设计

光耀 — 2009-07-25 01:27:16

要想在不宽裕的页面展现丰富的内容，现在通用的做法使用tab，在一块区域通过tab切换来更换该区域的内容。这篇文章分析了tab设计很在理，今天我也谈谈我抓了几个案例，谈谈对tab设计的看法。

我的意见是合理的tab设计应该是这两种类型：

第1种鼠标单击切换。此种情形下tab是没有链接的（但是在选中的tab区域内增加更多或者more链接）。

第2种鼠标悬浮切换。此种情况下很多tab都加了链接，所以 a:hover 应该生效，也就是鼠标停靠时有下滑下或颜色等提示。其实这也是Norman设计理念里，对于用户恰当Feedback（反馈）的实践。
在实际案例中，我们看到了一些好的设计，也有些我不赞成的设计，这里稍做分享。

案例一：yahoo美国首页，属于第1种tab设计，但是注意右下角的框框哦。

案例二：淘宝首页的tab设计有三处，但是仔细看一下，却发觉各有差异。比较疑惑的是，为什么首页只有3个tab设计，但是却各不一样呢？难道一个页面需要多个前端介入？

第一个tab设计属于单击切换，无附加链接。（顶）

第二个tab设计属于悬浮切换，但是没有 a:hover 来反馈tab上的链接。（扁）

第三个tab设计属于悬浮切换，添加了 a:hover 反馈tab上的链接。（顶）

案例三：QQ弹窗。

最不招人喜欢的QQ弹窗，tab上也没有链接反馈，相信qq.com的流量很多是被这样无辜地骗来的。（扁）
插播一段：我一直对QQ弹窗的设计有微辞，一个只能放5个tab的位置居然间接的放了7个，于是不得不多出一个左右翻滚tab的设计。至于增加一个看起来意义不大却比较显眼的 [您可以拖动该页卡进行排序] 真正价值有多少。

tab切换是click还是over？

xw — 2009-07-12 01:56:58

应该是两年前，网易首页全新的改版。内容区块大量采用了tab切换的方式，当我鼠标放上一个tab竟然立即切换到标签内容，当点击tab的时候竟然弹出了一个新的网页。我一直在想网易怎么犯这么低级的错呢？tab应该是单击以后在再切换的呀，这个是基本的交互原则。

然而从这个时候开始，发现在国内越来越多国内门户网站的小区块tab设计，采用了这种悬浮切换，点击弹出新页面频道的方式。而当我渐渐的开始习惯这种方式的时候，再打开美国yahoo首页，突然发现用点击切换小内容块反而还不适应了。这不禁让我开始反思。

其实不仅在国内，在国外的某些网站也开始采用这种悬浮切换的方式。我们来分析一这种方式优劣势：

优势：用户不用点击，直接用鼠标滑过tab就可以迅速切换区域内容，这对于快速浏览内容的用户，操作起来十分爽，对于浏览区块内容效率极高。

劣势：用户对于tab切换一般的习惯是点击切换，这有悖于用户的习惯，如果用户第一次接触这种切换方式的话肯定会产生错误（和我一样），很有挫败感。

所以如果要采用这种方式的话最关键的一点就是，用户要学习这种新的切换方式，是否容易学习？是否会和传统的点击切换发生混淆？

我无法做用户调查，但是从我使用的角度来说，首先很容易学习。当我点击发现是悬浮才能切换以后，我第二次访问就会采用这种新的方式了。其次还是容易区别的，因为悬浮切换有一个很大的特点就是这种方式全部应用在小内容块上，而且基本应用在内容展现上。

另外对于小内容区块展现，还有一种折中的设计方式，就是悬浮也切换，点击也切换。淘宝的首页里面的充值区块就采用了中设计。也非常不错。

最后不过无论采用哪种方式，切记一定要保持统一性，千万不要在一个页面中混合使用。

相关话题：Tab页签源地址：http://blog.d8in.com/posts/455.html

交互学习笔记，Tab选项卡（一）

蓉儿 — 2009-07-12 01:51:18

Module Tabs(也称选项卡，后文中简称Tab，以便更符合中国设计师的日常叫法) 是一个常见的交互元素——将不同的内容重叠放置在某一布局区块内，重叠的内容区里的每次只有其中一层是可见的。用户通过鼠标点击或移到内容区所对应的标签上，来请求显示该层内容区。

译注：本文中指的是狭义的Tab，指在界面的某一版块区域内所应用的Tab设计。实际上，绝大多数网站导航也是Tab的一种应用。）

web界面的设计趋势是缩短页面屏长，降低信息的显示密度，但同时又不能牺牲可视的信息量。在这种趋势下，Tab 这种交互元素成为了一个越来越普遍的应用。例如在Blog界面的设计中，人们在侧边栏使用Tab模式来显示 ”最新更新|最热更新“ 的文章列表以引导用户快速跳转到文章内容页，这种模式令页面结构紧凑同时在视觉上不那么喧宾夺主。

本文将讨论基于web页面或其它web应用中如何设计Tab，同时分享一些产品设计原则、真实的应用案例、教程以及一些能帮助你直接实现Tab应用的免费脚本。

分析Tab元素的构成

为了统一叫法以便于进行讨论，我们先花时间来认识一下Tab元素的每个构成部分。

标签：用户控制切换内容区的操作区域。

标签和内容区在视觉上看起来应该是一个整体。

标签上的文字应该简洁、无歧义并能准确描述出它所对应的内容区的信息特征。

标签有选中和未选中两种状态，每次只能有一个标签是选中状态，在页面刚载入时，默认第一个标签是选中状态。

内容区：Tab元素中重叠的区块。用于显示信息内容。

内容区和标签一一对应，

当前显示的内容区对应选中状态的标签，当前隐藏的内容区对应未选中状态的标签。

用户应当能很轻易地通过控制标签来切换对应的内容区。

默认被选中的内容区应该在页面载入后立即显示。

一。什么情况下应用Tab设计

当交互设计师希望节省页面空间；紧凑布局；且需要组合的几种信息之间具有关联性时，可以选择Tab应用。

信息之间具有某种关联特征

构成一个整体的每个元素之间都应该具有逻辑上的关联性。所以出现在同一个tab元素中的几种信息自己应该具有关联特征，这样用户才能将整个Tab区域视为一个整体。例如在Blog中很常见的信息组合：“ 最新更新 | 最热文章 | 评论最多 ” 。

下图是网站Webdesigner Depot的侧边栏上的Tab元素：“全部文章 | 最受欢迎 | 最新更新”

信息之间不应该存在对比或并行的关系

Tab元素中，同一时刻，只能显示一层内容区。当用户需要对位于不同内容区上的信息进行对比，或者这几种信息同时显示会更便于用户阅读时，就不应该使用Tab。否则会导致用户为了比对所需的信息，而不停在标签之间进行切换。

下面这个案例中，BGPatterns (一个在线制作背景图案的网站）tab就用得不是地方。当用户想设计或修改他所制作的背景图案时，必须反复在几个标签之间进行切换。Tab在这里妨碍了用户的操作。如果在页面上同时显示这4个内容区上的信息，可用性和友好度会更高。

...

相关话题：Tab页签源地址：http://lovelyrosa.blogbus.com/logs/42129023.html

交互学习笔记，Tab选项卡（二）

蓉儿 — 2009-07-12 01:49:53

（续接上文）

五。Tab的真实应用

现在为止，我们从细节上探讨了Tab这种交互元素，是时候来看看真实案例了，在这一章节，我们分析一些Tab元素的应用，希望可以带给大家灵感。

Haveamint.com

这个网站在首屏位置使用大量Tab元素以展现数量庞大的信息。

Yahoo!

雅虎在头版位置使用Tab设计，对信息内容的显示进行了压缩和模块化。

iGoogle

Igoogle在模块中大量使用了Tab，不占用大量的屏幕空间，又令信息饱满。

Blue Acorn

蓝橡果网站利用Tab来显示网站的热门文章: 电子商务和Magento（一个电商软件平台），内容区上还放置着引导用户浏览更多文章列表的按钮。

MailChimp

在这个案例中，你可以看到利用图标强化标签文字描述的应用。

WebNotes

WebNotes 网站的Tab元素，标签位于内容区下方，令人耳目一新。内容区切换时有淡入淡出的动画。

WorldCat.org

WordCat.org 在搜索框中使用了Tab标签，让用户可以针对特定搜索需求缩小搜索范围。（比如书籍、DVD、或者文章）

Martha Stewart

Martha Stewart 在网站的“推荐内容”上应用用了Tab设计，可以自动播放和带有过渡动画。

Krista’s Creations

Krista’s Creations 利用字母表作为标签来控制图片的分类显示。

Clearspring

Clearspring 拥有响应速度极快的Tab，这是一个非常好的古典样式的Tab设计案例。

Homewood

在网站Homewood中，它们也利用icon来辅助了标签上文字的表述。

...

相关话题：Tab页签源地址：http://lovelyrosa.blogbus.com/logs/42175443.html

[译]Tab (选项卡)的产品设计原则及应用

西乔 — 2009-07-03 14:21:49

译者：西乔来源：Smashing Magazine 作者：Jacob Gube

Module Tabs(也称选项卡，后文中简称Tab，以更符合中国设计师的日常叫法) 是一个常见的交互元素——将不同的内容重叠放置在某一布局区块内，重叠的内容区里的每次只有其中一层是可见的。用户通过鼠标点击或移到内容区所对应的标签上，来请求显示该层内容区。

（译注：本文中指的是狭义的Tab，指在界面的某一版块中所应用的Tab设计。实际上，绝大多数网站导航也是一种Tab。）

web用户界面现在的设计趋势是减少页面的屏长，降低信息的显示密度，但同时又不能牺牲可视的信息量。在这种趋势下，Tab 这种交互元素成为了一个越来越普遍的应用。例如在Blog界面的设计中，人们在侧边栏使用Tab模式来显示 ”最新更新|最热更新“ 的文章列表以引导用户快速跳转到文章内容页，这种模式令页面结构紧凑同时在视觉上不那么喧宾夺主。

本文将讨论基于web页面或其它web应用中如何设计Tab，同时分享一些产品设计原则、真实的应用案例、教程以及一些帮助你在自己网站上直接实现Tab应用的免费脚本下载。

分析Tab元素的构成

为了统一叫法以便于进行讨论，我们先花时间来认识一下Tab元素的每个构成部分。

标签：用户控制切换内容区的操作区域。
标签和内容区在视觉上看起来应该是一个整体。
标签上的文字应该简洁、无歧义并能准确描述出它所对应的内容区的信息特征。
标签有选中和未选中两种状态，每次只能有一个标签是选中状态，在页面刚载入时，默认第一个标签是选中状态。
内容区：重叠的部分。用于显示信息。
内容区和标签一一对应，
当前显示的内容区对应选中状态的标签，当前隐藏的内容区对应未选中状态的标签。
用户应当能很轻易地通过控制标签来切换对应的内容区。
默认被选中的内容区应该在页面载入后立即显示。

一。什么情况下应用Tab设计

当交互设计师希望节省页面空间；紧凑布局；且需要组合的几种信息之间具有关联性时，使用Tab元素是不错的选择。

信息之间具有某种关联特征

构成一个整体的每个元素之间都应该具有逻辑上的关联性。所以在一个Tab元素中出现几种信息应该具有关联特征，以便用户能将整个Tab区域视为一个整体。例如在Blog中很常见的信息组合：“ 最新更新 | 最热文章 | 评论最多 ” 。

下图是网站Webdesigner Depot的侧边栏上的Tab元素：“全部文章 | 最受欢迎 | 最新更新”

信息之间不应该存在对比或并行的关系

Tab元素中，同一时刻，只有一个内容区上的信息能被显示。当用户需要对位于不同内容区上的信息进行对比，或这几种信息同时显示会更利于用户阅读时，就不应该使用Tab这种交互元素。这样会导致用户为了比对所需信息，而不停在标签之间进行切换。

下面这个案例中，BGPatterns (一个在线制作背景图案的网站）中就使用错误的设计。当用户想设计或修改他所制作的背景图案时，必须反复在几个标签之间进行切换。Tab在这里妨碍了用户的操作。在页面上同时显示这4个内容区上的信息，可用性和友好度会更高。

另一个反面案例：网站 Best Web Gallery 在它侧边栏上所放置的Tab，标签分别是 ”特别推荐“（包含了一些网站所有者认为值得注意的链接）和 “最新评论”。这两组信息之间没有逻辑联系，用户会很疑惑为什么这两者要放在一起呢。所以这个Tab中的两组信息最好分开放置。

每个内容区应该有一个简短明确的标题。

Tab元素的标签区宽度是限的，所以标签区的文字应该简洁扼要，具有代表性，长度控制在1~3个英文单词。用精炼的方式展示信息，除了保持设计样式不变形，还可以让用户更快速地处理文字信息，以预测隐藏的内容区上所包含的内容。

Tab应该用于展现精炼的内容。

Tab本意用于展现标准化和易于理解的信息。基于此，Tab应该只用于显示信息摘要和内容要点，例如列表，数据图表，或1~2段简短的文字这种形式。

二。Tab的可用性原则及优化方法

这一章节我们将讨论一些关于Tab的可用性设计原则，以及如何使这种交互元素变得更友好和有效。

选中的标签应该高亮显示。

选中状态的标签应当非常容易被区分出来，以便让用户清楚当前显示的内容区是对应哪个标签。可以为未选中状态使用统一的背景色，为出于选中状态的标签上使用高亮的背景色，来加以区分。

保持标签只在一行内显示

Tab的标签通常是水平方向排列的（当然如果你愿意，也可以设计成垂直方向排列的），标签如果分布在多行上会导致用户在使用中非常疑惑。

在水平方向上多行分布标签，隐含一种等级关系，可能让用户误以为第二行是第一行的子级。

标签需要分布在多行上时，意味着标签的数量过多或者标签上文字太长。这些都是需要精简的。

内容区之间的切换应该没有延迟。

使用Tab来控制内容切换的特性之一是快速和互动。为此，应该在html代码里提前内嵌所有内容区的代码，并通过CSS/Javascript来隐藏未被选中内容区，而不是等用户切换到某个标签后再去远程请载入信息。

避免在标签切换的时候去载入页面，使用AJAX从远程读数据来生成动态菜单也是一个办法，但这对使用语音阅读器（译注：Screen-Reader：为视力障碍的用户准备，可以语音读出页面上的信息。）是不友好的，因为语音阅读器不支持DOM模型。（译注：DOM，AJAX技术实现的一部分，用于通过 JavaScript 代码处理 HTML 结构和由服务器返回的 XML文件。）

（译注：有4种方法载入隐藏区的内容代码：

html 一次性载入：这种方法原始且安全，但是存在数据太多或太复杂导致页面解析缓慢，从而导致整个页面打开速度变慢，这是不可忍受的。
frame: 将隐藏区的代码作为一个frame载入，frame的好处是可以新建进程，和页面中的图片同时下载。不同的浏览器可以运行一定数量的进程并行，比如IE可以同时允许4个。这样对整体页面的打开速度影响小。另外，frame可以进入浏览器缓存，在多个页面共用同一个Tab元素时，frame是一个好选择。
iframe：iframe和frame类似，继承了frame的优点，此外它还可以作为一个容器随意嵌入页面。google adsense使用了iframe来实现了局部代码的载入。。
Ajax：响应用户操作或响应某个触发条件，由JS在后台向服务器发出请求，载入隐藏区的代码。我认为除了交互和需要响应动态生成的内容外，没必要ajax技术。）

在标签上使用简短和有逻辑的文字。

标签应该设计得尽可能窄，以便在一行内容纳尽可能多的标签。

在标签区使用简单的描述或内容关键字，可以令用户在扫描页面时快速找到他们想要的内容。所以使用概括准确符合逻辑的文字来描述内容区是非常重要的，选用这些文字应该经过深思熟虑。

下面这个在网站CBS.com上的案例，是一个难用的Tab。标签上没有任何说明性文字，用户无法预测未显示的内容区里到底有什么。

而在 Navigant Consulting 的网站上，使用数字来暗示数据是有序的。但仍然没有表达出内容区里包含什么。这种设计容易产生歧义导致用户产生不必要的困惑。

不要在内容区内使用滚动条

在Tab的内容区里使用滚动条会增加用户负担：用户在要查找信息在哪个内容区里时，不仅需要切换标签，还需要加上移动滚动条的操作。

内容区里容纳的信息太多或设计Tab时设定的高度不够，会导致滚动条出现。所以需要考虑精简内容、增加高度值，或把选中状态的内容区处理为的高度自适应。

三。考虑Tab的易用性

更复杂的交互行为的出现，在不刷新页面的状态下异步更新内容，以及如何满足用户使用不同访问方式，包括那些很难确定的非典型状况下的访问需求，这些令易用性成为当前最热门的话题。本章节中，我们将讨论一些在设计Tab元素时你应该知道的易用性原则。

“选择”和“未选中”状态的标签应该使用对比鲜明的颜色

为了让视力上有障碍的用户能分清哪些标签是已选中的，哪些是未选中的，应该使用高对比的背景色来做出区分。

Yahoo! News 网站中的反面案例：选中和未选中状态的标签只有非常小的视觉上的差异，他们对视力好的用户没问题，但是会给视力不佳的用户带来麻烦。

此外，请务必保证标签的文字颜色（前景色）和标签背景色有充分的对比。即使未选中的标签，用户也能轻松阅读上面的文字。而不要为了让未选择的标签看起来不显眼而把它们都直接变灰。

确保隐藏内容区里的信息在语音阅读器中是可读的

基于可访问性，Tab应该使用技术将未选中状态的内容区隐藏起来，但是不能在DOM Tree中删除他们。比如不能使用 display:none; 或者 visibility:none这样的css参数去定义容器。这类参数导致语音阅读器无法读取被隐藏的内容区中的信息。

（译注：中国设计师可能不太重视语音阅读器的可访问性，但是在国外，有专门的法令条款规定，机构网站不得歧视有障碍的用户，包括视力缺陷，行动障碍、癫痫患者等，所以外国的产品或前端工程师会很重视这一点，不然会遭到投诉甚至起诉。这种差异去看看中国人是如何设计盲道的就明白了。）

详情请见Roger Johansson’s 的文章《利用css隐藏内容：问题和对策》”Hiding with CSS: Problems and solutions“.

（译注：Roger Johansson’s的文章中指出：许多CSS和JS教程建议使用display:none; visibility:none 来隐藏元素，但大多数状况下这是一个会降低可访问性的选择，。

display:none的真正含义是表示这一元素并不存在，不需要显示打印或被阅读。大多数语音阅读器会忽略任何使用display:none来隐藏链接，文字，导航和标题等。作者建议使用的技术是使用绝对定位坐标，例如 .structural { position:absolute; left:-9999px; } 。

另一个需要注意的问题是，当你决定使用JS去显示一个元素时，也应该用JS 技术去隐藏它。因为考虑到客户端是否支持js以及安全等级，如果客户端的js没起作用，可能交互或动态菜单没效果，但起码内容是可访问的。但如果你使用 css去隐藏一个元素，但使用js技术去显示它，在某些状况下，这个元素会变得一直无法访问。）

使用语义化的HTML结构来构造 Tab的标签。

使用无序或有序列表(译注：

这类标签）来构造标签的html代码，可以改善可访问性。因为屏幕阅读器用户可以基于此来识别出这是一组Tab标签。如果标签上使用了图片来代替文字，别忘了添加ALT 或 title属性来描述图片的含义。

允许键盘操作。

键盘导航是为一些有行动障碍或不能使用常规输入设备（如鼠标）的用户准备的。这种用户会使用替换形式（比如键盘或语音）来控制导航菜单，确保他们能将控制焦点在标签间切换，并激活他们想要的部分。

一个简单测试键盘导航的简单方法是：使用键盘上的Tab键，看你是否能将控制焦点集中在每个标签上？使用回车键，当前的控制区域是否能被激活，使未选中状态有效地切换为选中状态。

提高对用户客户端的兼容性。

当客户端无法支持某些技术，比如当浏览器关闭了JavaScript功能时，或者当用户没有安装Flash插件时，Tab内容区上的信息必须保证最基本的可访问性，交互元素确保能被替换为最基本的html文本。

四。提升之道。

在提供了一些基本的可用性建议和原则后，我们还可以讨论一些方法来进一步提高Tab元素的可用性。

在标签上使用icon来形象化地描述内容区说包含的信息。

在标签上配合使用形象的icon，可以增强对内容区信息的描述。

例如在网站 DrawIt 中，图标用于形象地补充说明所对应的内容区的功能。

在标签上使用icon，必须保证它们是形象的，切题的。使用不相关的icon会适得其反。

避免在标签上直接用icon来代替文字。

不同的人对一个图像有不同的解读，最安全的方法是使用纯文本来描述内容区信息。

在内容区切换的时候使用过渡动画。

在内容区切换的时候使用过渡转场动画是一个不错的选择，可以为用户提供积极的视觉反馈——内容区已经发生变化了！

大家可以去网站 Coda ，从左到右点击Tab标签，欣赏切换时的效果。

当用户在Tab的标签区进行操作时，有明确的悬停响应。

默认情况下，当用户将鼠标移到超链接或标签区域上时，鼠标指针的样式会发生改变，让用户知道标签区域是可点击的。

除此之外，还可以利用背景色变化来响应用户的鼠标操作。对于那些不熟悉Tab标签操作的网站新用户而言，这是很有用的。

下图中Vyniknite.sk 网站的案例里：当用户鼠标划过未选中状态的标签，背景色会变成鲜明的红色。

五。Tab的真实应用

现在为止，我们从细节上探讨了Tab这种交互元素，是时候来看看真实案例了，在这一章节，我们分析一些Tab元素的应用，希望可以带给大家灵感。

Haveamint.com

这个网站在首屏位置使用大量Tab元素以展现数量庞大的信息。

Yahoo!

雅虎在头版位置使用Tab设计，对信息内容的显示进行了压缩和模块化。

iGoogle

Igoogle在模块中大量使用了Tab，不占用大量的屏幕空间，又令信息饱满。

Blue Acorn

蓝橡果网站利用Tab来显示网站的热门文章: 电子商务和Magento（一个电商软件平台），内容区上还放置着引导用户浏览更多文章列表的按钮。

MailChimp

在这个案例中，你可以看到利用图标强化标签文字描述的应用。

WebNotes

WebNotes 网站的Tab元素，标签位于内容区下方，令人耳目一新。内容区切换时有淡入淡出的动画。

WorldCat.org

WordCat.org 在搜索框中使用了Tab标签，让用户可以针对特定搜索需求缩小搜索范围。（比如书籍、DVD、或者文章）

Martha Stewart

在 Martha Stewart 网站中，你可以发现他们为推荐内容使用了可以自动播放和带有过渡动画的Tab设计。

Krista’s Creations

Krista’s Creations 利用字母表作为标签来控制图片的分类显示。

Clearspring

Clearspring 拥有响应速度极快的Tab，这是一个非常好的传统Tab设计的案例。

Homewood

在网站Homewood中，它们也利用icon来辅助了标签上文字的表述。

Apple - iWork

ExpressionEngine

网站 ExpressionEngine 把标签控制区放在Tab窗体的底部，在快速载入内容区和快速响应内容区切换方面，它也是一个很好的例子。

Viget Inspire

Viget Inspire 在热门文章版块使用了Tab，有淡入淡出的切换动画，内容区高度可根据内容长度自适应。

Komodo Media

Komodo Media 的标签里，icon放在文字上方。

atebits

atebits presents 用Tab来展示产品介绍，它有效地在这么小的空间里展现了如此丰富的内容。

Tumblon

Tumblon 把标签放置在内容区下方，能快速响应切换，但不好的是，标签的选中状态和未选中状态不是那么容易区分。

kevadamson.com

在 Kev Adamson的网站中，右边栏里有好几个Tab，网站使用了不同的ICON配图，帮助用户理解不同Tab的功能。

六。 Tab的创建教程（前端方面的）

有很多教程能告诉你在页面上如何建立和实现一个Tab，下面，你可以通过一些顶尖教程来了解更多关于创建Tab的技巧。

Building Tabbed Content 《如何创建Tab》

通过阅读这篇初级教程，你可以了解如何通过使用JS框架原型创建一个简单的Tab元素，

Create A Tabbed Interface Using jQuery 《使用jQuery来创建Tab》

Dan Harper 提供给读者关于如何使用jQuery库(译注：著名的js库）来构建Tab。

Accessible Image-Tab Rollovers 《图片标签导航的快速切换》

学习如何实现用图片来制作标签导航区，并实现快速切换

Create a Slick Tabbed Content Area using CSS & jQuery 《使用CSS和jQuery来实现一个可平滑切换的Tab》

七。脚本资源

如果你真正查找能直接在你网站上应用的Tab脚本代码，这有一些免费的解决方案。

DOMTab

DomTab 是一个很受欢迎的脚本，能很容易创建一个Tab元素，把普通的链接列表改造为Tab元素。

JavaScript Tabifier

这段由BarelyFitz 设计的即插即用的 JavaScript代码，能够帮助你在个人网站上更快速实现Tab元素。

TabView

TabView 是yahoo用户界面库(YUI)里的一个元件，你可以利用这个元件来减化代码量和图片的使用。

Coda-Slider

Coda-Slider 是Coda 设计的Tab实现脚本，可以实现内容区切换的转场动画效果，还可以设置将Tab标签们靠左对齐或靠右对齐。

idTabs

idTabs 是 jQuery 的一个简化插件，可以强大的设置功能可以简化原来控件中复杂的参数与组合。

Tabtastic

idTabs是一个JavaScript库，也包含创建Tab工具，这有深入浅出的使用教程Step by Step pane。

Ajax Tabs Content

动态和远程数据，你可以使用AJAX这种动态驱动方法，来异步更新内容区里的信息。

Carousel - Module Tabs

这段Tab脚本简单但可高度自定义，支持动画与自动播放。

关于原作者

Jacob Gube 是一个JS和PHP工程师、WEB设计师、作家，Six Revision的创始人及总编。Six Revision是一个在线共享专业的开发与设计资源及教程的平台。这是他的Twitter:follow him on Twitter。

相关话题：Tab页签源地址：http://blog.xiqiao.info/2009/07/03/409

tab式广告模块如何设计？

kent.zhu — 2009-05-01 23:49:30

       当有多个窗格的内容且每次只能显示一个窗格，同时各个窗格之间的内容不需要相互参照的时候，可以考虑使用tab式标签来展示。自从亚马逊开了标签的使用先河后各类网站风起使用之，因为它的使用既优化了大量信息的展现同时也很符合日常生活的使用习惯（tab其实就是一个现实生活的隐射）。
       于是，在寸土必争的网站首页首屏的位置的大量图片广告的展示形式就非tab式莫属了。搜集了一些tab式广告模块的设计，来探究一下tab式的广告究竟如何展示更好：

       1、最常见的形式之一：标签位于图片之上，以数字1，2，3标明，当标签被选中后该标签高亮显示

2、常见形式之二：标签页在右侧，通常为缩略图的形式或者文字链的形式。

3、标签+完整标题的形式

这张来自我朝的政府门户网站，标签页的标题在整个模块的下方，当标签被选中后以闪亮的形式提示，标题以蓝色文字链的形式展示，提示比较清晰。（PS，为嘛我朝的政府门户站木有favicon呢？）

这张应该属于2的一个变种？把右侧的标签挪到了下面，标签与图片分离，完整的标题+标签的形式。标题黑色显示，我以为是不可点的，但是实际上人家是可以点的

下面是几个常见形式的拓展：
4、带播放按钮的tab式广告，你可以点击左右2侧的三角切换下一个

5、标签位于右侧，大缩略图+完整标题形式。这张采自沈总的1912.cn，当时我就震惊了，这个tab太强大了，和左侧的MM一样大，哇咔咔。

     说一些我个人的感受：
       1）第一种最常见的形式把标签直接放在图片的上方，可以很充分的利用那个宝贵的模块，AD图片的面积被扩大，视觉冲击有可能提升。
       2）第二种形式便于展示其他3个tab的内容，不至于让其他3个AD在第一眼的时候被忽略掉，毕竟有很多用户是连那1.5秒的自动切换时间都不愿意去等的。
       3）标签+标题的形式特别是第三种的第2个那样的，那个标题时常会被用户忽略掉，相对图片而言下面那个看着不像文字链的文字链确实不能引起用户的注意
       4）第四种形式看似是加了酷功能，出发点是想给AD翻页带来习惯，但是那个2个三角恰恰有转移用户注意力的嫌疑，从用户体验上看我觉得并不是很好

不过，话说回来，广告最终是以点击率来论成败的而点击率的绝大半来源是广告的内容。我敢说，上面这些AD中肯定是最后一个的点击率最高，因为那个MM实在太大了太诱人了，嗯，还有那个标题也很诱人…..

相关话题：Tab页签源地址：http://www.ikent.me/blog/1476

Tab之所以为Tab

helicopter621 — 2009-04-12 20:17:07

不久前写了这篇关于Tab的文章，最近看到两老外的关于Tab的好文，特此推荐。在Tabbed Navigation, and What Makes it Useful一文中，David Leggett解释了Tab这个metaphor的来源，以及使用导航Tab的四个好处，不过没有具体讲该怎么设计。作为补充，可以参考Smashing Magazine上的Showcase Of Well-Designed Tabbed Navigation，提供了大量的优秀实例。但关键不在于看人家弄得多漂亮然后照搬，而是学习（并钻研）怎么样能弄得这么漂亮吧？圆角、渐变……都是小细节。但正是这些小细节让整体看上去完全不一样了。否则又只是生搬硬套的抄袭，还要抄不到点子上……sorry，又粪青说教了，最近实在看了太多劣质山寨。很搞笑，在反馈用户测试报告提到一个视觉设计的问题时，设计师反驳道，“XX网站（某主流网站，被抄袭对象）也是这么做的啊”，啊哈，测试时用户就说了，“是没错，但那XX网站也让我不爽很久了”。

另外，OutC童鞋给我的文章留言道——

我认为hover使用的必要性上还需要补充两点：
1. 看导航菜单的Tab个数，如果个数太多而且都有子菜单，那么就十分有必要使用hover，因为我们不能保证用户是不有足够的耐心去一个个点开分类菜单查看子分类；
2.如果对于导航下Tab中有相对应的首页来说，使用hover就显得有些不可取，因为hover这一动作使得用户的关注点集中在了Tab的子菜单下，而不是Tab本身，这样就使得Tab大分类的首页变得无足轻重，所以hover的使用还是需要权衡一下的。

在原文中，切换问题我是分别针对导航Tab和内联式Tab来写的，但对前者的分析不是很全面。因此十分感谢他的补充。导航Tab是hover还是点击切换的，针对OutC提出的第一点，原文我写了：

“一般来说，导航Tab都是点击切换的，因为涉及到整页刷新时载入速度的问题。但有时因为担心Tab下的二级导航项藏起来用户找不到（也即我们不能保证用户是不有足够的耐心去一个个点开分类菜单查看子分类的情况），就会出现图4这个导航 Tab采用hover切换刷新二级菜单的方式。” 在这种情况下，我提出了要解决好触发灵敏度，不再赘述。

关于第二点，不知道OutC同学所言“导航下Tab中有相对应的首页”，是指二级子类目中有一个第二层级的首页吗？我有点不太能理解你所描述的场景但总而言之，正如我在写内联Tab切换问题时所说，没有绝对的选择，关键是选择后如何处理好细节上的设计。

相关话题：Tab页签源地址：http://piglili.blogbus.com/logs/37791411.html

如何处理海量tab？

yusen — 2009-04-03 23:32:51

回国正好赶上百度用户体验部主办的UXday活动，我们小组讨论的话题是tab（标签）在使用时的禁忌。

我们讨论的话题集中在一个点上：如何处理海量的tab？

首先回顾一下Tab的历史。这里的tab，是一类交互元素的统称，既包括在web设计中的导航，也包括在浏览器等桌面软件中的使用。被称为tab的交互元素一般有如下两个特性：

同时具有动作和状态两个含义。tab之所以流行，一个原因就是因为它既方便操作，同时又能够让用户清楚地知道自己目前在哪个位置（tab）
从信息架构的角度来看，tab之间的内容一般是不交叉的。并且tab之间的关系应该是平等的，没有相互隶属的关系。

所以从广义来讲，绝大多数导航菜单其实都可以归结为tab。

在网页设计中tab的使用一般认为是Amazon开了先河。相信大家很多人都读过LukeW的经典回顾文章：The History of Amazon’s Tab Navigation（中文版请猛击这里）。从这篇文章中我们可以看到，Amazon的导航从最初只有两个tab：Book和Music，演化到2000年最多的时候有两排tab。很显然，当tab数量增多的时候，tab这种交互方式遇到了一些困难。

另一个例子是Word 2003中的设置对话框。如下图所示，当标签太多而显示空间有限的时候，微软不得不同样把标签排成两排。这样做的一个大问题是，上排的标签在选中的时候，如何表示选中状态和当前内容页的关系？

微软的做法是饱受诟病的。在上图中当用户点击上排标签时，上排自动和下排对调从而保持标签和内容页的紧贴关系。然而这个做法使得标签的位置非常不一致，相信很多人都有着同样的迷茫经历。

在其他一些软件中，如firefox 3（如下图），点击上排标签时，仅仅将标签显示变为选中状态，这样的好处是保持了标签位置的一致性，然而却失去了一些位置上的指示功能。

那么如果多排标签不是个好主意，如何处理很多的标签呢？

一个显然的思路是把标签从惯用的水平排列换到竖直排列。一般这样的排列是在视图的左侧，可能是以图标或者文字的形式。

不过这种做法存在一些问题。首先，如果标签的名字很长，将会占据很多宝贵的左侧空间，而这一空间正好是屏幕上用户注意焦点，兵家必争之地。有的网站的做法是将文字垂直摆放，这样的做法，特别对于英文网站来说，可读性简直就是灾难。如果放在右侧，有可能和滚动条相互干涉，并且用户也不容易注意到。其次，当标签不多的时候（考虑标签数目可变的情况），标签下方放什么内容也是比较头疼的。

一个思路是，如果标签之间存在着某种结构，那么可以把标签分组。然后增加一个导航级别。微软的onenote在这方面做到了登峰造极的程度，将信息分为Notebook, section, page三个层次，每个层次都用标签导航来表示，结果就是在页面的上方，左侧和右侧都布满了标签……微软功力不俗，用格式塔（左侧的分割）、色彩标记（section的彩色和page的白色）等手法把三层标签导航都处理得很好。

另一种分组的方式是直接呈现在标签上。考虑windows任务栏的默认分组方法，将同一个程序的不同窗口归为一组。或者是IE8中，将来源于同一父网站的标签用相同的颜色归为一组。

如果标签之间存在重要程度的不同，也可以考虑显示最重要的一批标签，同时以“更多”等按钮来提供余下的标签（交互设计模式中的extra on demand模式）。如Amazon在实在不能忍受双排标签之后就这样做了（如下图）。此外，还可以根据用户目前的位置提供相关性最高的标签。

如果标签之间不存在重要程度的区别，也不存在显然的结构呢？比如浏览器的标签？不同的浏览器有不同的做法。firefox和IE的默认做法是只显示一行标签，设定标签的最短长度，然后在两端加入向左/向右的箭头，同时还在标签栏左侧或者右侧加入显示全部标签按钮。Safari 4只在最右侧加入一个”…”的“显示全部标签”按钮。而Chrome做的比较奇怪，没有最短标签长度这一设置，也不管三七二十一将所有标签都显示在一行里面，于是当标签数目过多时就会变成如下图这个悲剧的样子。我们建议，如果只显示一行标签的时候，best practice是：在左右两侧显示滚动的箭头，并且提供以某种方式（通常是平铺或下拉菜单）显示全部标签列表的按钮，并且设定标签最短的长度。

总结浏览器的做法，可以看出还是以对标签栏的横向操作为主。举个手持设备的例子。facebook的iPhone App中，对于不同的feed是将其显示在一个“window”中，手指滑动可以拖动feed条在window下移动（语言很难描述清楚，看图）。另一个对标签条横向操作例子是苹果的Mac页面，在这里苹果使用了交互设计模式中的“注释滚动条”模式，将滚动条加上了标签的功能，这同时也是标签分组的使用。

总结以上讨论：

1. 在静态页面设计中，尽量避免使用多排水平标签的布置。可以使用垂直标签代替。

2. 如果标签之间存在结构，可以将标签分组。分组可以以下拉菜单，颜色分组等多种方式进行。

3. 如果标签重要性或相关性存在区别，可以显示最重要的标签，然后加入“更多”（全部）按钮。

4. 如果标签之间都是相互平等的，可以考虑对标签栏进行操作，如加入左右移动按钮，允许用户拖动/滑动等。

相关话题：Tab页签源地址：http://www.lanrenux.com/?p=163

Tab之所以为Tab

helicopter621 — 2009-02-22 14:47:04

Tab在UI上最广泛的两大应用，Tab导航(Tab Navigation)和内联Tab模块(Module Tab)，几乎已在不知不觉间成为每个网站的常驻元素。一种模式的流行必然带来对它的误用和滥用。可是，为什么要使用Tab？它有何优势？又该何时、如何使用？长得像Tab就是Tab了吗？长得不像Tab可以算是Tab吗？

首先认识一下Tab。这又是一个来自现实生活的隐喻。在我们纸质的笔记本、记事本、电话薄上，Tab可以帮助分组，从而实现对某一部分内容的快速定位，起到导航的作用。

Tab为什么会在UI设计上大行其道呢？主要有两个原因：

优化大量信息的展现——
-对于Tab导航，可以优化二级导航项的展现。不涉及任何鼠标悬置也能稳定展现它们（不像下拉菜单需要交互才能展示），并能表明清晰的层级关系。
-对于内联Tab模块，可以在原本同样的屏幕输出区(real estate)，增加2、3甚至更多倍的信息量。如同在同一块地皮上，盖一层楼和盖多层住宅的区别。

符合日常生活中的导航模式——
- 如果在交互和视觉上处理得当，Tab这种模式能给用户一种有所预期的安心感。我们在记事本上各个Tab之间翻来翻去，总是在同一个本子里，要翻回原来的 Tab很容易。同理，在UI上，用户会明确知道点击了另外一个Tab，还是能轻易回到原Tab，新打开的内容也不会是完全陌生的。不会有“是否会弹出新窗口？是否会跳转到另一个不一样的页，找不回原来内容？”的不确定感。
- 有效传达用户当前所在位置。优秀的Tab视觉设计可以模拟出翻到当前页的效果，比起传统的按钮，能更强烈却不突兀地传达用户所在页面，减轻用户的迷失感。

要使Tab能发挥这两种优势，交互和视觉设计上要注意什么呢？

1. 交互：

Tab个数

一般建议是主导航Tab3-10个，次导航不超过7个

点击后的跳转
对于内联Tab 模块，这就没什么好说的了。对于导航Tab，点击某Tab后，理应在当前页刷新！跳开新页面的话，上面的Tab导航条的项目个数、排序也不应有所改变。否则，用Tab这种样式是毫无意义的。更何况即使不用Tab，保持导航条的一致性也是导航条之所以为导航条的原因吧？

图1是某网站的首页导航条。其中——
红色=点击弹出新页面，有完全不同的导航条；
绿色=点击本页内刷新，有完全不同的导航条，且原本该导航项目不再出现在导航条中；
蓝色=点击本页内刷新，有完全不同的导航条，且该导航项目出现在导航条别的位置

天哪，这是迷航条吧？！

图1

图2是另一网站首页的导航条。红色框以内的4个Tab，点击后都会在本页内刷到相同的、却有着另一导航条的页面。其余的分别跳到不同的页面。

图2

这种既要模仿Tab，又毫不了解其本质的做法，最应避免呵。

个人认为像图3的处理方式比较恰当。“九点”是唯一会弹出新页面的导航项，所以予以明确的区别，除此之外其他各项在交互和视觉上均是统一的。

图3

hover切换还是点击切换？
hover切换有利于主动展现，弊端是鼠标斜滑时很容易误展开。而当Tab很多的时候，鼠标移动引起不断的动态切换，很容易让用户心烦。点击切换是把选择权交给用户，相比来说是更不容易触犯用户的做法，但毕竟多了一个主动的动作，有些情境下又会显得麻烦。

一般来说，导航Tab都是点击切换的，因为涉及到整页刷新时载入速度的问题。但有时因为担心Tab下的二级导航项藏起来用户找不到，就会出现图4这个导航 Tab采用hover切换刷新二级菜单的方式。但是这个导航条不少Tab的二级导航项很多，例如图4所示，博客Tab下足足13项！鼠标从“博客”移向离“博客”较远的项目时，经常误展开相邻Tab。于是用户不得不采用向下—>向右的低效路径。（那个可怜的用户就是我了）

图4

要解决也是简单的，只要降低灵敏度，将触发延时1.5秒左右就好。值得注意的是，对于像图4这种情况，不仅是一级的Tab和Tab之间要有延时，二级导航项和它头顶的Tab之间也应该有。试想鼠标从Tab A页内的操作区上移，想去选择Tab A的另一个二级项。若鼠标移过了头（向上滑鼠时难免的），就可能误展开与Tab A相邻的Tab B的二级项。这时要重新选择，必须先重新展开正确的Tab，再从二级项中去选，多烦人啊！

至于内联Tab模块，由于载入速度会快很多，到底选择hover还是点击切换就较难权衡了。可以考虑：

（1）Tab个数——如果Tab只有两个，那用户若把鼠标hover到另一个Tab，自然就是想看里面的内容咯？这时候hover自动切换似乎更替用户省事。随着Tab个数的增加，自动切换的弊端会随之变得明显。这时候就要考虑（2）（3）两个因素。

（2）在层内的操作——如果只是做出选择某个对象的操作，如选一条链接，hover展开对用户的操作不会有太大的阻碍，当然前提是解决了切换灵敏度过高的问题。但如果涉及到更复杂的操作，如多项选择、输入等，那还是让用户在一个安定不变的场景里完成任务吧。想想我们熟悉的Windows的设置对话框（图5）。

图5

（3）层内内容：Tab切换时需要加载的内容越多，越不合适自动切换，否则很容易出现悬置于一Tab出现的还是原悬置Tab下的内容。除去技术层面的影响，Tab内内容的本质也是另一考虑因素。当内联Tab 模块展示的是同级别下不同分类的内容（图6），如新闻（国内、国际…）、排行榜（人气最高、最新…），或用户对于各个Tab很可能没有特定倾向性的时候（抱着随便看看的心态），似乎自动切换更佳？但对于各Tab是非并列关系，或用户可能比较明确自己想看什么的情景（图7），点击切换也许更恰当。


图6	图7

总而言之，内联Tab模块的两种切换方式没有绝对的优劣之分，要综合考虑以上三要素来决定。

点击热区大小
YDL中强调了将整片Tab设为热区，对于Tab标题占满或几乎占满整片Tab的情况，通常问题不大。但是像图8这种Tab宽字少的内联Tab，热区只设在字上，就需要用户很准确的点击，造成一定的不便利。

图8

2. 视觉：

先来看看Yahoo Design Pattern Library里面对于Tab视觉设计的两条建议：

被选中的Tab与其他Tab相比，应有显著的突出感。未被选中的Tab在视觉上应让用户感觉是处于背景的，从而让用户更明确当前在站内所处的位置。
选中某Tab后展示出来的页面，应通过诸如颜色、弧线、边框等设计元素与该Tab联系起来。

也就是说，一个好的Tab样式设计会兼顾到两方面：让被选中的Tab突出（或将未被选中的弱化），将选中Tab里的内容与该Tab从视觉上联系起来。通过一些反例来说明问题吧——

例1：长得一点不像Tab，却套了内联Tab模块的交互模式

例2：长得像极了Tab，却是分别跳转到同一页面其他区域的页内导航。囧~~~

样式以及hover的效果都让人觉得肯定是Tab，但一点就飞到另一个页面啦~~~

例3：被选中的Tab与搜索框在视觉上毫无关联，真不知道上面的选择是否会影响搜索结果。

相比起来下面的设计给人更强的关联感吧？

例4：竖式Tab本身是不赖的想法，而且更接近生活中看到的Tab哦！但这个视觉呈现也太糟糕了，选中和没选中毫无区别

下例明显好很多吧？虽说那竖着写的英文单词还真让人看得辛苦……

例5：这个配色看得我一阵心慌，是不是眼睛有问题？怎么是渐进色的？都啥意思啊？

曾经，Amazon是Tab的疯狂使用者（图9），他们也是Tab导航火起来的始作俑者。但如今再去Amazon看看，一片儿Tab的踪影都没有了。其实，找到最适合自己网站用户群的设计，比追随设计潮流更重要吧？而且追随，也应该建立在理解的基础上。

图9

参考资源：

YDPL: http://developer.yahoo.com/ypatterns/parent.php?pattern=tabs

相关话题：Tab页签源地址：http://piglili.blogbus.com/logs/35575149.html

如何用Axure制作Tab页签

锦心 — 2009-02-06 02:16:26

这一段时间，我在进行“09帮助中心升级”项目，负责其中的白板和视觉设计，总算和Axure有了第一次的正式会晤。由于之前已经零散地学习过一些Axure的基础教程，也因Axure易用性还是挺高的，在制作大部分白板时，倒也得心应手。可…制作某个页面白板，需要使用Tab页签的时候，我碰到了问题－－我不想通过刷新页面来达到效果…于是，我在网上寻求解决方案，找到了一大堆用Axure制作的Tab页签的样例文件和Axure源文件，可对于新手用户来说，理解起来还是有些困难。揣摩一番后，我总算明白了如何制作，现把整个过程整理了一下，希望能对同为新手的朋友有些帮助。（在往下看前，您需对Axure的工作环境有大致的了解，在此，我不对其进行讲解了^_^）

在制作这个教程时，我使用的是Axure RP Pro 5，为了让教程更简单，我们这次制作的Tab只有3个页签，分别为tab 1、tab 2、tab 3。

第1步：

拖动widget面板中的Dynamic Panel控件到线框图工作区中（如图1），蓝色区域的大小由我们要制作的Tab页签的大小决定，超出蓝色区域的元素皆不显示。

图1

第2步：

双击动态面板（即蓝色区域）打开一个动态面板状态管理器（Dynamic Panel State Manager）对话框，在对话框中你可以创建、重命名、重新排序、删除和编辑动态面板的状态（如图2）。

图2

为了便于记忆，我们对动态面板状态管理器进行以下编辑（如图3）：

a.在Dynamic Panel Label中输入“Tab页签设计”（可依据你的喜好设置，最好能易识别和记忆）

b.单击“state 1”，呈选中状态，点击右侧“Rename”按钮，重命名为“tab 1”

c.在 Add new state的右侧输入框中输入“tab 2”，点击“Add”按钮。重复操作，添加“tab 3”。

图3

第3步：

双击动态面板状态管理器（Dynamic Panel State Manager）中的“tab 1”，在蓝色虚线框内绘制tab 1的页面，效果如图4。

图4

第4步：

a.选中含有“tab1”文字的上圆角矩形框，双击控件交互面板（Annotations&interactions)中的OnMouseEnter(这个教程是通过鼠标的滑动来切换各个页签，如果想通过鼠标点击进行切换，则双击OnClick),弹出交互场景属性面板（Interaction Case Properties),在面板中的step2中勾选Set Panel state(s) to State(s)，相应的，会在step3中出现“Set Panel state to State”（如图5）。

图5

b.点击Panel state to State，弹出Set Panel state to state面板，勾选“set Tab页签设计state to state”，此时，step2中出现“Set Tab页签设计 state to tab 1”，单击tab 1，选择要显示的状态，这里选择tab 1。

同理，为含有“tab 2”和“tab 3”的上圆角矩形框添加交互行为，只是在b步骤中单击tab1选择显示状态时，分别选择tab 2、tab 3。效果如图6。

图6

第5步：

全选tab1页面，ctrl＋c复制。双击“动态Tab页签设计”动态面板，弹出动态面板状态管理器（Dynamic Panel State Manager）对话框，在panel state中双击tab 2，ctrl＋v粘贴tab1页面。更改tab1上圆角矩形和tab2上圆角矩形的填充色，并更改内容。效果如图7所示。

图7

第6步：

依据第5步的操作，我们完成tab 3的设置。

第7步：

点击主菜单―Generate->Prototype (F5)或工具栏上的Prototype按钮，在打开的 Configure HTML Prototype对话框中，可以对原型进行配置和生成。配置完毕后，点击Generate按钮生成原型。

完毕，bow～

相关话题：Tab页签 Axure 源地址：http://ued.alipay.com/?p=844

亚马逊网站导航栏的变迁史

junchen — 2006-04-20 23:46:57

原文：The History of Amazon’s Tab Navigation
作者：Luke Wroblewski
译者：JunChen Wu

可以说是亚马逊网站普及了 Tab 式导航。这么多年来，他们一直在探索着一种用户界面，可以使他们越来越多的产品清晰的呈现在用户眼前。我们现在回头去看看亚马逊网站顶部导航的历史变迁也是一件非常有趣的事情。

在1998年，亚马逊网站只有两个一级大类：书籍和音乐。即使增加了一些分类，比如音像和礼物，水平的 Tab 式导航也能够扩展的非常平滑，并且通过颜色的不同，很容易区分产品。

在1999年到2000年的时候，亚马逊还在不断增加新的分类，并且是它的 Tab 式导航到达极限。店铺（zShops）、玩具与游戏、电器和电子贺卡这些新的产品分类的增加，使得亚马逊的 Logo 也没地方放了，并且页面文字也随之缩小了（当时页面仍然是按 800x600 分辨率设计的）。一直等到把 Tab 标签做成两排，才给 Logo 腾出了空间。很显然，Tab 式的导航已经被拉伸到了极限并且快要控制不住了。

在2000年的时候，亚马逊尝试着把所有的 Tab 去掉，但是在2001年还是增加了商店目录和特色商店 (Store Directory/Featured Stores)。这次重新设计，用一些特色的商店替代了日益增长的分类，并且提供了一个比较方便的途径让用户可以访问剩下的那些商店。当“我的店铺(personal stores)”的概念被提出后，亚马逊再一次回到了单行 Tab 式导航结构，并添加了“see more stores”链接来查看更多 Tab。

2003年到2004年，亚马逊仍然继续增加新的分类。但为了市场推广及促销考虑，Tab 导航反而变短了。Tab 会基于公司的促销活动以及用户的行为变化——增加或减少。很少 Tab 会一直在那里（除了“Welcome”和“Your Store”）。根据市场推广及促销，图片式 Tab 被运用起来，并且切换 Tab 时的颜色变化也变成随机的了。

为了解决 Tab 变化带来的疑惑，亚马逊开始试验一种可替代的方案，即单行动态 Tab 式导航（PPT）。2004年的时候作了一个线上测试，将 Tab 的数量减少至 2（就像 1998 年的设计）。第一个 Tab 是动态的（它取决于你所在的产品分类），第二个就是“所有分类”。在2005 年的一个版本中，导航从两个 Tab 开始，然后将当前分类作为新 Tab 插入其中，替代了之前的解决方案，不会替换掉当前任何 Tab。

本文作者简介

Luke Wroblewski is an interface designer, strategist, and author. He is currently a Principal Designer at Yahoo! and Principal of LukeW Interface Designs, a digital product design consultancy he founded in 1996. 更多...

快捷方式，不能随意快

A宣 — 2008-11-10 21:51:17

最近设计师小X遇到一个问题。他在设计一款全新的Web产品，通过几轮仔细地对功能及任务划分，确立了导航的组织结构与形式。Tab之间的任务关系为并列关系。

如下图：

由于是新产品，需求方对于这样的任务组织形式显得有些不自信，担心常用任务a1和b3无法被用户快速找到。每次操作需要花费一定时间成本去查找任务入口等。于是，需求方就“大胆”地提出这样一个想法：

在首页首要位置划分一块区域，把“用户常用”的功能链接放到里面。为名“快捷方式”，并解释说可以节省用户操作成本，不必浪费操作轨迹。

如下图：

首先，我对于这样的“节省方法”不赞同。其次，分享我不赞同的理由。

Windows这样定义快捷方式：快捷方式是Windows提供的一种快速启动程序、打开文件或文件夹的方法。他是应用程序的快速连接。

1，此产品导航设计，是对产品任务结构按不同属性划分，任务主要属性是用户查找功能的路径上重要的可信的路标，在产品最初期破坏属性路径等于是杀鸡取卵。举个例子：如果把任务比作一台电视机的话，快捷方式就像是一只遥控板。只有一台电视机的时候，我们可以拿起桌上的遥控板轻松快捷地控制电视的开关、频道的选择等。当一间房子有数百台各自播放不同内容电视机的时候，没有分类的、堆在一起的、各自不同的遥控板显然起不到快捷的作用了。

2，在按不同属性划分的并列关系导航中，用户行为的分布也非常广泛。在一项新产品中提及“常用任务”只是一厢情愿的臆断。

3，在产品的初期版本，尽量保持最简设计。发掘、发现、培养富有逻辑的任务组织方式，而不是任意做加法。

4，假设在首页显要位置增加了这个“快捷方式”区域，这种不含有任何组织逻辑的方式会在产品中被愈演愈烈，它的方便快速的使命很容易就成了“解决问题”的“伪救命草”。

相关话题：Tab页签源地址：http://www.a-xuan.cn/?p=217

网站tab导航的设计

tony — 2008-11-10 02:36:52

之前有写过一篇浏览器的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的情况下，如何精简结构是一门学问，需要多从产品形态和用户需求方面考虑，不一定需要一味的追求结构的清晰和统一，造成不必要的冗余。

本文最主要的是提供设计思路，抛砖引玉，有兴趣大家一起关注和分享这个话题。

相关话题：Tab页签源地址：http://uitony.com/?p=63

浏览器tab的设计

tony — 2008-08-04 00:19:17

虽然现在IE还是主导了整个浏览器的天下，但IE靠的并非是产品设计上的优势，而是依靠windows的力量，因为绝大多数的初级网民认为IE的产品体验不妨碍他们浏览网页。从产品体验上来看，其他浏览器的tab的设计体验，是让很多IE用户倒戈的直接原因。

浏览器tab的历史
在10年以前，互联网萌芽的时候，所有的网站设计的原型都是来自于软件，IE也刚刚奠定它在浏览器世界的霸主地位，但在当时，浏览器的tab设计就已经有了原型。记得当初我见过有一款浏览器的tab是在浏览器的下方，类似excel下方的sheet。在当时，也获得了不少用户的喜爱。
但自从amazon将tab的设计从软件工程引进到网站设计之后，用户体验的tab时代到来了。

从浏览器的使用体验来说，IE的窗口切换是在系统的任务栏，跟其他任务窗口和操作系统的信息混合显示在一起，虽然本质上也是tab，但是从信息容量到操作体验，相比现在浏览器的tab在操作成本上都要高出很多，尤其是在多窗口切换的时候。这也是为什么很多经常访问网站的中级用户慢慢地抛弃IE的主要原因。

浏览器的tab和地址栏
从目前的各大浏览器的设计来看，tab多数都放在地址栏的上面，唯独opera例外。
从信息架构上来看，浏览器的tab本应该在地址栏的上方，因为网站地址是属于单个tab下的一些信息。但是，为什么其他浏览器的tab放在地址栏的下方呢？
用户在使用的过程中会因此受到打击吗？答案是不会，相反，我认为tab应该放在地址栏下面，用户对tab的操作频率和需求要高于地址栏（包含前进、后退、刷新）。
让用户易用比逻辑架构清晰更加重要。

新开tab窗口的弹出位置
抛开设置不说，在有tab的浏览器中，在当前窗口中新开tab的交互方式有两种：
1 在当前窗口的旁（右）边（以傲游为代表）
好处是可以让同一个网站、或者说相关联的网站在同一个区域显示。

2 在整个tab的最右边（以firefox为代表）
好处是让用户清楚自己的访问的顺序，在窗口多的时候能按照心智模型去寻找目标tab。

几大浏览器中tab的细节体验
1 傲游的双击关闭tab是个很棒的设计，使用其他浏览器（我现在常用的firefox），我经常不小心在切换tab的时候点到了关闭按钮。
2 opera在未选中的tab上悬停时候，显示网页的缩略图如下：

相关话题：浏览器 Tab页签源地址：http://uitony.com/?p=52

Tab式位置导航变体

JunChen — 2008-11-10 02:29:20

Geoff Teehan 的一篇 The Tabbed Breadcrumb Navigation 介绍了一种新颖的、综合了 Tab 导航的 Breadcrumb（一直找不到合适的中译，位置导航？您的位置？还是面包屑？），如下图：

图中不错的表达了网站的层次、结构，单独来看很有新意。Yahoo! 在运用这招的时候加入了一些变化，参见 Yahoo! Food、Yahoo! Sports、Yahoo! TV。不过 Yahoo! Food 的那条 Buzz 确实造成了不小的干扰。当然 Yahoo! 必须考虑更多的因素，比如 Tab 的数量。图：

这很容易让我们联想起 Amazon 在导航上面做出的努力和改进，以及目前 Amazon 的动态 Tab 式导航。

除了惊叹于它的创意，我们仔细想想，在交互设计中，我们可以整合两种用户比较习惯的元素，这里是 Tab 导航和 Breadcrumb，这是一种将现存元素组合的创意思考方法。值得学习。

酷归酷，在这种触及核心的导航上，我仍然不改我的观点，最好的体现网站信息架构的交互方式，目前仍然是树型控件，或者称之为目录式导航（至少在国内如此）。

Tab页签 - UCD大社区

让人又爱又恨的标签们

说说tab设计

tab切换是click还是over？

交互学习笔记，Tab选项卡（一）

分析Tab元素的构成

一 。什么情况下应用Tab设计

信息之间具有某种关联特征

信息之间不应该存在对比或并行的关系

交互学习笔记，Tab选项卡（二）

（续接上文）

五。Tab的真实应用

[译]Tab (选项卡)的产品设计原则及应用

分析Tab元素的构成

一 。什么情况下应用Tab设计

信息之间具有某种关联特征

信息之间不应该存在对比或并行的关系

每个内容区应该有一个简短明确的标题。

Tab应该用于展现精炼的内容。

二 。Tab的可用性原则及优化方法

选中的标签应该高亮显示。

保持标签只在一行内显示

内容区之间的切换 应该没有延迟。

在标签上使用简短和有逻辑的文字。

不要在内容区内使用滚动条

三。考虑Tab的易用性

“选择”和“未选中”状态的标签 应该使用对比鲜明的颜色

确保 隐藏内容区里的信息 在语音阅读器中是可读的

使用语义化的HTML结构来构造 Tab的标签。

允许键盘操作。

提高对用户客户端的兼容性。

四。 提升之道。

在标签上使用icon来形象化地描述内容区说包含的信息。

在内容区切换的时候使用过渡动画。

当用户在Tab的标签区进行操作时，有明确的悬停响应。

五。Tab的真实应用

六。 Tab的创建教程（前端方面的）

七 。脚本资源

关于原作者

tab式广告模块如何设计？

Tab之所以为Tab

如何处理海量tab？

Tab之所以为Tab

如何用Axure制作Tab页签

亚马逊网站导航栏的变迁史

快捷方式，不能随意快

网站tab导航的设计

浏览器tab的设计

Tab式位置导航变体

一。什么情况下应用Tab设计

一。什么情况下应用Tab设计

二。Tab的可用性原则及优化方法

内容区之间的切换应该没有延迟。

“选择”和“未选中”状态的标签应该使用对比鲜明的颜色

确保隐藏内容区里的信息在语音阅读器中是可读的

四。提升之道。

七。脚本资源