网页选项卡TAB设计原则和应用案例教程

2020-05-10 11:36:08易采站长站整理

MailChimp
在这个案例中,你可以看到利用图标强化标签文字描述的应用。
MailChimp module tabs screen shot.
WebNotes
WebNotes 网站的Tab元素,标签位于内容区下方,令人耳目一新。内容区切换时有淡入淡出的动画。
WebNotes module tabs screen shot.
WorldCat.org
WordCat.org 在搜索框中使用了Tab标签,让用户可以针对特定搜索需求缩小搜索范围。(比如书籍、DVD、或者文章)
WorldCat dot org module tabs screen shot.
Martha Stewart
Martha Stewart 在网站的“推荐内容”上应用用了Tab设计,可以自动播放和带有过渡动画。
Martha Stewart module tabs screen shot.
Krista’s Creations
Krista’s Creations 利用字母表作为标签来控制图片的分类显示。
Krista's creation module tabs screen shot.
Clearspring
Clearspring 拥有响应速度极快的Tab,这是一个非常好的古典样式的Tab设计案例。
Clearspring module tabs screen shot.
Homewood
在网站Homewood中,它们也利用icon来辅助了标签上文字的表述。
Homewood module tabs screen shot.
Apple – iWork
苹果网站里,垂直方向排列的Tab标签设计,非常漂亮。
Apply iwork module tabs screen shot.
ExpressionEngine
网站 ExpressionEngine 把标签控制区放在Tab窗体的底部,在快速载入内容区和快速响应内容区切换方面,它也是一个典型案例。
ExpressionEngine  module tabs screen shot.
Viget Inspire
Viget Inspire 在“热门文章”版块使用了Tab,有淡入淡出的切换动画,内容区高度可根据内容长度自适应。
Viget Inspire module tabs screen shot.
Komodo Media
Komodo Media 的标签里,icon放在文字上方。
Komodo Media module tabs screen shot.
atebits
atebits presents 用Tab来展示产品介绍,它有效地在这么小的空间里展现了如此丰富的内容。