content
为我的应用创建一个简洁、现代、极简的水平导航栏组件。
导航栏应包含:左侧的 Logo、居中或偏右的一组导航链接、以及最右侧一个清晰的主要 CTA 按钮。
整体布局应平衡、简洁、达到生产就绪级别 —— 既不拥挤,也不过度装饰。
请以我当前 UI 的视觉风格作为主要参考,匹配相同的配色方案、字体、圆角、间距、按钮样式、阴影以及整体设计语言,让导航栏看起来像应用中天然的一部分。
Logo 区域应清晰可辨但不宜过大。导航链接应易于浏览,各链接之间需保持合理间距。为链接添加细微的悬停效果,例如颜色变化、下划线、背景高亮,或是符合应用风格的平滑过渡。
CTA 按钮应比导航链接略为醒目,但不可过于咄咄逼人。它应采用主品牌色或现有 UI 中的按钮样式。
让导航栏具备响应式:
桌面端:展示完整的水平布局。
平板与移动端:将链接折叠为简洁的菜单按钮或移动抽屉。
若空间允许,CTA 按钮保持可见;否则将其放入移动菜单内。
请使用简洁、可复用的组件结构,避免不必要的复杂度。最终成果应精致、轻量,适合真实的 SaaS、仪表板、作品集、初创公司网站或现代 Web 应用。