UI聚焦界面呈现，解决视觉与交互表现问题；UX关注全周期体验，确保用户高效愉悦达成目标；二者定义、产出、阶段及能力模型均本质不同。

如果您在了解数字产品设计时遇到“UI”与“UX”两个术语混淆不清的情况，这通常是因为二者虽紧密协作，但职责边界、工作重心与产出物存在本质差异。以下是厘清这一区别的关键路径：

一、定义与核心关注点不同

UI（User Interface，用户界面）聚焦于用户所见、所触的视觉与交互层，即“界面如何呈现”。它解决的是界面元素的布局、色彩、图标、动效、字体、响应式适配等具体表现问题，目标是让界面**美观、一致、可识别、易操作**。

1、UI设计师需确保同一类按钮在所有页面中具有相同的形状、颜色和点击反馈效果。

2、UI设计必须严格遵循品牌视觉规范，在移动端与桌面端保持语义一致的控件尺寸与间距。

3、所有图标需具备无障碍语义支持，例如为图标添加aria-label属性说明功能用途，确保屏幕阅读器可识别。

二、UX设计关注整体体验流程与用户目标达成

UX（User Experience，用户体验）覆盖用户与产品接触的全周期，即“用户如何使用并获得价值”。它始于用户研究、需求分析、信息架构规划，贯穿用户旅程地图、任务流程设计、原型验证与可用性测试，最终确保用户能**高效、愉悦、无挫败感地完成目标**。

1、UX设计师会通过实地访谈或问卷收集购票用户在12306 App中最常放弃支付的环节，并定位到银行卡绑定步骤的跳转断裂点。

2、基于该洞察，重构账户设置路径，将“绑定银行卡”从三级菜单提升至首页快捷入口，并同步优化文案与错误提示机制。

3、在高保真原型阶段嵌入热力图追踪与任务完成率埋点，用数据验证新流程是否使支付成功率提升≥18%。

三、交付成果类型截然不同

UX工作的输出物以抽象逻辑与行为结构为主，强调可验证性与策略支撑；UI的输出物则以具象视觉资产为核心，强调一致性与实现可行性。二者不可互相替代，亦不可合并交付。

1、UX交付清单包括：用户画像文档、竞品体验对比矩阵、服务蓝图、用户旅程地图、线框图（Wireframe）、可点击低保真原型、A/B测试方案及可用性测试报告。

2、UI交付清单包括：品牌色彩系统（含HEX/RGB/CMYK值）、字体层级规范表（H1–正文–辅助文字字号与行高）、图标集（SVG源文件+命名规则）、交互动效参数（缓动函数、持续时间、触发条件）、组件库（Figma/Sketch Library文件）及设计标注说明（含间距、圆角、阴影值）。

3、任何UI设计稿若未附带明确的交互状态说明（如悬停/禁用/加载态）与响应断点定义（320px/768px/1440px），即视为不完整交付。

四、设计介入阶段与依赖关系明确

UX工作天然前置——在一行代码编写前，UX已通过研究锁定核心用户任务与障碍点；UI工作紧随其后——在UX确认功能逻辑与流程闭环后，才启动视觉表达与交互细节打磨。跳过UX直接进行UI设计，等同于未打地基即砌墙。

1、项目启动阶段，UX团队主导开展焦点小组访谈，回收有效样本≥30份原始录音与笔记。

2、需求冻结后，UX输出标准PRD文档，其中包含每个功能模块的用户目标、成功指标、异常路径及与后台系统的字段映射关系。

3、UI设计师仅在收到签字确认的PRD与线框图后，方可启动视觉设计；若发现线框图中存在未定义的空状态或网络异常提示区域，须立即发起UX协同评审。

五、能力模型与工具链存在结构性差异

UX设计师需掌握定性与定量研究方法、人因工程基础、认知心理学模型及数据解读能力；UI设计师则需精通视觉传达原理、前端实现约束认知、动效节奏控制及跨平台设计系统构建能力。二者虽共用Figma等工具，但使用深度与目的完全不同。

1、UX设计师在Figma中重点使用Auto Layout构建可复用的流程节点组件，并利用FigJam白板进行协同式用户旅程共创。

2、UI设计师在Figma中深度依赖Variants功能管理多状态按钮，通过Constraints精准控制响应式缩放行为，并导出Tokens供开发直接接入Design System。

3、UX若未在原型中标注关键操作的用户意图（如“此处点击意在比价而非立即下单”），将导致UI误判交互优先级，引发视觉权重分配失衡。