03 · UI/UX 基础：布局、层级、交互与可用性
UI 是"长什么样"，UX 是"好不好用"。 开发者不一定要会画设计稿，但一定要有"判断好不好用"的眼光——这决定了你能不能还原设计、能不能发现问题、能不能提出有效建议。本篇给一套从布局到可用性的可操作框架。
速览卡
| 项 | 内容 |
|---|---|
| 一句话定位 | 给开发者一套 UI/UX 判断框架：布局、信息层级、交互反馈、可用性检查，让你能还原设计并发现设计问题 |
| 核心内容 | 布局原则、视觉层级、交互四要素、可用性原则、移动端要点、怎么提设计建议 |
| 读完能回答 | 一个界面怎么判断"好不好用"？布局为什么这样排？怎么和设计师高效沟通？ |
| 相关板块 | H04 · 设计稿还原 ｜ A14 · 组件 API 与设计系统 ｜ B11 · 组件与主题 |
一、布局：空间即语义
布局不是"把元素排开"，而是用位置表达关系：
| 布局手段 | 表达的语义 | 反例 |
|---|---|---|
| 相近分组 | 同一组元素放一起 | 所有按钮堆在一起不分组 |
| 留白 | 分离不同层级 | 到处一样密，找不到重点 |
| 对齐 | 建立秩序感 | 随意缩进，阅读混乱 |
| 栅格/间距 | 一致性 | 间距随心所欲（3px、7px、11px） |
前端转全栈的实战提醒：间距、圆角、字号这些值应该来自设计系统 token，而不是随手写的裸值。项目里对应 B11 组件与主题。
二、视觉层级：让眼睛知道先看哪
好的界面 3 秒内能看到"重点在哪"。三个手段：
| 手段 | 说明 |
|---|---|
| 大小 | 标题 > 正文 > 辅助信息 |
| 颜色/对比 | 主操作最突出，次要操作弱化 |
| 位置 | 重要内容放左上 / 顶部（眼动习惯） |
判断练习：把界面截图调成灰度，看重点是否依然清晰。靠颜色才"突出"的重点，在灰度下就没了。
三、交互四要素：反馈、状态、一致、可恢复
交互好不好用，看四个要素是否齐全：
| 要素 | 问题 | 缺失的后果 |
|---|---|---|
| 反馈 | 点了有没有反应？ | 用户以为没点到，狂点 |
| 状态 | 加载/空/错误态有没有？ | 白屏、静默失败 |
| 一致 | 同类操作是否一致？ | 每个页面重新学 |
| 可恢复 | 错了能不能撤销/返回？ | 用户不敢操作 |
开发者最容易忽略状态：只实现了"成功态"，空数据、加载中、失败、权限不足全没做。补齐状态，是最便宜的 UX 提升。
四、可用性原则：六条检查清单
给一个界面做"可用性体检"，用这六条：
- 能看懂：不用说明也知道这是什么
- 能预测：点了按钮能猜到会发生什么
- 有反馈：每个操作都有明确响应
- 防错：危险操作有确认/撤销
- 一致性：同类型元素行为一致
- 可访问：对比度、字号、触控区域达标（详见 H05）
六条里每一条，开发都能在还原时主动检查。把可用性检查写进验收标准，而不是等设计或测试发现。
五、移动端要点
移动端 UI/UX 比桌面多几件事：
| 要点 | 说明 |
|---|---|
| 触控目标 | 点击区域不小于 44px，避免误触 |
| 单手可达 | 高频操作放拇指热区 |
| 滚动与层级 | 底部导航、返回路径要清晰 |
| 动效适度 | 动效服务于反馈，不为炫技 |
| 横屏/旋转 | 图表横屏、键盘弹起等边界要处理 |
Flutter 项目具体实现看 B05 交互与动画 与 B40 图表与数据可视化。
六、怎么给设计提建议
提建议的目标是"帮设计做对"，不是"推翻设计"。三条纪律：
- 先复述设计意图："我理解这里是想强调 X"
- 给事实不给感受："这个按钮在弱网下点击无反馈"（事实）而非"这个按钮不好看"
- 提方案不只提问题："建议加加载态，类似 XX 页的做法"
你有"技术可行性"视角，设计师有"用户感受"视角。用事实 + 方案提建议，是开发与设计协作最好的方式。
自检清单
- [ ] 能用"相近分组/留白/对齐/栅格"解释一个界面的布局
- [ ] 能把界面调灰度检查视觉层级是否依然清晰
- [ ] 能给一个界面做六条可用性检查，并指出缺失项
- [ ] 能说清反馈/状态/一致/可恢复四要素，并补齐缺失的状态
- [ ] 提设计建议用"复述意图 + 事实 + 方案"
常见误区
| 误区 | 事实 |
|---|---|
| "UI 是设计师的事" | 还原与验收是开发的事，判断眼光要自己练 |
| "好看 = 好用" | 好看与好用是两个维度，可用性要单独检查 |
| "动效越多越高级" | 动效服务于反馈，过度动效反而拖慢操作 |
| "提建议 = 挑设计毛病" | 用事实 + 方案，是把设计做得更好的协作 |
动手练习
练习 A：给一个页面做体检
选一个你做的页面，用六条可用性清单逐条检查，写下每条的问题与改进建议。
练习 B：灰度测试
把某个页面截图调成灰度，检查重点是否依然清晰；不清晰的，找替代的层级手段（大小/位置）。
练习 C：补齐状态
检查手上功能的状态覆盖：加载中 / 空数据 / 失败 / 权限不足 / 无网络，缺哪个补哪个。
相关文档
本区
- 04 · 设计稿还原 —— 把判断落实成代码
- 05 · 可访问性 —— 可用性的硬性维度
其他域
- A14 · 组件 API 设计与设计系统 —— 前端设计系统落地
- B11 · 组件与主题 —— Flutter 组件与主题
- B40 · 图表与数据可视化 —— 移动端可视化