一、Flex 弹性布局（组件化封装）
核心思路
Flex 弹性布局在阿里（Ant Design）、腾讯（TDesign）、海外 Shopify (Polaris) 等大厂规范中非常普遍。它的本质是 Flexbox 的声明式封装——将常见的布局模式抽象为可复用组件，而不是每次都手写 div + flex CSS。
设计稿参考
设计稿按照"组件化搭积木"的方式构建，每个 UI 模块都是独立的组件：
- 组件有明确的 Props 接口（传入文案、图标、状态）
- 组件内部处理所有布局逻辑（padding、margin、flex-direction）
- 外部只需声明"这里要放什么内容"
颜色规范（杜绝五颜六色）
大厂 UI 规范的核心原则之一：全局颜色数量严格受控。
统一色板：
- 主色 / 辅助色 / 成功 / 警告 / 错误 / 置灰
- 白色分级（#FFFFFF → #F7F8FA → #F2F3F5 → ...）
- 黑色分级（#000000 → #1A1A1A → #333333 → ...）
禁止：随意在代码或设计稿中写 #随意色值。
文字排版规范
字号梯队固定一套，不允许随意新增字号：
- 大标题 / 副标题 / 正文 / 辅助文字 / 备注小字
禁止：在代码中写死具体 px 值（如 fontSize: 14），真机适配极易出现半个像素导致的模糊问题。
规范的好处
- AI 更容易识别定好组件库的代码，生成代码质量更高
- 文字等不写具体 px 大小，避免真机失真模糊
二、4px 基线网格
核心说明
4px 作为最小单位，是多数屏幕像素密度的公约数（适配 Retina 屏 2 倍/3 倍图），可通过整数倍关系覆盖常见 UI 元素尺寸，确保视觉一致性、跨设备适配性。
规范要求
设计稿中所有尺寸、间距、圆角、行高均需为 4px 的整数倍，贴合移动端（RN/H5）、PC 端多端适配需求。
三、高斯模糊慎用原则
核心说明
毛玻璃效果（backdrop-filter: blur()）属于计算密集型操作，模糊半径越大、作用范围越广，GPU 计算压力越大。
参考：CSS毛玻璃效果进阶：如何优化性能与兼容性（含移动端适配）
规范要求
- 尽量减少毛玻璃效果使用，避免全屏、大面积应用
- 若必须使用，模糊半径建议 ≤6px，且避免应用在动态元素（滚动、动画、缩放组件）上
- RN 安卓端第三方模糊库性能问题严重（详见另一篇调研）
性能实测数据
| 场景 | 无模糊 | 模糊 r=10px | 模糊 r=20px |
|---|---|---|---|
| 首屏渲染 | 1200ms | 2100ms | 3400ms |
| 动画帧率 | 60fps | 28fps | 12fps |
| 列表滚动 | 60fps | 22fps | 8fps |
模糊半径超过 6px 后，安卓设备（尤其是中低端机型）几乎不可用。
四、小动画优先使用 Lottie
核心说明
Lottie 是 JSON 格式的矢量动画，相比 MP4、GIF，具有体积小、矢量无损、多端兼容、可控性强的优势。
规范要求
简约装饰动效、图标动效、粒子动效等小动画，优先使用 Lottie 格式，替代 MP4、GIF，提升加载速度和性能，避免卡顿。
五、图标规范：SVG 组件化
核心说明
图标需进行 SVG 组件化处理，而非简单导出 SVG 文件，确保尺寸可控、透明通道正常，适配多端缩放不失真。
实操要求
- 使用 SVGR 工具将 SVG 改写成 TSX 组件
- 组件内明确设置图标大小、透明通道，确保全局图标风格统一
- 缩放无模糊，适配多端（RN/Android/iOS/Web）
错误做法
// 错误：简单引用 SVG 文件
import Logo from './logo.svg';
<img src={Logo} />正确做法
// 正确：SVGR 组件化
import { ReactComponent as Logo } from './logo.svg';
<Logo width={24} height={24} />总结
组件化设计 + 严格的设计规范是高质量前端的基础：
- Flex 布局封装减少重复样式代码
- 4px 基线网格确保多端像素一致性
- 颜色/文字规范杜绝视觉不一致
- SVG 组件化 + Lottie 保证图标动画质量
- 慎用高斯模糊避免性能问题