首页 > 教程 > 关键词  > 网页设计最新资讯  > 正文

如何处理海量tab

2009-04-07 15:30 · 稿源:懒人有禅

回国正好赶上百度用户体验部主办的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的白色)等手法把三层标签导航都处理得很好。

 

举报

  • 相关推荐
  • AI日报:扣子空间网页设计功能上线;阿里Wan 2.2即将上线;​OpenAI即将发布 GPT-5

    【AI日报】今日AI领域重要动态:1)Coze推出网页AI设计功能,5分钟生成网页;2)通义千问发布Qwen-MT翻译模型,支持92种语言;3)ChatGPT全面推出Agent功能;4)阿里云Wan2.2视频生成AI即将上线;5)Anthropic推出审计Agent提升AI对齐测试;6)OpenAI计划8月发布GPT-5;7)谷歌发布无代码AI应用开发工具Opal;8)南洋理工与上海AI Lab推出PhysX-3D项目,为3D模型添加物理属性;9)快手开源KAT-V1大模型,40B版本性能接近DeepSeek-R1;10)讯飞星火X1升级版上线,在多语言和语音处理方面显著提升。(140字)

  • 3名海尔麦浪冰箱用户开麦分享使用体验,新款麦浪同时发布

    海尔麦浪冰箱8月9日在北京举办了一场由用户主导的新品发布会。现场资深用户通过脱口秀分享真实使用体验,并对新品进行测评。90后夫妻用户表示冰箱大容量设计减少了进城采购频率;铲屎官用户称赞专属宠物食品存储空间;宝妈用户则依赖智能提醒功能。新品采用麦浪金渐变配色,配备576L大容量和精细分区,搭载3000K餐饮级灯光和磁控保鲜科技,运行噪音仅31分贝。现场测评显示冷冻60天的大黄鱼仍保持新鲜。该系列冰箱上市9个月销量超70万台,新品将于8月20日开启预售。这场发布会既展示了用户对产品的认可,也让新品提前接受市场检验。

  • 苹果iOS 26 Beta 5上线:细节优化 更新内容一览

    控制中心成为此次更新的重点优化区域。页面滑动切换时新增的弹性动画使操作更具连贯性,Wi-Fi模块长按后首次显示网络属性标识——私有网络标注“家庭/办公”字样,公共网络则提示“需谨慎连接”,密码保护状态通过锁形图标直观呈现。灵动岛区域在电量降至20%时,会以红色波浪动画形式弹出低电量警告,取代此前单调的弹窗提示。 视觉设计层面,主屏幕底部的“液态

  • 曝澎湃OS 3最快本月开启Beta版内测:小米16首发

    快科技8月5日消息,博主爆料各厂商将在8月陆续开启下一代操作系统Beta版内测。小米16系列预计9月发布,将搭载澎湃OS 3系统。该系统新增"灵动岛"功能,利用前置摄像头周围区域显示卡片、弹窗等信息,用户无需打开应用即可查看导航、播放进度等内容。此外,澎湃OS 3将升级AI体验,强化"超级小爱"功能,支持文字、语音、图片等多种内容识别及实时对话交互。新系统还优化了智能助手理解力,可处理更复杂的生活场景需求。(140字)

  • 文远知行与阿布扎比综合交通中心合作,扩大Robotaxi在阿运营范围

    2025年7月29日,文远知行与Uber合作在阿布扎比推出Robotaxi服务,覆盖阿尔雷姆岛和阿尔马里亚岛等核心区域。这是中东地区规模最大的自动驾驶车队,采用文远知行新一代GXR车型,每车可载5人。服务范围已覆盖阿布扎比近半核心区,包括主要住宅区和商业中心。自2024年12月启动以来,车队规模已增长三倍,日均完成数十次订单。该项目是阿布扎比智能交通战略的重要部分,目标到2040年实现25%公共交通依赖智能出行。合作方表示,这将推动自动驾驶技术在中东地区的主流化应用。

  • 重新思考设计的边界:三星Galaxy S25 Edge以5.8mm容纳旗舰体验

    三星Galaxy S25 Edge通过系统性重构实现了轻薄与旗舰性能的完美平衡。机身仅5.8毫米厚、163克重,却搭载完整影像系统(2亿像素主摄+1200万超广角)和骁龙8 Gen4芯片,采用钛金属边框和新型散热结构确保性能稳定。AI方面集成Bixby语义识别、多任务处理等智能功能,支持端侧大模型运行。通过毫米级精密压缩工艺,在保持专业拍摄(10bit HDR视频)和AI体验的同时,重新定义了"减法设计也能成就加法体验"的旗舰标准。

  • 三星Galaxy Z Fold7获欧盟能效标签认证!为用户打造可靠使用体验

    三星Galaxy Z Fold7凭借超轻薄机身和旗舰性能获得市场关注。折叠状态8.9mm、展开仅4.2mm,215g重量打破折叠屏厚重印象。4400mAh电池通过欧盟EPREL认证,单次充电最长可用40小时28分,2000次循环后仍保持80%容量,理论使用寿命超4.5年。采用康宁大猩猩玻璃Victus2和装甲铝边框,获得IP48防水和A级抗跌落认证。该机已正式发售,用户还可选购包含意外保修、专属贴膜等服务的Samsung Care+保障计划。

  • 精臣M3,以技术创新破解珠宝门店标签管理痛点

    珠宝门店标签管理面临强光褪色、尺寸适配难等痛点。精臣M3热转印智能标签打印机通过技术创新提供解决方案:采用化学固化技术使标签在强光下10年不褪色,耐用性提升300%;支持20-78mm宽度打印,适配戒指吊牌到大型摆件等全品类需求;配备300dpi高清打印头,可呈现0.8mm微小字体;支持手机电脑多端协作,内置千款珠宝行业模板,AI拍照自动生成标签版式。该设备通过长效耐�

  • 每日互动全新升级AITA超级营销助手,打造AI时代的品牌营销智能体验

    2025年AI大模型将重塑千行百业,品牌营销领域迎来以"智能体"为核心的效率革命。每日互动升级AITA(AI-Targeting Audience)系统,打造AI超级营销助手,通过"大数据+大模型"双引擎,实现智能洞察、精准策略生成和高效投放对接。该系统突破传统营销的数据局限,支持知识库接入行业智库,提供跨平台人群圈选和智能媒介策略推荐,实现"洞察-圈人-投放"一站式工作流。AITA能持续优化投放效果,确保营销活动始终保持高效精准,助力品牌快速把握市场动态和消费者需求,推动全域智能营销发展。

  • TME产品设计周开幕 腾讯音乐首席执行官梁柱:共同创造用户喜爱的体验

    腾讯音乐娱乐集团(TME)近日盛大开启2025年产品设计周活动,主题为"设计无界·创意无限"。活动汇聚各界设计精英,TME首席执行官梁柱强调设计师需热爱产品并主动代言,产品经理与设计师要紧密协作,追求设计语言一致性,共同打造优质用户体验。活动期间还颁发了TME设计共创年度大奖和音乐科创特别奖。据悉,TME旗下Q Music Ideas设计开放平台已举办十余场设计大赛,与多个知名IP建立深度合作。活动邀请了故宫博物院单霁翔主任、洛可可设计集团贾伟等专家分享设计理念。TME表示将持续以用户为中心,优化产品体验,推出更具创新性的音乐产品和服务。