# UI 风格库 - 50+ 专业界面设计风格 按使用场景分类的设计风格参考，每个风格包含：视觉特征、适用场景、技术实现要点。 --- ## 🟦 现代极简系列 ### 1. Minimalist（极简主义） **视觉特征：** - 大量留白（60%+） - 单色或双色配色 - 无装饰元素 - 精细的排版层次 **适用场景：** - SaaS 产品 - 企业官网 - 作品集网站 **代表产品：** Linear, Notion, Stripe **Tailwind 配置：** ```css /* 颜色 */ primary: slate-900 background: white muted: slate-500 /* 间距 */ section-padding: py-24 container: max-w-5xl mx-auto px-6 ``` --- ### 2. Corporate Modern（现代企业） **视觉特征：** - 深蓝/海军蓝主色 - 几何图形装饰 - 网格布局 - 专业图标 **适用场景：** - B2B 平台 - 金融服务 - 咨询公司 **配色：** Navy-800 + Slate-50 + Indigo-600 --- ### 3. Clean Tech（科技清爽） **视觉特征：** - 青/蓝渐变 - 圆角设计 - 微妙阴影 - 玻璃拟态点缀 **适用场景：** - 科技产品 - 开发者工具 - AI 应用 **配色：** Cyan-500 + Blue-600 + Gray-50 --- ## 🟪 创意大胆系列 ### 4. Brutalist（粗野主义） **视觉特征：** - 高对比度（黑黄/黑白） - 大号无衬线字体 - 不对称布局 - 原始 HTML 感 - 故意的不完美 **适用场景：** - 创意机构 - 设计师作品集 - 街头文化品牌 **技术要点：** ```css font-family: 'Arial Black', sans-serif; border: 3px solid black; box-shadow: 4px 4px 0 black; ``` --- ### 5. Maximalist（极繁主义） **视觉特征：** - 丰富色彩（4-6种） - 多层叠加 - 图案纹理 - 装饰性字体 - 无留白 **适用场景：** - 时尚品牌 - 娱乐内容 - 艺术展览 --- ### 6. Y2K Revival（千禧复古） **视觉特征：** - 渐变背景（粉紫/蓝绿） - 金属质感 - 像素字体 - 星星/闪光装饰 - 粗边框 **适用场景：** - 音乐/娱乐 - 年轻消费群体 - 复古主题活动 --- ## 🟨 拟物化系列 ### 7. Neumorphism（新拟态） **视觉特征：** - 柔和的凸起/凹陷效果 - 同色系阴影（浅色背景） - 圆润的形状 - 微妙的渐变 **适用场景：** - 音乐播放器 - 计算器/工具应用 - 智能家居控制面板 **CSS 实现：** ```css .neumorphic { background: #e0e5ec; box-shadow: 9px 9px 16px rgb(163,177,198,0.6), -9px -9px 16px rgba(255,255,255, 0.5); border-radius: 20px; } ``` --- ### 8. Glassmorphism（玻璃拟态） **视觉特征：** - 半透明背景（backdrop-blur） - 鲜艳渐变背景 - 细边框 + 阴影 - 浮层感 **适用场景：** - 仪表盘 - 卡片展示 - 现代应用 **Tailwind 实现：** ```html
``` --- ### 9. Claymorphism（粘土拟态） **视觉特征：** - 厚重圆润的形状 - 内外双层阴影 - 柔和的色彩 - 3D 感但扁平 **适用场景：** - 儿童应用 - 游戏界面 - 友好型产品 --- ## 🟩 行业专属系列 ### 10. Fintech Modern（金融科技） **视觉特征：** - 深绿/深蓝主色 - 数据可视化优先 - 信任感设计（锁图标、安全标识） - 清晰的信息层级 **配色：** Emerald-700 + Slate-800 + Amber-500 --- ### 11. Health & Wellness（健康医疗） **视觉特征：** - 柔和的绿色/蓝色 - 自然元素（叶子、水滴） - 呼吸感留白 - 亲和的圆角 **配色：** Teal-500 + Sage-400 + Cream-100 --- ### 12. E-commerce Luxury（奢华电商） **视觉特征：** - 黑金/白金配色 - 大字体标题 - 高质量产品图 - 精致动画 **配色：** Black + Gold-400 + Gray-100 --- ### 13. EdTech Friendly（教育科技） **视觉特征：** - 明亮友好的色彩 - 插图风格 - 进度指示 - 游戏化元素 **配色：** Violet-500 + Yellow-400 + Sky-400 --- ## 🟥 艺术风格系列 ### 14. Editorial（编辑/杂志） **视觉特征：** - 衬线字体标题 - 大图片 - 非对称布局 - 精致的排版 **适用场景：** - 内容平台 - 博客 - 杂志网站 **字体配对：** Playfair Display + Source Sans Pro --- ### 15. Swiss Style（瑞士风格） **视觉特征：** - 网格系统 - 无衬线字体（Helvetica） - 左对齐文字 - 几何图形 - 红/黑/白配色 **适用场景：** - 海报设计 - 展览网站 - 文化机构 --- ### 16. Japanese Minimal（日式极简） **视觉特征：** - 大量留白 - 自然材质感 - 手写体点缀 - 柔和的灰/米色 - 不对称平衡 **配色：** Stone-200 + WarmGray-800 + Red-700 --- ## ⬜ 暗黑模式系列 ### 17. Dark Mode Premium（高级暗黑） **视觉特征：** - 深灰背景（非纯黑） - 高对比度文字 - 强调色点缀 - 微妙的发光效果 **配色：** ``` Background: #0f172a (slate-900) Surface: #1e293b (slate-800) Text: #f8fafc (slate-50) Accent: #3b82f6 (blue-500) ``` --- ### 18. Cyberpunk（赛博朋克） **视觉特征：** - 霓虹色彩（粉/青/紫） - 黑色背景 - 故障艺术效果 - 科技字体 - 扫描线/网格 **配色：** Black + Cyan-400 + Fuchsia-500 + Yellow-400 --- ### 19. Dark Academia（暗黑学院） **视觉特征：** - 深棕/墨绿 - 衬线字体 - 复古元素 - 书籍/蜡烛意象 **配色：** Amber-900 + Stone-800 + Orange-200 --- ## 🟫 功能优先系列 ### 20. Dashboard UI（仪表盘） **视觉特征：** - 卡片式布局 - 数据可视化 - 紧凑信息密度 - 状态指示器 **关键组件：** - 统计卡片（KPI Cards） - 折线/柱状图 - 数据表格 - 过滤器 --- ### 21. Mobile-First Native（移动原生） **视觉特征：** - iOS/Android 设计规范 - 底部导航 - 手势操作提示 - 圆角卡片 **iOS 规范：** - 圆角：10-20px - 字体：SF Pro - 间距：16px 标准 --- ### 22. Command Palette（命令面板） **视觉特征：** - 深色浮层 - 搜索框置顶 - 快捷键提示 - 键盘导航 **代表产品：** VS Code, Raycast, Linear --- ## 🎨 快速选择指南 | 如果你需要... | 选择风格 | |--------------|---------| | 看起来专业可信 | Minimalist, Corporate Modern | | 显得创新前沿 | Glassmorphism, Clean Tech | | 吸引年轻用户 | Y2K, Maximalist | | 展示创意个性 | Brutalist, Editorial | | 金融/医疗类 | Fintech, Health & Wellness | | 高端奢侈品 | E-commerce Luxury | | 儿童/教育类 | Claymorphism, EdTech | | 深色模式优先 | Dark Mode Premium | | 数据密集型 | Dashboard UI | | 强调效率工具 | Command Palette | --- **提示：** 可以混合风格元素，但保持一致性。比如 Minimalist + Glassmorphism 卡片 = 现代清爽。