UI 设计风格与专有名词全景百科指南

## 一、 整体视觉大流派与美学风格 (Visual Style Movements)

*决定整个产品/网站的艺术气质、第一眼视觉基调与主题属性。*

### 1. 像素风 (Pixel Art / 8-Bit / 16-Bit)

- **核心特征**：以锯齿状的正方形像素点为基本绘图单位，故意放弃高分辨率与平滑曲线，复刻 80~90 年代早期红白机/掌机游戏视觉。
- **应用场景**：复古游戏（如《星露谷物语》《像素工厂》）、Web3/NFT 平台、极客与独立开发者品牌官网。

### 2. 卡通 / 矢量插画风 (Cartoon / Vector Illustration)

- **核心特征**：采用平滑的矢量线条、明快鲜艳的配色，结合夸张幽默的人物或吉祥物插画，赋予产品极强的亲和力与趣味性。
- **分支代表**：**Notion / Corporate Memphis 插画风**（扁平长肢体人物）、**Duolingo 模式**（品牌 IP 极度融入 UI）。
- **应用场景**：SaaS 官网引导页、儿童/语言学习类 App、品牌活动弹窗。

### 3. 赛博朋克风 (Cyberpunk / High-Tech Low-Life)

- **核心特征**：纯黑或深蓝背景，搭配极其绚丽的荧光霓虹色（高亮品红、电光蓝、毒绿），融合故障艺术（Glitch）、数据网格、机械线条与科幻 UI 元素。
- **应用场景**：电竞硬件控制台、加密货币/区块链平台、硬核科幻游戏/软件界面。

### 4. 复古波 / 合成器波 / 蒸汽波 (Synthwave / Retrowave / Vaporwave)

- **核心特征**：致敬 1980 年代流行文化。充满渐变紫/粉/橙色的网格地平线、落日余晖、棕榈树剪影、三维石膏像与旧 VHS 录像带的噪点雪花感。
- **应用场景**：音乐播放器、复古潮牌官网、个性化主页与艺术展视听 UI。

### 5. Y2K / 酸性设计 (Y2K Aesthetic / Acid Graphics)

- **核心特征**：复刻千禧年（2000前后）对未来科技的想象。大量使用**金属镀铬质感（Chrome）**、3D 扭曲流体字体、激光镭射彩虹色彩、高亮光芒星芒与打破常规的自由非对称排版。
- **应用场景**：潮流电商、时尚品牌 App、年轻化音乐与社交产品。

### 6. 黏土风 (Claymorphism)

- **核心特征**：界面元素呈橡皮泥/彩色黏土般的 3D 膨胀质感。具有极其圆润的弧角、柔和的内阴影与外阴影，视觉上温馨可爱且充满立体弹力感。
- **应用场景**：儿童教育 App、休闲游戏 UI、元宇宙/虚拟形象生成器。

### 7. 新粗犷主义 (Neo-Brutalism)

- **核心特征**：故意打破传统 UI 的“优雅精致”。采用高饱和度的撞色对比、100% 纯黑粗边框（2~4px）、无模糊度的硬阴影（Offset Hard Shadow），以及强烈的非对称排版。
- **应用场景**：Figma 运营活动页、Gumroad 创作者平台、独立开发者作品集。

### 8. 拟物化设计 (Skeuomorphism)

- **核心特征**：极度逼真地还原真实物理世界材质（如皮质缝线、金属拉丝、玻璃折射、拟真木纹、凹凸实体按键）。
- **应用场景**：iOS 6 及早期系统、专业音频 DSP 插件（模拟硬件旋钮）、车载智能控制屏。

### 9. 扁平化设计 (Flat Design)

- **核心特征**：彻底剥离光影、渐变与纹理材质，仅依靠纯色块、简洁几何图形与清晰的字号排版构建界面，极大提升信息传达效率与多端适配性能。
- **应用场景**：Windows Metro UI、iOS 7+ 现代移动端界面。

### 10. 材料设计 / 质感设计 (Material Design - M2/M3)

- **核心特征**：Google 提出的系统化设计语言。将 UI 元素比作具有真实物理属性的“智能纸张”，通过海拔高度（Elevation）与真实物理阴影来表达卡片的上下层级关系。
- **应用场景**：Android 原生系统、Google Workspace 系列工具、Material-UI (MUI)。

### 11. 新拟物风 / 软 UI (Neumorphism / Soft UI)

- **核心特征**：背景与组件使用同一种底色，通过精细调配“左上角白色高光”与“右下角深色阴影”，让组件像是在底色材料上“挤压凸起”或“按压凹陷”出来的硅胶质感。
- **应用场景**：智能家居控制面板、概念仪表盘、智能手表 UI。

### 12. 玻璃拟态 / 毛玻璃 (Glassmorphism)

- **核心特征**：半透明背景 + 高斯模糊（Backdrop Blur）、柔和的多色渐变底色，以及极其纤细的半透明白色高光边框，呈现通透、悬浮的现代科技高贵感。
- **应用场景**：macOS Big Sur/Sonoma、Windows 11 Fluent Design、iOS 实时活动通知卡片。

### 13. 孟菲斯风格 (Memphis Style)

- **核心特征**：源自 80 年代的反叛波普艺术。充满随机散落的波浪线、波点网格、三角形、圆环等基本几何图案，配色欢快、高饱和度且毫无规律限制。
- **应用场景**：运营活动 Banner、儿童产品 UI、创意设计机构官网。

### 14. 瑞士平面设计风 / 国际主义风格 (Swiss Style)

- **核心特征**：强调严谨的数学网格系统（Grid System）、无衬线字体（如 Helvetica）、非对称排版与极强的视觉层次感，克制、理性而庄重。
- **应用场景**：新闻资讯类 App（如 Bloomberg）、高端品牌官网、文字密集型排版。

### 15. 手绘 / 涂鸦风 (Hand-Drawn / Doodle)

- **核心特征**：使用带有不规则抖动感的手绘线条、蜡笔/水彩质感填充、手写体字体，消除软件的工业冰冷感，极具人情味与温度。
- **应用场景**：手帐类 App、笔记工具（如 GoodNotes 模板）、创意产品故事页。

### 16. 2.5D / 等轴测视角 (Isometric Style)

- **核心特征**：通过 30° 正轴测投影绘制三维场景，既能展示立体丰富的空间结构与建筑细节，又没有近大远小的透视变形。
- **应用场景**：业务架构流程图、数据可视化大屏、模拟经营类游戏 UI。

### 17. 低多边形 (Low Poly)

- **核心特征**：用相对较少数量的平坦多边形网格（通常是三角形）拼凑出三维物体，配合简单光影，呈现出像晶体折射或折纸般的几何硬朗质感。
- **应用场景**：独立游戏、科技产品背景矢量图、艺术展宣传 UI。

### 18. 极简主义 / 留白风 (Minimalism)

- **核心特征**：“少即是多（Less is More）”。去除一切多余的装饰性线条与色彩，使用大面积白空间（White Space）、极简的单色调与高精致度的文字排版。
- **应用场景**：Apple 官网、奢侈品电商、阅读类 App（如微信读书、Medium）。

### 19. 暗黑模式 / 纯黑 OLED 风格 (Dark Mode / Pitch Black)

- **核心特征**：采用纯黑（#000000）或极深灰色（#121212）为底色，搭配高对比度文字与霓虹点缀色，既护眼省电，又极具沉浸感。
- **应用场景**：开发者 IDE（VS Code）、交易所 / 股票交易终端、夜间阅读模式。

### 20. 线稿 / 线条画风格 (Line Art / Monoline)

- **核心特征**：全界面仅依靠单一粗细的极简线条（Outlines）勾勒图标与卡片轮廓，几乎没有面填充，呈现干净、轻盈的几何美感。
- **应用场景**：极简建筑/设计事务所网站、矢量图标库（如 Heroicons、Lucide）。

## 二、 特色 UI 组件与空间控件黑话 (Component Vocabulary)

*描述特定结构形态、视觉层级或交互特性的 UI 空间组件。*

| **组件黑话 (中/英)**                   | **视觉特征与功能形态**                                       | **典型应用示例**                           |
| -------------------------------------- | ------------------------------------------------------------ | ------------------------------------------ |
| **幽灵按钮 (Ghost Button)**            | 无背景实色填充，仅保留纤细边框与文字的按钮，悬停时亮起。用于降低次要操作的视觉优先级。 | “取消”、“查看详情”等次要按钮               |
| **骨架屏 (Skeleton Screen)**           | 数据加载时展示的灰白色渐变内容轮廓块，取代传统转圈圈，降低用户等待焦虑。 | 首屏数据未加载完时的占位骨架               |
| **浮动操作按钮 (FAB)**                 | 悬浮于屏幕右下角的圆形/胶囊形核心操作按键，随页面滚动始终固顶。 | 邮件 App 的“新建”、社区的“发帖”            |
| **便当盒布局 (Bento Grid)**            | 受日式便当盒分格启发，将信息拆分为大小不一、高度模块化的圆角矩形卡片网格。 | Apple 发布会规格参数图、iOS 桌面小组件     |
| **分段控件 (Segmented Control)**       | 将 2~5 个互斥选项包在同一个圆角框内的单选切换器，选中项有高亮滑块覆盖。 | iOS 设置中的单选切换、按“日/周/月”切换视图 |
| **手风琴 (Accordion)**                 | 垂直堆叠的标题列表，点击可折叠或展开下方内容面板，通常同一时间仅展开一项。 | 常见问题解答 (FAQ)、多层级设置菜单         |
| **面包屑导航 (Breadcrumbs)**           | 顶部带有 `首页 > 部门 > 员工` 路径的微型链接串，方便用户了解当前页面层级并随时返回。 | 电商分类页、大型文档系统（如 GitBook）     |
| **底部抽屉 (Bottom Sheet)**            | 从屏幕底部向上滑出的半屏或全屏操作面板，极度适合大屏时代手机单手操作。 | 微信分享弹窗、支付确认面板                 |
| **抽屉式侧边栏 (Drawer)**              | 隐藏在屏幕侧边，点击汉堡菜单（Hamburger Menu）后从左侧或右侧滑出的导航面板。 | 移动端网站导航、管理后台侧边栏             |
| **走马灯 / 轮播图 (Carousel)**         | 允许用户左右滑动浏览多张图片/卡片面板的组件，附带小圆点指示器（Dots）。 | 电商首页 Banner、推荐卡片组                |
| **步骤条 (Stepper / Wizard)**          | 用数字圆圈与横线连接的流程指示器，引导用户分步完成复杂任务。 | 购物车结算、账号注册流程                   |
| **胶囊标签 (Pill Tag / Chip)**         | 边缘完全圆润（如同胶囊）的小型标签或可点击过滤块。           | 文章标签、商品属性选择（如“红色/L码”）     |
| **吸顶/吸底栏 (Sticky Header/Footer)** | 页面纵向滚动时，固定在视口顶部或底部的导航栏或操作栏。       | 移动端电商底部的“立即购买”栏               |

## 三、 质感、光影与视觉细节黑话 (Textures, Optics & Visual Effects)

*描述视觉精细度、渲染细节与光学质感的专有名词。*

1. **超椭圆 / 曲率连续 (Squircle / Continuous Curvature)**：
   - *解说*：摒弃普通圆角矩形（直角+正切圆弧），采用高阶数学曲线实现直线到圆弧的极其平滑渐变，无突变切点。这是 Apple 全线硬件与 iOS 图标极具高级感的核心秘诀。
2. **弥散渐变 / 网格渐变 (Mesh Gradient / Diffused Gradient)**：
   - *解说*：打破传统的单向线性渐变，由多个色彩节点像云雾般在二维平面上互相渗透弥散，充满梦幻感。
3. **杂色 / 颗粒感 (Noise Texture / Film Grain)**：
   - *解说*：在平滑的渐变或单色背景上叠加一层细微的单色/彩色噪点颗粒，消除了数字色彩的冰冷感，增加纸质或胶片般的触感。
4. **硬阴影 / 偏移阴影 (Offset Hard Shadow)**：
   - *解说*：完全不使用高斯模糊（Blur = 0），仅将纯黑或深色色块向右下方偏移 2~6px 作为阴影。新粗犷主义（Neo-Brutalism）的核心标志。
5. **环境阴影 vs 投射阴影 (Ambient Shadow vs Drop Shadow)**：
   - *解说*：**Drop Shadow** 是直射光产生的有明确方向的阴影；**Ambient Shadow** 是环境光漫反射产生的无方向、大范围、极柔和的弥散阴影，用于营造组件悬浮于空中的空气感。
6. **双色调 (Duotone)**：
   - *解说*：将图片的所有色彩映射为仅由两种对比鲜明的颜色（如深蓝 + 亮橙）构成的图像风格，常用于 Spotify 音乐封面。

## 四、 页面布局、视线构图与微交互 (Layout, Visual Flow & Motion)

1. **折痕线之上 / 首屏 (Above the Fold)**：
   - *解说*：用户无需向下滚动页面即可在屏幕上看到的完整第一屏区域。这是产品最核心价值与 **CTA（Call to Action 行动号召按钮）** 所在的位置。
2. **首屏巨幕 (Hero Section)**：
   - *解说*：网站首页首屏最醒目的大图/视频背景区域，通常搭配强有力的标题文字与主要转换按钮。
3. **F 型与 Z 型阅读视线 (F-Pattern & Z-Pattern)**：
   - *解说*：**F 型**适用于文字密集型页面（如博客、新闻），用户视线从左到右、逐行向下扫描；**Z 型**适用于信息较少、视觉元素为主的落地页（Hero -> 右上角导航 -> 左下角插图 -> 右下角 CTA）。
4. **留白 / 负空间 (Negative Space / White Space)**：
   - *解说*：元素与元素之间的空白区域。留白不是浪费空间，而是给视觉“呼吸感”，突出核心内容。
5. **贝塞尔曲线 / 缓动 (Cubic-Bezier / Easing)**：
   - *解说*：动效调优术语。摒弃机械的匀速运动（Linear），采用“快进慢出”（Ease-Out）或“带有微小弹跳”（Bounce/Spring）的物理曲线，让交互动画看起来极其自然顺滑。
6. **视差滚动 (Parallax Scrolling)**：
   - *解说*：页面滚动时，背景图层与前景卡片以不同的速度移动，创造出强烈的深度感与三维立体空间感。
7. **骨架流光 (Shimmer Effect)**：
   - *解说*：骨架屏上有一道高光从左至右斜向划过（像一道光束扫过），直观告知用户“正在后台努力加载中”。

## 五、 跨部门沟通速查字典 (Everyday Talk vs Pro Terms)

如果您在与设计师或前端工程师沟通时，可以用下表快速查阅“白话”对应的专业词汇及技术实现手段：

| **您心里想说的“白话”**                 | **设计师专业术语**                          | **前端/CSS 代码关键字**                             | **建议给设计师的沟通示范**                                   |
| -------------------------------------- | ------------------------------------------- | --------------------------------------------------- | ------------------------------------------------------------ |
| “做成马赛克/红白机游戏的感觉”          | **像素风 (Pixel Art)**                      | `image-rendering: pixelated;`                       | “这套运营活动页做成像素风，要复古游戏的感觉。”               |
| “像橡皮泥/软胶捏出来的 3D 效果”        | **黏土风 (Claymorphism)**                   | `border-radius` + `inset shadow`                    | “这几个核心功能图标改用黏土风，看起来更有亲和力。”           |
| “边框要粗，投影是黑色不透明的硬块”     | **新粗犷主义 (Neo-Brutalism)**              | `border: 3px solid #000; box-shadow: 4px 4px #000;` | “首页卡片样式采用新粗犷主义，强烈的黑框与高对比撞色。”       |
| “高级的半透明磨砂玻璃感觉”             | **玻璃拟态 / 毛玻璃 (Glassmorphism)**       | `backdrop-filter: blur(20px);`                      | “顶部导航栏做成毛玻璃悬浮效果，滚动时模糊背景。”             |
| “色彩像雾一样晕染开的梦幻背景”         | **弥散渐变 + 噪点 (Mesh Gradient + Noise)** | `radial-gradient` / Canvas                          | “Hero 区域的背景做成弥散渐变，适当加一点细微 Noise 颗粒感。” |
| “内容没出来前先显示几排灰色的占位格子” | **骨架屏 + 流光 (Skeleton with Shimmer)**   | CSS Animation Gradient Offset                       | “列表加载时使用骨架屏，加上扫光的 Shimmer 动效。”            |
| “像苹果发布会那样一块块分格子的卡片”   | **便当盒布局 (Bento Grid)**                 | `display: grid;`                                    | “产品特性展示区采用便当盒布局，用不同尺寸的圆角卡片错落排列。” |
| “圆角要像 iPhone 图标那样特别平滑”     | **超椭圆 / 曲率连续 (Squircle)**            | iOS 规范 / Figma Corner Smoothing                   | “所有大卡片统一开启 100% Corner Smoothing（超椭圆平滑圆角）。” |