以用户为中心的设计

网址导航 - 书友会 - 邮件组

× 关闭
我有建议/意见

主要内容

Tab页签 最后更新: | 文章数: 16

一说到tab很自然地就想到了导航、信息架构。随着网站信息结构的复杂化,选择tab似乎是性价比最高、结构传递最明确的导航方式。

  • 16. 让人又爱又恨的标签们    2010-05-10 21:26

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

  • 15. 说说tab设计    2009-07-25 01:27

    要想在不宽裕的页面展现丰富的内容,现在通用的做法使用tab,在一块区域通过tab切换来更换该区域的内容。这篇文章分析了tab设计很在理,今天我也谈谈我抓了几个案例,谈谈对tab设计的看法。 我的意见是合理的tab设计应该是这两种类型: 第1种 鼠标单击切换。此种情形下tab是没有链接的(但是在选中的tab区域内增加 更多或者more链接)。 第2种 鼠标悬浮切换。此种情 ... ...

  • 14. tab切换是click还是over?    2009-07-12 01:56

    应该是两年前,网易首页全新的改版。内容区块大量采用了tab切换的方式,当我鼠标放上一个tab竟然立即切换到标签内容,当点击tab的时候竟然弹出了一个新的网页。我一直在想网易怎么犯这么低级的错呢?tab应该是单击以后在再切换的呀,这个是基本的交互原则。 然而从这个时候开始,发现在国内越来越多国内门户网站的小区块tab设计,采用了这种悬浮切换,点击弹出新页面频道的方式。而当我渐渐的开 ... ...

  • 13. 交互学习笔记,Tab选项卡(一)    2009-07-12 01:51

    Module Tabs(也称选项卡,后文中简称Tab,以便更符合中国设计师的日常叫法) 是一个常见的交互元素——将不同的内容重叠放置在某一布局区块内,重叠的内容区里的每次只有其中一层是可见的。用户通过鼠标点击或移到内容区所对应的标签上,来请求显示该层内容区。 译注:本文中指的是狭义的Tab,指在界面的某一版块区域内所应用的Tab设计。实际上,绝大多数网站导航也是Ta ... ...

  • 12. 交互学习笔记,Tab选项卡(二)    2009-07-12 01:49

    (续接上文) 五。Tab的真实应用 现在为止,我们从细节上探讨了Tab这种交互元素,是时候来看看真实案例了,在这一章节,我们分析一些Tab元素的应用,希望可以带给大家灵感。 Haveamint.com 这个网站在首屏位置使用大量Tab元素 以展现数量庞大的信息。 Yahoo! 雅虎在头版位置使用Ta ... ...

  • 11. [译]Tab (选项卡)的产品设计原则及应用    2009-07-03 14:21

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

  • 10. tab式广告模块如何设计?    2009-05-01 23:49

           当有多个窗格的内容且每次只能显示一个窗格,同时各个窗格之间的内容不需要相互参照的时候,可以考虑使用tab式标签来展示。自从亚马逊开了标签的使用先河后各类网站风起使用之,因为它的使用既优化了大量信息的展现同时也很符合日常生活的使用习惯(tab其实就是一个现实生活的隐射)。     &nb ... ...

  • 9. Tab之所以为Tab    2009-04-12 20:17

    不久前写了这篇关于Tab的文章,最近看到两老外的关于Tab的好文,特此推荐。在Tabbed Navigation, and What Makes it Useful一文中,David Leggett解释了Tab这个metaphor的来源,以及使用导航Tab的四个好处,不过没有具体讲该怎么设计。作为补充,可以参考Smashing Magazine上的Showcase Of Well-Designed ... ...

  • 8. 如何处理海量tab?    2009-04-03 23:32

    回国正好赶上百度用户体验部主办的UXday活动,我们小组讨论的话题是tab(标签)在使用时的禁忌。 我们讨论的话题集中在一个点上:如何处理海量的tab? 首先回顾一下Tab的历史。这里的tab,是一类交互元素的统称,既包括在web设计中的导航,也包括在浏览器等桌面软件中的使用。被称为tab的交互元素一般有如下两个特性: 同时具有动作和状态两个含义。tab之所以流行,一个 ... ...

  • 7. Tab之所以为Tab    2009-02-22 14:47

    Tab在UI上最广泛的两大应用,Tab导航(Tab Navigation)和内联Tab模块(Module Tab),几乎已在不知不觉间成为每个网站的常驻元素。一种模式的流行必然带来对它的误用和滥用。可是,为什么要使用Tab?它有何优势?又该何时、如何使用?长得像Tab就是Tab了吗?长得不像Tab可以算是Tab吗?首先认识一下Tab。这又是一个来自现实生活的隐喻。在我们纸质的笔记本、记事本、电话薄 ... ...

  • 6. 如何用Axure制作Tab页签    2009-02-06 02:16

    这一段时间,我在进行“09帮助中心升级”项目,负责其中的白板和视觉设计,总算和Axure有了第一次的正式会晤。由于之前已经零散地学习过一些Axure的基础教程,也因Axure易用性还是挺高的,在制作大部分白板时,倒也得心应手。可…制作某个页面白板,需要使用Tab页签的时候,我碰到了问题--我不想通过刷新页面来达到效果…于是,我在网上寻求解决方案, ... ...

  • 5. 亚马逊网站导航栏的变迁史    2006-04-20 23:46

    原文:The History of Amazon’s Tab Navigation 作者:Luke Wroblewski 译者:JunChen Wu 可以说是亚马逊网站普及了 Tab 式导航。这么多年来,他们一直在探索着一种用户界面,可以使他们越来越多的产品清晰的呈现在用户眼前。我们现在回头去看看亚马逊网站顶部导航的历史变迁也是一件非常有趣的事情。 ... ...

  • 4. 快捷方式,不能随意快    2008-11-10 21:51

    最近设计师小X遇到一个问题。他在设计一款全新的Web产品,通过几轮仔细地对功能及任务划分,确立了导航的组织结构与形式。Tab之间的任务关系为并列关系。 如下图: 由于是新产品,需求方对于这样的任务组织形式显得有些不自信,担心常用任务a1和b3无法被用户快速找到。每次操作需要花费一定时间成本去查找任务入口等。于是,需求方就“大胆”地提出这样一个想法: 在首页首要位置 ... ...

  • 3. 网站tab导航的设计    2008-11-10 02:36

    之前有写过一篇浏览器的tab设计,这回说说网站的tab设计。 一说到tab很自然地就想到了导航、信息架构。随着网站信息结构的复杂化,选择tab似乎是性价比最高、结构传递最明确的导航方式。这也是其中面包屑导航方式衰弱的重要原因。 如果你想用tab的方式构架你的网站,搞明白下面几个问题,或许对你怎么设计会有帮助。 用tab解决什么问题? 在设计tab之前,先要搞清楚为什么用tab ... ...

  • 2. 浏览器tab的设计    2008-08-04 00:19

    虽然现在IE还是主导了整个浏览器的天下,但IE靠的并非是产品设计上的优势,而是依靠windows的力量,因为绝大多数的初级网民认为IE的产品体验不妨碍他们浏览网页。从产品体验上来看,其他浏览器的tab的设计体验,是让很多IE用户倒戈的直接原因。 浏览器tab的历史 在10年以前,互联网萌芽的时候,所有的网站设计的原型都是来自于软件,IE也刚刚奠定它在浏览器世界的霸主地位,但在当时,浏览 ... ...

  • 1. Tab式位置导航变体    2008-11-10 02:29

    Geoff Teehan 的一篇 The Tabbed Breadcrumb Navigation 介绍了一种新颖的、综合了 Tab 导航的 Breadcrumb(一直找不到合适的中译,位置导航?您的位置?还是面包屑?),如下图: 图中不错的表达了网站的层次、结构,单独来看很有新意。Yahoo! 在运用这招的时候加入了一些变化,参见 Yahoo! Food、Yahoo! Sp ... ...

1-16 of 16