跳到主要内容
界面图谱Interface Atlas
☰
EN
灵感图库

标签与分段控件参考图集

Tabs & Segmented Control Reference Sheets

8 张 AI 生成的标签页 / 分段控件设计参考海报:前四张是 20 个差异案例的图鉴, 后四张是 20 个新增案例的补充——下划线式、胶囊式、卡片式、分段圆钮, 到浏览器标签、垂直标签等边缘形态。

生图 Prompt(可复现整套图)

制作一张竖版「标签与分段控件设计参考」海报,编号 N,右上角小字「界面组件图鉴 / 20 个差异案例」(后半系列改「20 个新增案例」)。米白背景(#FAF9F5),黑色粗标题 「标签与分段控件设计参考 N」+ 灰色小字 TAB / SEGMENTED CONTROL。正文纵向排列 5 组案例,每组左侧是大号灰色序号 01~05、英文模式名(如 Underline Tabs / Pill Segmented / Card Tabs / Browser Tabs / Vertical Tabs)、中文模式名与 2×2 关键词; 右侧浅灰圆角卡片内是真实感的标签控件演示(标签行 + 当前项高亮 + 对应内容面板), 底部一行灰色说明。排版网格严格、留白充足、扁平极简,蓝色仅作强调,中英文对照。
A vertical "Tabs / Segmented Control Design Reference" poster, sheet number N, with a small top-right label ("界面组件图鉴 / 20 个差异案例", later sheets "20 个新增案例"). Off-white background (#FAF9F5), bold black Chinese title plus grey "TAB / SEGMENTED CONTROL" subtitle. Five numbered rows: large grey index, English pattern name (e.g. Underline Tabs, Pill Segmented, Card Tabs, Browser Tabs, Vertical Tabs), Chinese name and a 2x2 keyword grid; on the right, a realistic tab control demo (tab row, highlighted active item, matching content panel) with a one-line caption. Strict grid, flat minimal, blue accent only, bilingual labels.
  • 💡 用「20 个差异案例 → 20 个新增案例」分批生成,避免一次要求太多而重复
  • 💡 指定「当前项高亮方式各不相同」,能逼出更多视觉变体

图集(8 张)

标签与分段控件参考图集 差异案例 · 图鉴一
差异案例 · 图鉴一Cases atlas I
标签与分段控件参考图集 差异案例 · 图鉴二
差异案例 · 图鉴二Cases atlas II
标签与分段控件参考图集 差异案例 · 图鉴三
差异案例 · 图鉴三Cases atlas III
标签与分段控件参考图集 差异案例 · 图鉴四
差异案例 · 图鉴四Cases atlas IV
标签与分段控件参考图集 新增案例 · 补充一
新增案例 · 补充一More cases I
标签与分段控件参考图集 新增案例 · 补充二
新增案例 · 补充二More cases II
标签与分段控件参考图集 新增案例 · 补充三
新增案例 · 补充三More cases III
标签与分段控件参考图集 新增案例 · 补充四
新增案例 · 补充四More cases IV
→ 查看对应概念:tabs