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

如何处理海量tab

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

 

另一种分组的方式是直接呈现在标签上。考虑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. 如果标签之间都是相互平等的,可以考虑对标签栏进行操作,如加入左右移动按钮,允许用户拖动/滑动等。

举报

  • 相关推荐
  • 大家在看
  • 苹果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%公共交通依赖智能出行。合作方表示,这将推动自动驾驶技术在中东地区的主流化应用。

  • 小米15推送HyperOS 2.0 Beta更新:新增长按电源键与超级小爱持续对话功能

    小米昨日晚间面向小米15用户推送了HyperOS 2.0.230.18.WOCCNXM Beta版系统更新,更新包大小约为360MB。本次更新主要针对电源键功能和设备重启体验进行了优化。这也是小米15自从7月3日以来推送的第三版基于安卓16的HyperOS Beta版推送。

  • iQOO Z10 Turbo+首销战绩公布:为Z10 Turbo Pro的174%

    iQOO品牌正式发布了其全新旗舰机型iQOO Z10Turbo+,并同步开启销售。这款新机以其卓越的性能和超长续航能力迅速吸引了市场关注,官方数据显示,其首销成绩达到了此前Z10Turbo Pro的174%,显示出消费者对其的高度认可。 iQOO Z10Turbo+的核心亮点在于其搭载的8000mAh超大容量电池,这在当前的智能手机市场中极为罕见。该机型不仅配备了天玑9400+旗舰处理器,还配备了旗舰级的LPDDR5X U

  • 政策东风劲吹,StarlinkX借势启航深耕亚太蓝海

    文章概述了亚太地区在数字经济浪潮下拥抱Web3.0技术变革的趋势。随着各国出台支持政策,AI可穿戴设备制造商StarlinkX抓住机遇加速布局,其产品线凭借生物识别、健康监测和物联网体验等优势,精准契合Web3.0时代对数据隐私保护的需求。公司通过建立区域总部和研发中心,深度融入当地产业链,实现业绩快速增长。文章指出,亚太地区作为全球最具活力的数字经济增长极,正通过完善区块链激励机制、培育去中心化金融生态等措施,构建优质的数字经济发展生态圈。StarlinkX的成功印证了紧跟时代步伐的企业方能行稳致远。

  • 苹果发布iOS 26 Beta 4:液态玻璃又变了

    苹果今天发布了iOS 26的第四个开发者预览版,液态玻璃的效果又调整了。 目前来看,苹果内部也非常纠结,一方面想要呈现出完美的液态玻璃效果,但一方面有又要根据用户反馈进行削弱,否则会出现卡顿和易读性问题。 在上一版将液态玻璃效果大砍之后,这次又加回来了一些,减少了普通磨砂玻璃效果,不过变化比较小,文本仍然可读,更像是在Beta 2和Beta 3之间取得平衡�

  • 淘宝天下入选《TopDigital2025全球AI营销图谱》

    7月29日,淘宝天下凭借AI服务平台"淘宝AI智+"的创新实践,成功入选《TopDigital2025全球AI营销图谱》"智能分析与决策"赛道。该平台整合淘宝生态数据资源,构建覆盖数据分析、智能营销、内容生成等全链路的AI解决方案体系,通过模块化设计降低使用门槛,帮助商家实现降本增效。平台还提供深度定制开发服务,推动AI能力与业务场景有机融合。此次入选标志着淘宝天下在AI技术创新与商业应用方面的成果获得行业认可。团队表示将持续聚焦AI技术实用价值转化,拓展电商营销领域的创新应用场景。

  • HKTWeb3 交易平台正式上线,打造链上资产与实体金融桥梁

    HKTWeb3交易平台将于2025年8月2日在香港正式上线。该平台以"安全、合规、透明"为核心,致力于连接链上资产与实体金融世界,提供六大核心业务模块:链上信托、链上贸易、链上金融、HKT钱包、交易平台和锚定资产储备。平台接受香港持牌信托公司监管,确保资金流转、交易撮合等环节的合规性。作为全球首批采用"实体承兑+链上信托"架构的数字资产平台,HKTWeb3旨在构建服务实体经济的Web3基础设施,推动数字资产在投资、支付等现实场景的应用。平台将与香港Web3科技协会合作,加速本地生态建设。

  • Custouch市场易AI技术入选Topdigital2025全球AI营销图谱

    《TopDigital2025全球AI营销图谱》近日发布,Custouch市场易入选"内容智能生成"板块。该图谱为AI技术重构营销提供全链路产业地图,整合企业官网、学术报告、专利库等多维度信息。Custouch凭借AI技术在B2B营销领域的创新应用入选,其智能解决方案能有效满足企业实际需求。作为数字营销技术服务商,Custouch已为300+国际头部企业提供一站式营销管理体系,涵盖内容、活动、线索等全流程,助力企业实现高质量增长。此次入选既是对其AI成果的肯定,也是对其未来发展的激励。

这篇文章对你有价值吗?

今日大家都在搜的词: