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

导航栏参考图集

Navbar Reference Sheets

8 张 AI 生成的导航栏设计参考海报:每张系统展开 5 个变体,从顶部主导航、侧边导航、 底部导航、标签导航到超级菜单,再延伸到浮动胶囊、自动隐藏、上下文导航与翻页状态。 适合在动手前快速过一遍"导航还有哪些做法"。

生图 Prompt(可复现整套图)

制作一张竖版「导航栏设计参考」海报,编号 N,右上角标注本张主题。米白背景(#FAF9F5), 黑色粗标题「导航栏设计参考 N」+ 灰色小字 DESIGN REFERENCE。正文纵向排列 5 个条目, 每条左侧是大号灰色序号 01~05、英文模式名(如 Top Navigation / Sidebar Navigation / Bottom Navigation / Tab Navigation / Mega Menu)、中文模式名与 2×2 关键词短语; 右侧是浅灰圆角卡片内的真实感 UI 演示:完整的导航栏界面(品牌 Logo、菜单项、搜索图标、 主按钮,当前项用蓝色下划线标记),卡片底部一行灰色说明文字。整张海报排版网格严格、 留白充足、扁平极简风格,蓝色仅作强调色,所有文字为简体中文与英文对照,UI 细节逼真可放大。
A vertical "Navigation Bar Design Reference" poster, sheet number N, with the sheet theme at the top right. Off-white background (#FAF9F5), bold black title in Chinese plus a grey "DESIGN REFERENCE" subtitle. Five numbered rows: each has a large grey index (01–05), the English pattern name (e.g. Top Navigation, Sidebar Navigation, Bottom Navigation, Tab Navigation, Mega Menu), its Chinese name, and a 2x2 grid of short keywords; on the right, a realistic UI demo inside a light-grey rounded card — a complete navbar with brand logo, menu items, search icon and primary button, the active item marked with a blue underline — and a one-line grey caption below. Strict grid, generous whitespace, flat minimal style, blue as the only accent, bilingual Chinese/English labels, crisp zoomable UI details.
  • 💡 每张只换「本张主题」与 5 个模式名,其余描述保持不变,整批风格就统一
  • 💡 生成后用 4K 分辨率重绘一版,UI 文字更清晰

图集(8 张)

导航栏参考图集 基础结构
基础结构Fundamentals
导航栏参考图集 层级与路径
层级与路径Hierarchy & paths
导航栏参考图集 展开与唤起
展开与唤起Expansion & triggers
导航栏参考图集 索引与定位
索引与定位Indexing & wayfinding
导航栏参考图集 浮动胶囊导航
浮动胶囊导航Floating islands
导航栏参考图集 滚动响应与自动隐藏
滚动响应与自动隐藏Auto-hide & scroll
导航栏参考图集 上下文导航
上下文导航Contextual navigation
导航栏参考图集 导航状态与相邻跳转
导航状态与相邻跳转States & prev/next
→ 查看对应概念:navbar