原子设计理论由设计师 布拉德.弗罗斯特 在2013年提出，借鉴化学物质构成逻辑：万物由最小原子构成，原子组合成分子，分子组成有机体，最终形成完整页面。
核心思想：
拆解界面最小颗粒度，由小到大逐层组合，搭建标准化、可复用、一致性极强的设计组件体系，
解决界面样式混乱、组件冗余、改版成本高、多端视觉不统一的问题。
广泛用于Web端、移动端，也适用于
车载HMI系统
场景，是车载组件库搭建、界面一致性管控的核心底层理论。
原子设计分为5个层级，下层支撑上层：
原子→分子→组织→模块→页面
定义
：界面中最小、无法再拆分的基础视觉元素，是所有界面的基石，无独立交互意义，仅作为基础素材。
通用UI案例
：颜色色值、字体字号、图标、分割线、圆角、阴影、输入框光标、空白占位符
车载HMI专属案例
：整车主色/警示色、车载标准字体、车速图标、音量图标、基础圆角8px、日间/夜间基础底色、系统分割线
管控要点
：全局统一固定，沿用过程不能私自改色、改字号、改圆角；
定义
：多个原子组合而成的简单组件，具备单一独立交互能力，是可复用的最小交互单元。
通用UI案例
：文字+图标按钮、搜索框（输入框+搜索图标）、标签Tag、单行列表项
l 车载搜索栏：输入框原子+语音图标原子+清除图标原子
管控要点
：固定组合规则，全局复用同一套分子组件，不重复设计同款按钮、输入框。
定义
：多个不同分子拼接而成的复杂功能模块，具备完整一块业务能力，可独立承载局部功能。
通用UI案例
：导航栏、底部tab栏、商品卡片、表单区域、播放控制栏
l 音频APP底部播放控制栏：播放按钮分子+切歌按钮分子+进度条分子
l 首页顶部导航栏：返回按钮分子+搜索框分子+个人中心按钮分子
l 车辆胎压监测模块：四个胎压状态卡片分子组合而成
管控要点
：模块结构固定，跨页面复用同款功能模块，保证交互位置、操作逻辑统一。
定义
：多个有机体按照固定栅格、布局规则拼接成页面骨架，只规定排版结构，无具体业务内容，统一页面版式。
通用UI案例
：首页宫格布局模板、列表页模板、详情页上下布局模板、播放页沉浸式模板
l 车载通用页面模板：顶部导航有机体+中间内容区+底部播放栏有机体
l 车载播放页模板：顶部状态栏+专辑展示区+歌词区+底部控件区固定布局
管控要点
：统一全应用页面布局结构，避免有的页面顶部高、有的页面控件位置偏移。
定义
：在模板骨架中填入真实文案、图片、业务数据，最终交付给用户的完整界面，是原子设计的最终落地成果。
车载HMI专属案例
：音频APP首页、视频播放页、搜索结果页、车载个人中心页
管控要点
：页面万变不离其宗，仅替换内容，布局、组件、基础视觉完全统一。
基础原子（色值/字体/图标）
→ 拼装 →
分子（按钮/搜索框）
→ 拼装 →组织
（导航栏/播放栏）
→ 拼装 →
模块（固定布局）
→ 填充内容 →
最终页面
1.
极致视觉一致性
：从最小元素统一规范，解决中控、仪表、HUD多屏界面样式不统一问题，贴合车载HMI一致性走查要求
2.
大幅降低设计冗余
：无需重复绘制同款按钮、图标、导航栏，一套组件全域复用，提升设计出图效率
3.
方便UI走查与验收
：走查可分层校验：先查原子规范、再查分子组件、最后查页面布局，问题定位更精准
4.
降低前端开发成本
：前端可直接搭建组件库，复用组件代码，减少适配bug，多屏适配更高效
5.
改版迭代零负担
：修改底层原子（如全局圆角、主色），所有上层页面自动同步变更，无需逐页修改
