众力资讯网

标签页Tabs的三种常见形式和适用场景

标签页(Tabs)是最常见的内容切换组件,用得好能让页面信息组织得特别清晰。
🔹 底部线条式 Tab 标签文字下面有一条横线标识当前选中项。 最经典的形式,Ant Design 默认就是这种。 适合:页面顶部的内容分区,正式感强。
🔹 胶囊式 Tab 选中项是一个圆角矩形色块包裹文字。 视觉上更活泼,移动端和 C 端产品用得多。 适合:筛选切换、状态切换。
🔹 卡片式 Tab 模拟浏览器标签页的样式,选中项像一张卡片被「提」起来。 适合:多个并列的内容面板,有明确的"容器"感。
💡 设计 Tabs 的 4 个注意点:
① 标签数量控制在 2-7 个,太多就换别的方案 ② 标签文字要简短,最好 2-4 个字 ③ 当前选中态要足够明显 ④ 如果标签超过屏幕宽度,考虑做横向滚动

📚下面这份《UIUX 学习指南》,是我花 1 年时间整理,萃取苹果、谷歌等大厂设计智慧搭建而成的:
• 体系完整又系统,从视觉、交互到用研、产品,覆盖 UI/UX 全链路
• 不管是零基础入门、中级进阶还是冲资深,都能精准适配
• 每天花 5~10 分钟,就能稳步搭建起专业认知框架
爬出低谷,不需要惊天动地的顿悟。👇文末加入「UIUX 学习指南」,每天 5~10 分钟,去学、去拆解、去浸泡。
你会发现,焦虑和迷茫会被“坚实的确定性”一点点挤出去,你重新理解了设计的重量。