【交互设计】UI 与 UX 简介：从核心概念到行业实践

UI 与 UX 简介：从核心概念到行业实践

起源与发展：
- 从早期命令行界面（如 DOS）到图形用户界面（GUI，如 Windows 95），UI 的核心从 "功能实现" 转向 "视觉易用性"。
- 移动互联网时代（iOS、Android）推动 UI 向 "轻量化、沉浸式" 发展，如扁平化设计、微动效的普及。
本质定位：UI 是用户与产品的 "对话媒介"，通过视觉元素将抽象功能转化为可感知的操作接口。

视觉系统构建：
- 色彩体系：基于品牌调性制定主色、辅助色、中性色（如 Twitter 的蓝色传达信任感），需符合 WCAG 无障碍标准（如文本与背景对比度≥4.5:1）。
- 排版规则：建立字体层级（标题 / 正文 / 辅助文字），通过字重、行高、字间距优化阅读流（如 Medium 的排版系统）。
- 视觉层次：利用阴影、留白、大小对比区分信息优先级（如电商 APP 中 "加入购物车" 按钮通过颜色和尺寸突出）。
交互组件设计：
- 控件规范：按钮、输入框、导航栏等组件的尺寸、状态（默认 / 悬停 / 点击 / 禁用）需统一（如 Material Design 的按钮圆角半径为 4dp）。
- 微交互：按钮点击的涟漪效果、表单提交的加载动画等，通过毫秒级反馈提升操作感知（如 Instagram 的点赞心形动效）。
动效逻辑：
- 遵循 "功能优先" 原则：页面切换动效应符合用户心理模型（如从底部滑出的菜单比淡入更符合 "抽屉" 隐喻）。
- 动效参数控制：持续时间（0.2-0.5 秒为宜）、缓动曲线（如 Ease In Out 减少生硬感）。

设计工具：Figma（协作设计）、Sketch（矢量绘图）、Adobe XD（原型制作）。
开发落地：
- 前端实现：通过 CSS 动画、JavaScript（如 React Native）还原动效；
- 动效规范文档：需标注元素属性变化（如按钮点击时缩放 1.1 倍，透明度 90%）。

超越 "使用" 的体验：UX 不仅关注 "能否完成任务"，更关注用户在过程中的情绪（如挫败感、愉悦感）、认知负荷（如信息理解成本）和心理满足（如成就感）。
案例对比：
- 差的 UX：银行 APP 注册流程需填写 10 余项信息，无进度提示，用户易放弃；
- 好的 UX：打车 APP 自动填充常用地址，通过步骤拆分（选起点→选终点→确认）降低心理压力。

双钻模型（Double Diamond）：
1. 发现（Discover）：用户调研（访谈、问卷）、场景分析（如外卖用户可能在通勤中使用 APP）；
2. 定义（Define）：提炼用户痛点（如 "找餐厅时间太长"）、建立用户画像（如 "25 岁白领，追求效率"）；
3. 开发（Develop）：绘制用户旅程地图（如从打开 APP 到完成支付的全流程触点）、低保真原型设计；
4. 交付（Deliver）：高保真原型测试、数据验证（如转化率提升 20%）。
可用性研究方法：
- ** heuristic evaluation**（启发式评估）：用 10 条尼尔森可用性原则检查界面（如 "系统状态可见性""防错原则"）；
- A/B 测试：对比两种设计方案（如按钮颜色为红色或绿色）的点击率差异。

心理学应用：
- 希克定律（Hick's Law）：选项越多，决策时间越长→简化菜单层级（如微信 "发现" 页仅保留核心功能）；
- 峰终定律（Peak-End Rule）：用户对体验的记忆由峰值和结束时刻决定→订单完成页显示 "奖励金" 提升好感。
行为经济学：
- 损失厌恶心理：显示 "剩余 3 件" 比 "库存充足" 更促使用户下单；
- 锚定效应：先展示原价再标折扣价，强化性价比感知。

传统模式：UX 设计师先出流程稿，UI 设计师后做视觉，易导致 "逻辑与视觉脱节"（如流程要求 "快速跳转"，但 UI 动效过慢）。
敏捷协作：
- 共同参与用户调研，确保视觉设计符合用户心理模型；
- 使用 Figma 等工具实时同步原型，UX 设计师标注 "交互逻辑"，UI 设计师标注 "视觉规范"。

常见矛盾：
- UI 追求视觉创新（如异形按钮），UX 担心操作辨识度；
- UX 要求简化流程（如减少页面跳转），UI 担心界面信息过载。
平衡策略：
- 用数据说话：通过用户测试验证设计（如异形按钮的误触率是否低于 5%）；
- 建立设计系统：制定 "视觉 - 交互" 统一规范（如按钮形状限于矩形 / 圆形，确保可点击区域≥44px×44px）。

UX 逻辑：
- 底部 Dock 栏固定核心功能（电话、相机），符合 "拇指热区" 原则（单手操作易触及）；
- 左滑返回手势贯穿全系统，降低用户学习成本。
UI 实现：
- 拟物化到扁平化的转型：iOS 7 前的 "皮革纹理" 通讯录→iOS 16 的极简卡片式设计；
- 动效一致性：文件夹打开 / 关闭的缩放动画与页面切换动效节奏统一。

无论是设计一款 APP 还是一台智能设备，唯有将 UI 的 "表面功夫" 与 UX 的 "底层逻辑" 深度融合，才能创造真正打动用户的产品体验。