用途:整理标签页(Tab)导航的设计模式,帮助在界面中正确选择与使用标签类型。
主要能力:
- 标签类型对照:横向标签用于桌面与平板的同级 2-6 个区块;可滚动标签用于移动端或响应式的 6 个以上区块;纵向标签用于深层设置或文档侧边栏;底部标签栏用于移动应用主导航;分段控件用于 2-3 个切换选项(非导航)。
- 标签规则:标签文案保持简短,1-2 个词,过长说明不应使用标签模式;不将标签用于顺序步骤(那应使用 stepper/wizard);各标签内容应相互独立,切换标签不应影响其他标签;激活指示可用底部边框(横向)、左侧边框(纵向)或填充背景;键盘操作用方向键切换,激活标签需有可见焦点。
- 可滚动标签:在滚动边缘显示渐隐/渐变,提示还有更多标签;加载时将激活标签滚动到可见区域;移动端支持滑动手势;桌面端除非必要,不使用滚动箭头。
适用场景:Web 与移动应用的界面导航设计、设计系统规范编写、组件选型评审。
限制:资料仅给出模式与规则,未提供具体代码实现、组件库、安装命令或平台细节,相关内容暂未提供。