仓酷云

标题: 来一发网页选项卡TAB计划准绳和使用案例教程 [打印本页]

作者: 爱飞 时间: 2015-1-15 23:54
标题: 来一发网页选项卡TAB计划准绳和使用案例教程
CSS的极大优势表现在简洁的代码，对于一个大型网站来说，可以节省大量带宽，而且众所周知，搜索引擎喜欢清洁的代码。
网页制造poluoluo文章简介：ModuleTabs(也称选项卡，后文中简称Tab，以便更切合中国计划师的一样平常叫法)是一个罕见的交互元素――将分歧的内容堆叠安排在某一结构区块内，堆叠的内容区里的每次只要个中一层是可见的。用户经由过程鼠标点击或移到内容区所对应的标签上，来哀求显现该层内容区。
ModuleTabs(也称选项卡，后文中简称Tab，以便更切合中国计划师的一样平常叫法)是一个罕见的交互元素——将分歧的内容堆叠安排在某一结构区块内，堆叠的内容区里的每次只要个中一层是可见的。用户经由过程鼠标点击或移到内容区所对应的标签上，来哀求显现该层内容区。

译者：西乔SmashingMagazineJacobGube

ModuleTabs(也称选项卡，后文中简称Tab，以便更切合中国计划师的一样平常叫法)是一个罕见的交互元素——将分歧的内容堆叠安排在某一结构区块内，堆叠的内容区里的每次只要个中一层是可见的。用户经由过程鼠标点击或移到内容区所对应的标签上，来哀求显现该层内容区。
（译注：本文中指的是广义的Tab，指在界面的某一版块地区内所使用的Tab计划。实践上，尽年夜多半网站导航也是Tab的一种使用。）
web界面的计划趋向是延长页面屏长，下降信息的显现密度，但同时又不克不及就义可视的信息量。在这类趋向下，Tab这类交互元素成了一个愈来愈广泛的使用。比方在Blog界面的计划中，人们在侧边栏利用Tab形式来显现”最新更新|最热更新“的文章列表以引诱用户疾速跳转到文章内容页，这类形式令页面布局松散同时在视觉上不那末鹊巢鸠占。
本文将会商基于web页面或别的web使用中怎样计划Tab，同时分享一些产物计划准绳、实在的使用案例、教程和一些能匡助你间接完成Tab使用的收费剧本。
剖析Tab元素的组成

为了一致叫法以便于举行会商，我们先花工夫来熟悉一下Tab元素的每一个组成部分。

标签：用户把持切换内容区的操纵地区。
标签和内容区在视觉上看起来应当是一个全体。
标签上的笔墨应当简便、无歧义并能正确形貌出它所对应的内容区的信息特性。
标签有选中和未选中两种形态，每次只能有一个标签是选中形态，在页面刚载进时，默许第一个标签是选中形态。
内容区：Tab元素中堆叠的区块。用于显现信息内容。
内容区和标签逐一对应，
以后显现的内容区对应选中形态的标签，以后埋没的内容区对应未选中形态的标签。
用户应该能很容易地经由过程把持标签来切换对应的内容区。
默许被选中的内容区应当在页面载进后当即显现。

一。甚么情形下使用Tab计划

当交互计划师但愿节俭页面空间；松散结构；且必要组合的几种信息之间具有联系关系性时，能够选择Tab使用。
信息之间具有某种联系关系特性

组成一个全体的每一个元素之间都应当具有逻辑上的联系关系性。以是呈现在统一个tab元素中的几种信息本人应当具有联系关系特性，如许用户才干将全部Tab地区视为一个全体。比方在Blog中很罕见的信息组合：“最新更新|最热文章|批评最多”。
下图是网站WebdesignerDepot的侧边栏上的Tab元素：“全体文章|最受接待|最新更新”

信息之间不该该存在对照或并行的干系

Tab元素中，统一时候，只能显现一层内容区。当用户必要对位于分歧内容区上的信息举行对照，大概这几种信息同时显现会更便于用户浏览时，就不该该利用Tab。不然会招致用户为了比对所需的信息，而一直在标签之间举行切换。
上面这个案例中，BGPatterns(一个在线制造背景图案的网站）tab就用得不是中央。当用户想计划或修正他所制造的背景图案时，必需重复在几个标签之间举行切换。Tab在这里妨害了用户的操纵。假如在页面上同时显现这4个内容区上的信息，可用性和友爱度会更高。

另外一个不和案例：网站BestWebGallery在它侧边栏上所安排的Tab，标签分离是”出格保举“（包括了一些网站一切者以为值得注重的链接）和“最新批评”。这两组信息之间并没有逻辑接洽，用户会很困惑为何这二者要放在一同呢。以是这个Tab中的两组信息最好分隔安排。

每一个内容区应当有一个冗长明白的题目。

Tab元素的标签区宽度是无限的，以是标签区的笔墨应当简便简明，具有代表性，长度把持在1~3个英文单词。用精华精辟的体例展现信息，除坚持计划款式稳定形外，还可让用户更疾速地处置笔墨信息，用以展望埋没地区上所包括的内容。
Tab应当用于展示精华精辟的内容。

Tab本意用于展示尺度化和易于了解的信息。基于此，Tab应当只用于显现信息择要和内容要点，比方列表，数据图表，或1~2段冗长的笔墨这类情势。

网页制造poluoluo文章简介：ModuleTabs(也称选项卡，后文中简称Tab，以便更切合中国计划师的一样平常叫法)是一个罕见的交互元素――将分歧的内容堆叠安排在某一结构区块内，堆叠的内容区里的每次只要个中一层是可见的。用户经由过程鼠标点击或移到内容区所对应的标签上，来哀求显现该层内容区。

这一章节我们将会商一些关于Tab的可用性计划准绳，和怎样使这类交互元素变得更友爱和无效。二。Tab的可用性准绳及优化办法

这一章节我们将会商一些关于Tab的可用性计划准绳，和怎样使这类交互元素变得更友爱和无效。
选中的标签应当高亮显现。

选中形态的标签应当计划得显眼，让用户简单辨别以后显现的内容区是对应哪一个标签。通用做法是为未选中形态利用一致的背景致，为出于选中形态的标签上利用高亮的背景致。
坚持标签只在一行内显现

Tab的标签一般是程度偏向分列的（固然假如你乐意，也能够计划成垂直偏向分列的），标签假如散布在多行上会招致用户在利用中发生困惑。
这是因为在程度偏向上多行散布标签，隐含一种品级干系，大概让用户误觉得第二行是第一行的子级。
标签必要散布在多行上时，也就意味着标签的数目过量大概标签上笔墨太长。而这些都是必要被精简的。

内容区之间的切换应当没有提早。

利用Tab来把持内容切换的特征之一是疾速和互动。为此，应当在html代码里提早内嵌一切内容区的代码，并经由过程CSS/Javascript来埋没未被选中内容区，而不是等用户切换到某个标签后再往远程请载进信息。
制止在标签切换的时分往载进页面，利用AJAX从远程读数据来天生静态菜单也是一个举措，但这对利用语音浏览器的用户（译注：Screen-Reader：为目力停滞的用户筹办，能够语音读出页面上的信息。）是不友爱的，由于语音浏览器不撑持DOM模子。
（译注：有4种办法载进埋没区的内容代码：

html一次性载进：这类办法原始且平安，可是存在数据太多或太庞大招致页面剖析迟缓，从而招致全部页面翻开速率变慢，这是不成忍耐的。
frame:将埋没区的代码作为一个frame载进，frame的优点是能够新建历程，和页面中的图片同时下载。分歧的扫瞄器能够运转必定数目的历程并行，好比IE可以同时同意4个。如许对全体页面的翻开速率影响小。别的，frame能够进进扫瞄器缓存，在多个页面共用统一个Tab元素时，frame是一个好选择。
iframe：iframe和frame相似，承继了frame的长处，别的它还能够作为一个容器随便嵌进页面。googleadsense利用了iframe来完成下场部代码的载进。。
Ajax：呼应用户操纵或呼应某个触发前提，由JS在背景向服务器收回哀求，载进埋没区的代码。我以为除交互和必要呼应静态天生的内容外，没需要ajax手艺。）

在标签上利用冗长和有逻辑的笔墨。

标签应当计划得尽量窄，以便在一行内包容尽量多的标签。
在标签区利用复杂的形貌或内容关头字，能够匡助用户在扫描页面时疾速找到他们想要的内容。以是利用归纳综合正确切合逻辑的笔墨来形貌内容区长短常主要的，选用这些笔墨应当经由深图远虑。
上面这个在网站CBS.com上的案例，是一个难用的Tab。标签上没有任何申明性笔墨，用户没法展望未显现的内容区里究竟有甚么。

而在NavigantConsulting的网站上，利用数字来表示数据是有序的。但仍旧没有表达出内容区里包括甚么。这类计划简单发生歧义招致用户发生不用要的狐疑。

不要在内容区内利用转动条

在Tab的内容区里利用转动条会增添用户包袱：用户在要查找信息在哪一个内容区里时，不但必要切换标签，还必要加上挪动转动条的操纵。
内容区里包容的信息太多或计划Tab时设定的高度不敷，会招致转动条呈现。以是必要思索精简内容、增添高度值，或把选中形态的内容区处置为的高度自顺应。
三。思索Tab的易用性

更庞大的交互举动的呈现，在不革新页面的形态下异步更新内容，和怎样满意用户利用分歧会见体例，包含那些很难断定的非典范情况下的会见需求，这些情况令易用性成为以后最抢手的话题。本章节中，我们将会商一些在计划Tab元素时你应当晓得的易用性准绳。
“选择”和“未选中”形态的标签应当利用对照光显的色彩

为了让目力上有停滞的用户能分清哪些标签是已选中的，哪些是未选中的，应当利用高对照的背景致来做出辨别。
Yahoo!News网站中的不和案例：选中和未选中形态的标签只要十分小的视觉上的差别，他们对目力好的用户没成绩，可是会给目力欠安的用户带来贫苦。

别的，请务必包管标签的笔墨色彩（远景色）和标签背景致有充实的对照。即便是未选中的标签，用户也应当能轻松浏览下面的笔墨。为了让未选择的标签看起来不显眼，而把它们都间接变灰是不当当的。
确保埋没内容区里的信息在语音浏览器中是可读的

基于可会见性，Tab应当利用手艺将未选中形态的内容区埋没起来，可是不克不及在DOMTree中删除他们。好比不克不及利用display:none;大概visibility:none如许的css参数往界说容器。这类参数招致语音浏览器没法读取被埋没的内容区中的信息。
（译注：中国计划师大概不太器重语音浏览器的可会见性，可是在外洋，有专门的法则条目划定，机构网站不得卑视有停滞的用户，包含目力缺点，举动停滞、癫痫患者等，以是本国的产物或前端工程师会很器重这一点，否则会遭到赞扬乃至起诉。这类差别往看看中国人是怎样计划盲道的就分明了。）
概况请见RogerJohansson’s的文章《使用css埋没内容：成绩和对策》”HidingwithCSS:Problemsandsolutions“.
（译注：RogerJohansson’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中，图标用于抽象地增补申明所对应的内容区的功效。

登录/注册后可看大图

2009072215494680.jpg (11.69 KB, 下载次数: 10)

下载附件保存到相册

来一发网页选项卡TAB计划准绳和使用案例教程

2015-1-15 23:54 上传

在标签上利用icon，必需包管它们是抽象的，离题的。利用不相干的icon会拔苗助长。
制止在标签上间接用icon来取代笔墨。
分歧的人对一个图象有分歧的解读，最平安的办法是利用加上文原本形貌内容区信息。
在内容区切换的时分利用过渡动画。

在内容区切换的时分利用过渡转场动画是一个不错的选择，能够为用户供应主动的视觉反应——内容区正在变更！
人人能够往网站Coda，从左到右点击Tab标签，浏览切换时的效果。

登录/注册后可看大图

2009072215494752.gif (40.08 KB, 下载次数: 13)

下载附件保存到相册

来一发网页选项卡TAB计划准绳和使用案例教程

2015-1-15 23:54 上传

当用户在Tab的标签区举行操纵时，有明白的悬停呼应。

默许情形下，当用户将鼠标移到超链接或标签地区上时，鼠标指针的款式会产生改动，让用户晓得标签地区是可点击的。
除此以外，还能够使用背景致变更来呼应用户的鼠标操纵。关于那些不熟习Tab标签操纵的网站新用户而言，这是很有效的。
下图中Vyniknite.sk网站的案例里：当用户鼠标划过未选中形态的标签，背景致会酿成光显的白色。

登录/注册后可看大图

2009072215494898.gif (37.3 KB, 下载次数: 15)

下载附件保存到相册

来一发网页选项卡TAB计划准绳和使用案例教程

2015-1-15 23:54 上传

网页制造poluoluo文章简介：ModuleTabs(也称选项卡，后文中简称Tab，以便更切合中国计划师的一样平常叫法)是一个罕见的交互元素――将分歧的内容堆叠安排在某一结构区块内，堆叠的内容区里的每次只要个中一层是可见的。用户经由过程鼠标点击或移到内容区所对应的标签上，来哀求显现该层内容区。

如今为止，我们从细节上切磋了Tab这类交互元素，是时分来看看实在案例了，在这一章节，我们剖析一些Tab元素的使用，但愿能够带给人人灵感。五。Tab的实在使用

如今为止，我们从细节上切磋了Tab这类交互元素，是时分来看看实在案例了，在这一章节，我们剖析一些Tab元素的使用，但愿能够带给人人灵感。
Haveamint.com
这个网站在首屏地位利用大批Tab元素以展示数目复杂的信息。

Yahoo!
雅虎在头版地位利用Tab计划，对信息内容的显现举行了紧缩和模块化。

iGoogle
Igoogle在模块中大批利用了Tab，不占用大批的屏幕空间，又令信息丰满。

BlueAcorn
蓝橡果网站使用Tab来显现网站的抢手文章:电子商务和Magento（一个电商软件平台），内容区上还安排着引诱用户扫瞄更多文章列表的按钮。

MailChimp
在这个案例中，你能够看到使用图标强化标签笔墨形貌的使用。

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

WorldCat.org
WordCat.org在搜刮框中利用了Tab标签，让用户能够针对特定搜刮需求减少搜刮局限。（好比书本、DVD、大概文章）

MarthaStewart
MarthaStewart在网站的“保举内容”上使用用了Tab计划，能够主动播放和带有过渡动画。

Krista’sCreations
Krista’sCreations使用字母表作为标签来把持图片的分类显现。

Clearspring
Clearspring具有呼应速率极快的Tab，这是一个十分好的古典款式的Tab计划案例。

Homewood
在网站Homewood中，它们也使用icon来帮助了标签上笔墨的表述。

Apple-iWork
苹果网站里，垂直偏向分列的Tab标签计划，十分大度。

ExpressionEngine
网站ExpressionEngine把标签把持区放在Tab窗体的底部，在疾速载进内容区和疾速呼应内容区切换方面，它也是一个典范案例。

VigetInspire
VigetInspire在“抢手文章”版块利用了Tab，有淡进淡出的切换动画，内容区高度可依据内容长度自顺应。

KomodoMedia
KomodoMedia的标签里，icon放在笔墨上方。

atebits
atebitspresents用Tab来展现产物先容，它无效地在这么小的空间里展示了云云丰厚的内容。

Tumblon
Tumblon把标签安排在内容区下方，能疾速呼应切换，但欠好的是，标签的选中形态和未选中形态不是那末简单辨别。

kevadamson.com
在KevAdamson的网站中，右侧栏里有好几个Tab，网站利用了分歧的ICON配图，匡助用户了解分歧Tab的功效。

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

有良多教程能告知你在页面上怎样创建和完成一个Tab，上面，你能够经由过程一些顶尖教程来懂得更多关于创立Tab的技能。
BuildingTabbedContent《怎样创立Tab》
经由过程浏览这篇低级教程，你能够懂得怎样经由过程利用JS框架Prototype创立一个复杂的Tab元素，

CreateATabbedInterfaceUsingjQuery《利用jQuery来创立Tab》
DanHarper供应给读者关于怎样利用jQuery库(译注：出名的js库）来构建Tab。

AccessibleImage-TabRollovers《图片标签导航的疾速切换》
进修怎样完成用图片来制造标签导航区，并完成疾速切换

CreateaSlickTabbedContentAreausingCSS&jQuery《利用CSS和jQuery来完成一个可光滑切换的Tab》

网页制造poluoluo文章简介：ModuleTabs(也称选项卡，后文中简称Tab，以便更切合中国计划师的一样平常叫法)是一个罕见的交互元素――将分歧的内容堆叠安排在某一结构区块内，堆叠的内容区里的每次只要个中一层是可见的。用户经由过程鼠标点击或移到内容区所对应的标签上，来哀求显现该层内容区。

有良多教程能告知你在页面上怎样创建和完成一个Tab，上面，你能够经由过程一些顶尖教程来懂得更多关于创立Tab的技能。六。Tab的创立教程（前端方面的）

有良多教程能告知你在页面上怎样创建和完成一个Tab，上面，你能够经由过程一些顶尖教程来懂得更多关于创立Tab的技能。
BuildingTabbedContent《怎样创立Tab》
经由过程浏览这篇低级教程，你能够懂得怎样经由过程利用JS框架Prototype创立一个复杂的Tab元素，

CreateATabbedInterfaceUsingjQuery《利用jQuery来创立Tab》
DanHarper供应给读者关于怎样利用jQuery库(译注：出名的js库）来构建Tab。

AccessibleImage-TabRollovers《图片标签导航的疾速切换》
进修怎样完成用图片来制造标签导航区，并完成疾速切换

CreateaSlickTabbedContentAreausingCSS&jQuery《利用CSS和jQuery来完成一个可光滑切换的Tab》

七。剧本资本

假如你真正查找能间接在你网站上使用的Tab剧本代码，这有一些收费的办理计划。
DOMTab
DomTab是一个很受接待的剧本，能很简单创立一个Tab元素，把一般的链接列表改革为Tab元素。

JavaScriptTabifier
这段由BarelyFitz计划的即插即用的JavaScript代码，可以匡助你在团体网站上更疾速完成Tab元素。

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

Coda-Slider
Coda-Slider是Coda计划的Tab完成剧本，能够完成内容区切换的转场动画效果，还能够设置将Tab标签处置为靠左对齐或靠右对齐。

idTabs
idTabs是jQuery的一个简化插件，其壮大的设置功效能够简化本来控件中庞大的参数组合。

Tabtastic
idTabs是一个JavaScript库，也包括创立Tab工具，这有深切浅出的利用教程StepbySteppane。

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

Carousel-ModuleTabs
这段Tab剧本复杂但有高度自界说的空间，撑持动画与主动播放。

关于原作者

JacobGube是一个JS和PHP工程师、WEB计划师、作家，SixRevision的开创人及总编。SixRevision是一个在线共享专业的开辟与计划资本及教程的平台。这是他的Twitter:followhimonTwitter。

在几乎所有的浏览器上都可以使用。15.以前一些非得通过图片转换实现的功能，现在只要用CSS就可以轻松实现，从而更快地下载页面。

作者: 只想知道 时间: 2015-1-17 23:48
这个过程其实就是交流的过程。所有的这些都需要花时间。在面对完全陌生的软件时，就要多花时间对其产生初步的印象。此外，多操作也是非常重要的。

作者: 小魔女 时间: 2015-1-26 16:36
Adobe Dreamweaver(前称Macromedia Dreamweaver)是Adobe公司的著名网站开发工具。

作者: 精灵巫婆 时间: 2015-2-4 20:54
布局表格、绘制层、制作CSS样式表等，这些内容迷糊了我的视线，真是没想到制作一个精巧别致的网页是如此的困难，可是心有不甘。

作者: 因胸联盟 时间: 2015-2-10 10:15
由CS4 版本开始，则转用WebKit 排版引擎（亦即Google Chrome和Apple Safari浏览器所用的排版引擎）作为网页预览。

作者: 冷月葬花魂 时间: 2015-3-1 10:14
是当我和赵丽芬崔明艳老师进行交流后，很快就了解了还不太清楚的内容和并不了解的知识（像布局表格、绘制布局单元格等）。

作者: 活着的死人 时间: 2015-3-10 17:28
由CS4 版本开始，则转用WebKit 排版引擎（亦即Google Chrome和Apple Safari浏览器所用的排版引擎）作为网页预览。

作者: 金色的骷髅 时间: 2015-3-17 09:36
每天上网看着那样多的网页，于是我才下定决心选择了网页制作这一门课程，目的就是希望以后能够做出一个完美的网页来。

欢迎光临仓酷云 (http://www.ckuyun.com/)